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. Web sayfalarınızda One Tap istemini veya Google ile Oturum Aç düğmesini görüntülemek için API'yi kullanabilirsiniz.

"g_id_onload" kimliğine sahip öğ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 çok öğeye koymayın.

Veri özellikleri

Aşağıdaki tabloda, veri özellikleri açıklamalarıyla birlikte listelenmiştir:

Özellik
data-client_id Uygulamanızın istemci kimliği
data-auto_prompt Google One'a dokunun.
data-auto_select Google One Tap'te otomatik seçimi etkinleştirir.
data-login_uri Giriş uç noktanızın URL'si
data-callback JavaScript kimliği jeton işleyici işlevinin adı
data-native_login_uri Şifre kimlik bilgisi işleyici uç noktanızın URL'si
data-native_callback JavaScript şifre kimlik bilgisi işleyici işlevinin adı
data-native_id_param credential.id değeri için parametre adı
data-native_password_param credential.password değeri için parametre adı
data-cancel_on_tap_outside Kullanıcı istemin dışını tıklarsa istemin iptal edilip edilmeyeceğini kontrol eder.
data-prompt_parent_id One Tap istem kapsayıcı öğesinin DOM kimliği
data-skip_prompt_cookie Belirtilen çerezin boş olmayan bir değeri varsa One Tap'i atlar.
data-nonce Kimlik jetonları için rastgele bir dize
data-context One Tap istemindeki başlık ve kelimeler
data-moment_callback İstem kullanıcı arayüzü durum bildirim dinleyicisinin işlev adı
data-state_cookie_domain Üst alan adında ve alt alan adlarında One Tap'i çağırmanız gerekiyorsa tek bir paylaşılan çerezin kullanılabilmesi için üst alanı bu özelliğe iletin.
data-ux_mode Google ile Oturum Açma düğmesi kullanıcı deneyimi akışı
data-allowed_parent_origin Ara iframe'i yerleştirmesine izin verilen kaynaklar. Bu özellik mevcutsa One Tap ara iframe modunda çalışır.
data-intermediate_iframe_close_callback Kullanıcılar One Tap'i manuel olarak kapattığında varsayılan ara iframe davranışını geçersiz kılar.
data-itp_support ITP tarayıcılarda yükseltilmiş One Tap kullanıcı deneyimini etkinleştirir.
data-login_hint Kullanıcı ipucu sağlayarak hesap seçimini atlayın.
data-hd Hesap seçimini alana göre sınırlandırı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ışını uyumlulaştırmasına izin verin.

Özellik türleri

Aşağıdaki bölümlerde her bir özelliğin türüyle ilgili ayrıntılar ve bir örnek bulunmaktadır.

veri-istemci_kimliği

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

Tür Gerekli Örnek
dize Evet data-client_id="CLIENT_ID.apps.googleusercontent.com"

data-auto_istem

Bu özellik, Tek vuruşun gösterilip gösterilmeyeceğini belirler. Varsayılan değer true'tir. Bu değer false olduğunda Google One Tap gösterilmez. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Gerekli Örnek
boolean İsteğe bağlı data-auto_prompt="true"

veri-otomatik_seçim

Uygulamanızı yalnızca bir Google oturumu onayladıysa bu özellik, kimlik jetonunun herhangi bir kullanıcı etkileşimi olmadan otomatik olarak döndürülüp döndürülmeyeceğini belirler. Varsayılan değer false şeklindedir. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Gerekli Örnek
boolean İsteğe bağlı data-auto_select="true"

data-login_uri

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

Değer, API Konsolu'nda yapılandırdığınız ve Yönlendirme URI'si doğrulama kurallarımıza uygun olan OAuth 2.0 istemcisi için yetkili yönlendirme URI'lerinden biriyle tam olarak eşleşmelidir.

Geçerli sayfa giriş sayfanızsa bu özellik atlanabilir. Bu durumda, kimlik bilgileri varsayılan olarak bu sayfaya gönderilir.

Kimlik jetonu kimlik bilgisi yanıtı, geri çağırma işlevi tanımlanmadığında ve kullanıcı Google ile Oturum Aç veya One Tap ile Oturum Aç düğmelerini tıkladığında ya da otomatik oturum açıldığında giriş uç noktanızda yayınlanır.

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

Tür İsteğe bağlı Örnek
URL Varsayılan olarak geçerli sayfanın URI'sına veya belirttiğiniz değer kullanılır.
data-ux_mode="popup" ve data-callback ayarlandığında yoksayılır.
data-login_uri="https://www.example.com/login"

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

Aşağıda, giriş uç noktanıza gönderilen örnek bir istek gösterilmektedir:

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded

credential=ID_TOKEN

veri geri çağırma

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:

Tür Gerekli Örnek
dize data-login_uri ayarlanmamışsa zorunludur. data-callback="handleToken"

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, Google ile Oturum Aç düğmesi redirect kullanıcı deneyimi modu için gereklidir. Bu mod, data-callback özelliğini yok sayar.

  • Bu iki özellikten biri Google One Tap ve Google ile Oturum Açma düğmesi popup kullanıcı deneyimi modu için ayarlanmalıdır. Her ikisi de ayarlanırsa data-callback özelliği daha yüksek bir önceliğe sahip olur.

Ad alanı içindeki JavaScript işlevleri, HTML API'sı tarafından desteklenmez. Bunun yerine, ad alanı olmayan genel bir JavaScript işlevini 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 veya data-native_callback özelliğini ayarlarsanız Google oturumu olmadığında JavaScript kitaplığı, yerel kimlik bilgisi yöneticisine geri döner. Hem data-native_callback hem de data-native_login_uri özelliklerini ayarlamanıza izin verilmez. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Gerekli Örnek
dize İsteğe bağlı data-login_uri="https://www.example.com/password_login"

veriler-yerel_geri_arama

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

Tür Gerekli Örnek
dize İsteğe bağlı data-native_callback="handlePasswordCredential"

Ad alanı içindeki JavaScript işlevleri, HTML API'sı tarafından desteklenmez. Bunun yerine, ad alanı olmayan genel bir JavaScript işlevini kullanın. Örneğin, mylib.callback yerine mylibCallback kullanın.

data-native_id_param

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

Tür Gerekli Örnek
URL İsteğe bağlı data-native_id_param="user_id"

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 şeklindedir. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Gerekli Örnek
URL İsteğe bağlı data-native_password_param="pwd"

data-cancel_on_tap_outside

Bu özellik, kullanıcı istemin dışında bir yeri tıklarsa One Tap isteğinin iptal edilip edilmeyeceğini belirler. true, varsayılan değerdir. Devre dışı bırakmak için değeri false olarak ayarlayın. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Gerekli Örnek
boolean İsteğe bağlı data-cancel_on_tap_outside="false"

data-prompt_parent_id

Bu özellik, kapsayıcı öğesinin DOM kimliğini ayarlar. Ayarlanmazsa pencerenin sağ üst köşesinde One Tap istemi görüntülenir. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Gerekli Örnek
dize İsteğe bağlı data-prompt_parent_id="parent_id"

Belirtilen çerezin değeri boş değilse bu özellik One Tap'i atlar. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Gerekli Örnek
dize İsteğe bağlı data-skip_prompt_cookie="SID"

tek seferlik veri

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

Tür Gerekli Örnek
dize İsteğe bağlı data-nonce="biaqbm70g23"

Nonce uzunluğu, ortamınız tarafından desteklenen maksimum JWT boyutu ve bağımsız tarayıcı ve sunucu HTTP boyutu kısıtlamalarıyla sınırlıdır.

veri bağlamı

Bu özellik, başlık metnini ve One Tap isteminde gösterilen mesajları değiştirir. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Gerekli Örnek
dize İsteğe bağlı data-context="use"

Aşağıdaki tabloda, mevcut bağlamlar ve bunların açıklamaları listelenmiştir:

Bağlam
signin "Google ile oturum aç"
signup "Google ile kaydolun"
use "Google ile kullan"

data-an_callback

Bu özellik, istem kullanıcı arayüzü durum bildirim işleyicisinin işlev adıdır. Daha fazla bilgi için PromptMomentNotification veri türüne bakın.

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

Tür Gerekli Örnek
dize İsteğe bağlı data-moment_callback="logMomentNotification"

Ad alanı içindeki JavaScript işlevleri, HTML API'sı tarafından desteklenmez. Bunun yerine, ad alanı olmayan genel bir JavaScript işlevini kullanın. Örneğin, mylib.callback yerine mylibCallback kullanın.

One Tap'i bir üst alanda ve bunun alt alan adlarında görüntülemeniz gerekiyorsa tek bir paylaşılan durum çerezinin kullanılabilmesi için üst alanı bu özelliğe iletin. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Gerekli Örnek
dize İsteğe bağlı data-state_cookie_domain="example.com"

data-ux_mode

Bu özellik, Google ile Oturum Aç düğmesi tarafından kullanılan kullanıcı deneyimi akışını ayarlar. popup, varsayılan değerdir. Bu özelliğin One Tap kullanıcı deneyimi üzerinde herhangi bir etkisi yoktur. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Gerekli Örnek
dize İsteğe bağlı data-ux_mode="redirect"

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

Kullanıcı Deneyimi Modu
popup Pop-up pencerede oturum açma kullanıcı deneyimi akışı gerçekleştirir.
redirect Tam sayfa yönlendirmesi ile oturum açma kullanıcı deneyimi akışını gerçekleştirir.

data-allowed_parent_origin

Ara iframe'i yerleştirmesine izin verilen kaynaklar. Bu özellik sunulursa One Tap, ara iframe modunda çalışır. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Gerekli Örnek
dize veya dize dizisi İsteğe bağlı data-allowed_parent_origin="https://example.com"

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

Değer Türleri
string Tek bir alan URI'si. "https://example.com"
string array Virgülle ayrılmış alan URI'larının listesi. "https://news.example.com,https://local.example.com"

data-allowed_parent_origin özelliğinin değeri geçersizse ara iframe modunun One Tap ile başlatılması başarısız olur ve durur.

Joker karakter ön ekleri de desteklenir. Örneğin, "https://*.example.com", example.com ve alt alan adlarıyla tüm düzeylerde eşleşir (ör.news.example.com, login.news.example.com). Joker karakter kullanırken göz önünde bulundurulması gerekenler:

  • Kalıp dizeleri yalnızca bir joker karakter ve üst düzey alandan oluşabilir. Örneğin https://*.com ve https://*.co.uk geçersizdir. Yukarıda belirtildiği gibi "https://*.example.com", example.com ve alt alan adlarıyla eşleşir. 2 farklı alanı temsil etmek için virgülle ayrılmış bir liste de kullanabilirsiniz. Örneğin "https://example1.com,https://*.example2.com"; example1.com, example2.com alanları ve example2.com alt alan adlarıyla eşleşir
  • Joker karakter alanları güvenli bir https:// şemasıyla başlamalıdır. Bu nedenle "*.example.com", geçersiz olarak kabul edilir.

data-intermediate_iframe_close_callback

Kullanıcılar One Tap kullanıcı arayüzündeki "X" düğmesine dokunarak One Tap'i 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. Ayrıca, One Tap iframe'in yerine yalnızca ara iframe'i etkiler. Geri arama başlatılmadan önce One Tap kullanıcı arayüzü kaldırılır.

Tür Gerekli Örnek
işlev İsteğe bağlı data-intermediate_iframe_close_callback="logBeforeClose"

Ad alanı içindeki JavaScript işlevleri, HTML API'sı tarafından desteklenmez. Bunun yerine, ad alanı olmayan genel bir JavaScript işlevini kullanın. Örneğin, mylib.callback yerine mylibCallback kullanın.

data-itp_destek

Bu alan, yeni sürüme geçirilmiş One Tap UX'in, Akıllı İzleme Önleme'yi (ITP) destekleyen tarayıcılarda etkinleştirilip etkinleştirilmeyeceğini belirler. Varsayılan değer: false. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Gerekli Örnek
boolean İsteğe bağlı data-itp_support="true"

data-login_hint

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

Daha fazla bilgi için login_hint ile ilgili OpenID Connect dokümanlarına göz atın.

Tür Gerekli Örnek
Dize. Bir e-posta adresi veya kimlik jetonundaki sub alanı değeri olabilir. İsteğe bağlı data-login_hint="elisa.beckett@gmail.com"

veri-hd

Kullanıcının birden fazla hesabı varsa ve yalnızca Workspace hesabıyla oturum açması gerekiyorsa bu özelliği Google'a alan adıyla ilgili ipucu vermek için kullanın. İşlem başarılı olduğunda, hesap seçimi sırasında görüntülenen kullanıcı hesapları verilen alanla sınırlıdır. Joker karakter değeri: *, kullanıcıya yalnızca Workspace hesapları sunar ve hesap seçimi sırasında tüketici hesaplarını (kullanici@gmail.com) hariç tutar.

Daha fazla bilgi için hd ile ilgili OpenID Connect dokümanlarına göz atın.

Tür Gerekli Örnek
Dize. Tam nitelikli bir alan adı veya *. İsteğe bağlı data-hd="*"

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ışını uyumlulaştırmasına izin verin. Varsayılan olarak "false" (yanlış) değerine ayarlanır. Daha fazla bilgi için FedCM'ye geçiş sayfasına bakın.

Tür Gerekli Örnek
boolean İsteğe bağlı data-use_fedcm_for_prompt="true"

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

Bir öğenin class özelliğine g_id_signin eklerseniz öğe, Google ile Oturum Aç düğmesi olarak oluşturulur.

Aynı sayfada birden fazla Google ile Oturum Aç düğmesi oluşturabilirsiniz. Her düğmenin kendi görsel ayarları olabilir. Ayarlar, aşağıdaki veri özellikleri tarafından tanımlanır.

Görsel Veri özellikleri

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

Özellik
data-type Düğme türü: simge veya standart düğme.
data-theme Düğme teması. Örneğin, doldurulmuş_mavi veya doldurulmuş_siyah.
data-size Düğme boyutu. Örneğin, küçük veya büyük.
data-text Düğme metni. Örneğin, "Google ile oturum aç" veya "Google ile kaydol".
data-shape Düğme şekli. Örneğin, dikdörtgen veya yuvarlak.
data-logo_alignment Google logosunun hizalanması: sola veya ortaya.
data-width Piksel cinsinden düğme genişliği.
data-locale Düğme metni, bu özellikte ayarlanan dilde oluşturulur.
data-click_listener Ayarlanırsa Google ile Oturum Aç düğmesi tıklandığında bu işlev çağrılır.

Özellik türleri

Aşağıdaki bölümlerde her bir özelliğin türüyle ilgili ayrıntılar ve bir örnek bulunmaktadır.

veri türü

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

Tür Gerekli Örnek
dize Evet data-type="icon"

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

Tür
standard
Metin veya kişiselleştirilmiş bilgiler içeren bir düğme.
icon
Metin içermeyen simge düğmesi.

veri-teması

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

Tür Gerekli Örnek
dize İsteğe bağlı data-theme="filled_blue"

Aşağıdaki tabloda mevcut temalar ve açıklamaları listelenmiştir:

Tema
outline
Beyaz arka planlı standart bir düğme Beyaz arka planlı bir simge düğmesi Beyaz arka planı olan kişiselleştirilmiş bir düğme
Standart düğme teması.
filled_blue
Mavi arka planlı standart bir düğme Arka planı mavi olan bir simge düğmesi Mavi arka planlı kişiselleştirilmiş düğme
Mavi dolgulu düğme teması.
filled_black
Siyah arka planlı standart bir düğme Siyah arka planlı simge düğmesi Siyah arka planlı kişiselleştirilmiş düğme
Siyah dolu düğme teması.

data-size

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

Tür Gerekli Örnek
dize İsteğe bağlı data-size="small"

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

Boyut
large
Büyük bir standart düğme Büyük bir simge düğmesi Büyük, kişiselleştirilmiş bir düğme
Büyük bir düğme.
medium
Orta boy standart düğme Orta boy simge düğmesi
Orta boyutlu bir düğme.
small
Küçük bir düğme Küçük bir simge düğmesi
Küçük bir düğme.

veri-metin

Düğme metni. signin_with, varsayılan değerdir. Farklı data-text özelliklerine sahip simge düğmelerinin metninde görsel bir fark 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:

Tür Gerekli Örnek
dize İsteğe bağlı data-text="signup_with"

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

Metin
signin_with
&quot;Google ile oturum aç&quot; etiketli standart bir düğme Görünür metni olmayan simge düğmesi
Düğme metni "Google ile oturum aç" şeklindedir.
signup_with
&quot;Google ile kaydolun&quot; etiketli standart bir düğme Görünür metni olmayan simge düğmesi
Düğme metni "Google ile kaydolun" şeklindedir.
continue_with
&quot;Google ile Devam Et&quot; etiketli standart bir düğme Görünür metni olmayan simge düğmesi
Düğme metni "Google ile devam et" şeklindedir.
signin
&#39;Oturum aç&#39; etiketli standart bir düğme Görünür metni olmayan simge düğmesi
Düğme metni "Oturum aç" şeklindedir.

veri şekli

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

Tür Gerekli Örnek
dize İsteğe bağlı data-shape="rectangular"

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

Şekil
rectangular
Dikdörtgen standart düğme Dikdörtgen simge düğmesi Dikdörtgen şeklinde kişiselleştirilmiş düğme
Dikdörtgen şeklindeki düğme. icon düğme türü için kullanılırsa square ile aynıdır.
pill
Hap şeklindeki standart düğme Hap şeklindeki simge düğmesi Hap şeklindeki kişiselleştirilmiş düğme
Hap şeklindeki düğme. icon düğme türü için kullanılıyorsa circle ile aynıdır.
circle
Dairesel standart düğme Dairesel simge düğmesi Dairesel kişiselleştirilmiş düğme
Daire şeklindeki düğme. standard düğme türü için kullanılıyorsa pill ile aynıdır.
square
Kare standart düğme Kare simge düğmesi Kişiselleştirilmiş kare düğmesi
Kare şeklindeki düğme. standard düğme türü için kullanılıyorsa rectangular ile aynıdır.

veri-logosu_hizalaması

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

Tür Gerekli Örnek
dize İsteğe bağlı data-logo_alignment="center"

Aşağıdaki tabloda mevcut hizalamalar ve açıklamaları listelenmiştir:

logo_alignment
left
Solda G logolu standart bir düğme
Google logosunu sola hizalar.
center
Ortasında G logosu olan standart bir düğme
Google logosunu ortaya hizalar.

veri genişliği

Piksel cinsinden minimum düğme genişliği. Kullanılabilir maksimum genişlik 400 pikseldir.

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

Tür Gerekli Örnek
dize İsteğe bağlı data-width=400

veri-yerel ayar

İsteğe bağlı. Düğme metnini belirtilen yerel ayarı kullanarak görüntüleyin. Aksi takdirde varsayılan olarak kullanıcının Google Hesabı veya tarayıcı ayarları kullanılır. Kitaplığı yüklerken src yönergesine hl parametresini ve dil kodunu 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, muhtemelen farklı boyutlarda görebilir.

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

Tür Gerekli Örnek
dize İsteğe bağlı data-locale="zh_CN"

click_listener

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

  google.accounts.id.renderButton(document.getElementById("signinDiv"), {
      theme: 'outline',
      size: 'large',
      click_listener: onClickHandler
    });

  
  function onClickHandler(){
    console.log("Sign in with Google button clicked...")
  }
  

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

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 göre, kullanıcıyı oturum açabilir ve bir kayıt sayfasına veya daha fazla bilgi edinmesi için bir hesap bağlantı sayfasına yönlendirebilirsiniz.

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

Biçim Ad Açıklama
Çerez g_csrf_token İşleyici uç noktasına yapılan her istekte değişen rastgele bir dize.
İstek parametresi g_csrf_token Önceki çerez değeri olan g_csrf_token. ile aynı olan bir dize
İstek parametresi credential Google'ın verdiği kimlik jetonu.
İstek parametresi select_by Kimlik bilgisinin nasıl seçildiği.

giriş bilgisi

Kodu çözüldüğünde kimlik jetonu aşağıdaki örnekte olduğu 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": "elisa.g.beckett@gmail.com", // 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ı için genel olarak benzersiz bir tanımlayıcıdır. Kullanıcı tanımlayıcısı olarak yalnızca sub alanını kullanın. Bu alan, tüm Google Hesaplarında benzersizdir ve hiçbir zaman tekrar kullanılamaz. Bir Google Hesabı'nın farklı zamanlarda birden fazla e-posta adresi olabileceğinden tanımlayıcı olarak e-posta adresini kullanmayın.

email, email_verified ve hd alanlarını kullanarak Google'ın bir e-posta adresini barındırıp barındırmadığını ve yetkili olup olmadığını belirleyebilirsiniz. Google'ın yetkili olduğu durumlarda, kullanıcının meşru hesap sahibi olduğu onaylanır.

Google'ın yetkili olduğu durumlar:

  • email, @gmail.com son ekine sahip. Bu bir Gmail hesabı.
  • email_verified doğru ve hd ayarlandı. Bu bir Google Workspace hesabı.

Kullanıcılar Gmail veya Google Workspace kullanmadan Google Hesaplarına kaydolabilir. email, @gmail.com son eki içermediğinde ve hd yoksa Google yetkili değilse kullanıcıyı doğrulamak için şifre veya başka sorgulama yöntemleri önerilir. Google, kullanıcıyı Google Hesabı oluşturulurken ilk kez doğruladığı için email_verified doğru olabilir ancak üçüncü taraf e-posta hesabının sahipliği o zamandan beri değişmiş olabilir.

exp alanı, sunucu tarafınızdaki jetonu doğrulamanız için son kullanma süresini gösterir. Google ile Oturum Açma'dan alınan kimlik jetonu için bu süre bir saattir. Geçerlilik süresi sona ermeden önce jetonu doğrulamanız gerekir. Oturum yönetimi için exp kullanmayın. Süresi dolmuş bir kimlik jetonu kullanıcının oturumunun kapatıldığı anlamına gelmez. Uygulamanız, kullanıcılarınızın oturumlarını yönetmekten sorumludur.

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 dokunmadan otomatik oturum açma işlemini kullandı.

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

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

    • kimlik bilgilerini paylaşma izni vermek için Onayla düğmesine bastıktan sonra veya
    • Kullanıcı, daha önce izin vermiş ve bir Google Hesabı seçmek için Hesap Seç özelliğini kullanmışsa.

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

Değer Açıklama
auto Daha önce kimlik bilgilerinin paylaşılmasına izin vermiş bir kullanıcının mevcut oturumuyla otomatik olarak oturum açması.
user Mevcut oturumunda daha önce izin vermiş bir kullanıcı, kimlik bilgilerini paylaşmak için One Tap "Farklı devam et" düğmesine bastı.
user_1tap Mevcut oturumu olan bir kullanıcı, izin vermek ve kimlik bilgilerini paylaşmak için One Tap "Farklı devam et" düğmesine bastı. Yalnızca Chrome v75 ve sonraki sürümleri için geçerlidir.
user_2tap Mevcut oturumu olmayan bir kullanıcı, hesap seçmek için One Tap "Farklı devam et" düğmesine, ardından izin vermek ve kimlik bilgilerini paylaşmak için pop-up penceredeki Onayla düğmesine bastı. Chromium tabanlı olmayan tarayıcılar için geçerlidir.
btn Daha önce izin vermiş, mevcut oturumu olan bir kullanıcı Google ile Oturum Aç düğmesine bastı ve kimlik bilgilerini paylaşmak için "Hesap Seçin"den bir Google Hesabı seçti.
btn_confirm Mevcut oturumu olan bir kullanıcı, izin vermek ve kimlik bilgilerini paylaşmak için Google ile Oturum Aç düğmesine, ardından Onayla düğmesine bastı.
btn_add_session Mevcut oturumu olmayan ve daha önce izin veren bir kullanıcı, bir Google Hesabı seçmek ve kimlik bilgilerini paylaşmak için Google ile Oturum Aç düğmesine bastı.
btn_confirm_add_session Mevcut oturumu olmayan bir kullanıcı, önce Google Hesabı seçmek için Google ile Oturum Aç düğmesine, ardından izin vermek ve kimlik bilgilerini paylaşmak için Onayla düğmesine bastı.

Şifre kimlik bilgisi işleyici uç noktası

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

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

Biçim Ad Açıklama
Çerez g_csrf_token İşleyici uç noktasına yapılan her istekte değişen rastgele bir dize.
İstek parametresi g_csrf_token Önceki çerez değeri olan g_csrf_token ile aynı olan bir dize.
İstek parametresi email Google'ın verdiği bu kimlik jetonu.
İstek parametresi password Kimlik bilgisinin nasıl seçildiği.