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" kimlikli öğe
Google ile Oturum Açma veri özelliklerini, <div>
ve <span>
gibi görünür veya görünmez herhangi bir öğeye 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ışına 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 bildirimi dinleyicisinin işlev adı |
data-state_cookie_domain |
Üst alanda 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ç 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 alan adına 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 özellik türü hakkında ayrıntılar ve bir örnek bulunmaktadır.
veri-istemci_kimliği
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:
Tür | Gerekli | Örnek |
---|---|---|
dize | Evet | data-client_id="CLIENT_ID.apps.googleusercontent.com" |
data-auto_istem
Bu özellik, Tek dokunuşun gösterilip gösterilmeyeceğini belirler. Varsayılan değer true
değeridir. Bu değer false
olduğunda Google One dokunuşu 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" |
data-auto_select
Uygulamanızı yalnızca bir Google oturumu onayladıysa bu özellik, herhangi bir kullanıcı etkileşimi olmadan kimlik jetonunun otomatik olarak döndürülüp döndürülmeyeceğini belirler. Varsayılan değer false
'dir. 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ğerin, API Konsolu'nda yapılandırdığınız OAuth 2.0 istemcisi için yetkili yönlendirme URI'lerinden biriyle tam olarak eşleşmesi ve Yönlendirme URI'si doğrulama kurallarımıza uyması gerekir.
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ı, herhangi bir geri çağırma işlevi tanımlanmadığında ve bir kullanıcı Google ile Oturum Aç veya One Dokunma düğmelerini tıkladığında ya da otomatik oturum açıldığında 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'sına veya belirttiğiniz değere ayarlanı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 ayarlanmazsa 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,data-callback
özelliğini yok sayan Google ile Oturum Aç düğmesiredirect
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ırsadata-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ş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 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" |
data-native_callback
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
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
özelliğini 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şlevi 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
'tır. 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ının istemin dışına tıklaması durumunda One Tap isteğinin iptal edilip edilmeyeceğini belirler. Varsayılan değer: true
. 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ı öğenin 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" |
data-skip_prompt_cookie
Belirtilen çerezde boş olmayan bir değer varsa 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 veriler
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 boyutunun yanı sıra 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 Tek Dokunma isteminde gösterilen mesajların metnini 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 tüm bağlamlar ve açıklamaları listelenmiştir:
Bağlam | |
---|---|
signin |
"Google ile oturum aç" |
signup |
"Google ile kaydolun" |
use |
"Google ile kullan" |
data-moment_callback
Bu özellik, istem kullanıcı arayüzü durumu 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şlevi kullanın. Örneğin, mylib.callback
yerine mylibCallback
kullanın.
data-state_cookie_domain
One Tap'i bir üst alanda ve 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, mevcut 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ışını gerçekleştirir. |
redirect |
Tam sayfa yönlendirme ile oturum açma UX akışı 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 açıklamaları listelenmiştir.
Değer Türleri | ||
---|---|---|
string |
Tek bir alan URI'sı. | "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 önekleri 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 unutulmaması gereken noktalar:
- Kalıp dizeleri, yalnızca joker karakter ve üst düzey alandan oluşabilir. Örneğin
https://*.com
vehttps://*.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ı veexample2.com
alt alan adlarıyla eşleşir - Joker karakterli alan adları 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 manuel olarak kapattıklarında varsayılan ara iframe davranışını geçersiz kılar. Varsayılan davranış, ara iframe'i DOM'den 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 çağırma 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şlevi kullanın. Örneğin, mylib.callback
yerine mylibCallback
kullanın.
data-itp_destek
Bu alan, Akıllı İzleme Önleme'yi (ITP) destekleyen tarayıcılarda
yeni sürüme geçirilen One Tap kullanıcı deneyiminin etkinleştirilip etkinleştirilmeyeceğini belirler. Varsayılan değer false
değeridir. 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ş yapma 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 bakı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" |
veriler-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 bunu kullanın. Başarılı olursa, 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 bakı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 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 bunların 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 dolgu_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 daire. |
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. |
data-state |
Ayarlanırsa bu dize, kimlik jetonuyla birlikte döndürülür. |
Özellik türleri
Aşağıdaki bölümlerde her özellik türü hakkında ayrıntılar ve bir örnek bulunmaktadır.
veri türü
Düğme türü. Varsayılan değer: standard
. 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 tüm düğme türleri ve bunların açıklamaları listelenmiştir:
Tür | |
---|---|
standard |
|
icon |
veri-teması
Düğme teması. Varsayılan değer: outline
. 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 |
|
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:
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 |
|
medium |
|
small |
veri metni
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 | 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 |
|
signup_with |
|
continue_with |
|
signin |
veri-şekli
Düğme şekli. Varsayılan değer: rectangular
. 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 |
|
pill |
|
circle |
|
square |
veri-logosu_hizalaması
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 | Gerekli | Örnek |
---|---|---|
dize | İsteğe bağlı | data-logo_alignment="center" |
Aşağıdaki tabloda kullanılabilir hizalamalar ve açıklamaları listelenmiştir:
logo_alignment | |
---|---|
left |
|
center |
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" |
data-click_listener
data-click_listener
özelliğini kullanarak, Google ile oturum aç 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ç düğmesi tıklandığında... mesajı, Google ile oturum aç düğmesi tıklandığında konsola kaydedilir.
data-state
İsteğe bağlı olarak, aynı sayfada birden fazla Google ile Oturum Aç düğmesi oluşturulabildiğinden, her bir 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:
Tür | Gerekli | Ö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ının oturum açmasını sağlayabilir ve bir kayıt sayfasına veya ek bilgi almaları için 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ğeri olan g_csrf_token ile aynı olan bir dize. |
İstek parametresi | credential |
Google'ın yayınladığı kimlik jetonu. |
İstek parametresi | select_by |
Kimlik bilgisinin nasıl seçildiği. |
İ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 belirtilirse tanımlanır. |
giriş bilgisi
Kimlik jetonu kodu çözüldüğünde 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ı'na ait genel olarak benzersiz bir tanımlayıcıdır. Kullanıcı için tanımlayıcı olarak yalnızca sub
alanını kullanın, çünkü bu alan tüm Google Hesaplarında benzersizdir ve hiçbir zaman tekrar kullanılmaz. Bir Google Hesabı'nın zaman içinde farklı zamanlarda birden fazla e-posta adresi olabileceğinden, e-posta adresini tanımlayıcı olarak kullanmayın.
email
, email_verified
ve hd
alanlarını kullanarak Google'ın bir e-posta adresi 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 meşru hesap sahibi olduğu onaylanır.
Google'ın yetkili olduğu durumlar:
email
alanında@gmail.com
son eki var. Bu bir Gmail hesabıdır.email_verified
doğru vehd
ayarlandı. Bu bir Google Workspace hesabı.
Kullanıcılar Gmail veya Google Workspace kullanmadan Google Hesaplarına kaydolabilir.
email
alanında @gmail.com
son eki yoksa ve hd
yoksa Google yetkili değilse ve kullanıcıyı doğrulamak için şifre veya başka sorgulama yöntemleri önerilir. Google, kullanıcıyı Google Hesabı oluşturulurken ilk olarak 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ındaki jetonu doğrulamanız için son kullanma süresini gösterir. Google ile Oturum Açma özelliğinden alınan kimlik jetonu için bu süre bir saattir. Geçerlilik süresi sona ermeden jetonu doğrulamanız gerekir. Oturum yönetimi için exp
adını kullanmayın. Süresi dolmuş kimlik jetonu, kullanıcının oturumunun kapatıldığı anlamına gelmez. Uygulamanız, kullanıcılarınızın oturum
yönetiminden sorumludur.
select_by
Aşağıdaki tabloda select_by
alanı için olası değerler listelenmektedir. Oturum ve izin durumuyla birlikte kullanılan düğme türü, değeri belirlemek 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 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şmasına izin vermek için Onayla düğmesine bastığını veya
- daha önce izin vermiş ve bir Google Hesabı seçmek için Hesap Seç'i kullanmış olan kullanıcılar.
Bu alanın değeri şu türlerden birine ayarlandığında:
Değer | Açıklama |
---|---|
auto |
Daha önce kimlik bilgilerinin paylaşılmasına izin vermiş olan bir kullanıcının mevcut oturumuyla otomatik olarak oturum açması. Yalnızca FedCM tarafından desteklenmeyen tarayıcılar için geçerlidir. |
user |
Mevcut oturumunda daha önce izin vermiş bir kullanıcı, kimlik bilgilerini paylaşmak için One Tap "Farklı devam et" düğmesine bastı. Yalnızca FedCM tarafından desteklenmeyen tarayıcılar için geçerlidir. |
fedcm |
Bir kullanıcı, kimlik bilgilerini FedCM kullanarak paylaşmak için One Tap "Farklı devam et" düğmesine bastı. Yalnızca FedCM tarafından desteklenen tarayıcılar için geçerlidir. |
fedcm_auto |
Daha önce FedCM One Tap kullanarak kimlik bilgilerinin paylaşılmasına izin veren mevcut bir oturumla kullanıcıları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 "Farklı devam et" düğmesine bastı. Yalnızca Chrome v75 ve sonraki sürümler için geçerlidir. |
user_2tap |
Mevcut bir 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 |
Mevcut oturumunda daha önce izin vermiş 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 bir 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 bir 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ı. |
state
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.
Birden fazla Google ile Oturum Aç düğmesi aynı sayfada oluşturulabildiğinden, her düğmeye benzersiz bir dize atayabilirsiniz. Dolayısıyla, kullanıcının oturum açmak için hangi düğmeyi tıkladığını belirlemek için bu state
parametresini 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ğeri olan g_csrf_token ile aynı olan bir dize. |
İstek parametresi | email |
Google'ın yayınladığı kimlik jetonu. |
İstek parametresi | password |
Kimlik bilgisinin nasıl seçildiği. |