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 Tek Dokunuş istemi veya Google ile oturum aç düğmesini görüntülemek için API'yi 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 koymayın.

Veri özellikleri

Aşağıdaki tabloda veri özellikleri açıklamalarıyla birlikte listelenmektedir:

Ö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 kimlik jetonu işleyici işlevi 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şlevi adı
data-native_id_param credential.id değerinin parametre adı
data-native_password_param credential.password değerinin parametre adı
data-cancel_on_tap_outside Kullanıcı istemin dışında bir yeri tıkladığında isteminin iptal edilip edilmeyeceğini kontrol eder.
data-prompt_parent_id Tek Dokunuş istemi kapsayıcı öğesinin DOM kimliği
data-skip_prompt_cookie Belirtilen çereğin değeri boş değilse Tek Dokunuş'u 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 bildirimi dinleyicisinin işlev adı
data-state_cookie_domain Ana alanda ve alt alan adlarında One Tap'i çağırmanız gerekiyorsa tek bir paylaşılan çerezin kullanılması için ana 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'in yerleştirilmesine izin verilen kaynaklar. Bu özellik varsa Tek Dokunuş, 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ılarında yükseltilmiş Tek Tıklama kullanıcı deneyimini etkinleştirir.
data-login_hint Kullanıcı ipucu sağlayarak hesap seçimini atlama.
data-hd Hesap seçimini alana göre sınırlayı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ı yönetmesine izin verin.
data-enable_redirect_uri_validation Yönlendirme URI'si doğrulama kurallarına uygun düğme yönlendirme akışını etkinleştirin.

Özellik türleri

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

data-client_id

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

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

data-auto_prompt

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

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

data-auto_select

Bu özellik, uygulamanızı yalnızca bir Google oturumu onayladıysa 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'tür. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Zorunlu Ö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 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.

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

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

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'si veya belirttiğiniz değerdir.
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 verilmiştir:

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

credential=ID_TOKEN

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:

Tür Zorunlu Örnek
dize data-login_uri ayarlanmamışsa gereklidir. 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çma düğmesi redirect kullanıcı deneyimi modu için gereklidir. Bu modda data-callback özelliği yoksayılır.

  • 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 ayarlanmışsa data-callback özelliği daha önceliklidir.

Bir ad alanındaki JavaScript işlevleri HTML API tarafından desteklenmez. Bunun yerine, ad alanı içermeyen bir genel 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 veya data-native_callback özelliğini ayarlarsanız JavaScript kitaplığı, Google oturumu olmadığında 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 Zorunlu Örnek
dize İsteğe bağlı data-login_uri="https://www.example.com/password_login"

data-native_callback

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

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

Bir ad alanındaki JavaScript işlevleri HTML API tarafından desteklenmez. Bunun yerine, ad alanı içermeyen bir genel 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önderirken credential.id alanının parametre adını belirtebilirsiniz. Varsayılan ad email. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Zorunlu Ö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önderirken credential.password değerinin parametre adını belirtebilirsiniz. Varsayılan ad password'tir. Daha fazla bilgi için aşağıdaki tabloya bakın:

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

data-cancel_on_tap_outside

Bu özellik, kullanıcı istem dışında bir yeri tıkladığında One Tap isteğinin iptal edilip edilmeyeceğini belirler. 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:

Tür Zorunlu Ö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. Bu ayar yapılmadıysa pencerenin sağ üst köşesinde Tek Dokunma istemi gösterilir. Daha fazla bilgi için aşağıdaki tabloya bakın:

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

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

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

data-nonce

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

Tür Zorunlu Ö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.

data-context

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

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

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

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

data-moment_callback

Bu özellik, istem kullanıcı arayüzü durum bildirimi dinleyicisinin 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 Zorunlu Örnek
dize İsteğe bağlı data-moment_callback="logMomentNotification"

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

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

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

data-ux_mode

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

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

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

Kullanıcı deneyimi modu
popup Oturum açma kullanıcı deneyimi akışını pop-up pencerede gerçekleştirir.
redirect Tam sayfa yönlendirmeyle oturum açma kullanıcı deneyimi akışını gerçekleştirir.

data-allowed_parent_origin

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

Tür Zorunlu Ö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 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'lerinin listesi. "https://news.example.com,https://local.example.com"

data-allowed_parent_origin özelliğinin değeri geçersizse ara iframe modunun Tek Dokunuşla başlatma işlemi başarısız olur ve durur.

Joker karakter ön ekleri de desteklenir. Örneğin, "https://*.example.com", example.com ve alt alan adlarını tüm düzeylerde (ör.news.example.com, login.news.example.com) eşleştirir. Joker karakterleri kullanırken dikkat edilmesi gereken noktalar:

  • Kalıp dizeleri yalnızca joker karakter ve üst düzey alan adı içeremez. Ö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 alan adlarıyla ve example2.com'nin alt alanlarıyla eşleşir
  • Joker karakterli alanlar 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 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'in DOM'den hemen kaldırılmasıdır.

data-intermediate_iframe_close_callback alanı yalnızca ara iFrame modunda geçerli olur. Ayrıca, yalnızca One Tap iframe'i yerine ara iframe'i etkiler. Geri çağırma çağrısı yapılmadan önce One Tap kullanıcı arayüzü kaldırılır.

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

Bir ad alanındaki JavaScript işlevleri HTML API tarafından desteklenmez. Bunun yerine, ad alanı içermeyen bir genel 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 yeni sürüme geçirilmiş Tek Dokunuş kullanıcı deneyiminin etkinleştirilip etkinleştirilmeyeceğini belirler. Varsayılan değer: false. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Zorunlu Ö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 biliyorsa Google'a giriş ipucu sağlayabilir. İşlem 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.

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

data-hd

Kullanıcının birden fazla hesabı varsa ve yalnızca Workspace hesabıyla oturum açması gerekiyorsa Google'a alan adı ipucu sağlamak için 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ırlıdır. Karıştırıcı değer: *, kullanıcıya yalnızca Workspace hesapları sunar ve hesap seçimi sırasında tüketici hesaplarını (kullanıcı@gmail.com) hariç tutar.

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

Tür Zorunlu Ö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ı yönetmesine izin verin. Varsayılan değer yanlıştır. Daha fazla bilgi için FedCM'ye taşıma sayfasına bakın.

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

data-enable_redirect_uri_validation

Yönlendirme URI'si doğrulama kurallarına uygun düğme yönlendirme akışını etkinleştirin.

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

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

Bir öğenin class özelliğine g_id_signin eklerseniz öğ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 Veri özellikleri

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

Özellik
data-type Düğme türü: simge veya standart düğme.
data-theme Düğme teması. Örneğin, dolu_mavi veya dolu_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 dairesel.
data-logo_alignment Google logosunun hizalaması: sol veya orta.
data-width Düğmenin piksel cinsinden 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.
data-state Ayarlanırsa bu dize, kimlik jetonuyla birlikte döndürülür.

Özellik türleri

Aşağıdaki bölümlerde, her bir ö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:

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

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

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

data-theme

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

Tür Zorunlu Ö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 planlı kişiselleştirilmiş bir düğme
Standart düğme teması.
filled_blue
Mavi arka planlı standart bir düğme Mavi arka planlı simge düğmesi Mavi arka planlı kişiselleştirilmiş bir düğme
Mavi dolu düğme teması.
filled_black
Siyah arka planlı standart bir düğme Siyah arka planlı bir simge düğmesi Siyah arka planlı kişiselleştirilmiş bir düğme
İçi siyah düğme teması.

data-size

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

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

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

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

data-text

Düğme metni. Varsayılan değer: signin_with. 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 Zorunlu Örnek
dize İsteğe bağlı data-text="signup_with"

Aşağıdaki tabloda mevcut 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 metin içermeyen simge düğmesi
"Google ile oturum aç" düğmesi metni.
signup_with
&quot;Google ile kaydol&quot; etiketli standart bir düğme Görünür metin içermeyen simge düğmesi
"Google ile kaydol" düğmesi metni.
continue_with
&quot;Google ile devam et&quot; etiketli standart bir düğme Görünür metin içermeyen simge düğmesi
"Google ile devam et" düğmesi metni.
signin
&quot;Oturum aç&quot; etiketli standart bir düğme Görünür metin içermeyen simge düğmesi
Düğme metni "Giriş yap"tır.

data-shape

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

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

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

Şekil
rectangular
Dikdörtgen standart düğme Dikdörtgen simge düğmesi Dikdörtgen kişiselleştirilmiş düğme
Dikdörtgen şeklindeki düğme. icon düğme türü için kullanılıyorsa square ile aynıdır.
pill
Hap şeklinde standart bir 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 Yuvarlak 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 Kare şeklinde kişiselleştirilmiş bir düğme
Kare şeklindeki düğme. standard düğme türü için kullanılıyorsa rectangular ile aynıdır.

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:

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

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

logo_alignment
left
Sol tarafta G logosu bulunan standart bir düğme
Google logosunu sola hizalar.
center
Ortasında G logosu bulunan standart bir düğme
Google logosunu orta hizaya getirir.

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:

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

data-locale

İsteğe bağlı. Düğme metnini belirtilen yerel ayarı kullanarak gösterin. 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 ve muhtemelen farklı boyutlarda görebilir.

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

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

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 konsola Google ile oturum açma düğmesi tıklandı... mesajı kaydedilir.

data-state

İsteğe bağlı olarak, aynı sayfada birden fazla Google ile oturum açma düğmesi oluşturulabileceğinden her düğmeye benzersiz bir dize atayabilirsiniz. Kimlik jetonuyla birlikte aynı dize 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:

Tür Zorunlu Örnek
dize İsteğe bağlı data-state="button 1"

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 ek bilgi için kullanıcıyı bir kayıt sayfasına veya hesap bağlama 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 istekle değişen rastgele bir dize.
İstek parametresi g_csrf_token Önceki çerez değeriyle aynı olan bir dize (g_csrf_token).
İstek parametresi credential Google'ın verdiği kimlik jetonu.
İstek parametresi select_by Kimlik bilgisinin seçilme şekli.
İstek parametresi state Bu parametre yalnızca kullanıcı oturum açmak için Google ile oturum aç düğmesini tıkladığında ve düğmenin state özelliği belirtildiğinde tanımlanır.

yeterlilik belgesi

Kodunun çözüldüğü durumlarda kimlik jetonu 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": "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 dünya genelinde benzersiz bir tanımlayıcıdır. Tüm Google Hesapları arasında benzersiz olduğu ve hiçbir zaman yeniden kullanılmadığı için kullanıcının tanımlayıcısı olarak yalnızca sub alanını kullanın. 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 bu e-posta adresi için 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 ekiyle bitiyorsa Gmail hesabıdır.
  • email_verified doğruysa ve hd ayarlanmışsa bu bir Google Workspace hesabıdır.

Kullanıcılar Gmail veya Google Workspace'i kullanmadan Google Hesabı'na kaydolabilir. email, @gmail.com soneki içermiyorsa ve hd yoksa Google yetkili değildir ve kullanıcıyı doğrulamak için şifre veya başka istem yöntemleri önerilir. Google, Google Hesabı oluşturulduğunda kullanıcıyı 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ı, jetonu sunucu tarafında doğrulamanız için son kullanma tarihini gösterir. Google ile oturum açma özelliğinden elde edilen kimlik jetonu için bir saattir. Süre dolmadan önce jetonu doğrulamanız gerekir. Oturum yönetimi için exp kullanmayın. Geçerlilik süresi dolmuş bir kimlik jetonu, kullanıcının oturumunun kapalı olduğu anlamına gelmez. Kullanıcılarınızın oturum yönetiminden uygulamanız sorumludur.

select_by

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

  • Kullanıcı, One Tap veya Google ile oturum aç düğmesine bastı ya da dokunmadan 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 oturum açtı.

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

    • Kimlik bilgilerini paylaşma izni vermek için Onayla düğmesini bastıysa veya
    • Daha önce izin verdiyseniz ve Google Hesabı seçmek için Hesap Seç'i kullandıysanız

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

Değer Açıklama
auto Mevcut oturumu olan ve daha önce kimlik bilgilerini paylaşma izni vermiş bir kullanıcının otomatik olarak oturum açması. Yalnızca FedCM tarafından desteklenmeyen tarayıcılar için geçerlidir.
user Mevcut oturumu olan ve daha önce izin vermiş bir kullanıcı, kimlik bilgilerini paylaşmak için One Tap'in "Bu kimlikle devam et" düğmesine bastı. Yalnızca FedCM tarafından desteklenmeyen tarayıcılar için geçerlidir.
fedcm Bir kullanıcı, FedCM'yi kullanarak kimlik bilgilerini paylaşmak için Tek Dokunuş ile "Bu kimlikle devam et" düğmesine bastı. Yalnızca FedCM tarafından desteklenen tarayıcılar için geçerlidir.
fedcm_auto Mevcut oturumu olan ve daha önce FedCM One Tap'ı kullanarak kimlik bilgilerini paylaşma izni vermiş bir kullanıcının otomatik olarak oturum açması. Yalnızca FedCM tarafından desteklenen tarayıcılar için geçerlidir.
user_1tap Mevcut oturumu olan bir kullanıcı, izin vermek ve kimlik bilgilerini paylaşmak için One Tap'in "Bu kimlikle devam et" düğmesine bastı. Yalnızca Chrome 75 ve sonraki sürümler için geçerlidir.
user_2tap Mevcut oturumu olmayan bir kullanıcı, hesap seçmek için Tek Dokunuş'taki "Bu kimlikle devam et" düğmesine, ardından izin vermek ve kimlik bilgilerini paylaşmak için pop-up pencerede Onayla düğmesine bastı. Chromium tabanlı olmayan tarayıcılar için geçerlidir.
btn Mevcut oturumu olan ve daha önce izin veren bir kullanıcı, kimlik bilgilerini paylaşmak için Google ile oturum aç düğmesine bastı ve "Hesap seçin" bölümünden 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 ve Onay'a bastı.
btn_add_session Mevcut oturumu olmayan ve daha önce izin vermiş bir kullanıcı, 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 ile Oturum Aç düğmesine basarak bir Google Hesabı seçti, ardından Onayla düğmesine basarak izin verdi ve kimlik bilgilerini paylaştı.

durum

Bu parametre yalnızca kullanıcı oturum açmak için Google ile oturum açma 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ı, 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 istekle değişen rastgele bir dize.
İstek parametresi g_csrf_token Önceki çerez değeriyle aynı olan bir dize (g_csrf_token).
İstek parametresi email Google tarafından verilen bu kimlik jetonu.
İstek parametresi password Kimlik bilgisinin seçilme şekli.