Google HTML API'si ile Oturum Açma referansı

Bu referans sayfasında, Google ile Oturum Açma HTML veri özellikleri API'si açıklanmaktadır. API'yi, web sayfalarınızda tek dokunma istemini veya Google ile oturum açma düğmesini göstermek için kullanabilirsiniz.

"g_id_onload" kimlikli öğe

Google ile oturum açma veri özelliklerini <div> ve <span> gibi görünür veya görünmez öğelere yerleştirebilirsiniz. Tek şart, öğe kimliğinin g_id_onload olarak ayarlanmasıdır. Bu kimliği birden fazla öğeye yerleştirmeyin.

Veri özellikleri

Aşağıdaki tabloda, veri özelliklerinin açıklamalarıyla birlikte listesi verilmiştir:

Özellik türleri

Aşağıdaki bölümlerde her özelliğin türü ve bir örnek hakkında ayrıntılı bilgi verilmektedir.

data-client_id

Bu özellik, Google Cloud Console'da bulunan ve oluşturulan uygulamanızın istemci kimliğidir. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-auto_prompt

Bu özellik, tek dokunuşla ödeme seçeneğinin gösterilip gösterilmeyeceğini belirler. Varsayılan değer true'dır. Bu değer false olduğunda Google One dokunma işlemi gösterilmez. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-auto_select

Bu özellik, yalnızca bir Google oturumu uygulamanızı onaylamışsa kullanıcı etkileşimi olmadan otomatik olarak kimlik jetonu döndürülüp döndürülmeyeceğini belirler. Varsayılan değer false'dır. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-login_uri

Bu özellik, giriş uç noktanızın URI'sidir.

Değer, Google Kimlik Doğrulama Platformu'nda yapılandırdığınız OAuth 2.0 istemcisinin yetkili yönlendirme URI'lerinden biriyle tam olarak eşleşmeli ve Yönlendirme URI'si doğrulama kurallarımıza uygun olmalıdır.

Mevcut sayfa giriş sayfanızsa bu özellik atlanabilir. Bu durumda kimlik bilgisi varsayılan olarak bu sayfaya gönderilir.

Geri çağırma işlevi tanımlanmadığında ve kullanıcı Google ile oturum açma veya One Tap düğmelerini tıkladığında ya da otomatik oturum açma gerçekleştiğinde kimlik jetonu kimlik bilgisi yanıtı, oturum açma uç noktanıza gönderilir.

Giriş uç noktanız, gövdesinde kimlik jetonu değeri olan bir credential parametresi içeren POST isteklerini işlemelidir.

Daha fazla bilgi için aşağıdaki tabloya bakın:

data-callback

Bu özellik, döndürülen kimlik jetonunu işleyen JavaScript işlevinin adıdır. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-login_uri ve data-callback özelliklerinden biri kullanılabilir. Aşağıdaki bileşen ve kullanıcı deneyimi modu yapılandırmalarına bağlıdır:

• data-login_uri özelliği, data-callback özelliğini yok sayan Google ile oturum aç düğmesi redirect kullanıcı deneyimi modu için gereklidir.

• Google One Tap ve Google ile oturum açma düğmesi popup kullanıcı deneyimi modu için bu iki özellikten biri ayarlanmalıdır. Her ikisi de ayarlanırsa data-callback özelliği daha öncelikli olur.

Bir ad alanındaki JavaScript işlevleri, HTML API'si tarafından desteklenmez. Bunun yerine, ad alanı içermeyen genel bir JavaScript işlevi kullanın. Örneğin, mylib.callback yerine mylibCallback kullanın.

data-native_login_uri

Bu özellik, şifre kimlik bilgisi işleyici uç noktanızın URL'sidir. data-native_login_uri özelliğini veya data-native_callback özelliğini ayarlarsanız JavaScript kitaplığı, Google oturumu olmadığında yerleşik kimlik bilgisi yöneticisine geri döner. Hem data-native_callback hem de data-native_login_uri özelliklerini ayarlayamazsınız. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-native_callback

Bu özellik, tarayıcının yerleşik kimlik bilgisi yöneticisinden döndürülen şifre kimlik bilgisini işleyen JavaScript işlevinin adıdır. data-native_login_uri özelliğini veya data-native_callback özelliğini ayarlarsanız JavaScript kitaplığı, Google oturumu olmadığında yerleşik kimlik bilgisi yöneticisine geri döner. Hem data-native_callback hem de data-native_login_uri değerini ayarlayamazsınız. Daha fazla bilgi için aşağıdaki tabloya bakın:

Bir ad alanındaki JavaScript işlevleri, HTML API'si tarafından desteklenmez. Bunun yerine, ad alanı içermeyen genel bir JavaScript işlevi kullanın. Örneğin, mylib.callback yerine mylibCallback kullanın.

data-native_id_param

Şifre kimliğini, şifre kimliği işleyici uç noktasına gönderdiğinizde credential.id alanı için parametre adını belirtebilirsiniz. Varsayılan ad email'dır. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-native_password_param

Şifre kimlik bilgisini, şifre kimlik bilgisi işleyici uç noktasına gönderdiğinizde credential.password değeri için parametre adını belirtebilirsiniz. Varsayılan ad password'dır. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-cancel_on_tap_outside

Bu özellik, kullanıcı istemin dışını tıkladığında tek dokunma isteğinin iptal edilip edilmeyeceğini ayarlar. Varsayılan değer: true. Bu özelliği devre dışı bırakmak için değeri false olarak ayarlayın. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-prompt_parent_id

Bu özellik, kapsayıcı öğenin DOM kimliğini ayarlar. Ayarlanmamışsa Tek Dokunma istemi pencerenin sağ üst köşesinde gösterilir. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-skip_prompt_cookie

Tek dokunma isteminin gösterilmesini kontrol etmek için çerez kullanır. Bu özellikle belirtilen çerez boş olmayan bir değere sahipse istem görüntülenmez. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-nonce

Bu özellik, kimlik jetonu tarafından tekrar oynatma saldırılarını önlemek için kullanılan rastgele bir dizedir. Daha fazla bilgi için aşağıdaki tabloya bakın:

Nonce uzunluğu, ortamınızın desteklediği maksimum JWT boyutu ile tarayıcı ve sunucu HTTP boyut kısıtlamalarıyla sınırlıdır.

data-context

Bu alan, tek dokunma isteminde gösterilen başlığın ve mesajların metnini değiştirir. ITP tarayıcılar için geçerli değildir. Varsayılan olarak signin değerine ayarlanır.

Daha fazla bilgi için aşağıdaki tabloya bakın:

Aşağıdaki tabloda, mevcut tüm bağlamlar ve açıklamaları listelenmiştir:

data-moment_callback

Bu özellik, istem kullanıcı arayüzü durum bildirimi işleyicisinin işlev adıdır. Daha fazla bilgi için veri türü PromptMomentNotification başlıklı makaleyi inceleyin.

Daha fazla bilgi için aşağıdaki tabloya bakın:

Bir ad alanındaki JavaScript işlevleri, HTML API'si tarafından desteklenmez. Bunun yerine, ad alanı içermeyen genel bir JavaScript işlevi kullanın. Örneğin, mylib.callback yerine mylibCallback kullanın.

data-state_cookie_domain

Tek Tık'ı bir üst alan adında ve alt alan adlarında göstermeniz gerekiyorsa tek bir paylaşılan durum çerezi kullanılabilmesi için üst alan adını bu özelliğe iletin. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-ux_mode

Bu özellik, Google ile oturum açma düğmesi tarafından kullanılan kullanıcı deneyimi akışını ayarlar. Varsayılan değer popup'dır. Bu özelliğin tek dokunuşla ödeme kullanıcı deneyimi üzerinde etkisi yoktur. Daha fazla bilgi için aşağıdaki tabloya bakın:

Aşağıdaki tabloda, kullanılabilen kullanıcı deneyimi modları ve açıklamaları listelenmiştir.

data-allowed_parent_origin

Ara iframe'in yerleştirilmesine izin verilen kaynaklar. Bu özellik mevcutsa Tek Dokunma, ara iframe modunda çalışır. Daha fazla bilgi için aşağıdaki tabloya bakın:

Aşağıdaki tabloda desteklenen değer türleri ve açıklamaları listelenmiştir.

data-allowed_parent_origin özelliğinin değeri geçersizse ara iFrame modunun tek dokunuşla başlatılması başarısız olur ve durur.

Joker karakter önekleri de desteklenir. Örneğin, "https://*.example.com" example.com ile tüm düzeylerdeki alt alan adları (ör.news.example.com, login.news.example.com) eşleşir. Joker karakterleri kullanırken dikkat etmeniz gerekenler:

• Desen dizeleri yalnızca bir joker karakter ve üst düzey alan adından oluşamaz. Örneğin, https://.com ve https://.co.uk geçersizdir. Çünkü "https://.example.com", example.com ile ve tüm alt alanlarıyla eşleşir. İki farklı alanı temsil etmek için virgülle ayrılmış bir liste kullanın. Örneğin, "https://example1.com,https://.example2.com", example1.com ve example2.com alanlarıyla example2.com alt alanlarıyla eşleşir.
• Joker karakterli alan adları güvenli bir https:// şemasıyla başlamalıdır. Bu nedenle, "*.example.com" geçersiz kabul edilir.

data-intermediate_iframe_close_callback

Kullanıcılar, Tek Dokunma kullanıcı arayüzündeki "X" düğmesine dokunarak Tek Dokunma'yı manuel olarak kapattığında varsayılan ara iFrame davranışını geçersiz kılar. Varsayılan davranış, ara iframe'i DOM'dan hemen kaldırmaktır.

data-intermediate_iframe_close_callback alanı yalnızca ara iFrame modunda geçerli olur. Bu durum, Tek Dokunma iframe'i yerine yalnızca ara iframe'i etkiler. Geri çağırma işlemi başlatılmadan önce One Tap kullanıcı arayüzü kaldırılır.

Bir ad alanındaki JavaScript işlevleri, HTML API'si tarafından desteklenmez. Bunun yerine, ad alanı içermeyen genel bir JavaScript işlevi kullanın. Örneğin, mylib.callback yerine mylibCallback kullanın.

data-itp_support

Bu alan, Akıllı Takip Önleme'yi (ITP) destekleyen tarayıcılarda yükseltilmiş tek dokunma kullanıcı deneyiminin etkinleştirilip etkinleştirilmeyeceğini belirler. Varsayılan değer false'dır. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-login_hint

Uygulamanız hangi kullanıcının oturum açması gerektiğini önceden biliyorsa Google'a giriş ipucu sağlayabilir. Başarılı olduğunda hesap seçimi atlanır. Kabul edilen değerler: e-posta adresi veya kimlik jetonu sub alanı.

Daha fazla bilgi için login_hint ile ilgili OpenID Connect belgelerine bakın.

data-hd

Birden fazla hesabı olan ve yalnızca Workspace hesabıyla oturum açması gereken kullanıcılar için Google'a alan adı ipucu vermek üzere bu özelliği kullanın. İşlem başarılı olduğunda, hesap seçimi sırasında gösterilen kullanıcı hesapları sağlanan alanla sınırlanır. Joker karakter değeri: *, kullanıcıya yalnızca Workspace hesaplarını sunar ve hesap seçimi sırasında tüketici hesaplarını ([email protected]) hariç tutar.

Daha fazla bilgi için hd ile ilgili OpenID Connect belgelerine bakın.

data-use_fedcm_for_prompt

Tarayıcının, kullanıcı oturum açma istemlerini kontrol etmesine ve web siteniz ile Google arasındaki oturum açma akışına aracılık etmesine izin verin. Varsayılan olarak false değerine ayarlanır. Daha fazla bilgi için FedCM'ye geçiş sayfasına bakın.

data-use_fedcm_for_button

Bu alan, Chrome'da (masaüstü M125+ ve Android M128+) FedCM düğmesi kullanıcı deneyiminin kullanılıp kullanılmayacağını belirler. Varsayılan olarak false'dır. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-button_auto_select

Bu alan, FedCM düğme akışı için otomatik seç seçeneğinin etkinleştirilip etkinleştirilmeyeceğini belirler. Etkinleştirilirse etkin bir Google oturumu olan geri gelen kullanıcıların oturumu, Hesap Seçici istemi atlanarak otomatik olarak açılır. Varsayılan olarak false'dır. Etkinleştirme lansmanı sırasında düğme ile otomatik oturum açma özelliğini açıkça etkinleştirmeniz gerekir. Daha fazla bilgi için aşağıdaki tabloya bakın:

"g_id_signin" sınıfına sahip öğe

Bir öğenin class özelliğine g_id_signin eklediğinizde öğe, Google ile oturum açma düğmesi olarak oluşturulur.

Aynı sayfada birden fazla Google ile oturum açma düğmesi oluşturabilirsiniz. Her düğmenin kendi görsel ayarları olabilir. Ayarlar aşağıdaki veri özellikleriyle tanımlanır.

Görsel veriler özellikleri

Aşağıdaki tabloda görsel veri özellikleri ve açıklamaları listelenmektedir:

Özellik türleri

Aşağıdaki bölümlerde her özelliğin türü ve bir örnek hakkında ayrıntılı bilgi verilmektedir.

data-type

Düğme türü. Varsayılan değer: standard. Daha fazla bilgi için aşağıdaki tabloya bakın:

Aşağıdaki tabloda, kullanılabilen tüm düğme türleri ve açıklamaları listelenmiştir:

Tür
standard
icon

data-theme

Düğme teması. Varsayılan değer: outline. Daha fazla bilgi için aşağıdaki tabloya bakın:

Aşağıdaki tabloda, kullanılabilir temalar ve açıklamaları listelenmiştir:

Tema
outline
filled_blue
filled_black

data-size

Düğme boyutu. Varsayılan değer: large. Daha fazla bilgi için aşağıdaki tabloya bakın:

Aşağıdaki tabloda, kullanılabilen düğme boyutları ve açıklamaları listelenmiştir.

Boyut
large
medium
small

data-text

Düğme metni. Varsayılan değer: signin_with. Farklı data-text özelliklerine sahip simge düğmelerinin metninde görsel farklılıklar yoktur. Bunun tek istisnası, metnin ekran erişilebilirliği için okunmasıdır.

Daha fazla bilgi için aşağıdaki tabloya bakın:

Aşağıdaki tabloda, kullanılabilen düğme metinleri ve açıklamaları listelenmiştir:

Metin
signin_with
signup_with
continue_with
signin

data-shape

Düğme şekli. Varsayılan değer: rectangular. Daha fazla bilgi için aşağıdaki tabloya bakın:

Aşağıdaki tabloda, kullanılabilen düğme şekilleri ve açıklamaları listelenmiştir:

Şekil
rectangular
pill
circle
square

data-logo_alignment

Google logosunun hizalaması. Varsayılan değer: left. Bu özellik yalnızca standard düğme türü için geçerlidir. Daha fazla bilgi için aşağıdaki tabloya bakın:

Aşağıdaki tabloda, kullanılabilen hizalamalar ve açıklamaları listelenmiştir:

logo_alignment
left
center

data-width

Piksel cinsinden minimum düğme genişliği. Maksimum genişlik 400 pikseldir.

Daha fazla bilgi için aşağıdaki tabloya bakın:

data-locale

İsteğe bağlıdır. Düğme metnini belirtilen yerel ayarı kullanarak gösterin. Aksi takdirde, kullanıcıların Google Hesabı veya tarayıcı ayarları varsayılan olarak kullanılır. Kitaplığı yüklerken hl parametresini ve dil kodunu src yönergesine ekleyin. Örneğin: gsi/client?hl=<iso-639-code>.

Ayarlanmazsa tarayıcının varsayılan yerel ayarı veya Google oturumu kullanıcısının tercihi kullanılır. Bu nedenle, farklı kullanıcılar yerelleştirilmiş düğmelerin farklı sürümlerini ve muhtemelen farklı boyutlarını görebilir.

Daha fazla bilgi için aşağıdaki tabloya bakın:

data-click_listener

data-click_listener özelliğini kullanarak Google ile oturum açma düğmesi tıklandığında çağrılacak bir JavaScript işlevi tanımlayabilirsiniz.

  <script>
    function onClickHandler(){
      console.log("Sign in with Google button clicked...")
    }
  </script>
  .....
  <div class="g_id_signin"
      data-size="large"
      data-theme="outline"
      data-click_listener="onClickHandler">
  </div>

Bu örnekte, Google ile oturum açma düğmesi tıklandığında Google ile oturum açma düğmesi tıklandı... mesajı konsola kaydedilir.

data-state

Aynı sayfada birden fazla Google ile oturum açma düğmesi oluşturulabileceğinden isteğe bağlı olarak her düğmeye benzersiz bir dize atayabilirsiniz. Aynı dize, kimlik jetonuyla birlikte döndürülür. Böylece kullanıcının oturum açmak için hangi düğmeyi tıkladığını belirleyebilirsiniz.

Daha fazla bilgi için aşağıdaki tabloya bakın:

Sunucu tarafı entegrasyonu

Sunucu tarafı uç noktalarınız aşağıdaki HTTP POST isteklerini işlemelidir.

Kimlik jetonu işleyici uç noktası

Kimlik jetonu işleyici uç noktası, kimlik jetonunu işler. İlgili hesabın durumuna bağlı olarak, kullanıcıyı oturum açmaya yönlendirebilir ve kullanıcıyı kayıt sayfasına veya ek bilgiler için hesap bağlama sayfasına yönlendirebilirsiniz.

Giriş uç noktanıza yönelik bir istek örneği:

POST /login HTTP/1.1
Content-Type: application/x-www-form-urlencoded
Cookie: g_csrf_token=<RANDOM_STRING>
Host: www.example.com

credential=<JWT_ENCODED_ID_TOKEN>&g_csrf_token=<RANDOM_STRING>

HTTP POST isteği aşağıdaki bilgileri içerir:

yeterlilik belgesi

Kimlik jetonu kod çözüldüğünde aşağıdaki örnek gibi görünür:

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's GSuite email address
  "email": "[email protected]", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "Eliza",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion's creation time
  "exp": 1596477600, // Unix timestamp of the assertion's expiration time
  "jti": "abc161803398874def"
}

sub alanı, Google Hesabı'nın genel olarak benzersiz tanımlayıcısıdır. sub alanı, tüm Google Hesapları arasında benzersiz olduğu ve asla yeniden kullanılmadığı için kullanıcı tanımlayıcısı olarak yalnızca bu alanı kullanın.

email, email_verified ve hd alanlarını kullanarak Google'ın bir e-posta adresini barındırıp barındırmadığını ve bu adres için yetkili olup olmadığını belirleyebilirsiniz. Google'ın yetkili olduğu durumlarda kullanıcının hesabın yasal sahibi olduğu onaylanır.

Google'ın yetkili olduğu durumlar:

• email uzantısı @gmail.com ise bu bir Gmail hesabıdır.
• email_verified doğruysa ve hd ayarlanmışsa bu, Google Workspace hesabıdır.

Kullanıcılar, Gmail veya Google Workspace kullanmadan Google Hesabı'na kaydolabilir. email, @gmail.com sonekini içermediğinde ve hd yoksa Google yetkili değildir ve kullanıcının doğrulanması için şifre veya diğer sorgu yöntemleri önerilir. Google, Google Hesabı oluşturulurken kullanıcıyı ilk başta doğruladığı için email_verified da doğru olabilir. Ancak üçüncü taraf e-posta hesabının sahipliği o zamandan beri değişmiş olabilir.

exp alanı, sunucu tarafında jetonu doğrulamanız için geçerlilik bitiş zamanını gösterir. Google ile oturum açma işleminden alınan kimlik jetonu için bu süre bir saattir. Son kullanma süresi dolmadan önce jetonu doğrulamanız gerekir. Oturum yönetimi için exp kullanmayın. Geçerliliği dolmuş bir kimlik jetonu, kullanıcının oturumunun kapatıldığı anlamına gelmez. Uygulamanız, kullanıcılarınızın oturum yönetiminden sorumludur.

g_csrf_token

Sahteciliğe karşı durum jetonu. Bu, gsi/client kitaplığı tarafından oluşturulan bir siteler arası istek sahtekarlığı (CSRF) jetonudur. Rastgele bir değer, hem POST yükü gövdesinde Çerez olarak hem de İstek Parametresi olarak bulunur. Sunucunuzda istek işlenirken bu iki değer eşleşmezse istek geçersiz kabul edilmelidir.

select_by

Aşağıdaki tabloda select_by alanı için olası değerler listelenmiştir. Oturum ve izin durumuyla birlikte kullanılan düğme türü, değeri ayarlamak için kullanılır.

• Kullanıcı, One Tap veya Google ile oturum aç düğmesine bastı ya da temassız otomatik oturum açma sürecini kullandı.

• Mevcut bir oturum bulundu veya kullanıcı yeni bir oturum oluşturmak için bir Google Hesabı seçip bu hesapta oturum açtı.

• Kullanıcı, kimlik jetonu kimlik bilgilerini uygulamanızla paylaşmadan önce

  • Kimlik bilgilerini paylaşma izni vermek için Onayla düğmesine bastıysa veya
  • Daha önce izin vermiş ve Google Hesabı seçmek için Hesap Seç'i kullanmışsa.

Bu alanın değeri şu türlerden birine ayarlanır:

durum

Bu parametre yalnızca kullanıcı oturum açmak için Google ile oturum aç düğmesini tıkladığında ve tıklanan düğmenin data-state özelliği belirtildiğinde tanımlanır. Bu alanın değeri, düğmenin data-state özelliğinde belirttiğiniz değerle aynıdır.

Aynı sayfada birden fazla Google ile oturum açma düğmesi oluşturulabileceğinden her düğmeye benzersiz bir dize atayabilirsiniz. Bu nedenle, kullanıcının oturum açmak için hangi düğmeyi tıkladığını belirlemek üzere bu state parametreyi kullanabilirsiniz.

Şifre kimlik bilgisi işleyici uç noktası

Şifre kimlik bilgisi işleyici uç noktası, yerleşik kimlik bilgisi yöneticisinin aldığı şifre kimlik bilgilerini işler.

HTTP POST isteği aşağıdaki bilgileri içerir: