Bu referans sayfasında, web sayfalarında Google ile Oturum Aç düğmesini veya One Tap istemini görüntülemek için kullanılan Google ile Oturum Aç JavaScript API'si açıklanmaktadır.
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, iptal vb.) kullansanız bile
google.accounts.id.initializeyöntemini yalnızca bir kez çağırmanız gerekir. google.accounts.id.initializeyöntemini birden fazla 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 yapılandırmaları sıfırlarsınız ve aynı web sayfasındaki sonraki tüm yöntemler yeni yapılandırmaları hemen 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 |
color_scheme |
Tek Dokunuş istemine uygulanan renk şeması. |
auto_select |
Otomatik seçimi etkinleştirir. |
callback |
Kimlik jetonlarını işleyen JavaScript işlevi. Google One Tap ve Google ile oturum açma 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 |
Tek Dokunuş istemi kapsayıcı öğesinin DOM kimliği |
nonce |
Kimlik jetonları için rastgele bir dize |
essential_claims |
Google tarafından döndürülen kimlik jetonuna dahil edilecek ek talepler. |
context |
One Tap istemindeki başlık ve kelimeler |
state_cookie_domain |
One Tap'i üst alan adında ve alt alan adlarında çağırmanız gerekiyorsa paylaşılan tek bir çerezin kullanılması için üst alan adını bu alana iletin. |
ux_mode |
Google ile oturum açma düğmesi kullanıcı deneyimi akışı |
allowed_parent_origin |
Ara iFrame'i yerleştirmesine izin verilen kaynaklar. Bu alan mevcutsa One Tap, 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 yeni One Tap 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ışına aracılık etmesine izin verin. |
use_fedcm_for_button |
Bu alan, Chrome'da FedCM düğmesi kullanıcı deneyiminin kullanılıp kullanılmayacağını belirler (masaüstü M125+ ve Android M128+). Varsayılan değer false olarak ayarlanır. |
button_auto_select |
FedCM düğme akışı için otomatik seçim seçeneğinin etkinleştirilip etkinleştirilmeyeceği. Etkinleştirilirse etkin bir Google oturumu olan geri gelen kullanıcıların oturumu, Hesap Seçici istemi atlanarak otomatik olarak açılır.Varsayılan değer: false. |
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" |
color_scheme
Bu alan, One Tap istemine uygulanan renk şemasıdır. Daha fazla bilgi için aşağıdaki tabloya bakın:
| Tür | Zorunlu | Örnek |
|---|---|---|
| dize | İsteğe bağlı. Varsayılan olarak kullanıcının sistem varsayılan renk şeması kullanılır. | color_scheme: "dark" |
Aşağıdaki tabloda, kullanılabilir renk şemaları ve açıklamaları listelenmiştir.
| Renk şeması | |
|---|---|
default |
Kullanıcının sisteminin varsayılan renk şemasını uygulayın. Kullanıcı tercih şemasına bağlı olarak açık veya koyu renk şeması uygulanır. |
light |
Açık renk şeması uygulayın. |
dark |
Koyu renk şeması uygulama |
auto_select
Bu alan, uygulamanızı daha önce onaylamış tek bir Google oturumu olduğunda 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. Daha fazla bilgi için aşağıdaki tabloya bakın:
| Tür | Zorunlu | Örnek |
|---|---|---|
| boole | İsteğe bağlı | auto_select: true |
callback
Bu alan, One Tap isteminden veya pop-up penceresinden döndürülen kimlik jetonunu işleyen JavaScript işlevidir. Google One Tap veya Google ile oturum açma düğmesi popup kullanıcı deneyimi modu kullanılıyorsa bu özellik zorunludur. 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, Google Cloud Console'da 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.
Kullanıcı, Google ile oturum açma düğmesini tıkladığında ve yönlendirme kullanıcı deneyimi modu kullanıldığında kimlik jetonunun 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'sı veya belirttiğiniz değer kullanılır. Yalnızca ux_mode: "redirect" ayarlandığında kullanılır. |
login_uri: "https://www.example.com/login" |
Giriş uç noktanız, gövdede kimlik jetonu değeri içeren bir credential parametresi barındıran POST isteklerini işlemelidir. select_by, login_uri veya data-login_uri adresine gönderilen HTTP POST isteklerine dahil edilmez ve yalnızca JavaScript callback işlevine iletilen CredentialResponse nesnesinde döndürülür.
native_callback
Bu alan, tarayıcının yerleşik kimlik bilgisi yöneticisinden döndürülen şifre kimlik bilgisini işleyen JavaScript işlevinin adıdır. 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, kullanıcı istemin dışını tıklarsa One Tap isteğinin iptal edilip edilmeyeceğini belirler. Varsayılan değer: true. Değeri false olarak ayarlarsanız devre dışı bırakabilirsiniz. Daha fazla bilgi için aşağıdaki tabloya bakın:
| Tür | Zorunlu | Örnek |
|---|---|---|
| boole | İsteğe bağlı | cancel_on_tap_outside: false |
prompt_parent_id
Bu özellik, kapsayıcı öğenin DOM kimliğini ayarlar. Ayarlanmazsa One Tap istemi pencerenin sağ üst köşesinde 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, kimlik jetonu tarafından tekrar 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ı | nonce: "biaqbm70g23" |
Tek seferlik rastgele sayı uzunluğu, ortamınız tarafından desteklenen maksimum JWT boyutu ve tarayıcı ile sunucu HTTP boyutu kısıtlamalarıyla sınırlıdır.
essential_claims
Bu alan, Google tarafından döndürülen kimlik jetonuna ek taleplerin dahil edilmesini istemek için kullanılan bir dizedir. Google tarafından kabul edilen hak taleplerinin tam listesi için desteklenen hak talepleri bölümüne bakın.
Daha fazla bilgi için aşağıdaki tabloya bakın:
| Tür | Zorunlu | Örnek |
|---|---|---|
| dize | İsteğe bağlı | essential_claims: "auth_time, amr" |
bağlam
Bu alan, One Tap isteminde gösterilen başlık ve mesajların metnini değiştirir. ITP tarayıcıları üzerinde herhangi bir etkisi yoktur. Varsayılan değer signin'dir.
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, kullanılabilir tüm bağlamlar ve açıklamaları listelenmiştir:
| Bağlam | |
|---|---|
signin |
"Oturum aç" |
signup |
"Sign up to" (Kaydolun) |
use |
"Kullan" |
state_cookie_domain
Tek Dokunuş'u üst alanda ve alt alanlarında göstermeniz gerekiyorsa tek bir paylaşılan durum çerezinin kullanılması için üst 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üğmesi tarafından kullanılan kullanıcı deneyimi akışını ayarlamak için bu alanı kullanın. Varsayılan değer popup'dir. Bu özelliğin OneTap kullanıcı deneyimi üzerinde bir 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.
| UX 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ışını gerçekleştirir. |
allowed_parent_origin
Ara iFrame'i yerleştirmesine 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 adı URI'si. | "https://example.com" |
string array |
Alan URI'leri dizisi. | ["https://news.example.com", "https://local.example.com"] |
Joker karakter önekleri 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. Joker karakterleri kullanırken dikkat edilmesi gerekenler:
- Kalıp dizeleri yalnızca bir joker karakter ve bir üst düzey alandan oluşamaz. Örneğin,
https://.comvehttps://.co.ukgeçersizdir. Çünkü"https://.example.com",example.comve tüm alt alan adlarıyla eşleşir. İki farklı alan adını temsil etmek için virgülle ayrılmış bir liste kullanın. Örneğin,"https://example1.com,https://.example2.com",example1.comveexample2.comalanlarıyla veexample2.comalt alanlarıyla eşleşir. - Joker karakter 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 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'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.
intermediate_iframe_close_callback alanı yalnızca ara iFrame modunda geçerli olur. Ayrıca, One Tap iframe'i yerine yalnızca ara iframe'i etkiler. Geri çağırma işlevi çağrı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 yükseltilmiş One Tap 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 |
|---|---|---|
| boole | İsteğe bağlı | itp_support: false |
login_hint
Uygulamanız hangi kullanıcının oturum açması gerektiğini önceden biliyorsa Google'a bir 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ğeri.
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 alanındaki değer.
sub |
İsteğe bağlı | login_hint: 'elisa.beckett@gmail.com' |
hd
Birden fazla hesabı olan ve yalnızca Workspace hesabıyla oturum açması gereken kullanıcılar için Google'a alan adı ipucu sağlamak üzere bu ayarı 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ı olur.
Joker karakter değeri: *, kullanıcıya yalnızca Workspace hesapları sunar ve hesap seçimi sırasında tüketici hesaplarını (user@gmail.com) hariç tutar.
Daha fazla bilgi için OpenID Connect belgelerindeki hd alanına bakın.
| Tür | Zorunlu | Örnek |
|---|---|---|
| Dize. Tam etki 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ışına aracılık etmesine izin verin. Varsayılan olarak false değerine ayarlanır. Daha fazla bilgi için FedCM'ye geçiş sayfasına bakın.
| Tür | Zorunlu | Örnek |
|---|---|---|
| boole | Kullanımdan kaldırıldı | use_fedcm_for_prompt: true |
use_fedcm_for_button
Bu alan, Chrome'da (masaüstü M125+ ve Android M128+) FedCM düğmesi kullanıcı deneyiminin kullanılıp kullanılmayacağını belirler. Varsayılan değer false şeklindedir. Daha fazla bilgi için aşağıdaki tabloya bakın:
| Tür | Zorunlu | Örnek |
|---|---|---|
| boole | İsteğe bağlı | use_fedcm_for_button: true |
button_auto_select
Bu alan, FedCM düğme akışı için otomatik seçim seçeneğinin etkinleştirilip etkinleştirilmeyeceğini belirler. Etkinleştirilirse etkin bir Google oturumu olan geri gelen kullanıcıların oturumu, hesap seçici istemi atlanarak otomatik olarak açılır. Varsayılan değer false olarak ayarlanır. Düğmeyle otomatik oturum açma özelliğini, ilk kullanıma sunma sırasında açıkça etkinleştirmeniz gerekir. Daha fazla bilgi için aşağıdaki tabloya bakın:
| Tür | Zorunlu | Örnek |
|---|---|---|
| boole | İsteğe bağlı | button_auto_select: true |
Yöntem: google.accounts.id.prompt
google.accounts.id.prompt yöntemi, initialize() yöntemi çağrıldıktan sonra One Tap istemini veya tarayıcıda yerleşik 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ı anlarda kullanıcı arayüzü durumu hakkında bildirim almak için kullanıcı arayüzü durumu bildirimlerini alacak bir işlev iletin.
Bildirimler aşağıdaki anlarda tetiklenir:
- 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, One Tap istemi otomatik iptal veya manuel iptal ile kapatıldığında ya da Google, kimlik bilgisi veremediğinde (ör. seçilen oturumun Google oturumu kapatıldığında) ortaya çıkar.
Bu gibi 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 kullanıcı, kimlik bilgisi alma akışını durdurmak istediğinde gerçekleşir. Örneğin, kullanıcı giriş iletişim kutunuza kullanıcı adını ve şifresini girmeye başladığında, One Tap istemini kapatmak ve kapatma anını tetiklemek için
google.accounts.id.cancel()yöntemini çağırabilirsiniz.
Aşağıdaki kod örneği, atlanan anı uygular:
<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ı listelenmiştir:
| Yöntem | |
|---|---|
isDisplayMoment() |
Tek Dokunuş istemi gösteriliyorsa true değerini döndürür.Not: FedCM etkinleştirildiğinde bu bildirim desteklenmez. Daha fazla bilgi için FedCM'ye geçiş sayfasını inceleyin. |
isDisplayed() |
An türü PromptMoment.DISPLAY ise ve One Tap istemi gösteriliyorsa true değerini döndürür.Not: FedCM etkinleştirildiğinde bu bildirim desteklenmez. Daha fazla bilgi için FedCM'ye geçiş sayfasını inceleyin. |
isNotDisplayed() |
An türü PromptMoment.DISPLAY ise ve One Tap istemi gösterilmiyorsa true değerini döndürür.Not: FedCM etkinleştirildiğinde bu bildirim desteklenmez. Daha fazla bilgi için FedCM'ye geçiş sayfasını inceleyin. |
getNotDisplayedReason() |
Kullanıcı arayüzünün gösterilmeme nedeni. Olası değerler şunlardır:
|
isSkippedMoment() |
An türü PromptMoment.SKIPPED ise true değerini döndürür.Not: FedCM etkinleştirildiğinde bu yöntem kısmen desteklenir. Özellikle user_cancel atlanma nedenini desteklemez. Daha fazla bilgi için FedCM'ye geçiş sayfasını inceleyin.
|
getSkippedReason() |
Atlanan anın ayrıntılı nedeni. Olası değerler şunlardır:
user_cancel atlama nedeni desteklenmez. Daha fazla bilgi için FedCM'ye geçiş sayfasını inceleyin.
|
isDismissedMoment() |
An türü PromptMoment.DISMISSED ise true değerini döndürür.Not: FedCM etkinleştirildiğinde bu yöntem tam olarak desteklenir. Daha fazla bilgi için FedCM'ye geçiş sayfasını inceleyin. |
getDismissedReason() |
Reddedilmenin ayrıntılı nedeni. Olası değerler şunlardır:
|
getMomentType() |
An türü için bir dize döndürün. 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 |
Google'ın verdiği kodlanmış JWT kimlik jetonu. |
select_by |
Kullanıcının oturum açma şekli. |
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 kodlu JSON Web Token (JWT) dizesi olarak kimlik jetonudur.
Kodu çözüldüğünde JWT aşağıdaki örneğe benzer:
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 Google Workspace email address "auth_time": 1748875426, "amr": ["mfa", "pwd", "tel"], "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 creation time "exp": 1596477600, // Unix timestamp of the assertion 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.
email, email_verified ve hd alanlarını kullanarak Google'ın bir e-posta adresini barındırıp barındırmadığını ve bu adres için yetkili olup olmadığını belirleyebilirsiniz. Google'ın yetkili olduğu durumlarda kullanıcının yasal hesap sahibi olduğu doğrulanır.
Google'ın yetkili olduğu durumlar:
email,@gmail.comson ekine sahip. Bu bir Gmail hesabıdır.email_verifieddoğruysa vehdayarlanmışsa bu bir Google Workspace hesabıdır.
Kullanıcılar, Gmail veya Google Workspace kullanmadan Google Hesaplarına kaydolabilir.
email, @gmail.com son ekini içermediğinde ve hd olmadığında Google yetkili değildir ve kullanıcıyı doğrulamak için şifre veya diğer sorgulama yöntemleri önerilir. Google, Google Hesabı oluşturulduğunda kullanıcıyı doğruladığı için email_verfied de 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 geçerlilik süresini gösterir. Google ile oturum açma özelliğinden alınan kimlik jetonu için bu süre bir saattir. Süre dolmadan ö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 kapalı olduğu 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 listelenmiştir. 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 basmış ya da dokunmadan otomatik oturum açma işlemini kullanmıştır.
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 şunlardan birini yapar:
- Kimlik bilgilerini paylaşma izni vermek için Onayla düğmesine basmış, veya
- daha önce izin vermiş ve bir Google Hesabı seçmek için Hesap Seçin'i kullanmışsa.
Bu alanın değeri aşağıdaki türlerden birine ayarlanır:
| Değer | Açıklama |
|---|---|
auto |
Daha önce kimlik bilgilerini paylaşma izni vermiş olan ve mevcut bir oturumu bulunan kullanıcının otomatik olarak oturum açması. Yalnızca FedCM'yi desteklemeyen tarayıcılar için geçerlidir. |
user |
Daha önce izin vermiş ve mevcut bir oturumu olan kullanıcı, kimlik bilgilerini paylaşmak için One Tap "Farklı devam et" düğmesine bastı. Yalnızca FedCM'yi desteklemeyen tarayıcılar için geçerlidir. |
fedcm |
Kullanıcı, FedCM kullanarak kimlik bilgilerini paylaşmak için One Tap "Farklı devam et" düğmesine bastı. Yalnızca FedCM'nin desteklendiği tarayıcılar için geçerlidir. |
fedcm_auto |
Daha önce FedCM Tek Dokunuş'u kullanarak kimlik bilgilerini paylaşma izni vermiş olan ve mevcut oturumu bulunan bir kullanıcının otomatik olarak oturum açması. Yalnızca FedCM'nin desteklendiği 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ı kullanıcı olarak 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 One Tap "Farklı devam et" düğmesine bastı ve 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. |
itp |
Daha önce izin vermiş olan bir kullanıcı, ITP tarayıcılarında One Tap'e bastı. |
itp_confirm |
İzin vermeyen bir kullanıcı, ITP tarayıcılarında One Tap'e ve izin verip kimlik bilgilerini paylaşmak için "Devam" düğmesine bastı. |
btn |
Daha önce izin vermiş olan bir kullanıcı, Google ile oturum açma düğmesine bastı ve kimlik bilgilerini paylaşmak için "Hesap seçin" bölümünden bir Google Hesabı seçti. |
btn_confirm |
İzin vermeyen bir kullanıcı, Google ile oturum açma düğmesine ve ardından "Devam" düğmesine basarak izin verdi ve kimlik bilgilerini paylaştı. |
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 amacıyla 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ı listelenmiştir:
| Özellik | |
|---|---|
type |
Düğme türü: simge veya standart düğme. |
theme |
Düğme teması. Örneğin, filled_blue veya filled_black. |
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 logosu hizalaması: sol veya orta. |
width |
Piksel cinsinden düğme genişliği. |
locale |
Ayarlanırsa düğme dili oluşturulur. |
click_listener |
Ayarlanırsa Google ile oturum açma düğmesi tıklandığında bu işlev çağrılır. |
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ü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 | Örnekler | Teknik Özellikler |
|---|---|---|
outline |
|
Dolgu: #FFFFFF Kontur: #747775 | 1 piksel | iç Yazı tipi: #1F1F1F | Roboto Medium | 14/20 Kişiselleştirilmiş: #1F1F1F | Roboto | Medium 12/14 | Regular 11/13 |
filled_blue |
|
Dolgu: #0B57D0 Kontur: #OB57D0 | 1 piksel | iç Yazı tipi: #FFFFFF | Google Sans Medium | 14/20 Kişiselleştirilmiş: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13 |
filled_black |
|
Dolgu: #202124 Kontur: #OB57D0 | 1 piksel | iç Yazı tipi: #FFFFFF | Google Sans Medium | 14/20 Kişiselleştirilmiş: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13 |
outline_dark |
|
Dolgu: #131314 Kontur: #8E918F | 1 piksel | iç Yazı tipi: #FFFFFF | Google Sans Medium | 14/20 Kişiselleştirilmiş: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13 |
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ılabilir 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 metinleri arasında görsel fark yok.
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ı | text: "signup_with" |
Aşağıdaki tabloda, kullanılabilir 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ılabilir düğme şekilleri ve açıklamaları listelenmiştir:
| Şekil | |
|---|---|
rectangular |
icon düğme türü için kullanılıyorsa square ile aynıdır.
|
pill |
icon düğme türü için kullanılıyorsa circle ile aynıdır.
|
circle |
standard düğme türü için kullanılıyorsa pill ile aynıdır.
|
square |
standard düğme türü için kullanılıyorsa rectangular ile aynıdır.
|
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ılabilir 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österir. Aksi takdirde, kullanıcının Google Hesabı veya tarayıcı ayarları varsayılan olarak 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ı | locale: "zh_CN" |
click_listener
click_listener özelliğini kullanarak Google ile oturum açma 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 konsola Google ile oturum açma düğmesi tıklandı... mesajı 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 listelenmiştir:
| Alan | |
|---|---|
id |
Kullanıcıyı tanımlar. |
password |
Şifre |
Yöntem: google.accounts.id.disableAutoSelect
Kullanıcı web sitenizde oturumu kapattığında durumu çerezlere kaydetmek için google.accounts.id.disableAutoSelect yöntemini çağırmanız gerekir. Bu sayede kullanıcı deneyimi açısından sonsuz döngüye girilmez. 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 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 yerleşik Credential Manager API'sinin store() yöntemi için bir sarmalayıcıdır. Bu nedenle, yalnızca şifre kimlik bilgilerini 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 onSignIn() işleviyle uygulanmaktadır:
<script>
function onSignIn() {
let cred = {id: '...', password: '...'};
google.accounts.id.storeCredential(cred);
}
</script>
Yöntem: google.accounts.id.cancel
İstemi, taraf DOM'undan kaldırırsanız One Tap akışını iptal edebilirsiniz. Bir kimlik bilgisi zaten seçilmişse iptal işlemi yok sayı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 çağırma işlevi kaydedebilirsiniz. Google ile Oturum Açma JavaScript kitaplığı yüklendikten sonra bildirim gönderilir:
window.onGoogleLibraryLoad = () => {
...
};
Bu geri çağırma, window.onload geri çağırması için bir kısayoldur. Davranışta herhangi bir fark yoktur.
Aşağıdaki kod örneği, bir onGoogleLibraryLoad geri çağırma işlevi uygular:
<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ının kimlik jetonunu paylaşmak için 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, credential yükünün sub özelliğidir. |
callback |
işlev | İsteğe bağlı RevocationResponse işleyici. |
Aşağıdaki kod örneğinde, revoke yönteminin bir 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 bulunan alanlar listelenmiştir:
| Alan | |
|---|---|
successful |
Bu alan, yöntem çağrısının dönüş değeridir. |
error |
Bu alan, isteğe bağlı olarak ayrıntılı bir hata yanıtı mesajı içerir. |
tamamlandı
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ılı olduğunda ise tanımsızdır.