Bu referans sayfasında, Sign-In JavaScript API açıklanmaktadır. Web sayfalarınızda Tek Dokunuş istemini veya Google ile oturum açma düğmesini görüntülemek için bu API'yi kullanabilirsiniz.
Yöntem: google.accounts.id.initialize
google.accounts.id.initialize
yöntemi, yapılandırma nesnesine göre Google ile oturum açma istemcisini başlatır. Yöntemin aşağıdaki kod örneğine bakın:
google.accounts.id.initialize(IdConfiguration)
Aşağıdaki kod örneğinde, google.accounts.id.initialize
yöntemi bir onload
işleviyle uygulanmaktadır:
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse
});
google.accounts.id.prompt();
};
</script>
google.accounts.id.initialize
yöntemi, aynı web sayfasındaki tüm modüller tarafından dolaylı olarak kullanılabilen bir Google ile oturum açma istemci örneği oluşturur.
- Aynı web sayfasında birden fazla modül (ör. Tek Dokunuş, Kişiselleştirilmiş düğme, İptal vb.) kullanıyorsanız
google.accounts.id.initialize
yöntemini yalnızca bir kez çağırmanız gerekir. google.accounts.id.initialize
yöntemini birden çok kez çağırırsanız yalnızca son çağrıdaki yapılandırmalar hatırlanır ve kullanılır.
google.accounts.id.initialize
yöntemini her çağırdığınızda aslında yapılandırmaları sıfırlarsınız ve aynı web sayfasında bulunan sonraki tüm yöntemler hemen yeni yapılandırmaları kullanır.
Veri türü: IdConfiguration
Aşağıdaki tabloda IdConfiguration
veri türünün alanları ve açıklamaları listelenmiştir:
Alan | |
---|---|
client_id |
Uygulamanızın istemci kimliği |
auto_select |
Otomatik seçimi etkinleştirir. |
callback |
Kimlik jetonlarını işleyen JavaScript işlevi. Google One Tap ve Google ile Oturum Aç düğmesi popup kullanıcı deneyimi modu bu özelliği kullanır. |
login_uri |
Giriş uç noktanızın URL'si. Google ile oturum açma düğmesi
redirect kullanıcı deneyimi modu bu özelliği kullanır. |
native_callback |
Şifre kimlik bilgilerini işleyen JavaScript işlevi. |
cancel_on_tap_outside |
Kullanıcı istemin dışını tıklarsa istemi iptal eder. |
prompt_parent_id |
One Tap istemi kapsayıcı öğesinin DOM kimliği |
nonce |
Kimlik jetonları için rastgele bir dize |
context |
One Tap istemindeki başlık ve kelimeler |
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 alana iletin. |
ux_mode |
Google ile oturum açma düğmesi kullanıcı deneyimi akışı |
allowed_parent_origin |
Ara iframe'in yerleştirilmesine izin verilen kaynaklar. Bu alan varsa Tek Dokunma, ara iframe modunda çalıştırılır. |
intermediate_iframe_close_callback |
Kullanıcılar One Tap'i manuel olarak kapattığında varsayılan ara iframe davranışını geçersiz kılar. |
itp_support |
ITP tarayıcılarında yükseltilmiş Tek Tıklama kullanıcı deneyimini etkinleştirir. |
login_hint |
Kullanıcı ipucu sağlayarak hesap seçimini atlayın. |
hd |
Hesap seçimini alana göre sınırlayın. |
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. |
enable_redirect_uri_validation |
Yönlendirme URI'si doğrulama kurallarına uygun düğme yönlendirme akışını etkinleştirin. |
client_id
Bu alan, uygulamanızın istemci kimliğidir. Bu kimlik, Google Cloud Console'da bulunur ve oluşturulur. Daha fazla bilgi için aşağıdaki tabloya bakın:
Tür | Zorunlu | Örnek |
---|---|---|
dize | Evet | client_id: "CLIENT_ID.apps.googleusercontent.com" |
auto_select
Bu alan, uygulamanızı daha önce onaylayan yalnızca bir Google oturumu olduğunda 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
. Daha fazla bilgi için aşağıdaki tabloya bakın:
Tür | Zorunlu | Örnek |
---|---|---|
boolean | İsteğe bağlı | auto_select: true |
geri çağırma
Bu alan, Tek Dokunuş isteminden veya pop-up pencereden döndürülen kimlik jetonunu işleyen JavaScript işlevidir. Google One Tap veya Google ile oturum açma düğmesi popup
UX modu kullanılıyorsa bu özellik gereklidir. Daha fazla bilgi için aşağıdaki tabloya bakın:
Tür | Zorunlu | Örnek |
---|---|---|
işlev | Tek Dokunuş ve popup kullanıcı deneyimi modu için gereklidir |
callback: handleResponse |
login_uri
Bu özellik, giriş uç noktanızın URI'sidir.
Değer, OAuth 2.0 istemcisi için Google Cloud Console'da yapılandırdığınız yetkili yönlendirme URI'lerinden biriyle tam olarak eşleşmeli ve Yönlendirme URI'si doğrulama kurallarımıza uymalıdır.
Geçerli sayfa giriş sayfanızsa bu özellik atlanabilir. Bu durumda kimlik bilgileri varsayılan olarak bu sayfaya gönderilir.
Kullanıcı Google ile oturum açma düğmesini tıkladığında ve yönlendirme kullanıcı deneyimi modu kullanıldığında 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. Yalnızca ux_mode: "redirect" ayarlandığında kullanılır. |
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 yönelik örnek bir istek gösterilmektedir:
POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
credential=ID_TOKEN
native_callback
Bu alan, tarayıcının yerel kimlik bilgisi yöneticisinden döndürülen şifre kimlik bilgisini işleyen JavaScript işlevinin adıdır. Daha fazla bilgi için aşağıdaki tabloya bakın:
Tür | Zorunlu | Örnek |
---|---|---|
işlev | İsteğe bağlı | native_callback: handleResponse |
cancel_on_tap_outside
Bu alan, bir kullanıcı istemin dışına çıktığında One Tap isteğinin iptal edilip edilmeyeceğini belirler. Varsayılan değer: true
. Değeri false
olarak ayarlayarak devre dışı bırakabilirsiniz. Daha fazla bilgi için aşağıdaki tabloya bakın:
Tür | Zorunlu | Örnek |
---|---|---|
boolean | İsteğe bağlı | cancel_on_tap_outside: false |
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ı | prompt_parent_id: 'parent_id' |
tek seferlik rastgele sayı
Bu alan, tekrar 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 | Zorunlu | Örnek |
---|---|---|
dize | İsteğe bağlı | 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.
context
Bu alan, tek dokunuş istemindeki 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ı | 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 kaydol" |
use |
"Google ile kullan" |
state_cookie_domain
Ana alanda ve alt alan adlarında One Tap'i göstermeniz gerekiyorsa tek bir paylaşılan durum çerezi kullanılması için ana alanı bu alana iletin. Daha fazla bilgi için aşağıdaki tabloya bakın:
Tür | Zorunlu | Örnek |
---|---|---|
dize | İsteğe bağlı | state_cookie_domain: "example.com" |
ux_mode
Google ile oturum açma düğmesinin kullandığı kullanıcı deneyimi akışını ayarlamak için bu alanı kullanın. Varsayılan değer popup
değeridir. Bu özelliğin OneTap 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ı | 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önlendirmesiyle oturum açma kullanıcı deneyimi akışı gerçekleştirir. |
allowed_parent_origin
Ara iframe'in yerleştirilmesine izin verilen kaynaklar. Bu alan 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ı | 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 |
Alan URI'leri dizisi. | ["https://news.example.com", "https://local.example.com"] |
Joker karakter ön ekleri de desteklenir. Örneğin, "https://*.example.com"
, example.com
ve tüm düzeylerdeki alt alan adlarıyla (ör.news.example.com
, login.news.example.com
) eşleşir. Karıştırıcı karakterleri kullanırken dikkat etmeniz gereken noktalar:
- Kalıp dizeleri yalnızca joker karakter ve üst düzey alan adı içeremez. Ö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 dizi de kullanabilirsiniz. Örneğin["https://example1.com", "https://
.example2.com"]
;example1.com
,example2.com
alan adları veexample2.com
alan adlarının alt alan adları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.
allowed_parent_origin
alanının değeri geçersizse ara iframe modunun One Tap'i başlatma işlemi başarısız olur ve durur.
intermediate_iframe_close_callback
Kullanıcılar One Tap kullanıcı arayüzündeki "X" düğmesine dokunarak One Tap'ı 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.
intermediate_iframe_close_callback
alanı yalnızca ara iframe modunda geçerli olur. Ayrıca, yalnızca One Tap iframe'i değil, ara iframe'i etkiler. Geri arama ç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ı | intermediate_iframe_close_callback: logBeforeClose |
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ı | itp_support: true |
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 değeridir.
Daha fazla bilgi için OpenID Connect belgelerindeki login_hint alanına bakın.
Tür | Zorunlu | Örnek |
---|---|---|
Dize, e-posta adresi veya kimlik jetonu sub alanındaki değer. |
İsteğe bağlı | login_hint: 'elisa.beckett@gmail.com' |
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. İş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.
Joker karakter değeri: *
, 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 OpenID Connect dokümanlarında hd alanına bakın.
Tür | Zorunlu | Örnek |
---|---|---|
Dize. Tam nitelikli bir alan adı veya *. | İsteğe bağlı | hd: '*' |
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ı | use_fedcm_for_prompt: true |
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ı | enable_redirect_uri_validation: true |
Yöntem: google.accounts.id.prompt
google.accounts.id.prompt
yöntemi, initialize()
yöntemi çağrıldıktan sonra Tek Dokunma istemini veya tarayıcı yerel kimlik bilgisi yöneticisini gösterir.
Yöntemin aşağıdaki kod örneğine bakın:
google.accounts.id.prompt(/**
@type{(function(!PromptMomentNotification):void)=} */ momentListener)
Normalde prompt()
yöntemi sayfa yüklenirken çağrılır. Google tarafındaki oturum durumu ve kullanıcı ayarları nedeniyle One Tap istemi kullanıcı arayüzü gösterilmeyebilir. Farklı anların kullanıcı arayüzü durumu hakkında bildirim almak için bir işlev ileterek kullanıcı arayüzü durum bildirimleri alın.
Bildirimler aşağıdaki durumlarda gönderilir:
- Görüntüleme anı: Bu,
prompt()
yöntemi çağrıldıktan sonra gerçekleşir. Bildirim, kullanıcı arayüzünün gösterilip gösterilmediğini belirten bir boole değeri içerir. Atlanan an: Bu durum, Tek Dokunma istemini otomatik veya manuel olarak iptal ettiğinizde ya da Google'ın kimlik bilgisi yayınlayamadığında (ör. seçili oturumda Google oturumu kapatıldığında) ortaya çıkar.
Bu durumlarda, varsa sonraki kimlik sağlayıcılara geçmenizi öneririz.
Kapatılan an: Bu durum, Google bir kimlik bilgisini başarıyla aldığında veya bir kullanıcı kimlik bilgisi alma akışını durdurmak istediğinde ortaya çıkar. Örneğin, kullanıcı, giriş iletişim kutunuzda kullanıcı adını ve şifresini girmeye başladığında, One Tap istemini kapatmak ve kapatılan anı tetiklemek için
google.accounts.id.cancel()
yöntemini çağırabilirsiniz.
Aşağıdaki kod örneğinde atlanan an uygulanmaktadır:
<script>
window.onload = function () {
google.accounts.id.initialize(...);
google.accounts.id.prompt((notification) => {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// continue with another identity provider.
}
});
};
</script>
Veri türü: PromptMomentNotification
Aşağıdaki tabloda PromptMomentNotification
veri türünün yöntemleri ve açıklamaları listelenmektedir:
Yöntem | |
---|---|
isDisplayMoment() |
Bu bildirim bir görüntüleme anı için mi? Not: FedCM etkinleştirildiğinde bu bildirim gönderilmez. Daha fazla bilgi için FedCM'ye taşıma sayfasına bakın. |
isDisplayed() |
Bu bildirim, ekran anı için mi gönderildi ve kullanıcı arayüzü gösteriliyor mu? Not: FedCM etkinleştirildiğinde bu bildirim gönderilmez. Daha fazla bilgi için FedCM'ye taşıma sayfasına bakın. |
isNotDisplayed() |
Bu bildirim, ekran anı için mi gönderildi ve kullanıcı arayüzü gösterilmiyor mu? Not: FedCM etkinleştirildiğinde bu bildirim gönderilmez. Daha fazla bilgi için FedCM'ye taşıma sayfasına bakın. |
getNotDisplayedReason() |
Kullanıcı arayüzünün gösterilmemesinin ayrıntılı nedeni. Olası değerler şunlardır:
|
isSkippedMoment() |
Bu bildirim, atlanan bir anla ilgili mi? |
getSkippedReason() |
Atlanan anın ayrıntılı nedeni. Olası değerler şunlardır:
|
isDismissedMoment() |
Bu bildirim, kapatılan bir an için mi? |
getDismissedReason() |
Kapatma kararının ayrıntılı nedeni. Olası değerler şunlardır:
|
getMomentType() |
An türü için bir dize döndürür. Olası değerler şunlardır:
|
Veri türü: CredentialResponse
callback
işleviniz çağrıldığında, parametre olarak bir CredentialResponse
nesnesi iletilir. Aşağıdaki tabloda, kimlik bilgisi yanıt nesnesinde yer alan alanlar listelenmiştir:
Alan | |
---|---|
credential |
Bu alan, döndürülen kimlik jetonudur. |
select_by |
Bu alan, kimlik bilgisinin nasıl seçileceğini belirler. |
state |
Bu alan 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
Bu alan, base64 kodlamalı bir JSON Web Token (JWT) dizesi olarak kimlik jetonudur.
Kodunun çözüldüğünde JWT 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": "Elisa", "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 sub
alanını yalnızca kullanın. Google Hesabı'nın farklı zamanlarda birden fazla e-posta adresi olabileceği için 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 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ğildir 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 kez doğruladığı için email_verfied
doğru olabilir. Ancak daha sonra üçüncü taraf e-posta hesabının sahipliği değişmiş olabilir.
exp
alanında, jetonu sunucu tarafında doğrulamanız için son kullanma zamanı gösterilir. 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 şu 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 v75 ve sonraki sürümler için geçerlidir. |
user_2tap |
Mevcut oturumu olmayan bir kullanıcı, bir hesap seçmek için One Tap'in "Farklı devam et" düğmesine bastıktan sonra pop-up penceredeki Onayla düğmesine basarak izin verip kimlik bilgilerini paylaştı. Chromium tabanlı olmayan tarayıcılar için geçerlidir. |
itp |
Mevcut bir oturumu olan ve daha önce izin vermiş bir kullanıcı, ITP tarayıcılarında Tek Dokunma'ya bastı. |
itp_confirm |
Oturumu olan bir kullanıcı, ITP tarayıcılarında One Tap'a, izin vermek ve kimlik bilgilerini paylaşmak için Onayla düğmesine bastı. |
itp_add_session |
Daha önce izin vermiş ve mevcut oturumu olmayan bir kullanıcı, bir Google Hesabı seçmek ve kimlik bilgilerini paylaşmak için ITP tarayıcılarında One Tap'a basmıştır. |
itp_confirm_add_session |
Mevcut oturumu olmayan bir kullanıcı, önce bir Google Hesabı seçmek için ITP tarayıcılarında Tek Dokunuş'a, ardından kimlik bilgilerini paylaşmak ve izin vermek için Onayla düğmesine bastı. |
btn |
Daha önce izin veren mevcut oturumu olan bir kullanıcı, Google ile Oturum Aç düğmesine basmış ve kimlik bilgilerini paylaşmak için "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 Onayla düğmesine 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 izin verip kimlik bilgilerini paylaşmak için Onayla düğmesine bastı. |
durum
Bu alan yalnızca kullanıcı, oturum açmak için Google ile oturum aç düğmesini tıkladığında ve tıklanan düğmenin state
özelliği belirtildiğinde tanımlanır. Bu alanın değeri, düğmenin 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
alanını kullanabilirsiniz.
Yöntem: google.accounts.id.renderButton
google.accounts.id.renderButton
yöntemi, web sayfalarınızda Google ile oturum açma düğmesi oluşturur.
Yöntemin aşağıdaki kod örneğine bakın:
google.accounts.id.renderButton(
/** @type{!HTMLElement} */ parent,
/** @type{!GsiButtonConfiguration} */ options
)
Veri türü: GsiButtonConfiguration
Aşağıdaki tabloda GsiButtonConfiguration
veri türünün alanları ve açıklamaları listelenmektedir:
Özellik | |
---|---|
type |
Düğme türü: simge veya standart düğme. |
theme |
Düğme teması. Örneğin, dolu_mavi veya dolu_siyah. |
size |
Düğme boyutu. Örneğin, küçük veya büyük. |
text |
Düğme metni. Örneğin, "Google ile oturum aç" veya "Google ile kaydol". |
shape |
Düğme şekli. Örneğin, dikdörtgen veya dairesel. |
logo_alignment |
Google logosunun hizalaması: sol veya orta. |
width |
Düğmenin piksel cinsinden genişliği. |
locale |
Ayarlanırsa düğme dili oluşturulur. |
click_listener |
Ayarlanırsa Google ile oturum aç düğmesi tıklandığında bu işlev çağrılır. |
state |
Ayarlanırsa bu dize, kimlik jetonuyla döndü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 yer almaktadır.
tür
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 | type: "icon" |
Aşağıdaki tabloda kullanılabilir düğme türleri ve açıklamaları listelenmiştir:
Tür | |
---|---|
standard |
|
icon |
tema
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ı | theme: "filled_blue" |
Aşağıdaki tabloda kullanılabilir temalar ve açıklamaları listelenmiştir:
Tema | |
---|---|
outline |
|
filled_blue |
|
filled_black |
beden
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ı | size: "small" |
Aşağıdaki tabloda, kullanılabilen düğme boyutları ve açıklamaları listelenmiştir:
Boyut | |
---|---|
large |
|
medium |
|
small |
text (metin)
Düğme metni. Varsayılan değer: signin_with
. Farklı text
özelliklerine sahip simge düğmelerinin metninde görsel farklılık yoktur.
Tek istisna, metnin ekran erişilebilirliği için okunduğu durumlardır.
Daha fazla bilgi için aşağıdaki tabloya bakın:
Tür | Zorunlu | Örnek |
---|---|---|
dize | İsteğe bağlı | text: "signup_with" |
Aşağıdaki tabloda, mevcut tüm düğme metinleri ve açıklamaları listelenmiştir:
Metin | |
---|---|
signin_with |
|
signup_with |
|
continue_with |
|
signin |
şekil
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ı | shape: "rectangular" |
Aşağıdaki tabloda, kullanılabilen düğme şekilleri ve açıklamaları listelenmiştir:
Şekil | |
---|---|
rectangular |
|
pill |
|
circle |
|
square |
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ı | logo_alignment: "center" |
Aşağıdaki tabloda, kullanılabilen hizalamalar ve açıklamaları listelenmiştir:
logo_alignment | |
---|---|
left |
|
center |
genişlik
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ı | width: "400" |
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>
.
Politika ayarlanmadan bırakılırsa 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 farklı boyutlara sahip olanları görebilir.
Daha fazla bilgi için aşağıdaki tabloya bakın:
Tür | Zorunlu | Örnek |
---|---|---|
dize | İsteğe bağlı | 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çma düğmesi tıklandığında Google ile oturum açma düğmesi tıklandı... mesajı konsola kaydedilir.
durum
İ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. 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 | Zorunlu | Örnek |
---|---|---|
dize | İsteğe bağlı | data-state: "button 1" |
Veri türü: Kimlik bilgisi
native_callback
işleviniz çağrıldığında parametre olarak bir Credential
nesnesi iletilir. Aşağıdaki tabloda nesnede bulunan alanlar listelenmektedir:
Alan | |
---|---|
id |
Kullanıcıyı tanımlar. |
password |
Şifre |
Yöntem: google.accounts.id.disableAutoSelect
Kullanıcı web sitenizin oturumunu kapattığında, durumu çerezlere kaydetmek için google.accounts.id.disableAutoSelect
yöntemini çağırmanız gerekir. Bu, kullanıcı deneyimindeki çıkmaz döngüyü önler. Yöntemin aşağıdaki kod snippet'ine bakın:
google.accounts.id.disableAutoSelect()
Aşağıdaki kod örneğinde, google.accounts.id.disableAutoSelect
yöntemi bir onSignout()
işleviyle uygulanmaktadır:
<script>
function onSignout() {
google.accounts.id.disableAutoSelect();
}
</script>
Yöntem: google.accounts.id.storeCredential
Bu yöntem, tarayıcının yerel kimlik bilgisi yöneticisi API'sinin store()
yöntemi için bir sarmalayıcıdır. Bu nedenle, yalnızca şifre kimlik bilgisini depolamak için kullanılabilir. Yöntemin aşağıdaki kod örneğine bakın:
google.accounts.id.storeCredential(Credential, callback)
Aşağıdaki kod örneğinde, google.accounts.id.storeCredential
yöntemi bir onSignIn()
işleviyle uygulanmaktadır:
<script>
function onSignIn() {
let cred = {id: '...', password: '...'};
google.accounts.id.storeCredential(cred);
}
</script>
Yöntem: google.accounts.id.cancel
İstemleri güvenen taraf DOM'undan kaldırırsanız Tek Dokunuş akışını iptal edebilirsiniz. Halihazırda bir kimlik bilgisi seçiliyse iptal işlemi yoksayılır. Yöntemin aşağıdaki kod örneğine bakın:
google.accounts.id.cancel()
Aşağıdaki kod örneğinde, google.accounts.id.cancel()
yöntemi bir onNextButtonClicked()
işleviyle uygulanmaktadır:
<script>
function onNextButtonClicked() {
google.accounts.id.cancel();
showPasswordPage();
}
</script>
Kitaplık yükleme geri çağırma işlevi: onGoogleLibraryLoad
onGoogleLibraryLoad
geri arama kaydı oluşturabilirsiniz. Google ile Oturum Açma JavaScript kitaplığı yüklendikten sonra bildirim gönderilir:
window.onGoogleLibraryLoad = () => {
...
};
Bu geri arama, yalnızca window.onload
geri çağırma işleminin kısayoludur. Davranışta herhangi bir fark yoktur.
Aşağıdaki kod örneğinde onGoogleLibraryLoad
geri çağırma işlevi uygulanmaktadır:
<script>
window.onGoogleLibraryLoad = () => {
google.accounts.id.initialize({
...
});
google.accounts.id.prompt();
};
</script>
Yöntem: google.accounts.id.revoke
google.accounts.id.revoke
yöntemi, belirtilen kullanıcı için kimlik jetonunu paylaşmak üzere kullanılan OAuth erişim iznini iptal eder. Yöntemin aşağıdaki kod snippet'ini inceleyin:
javascript
google.accounts.id.revoke(login_hint, callback)
Parametre | Tür | Açıklama |
---|---|---|
login_hint |
dize | Kullanıcının Google Hesabı'nın e-posta adresi veya benzersiz kimliği. Kimlik, kimlik bilgisi yükündeki sub mülküdür. |
callback |
işlev | İsteğe bağlı RevocationResponse işleyicisi. |
Aşağıdaki kod örneğinde, revoke
yönteminin kimlikle nasıl kullanılacağı gösterilmektedir.
google.accounts.id.revoke('1618033988749895', done => { console.log(done.error); });
Veri türü: RevocationResponse
callback
işleviniz çağrıldığında parametre olarak bir RevocationResponse
nesnesi iletilir. Aşağıdaki tabloda, iptal yanıtı nesnesinde yer alan alanlar listelenmiştir:
Alan | |
---|---|
successful |
Bu alan, yöntem çağrısının döndürdüğü değerdir. |
error |
Bu alan isteğe bağlı olarak ayrıntılı bir hata yanıtı mesajı içerir. |
başarılı
Bu alan, iptal yöntemi çağrısı başarılı olursa true, başarısız olursa false olarak ayarlanan bir boole değeridir.
hata
Bu alan bir dize değeridir ve iptal yöntemi çağrısı başarısız olursa ayrıntılı bir hata mesajı içerir. Başarıyla ilgili olarak tanımlanmamış olur.