Bu referans sayfasında, Sign-In JavaScript API açıklanmaktadır. Web sayfalarınızda One Tap istemini veya Google ile Oturum Aç 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ği, google.accounts.id.initialize
yöntemini onload
işleviyle uygular:
<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ılabilecek bir Google ile Oturum Açma istemci örneği oluşturur.
- Aynı web sayfasında birden çok modül (ör. Tek Dokunuş, Kişiselleştirilmiş düğme, iptal etme) kullansanız bile
google.accounts.id.initialize
yöntemini bir kez çağırmanız yeterlidir. 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.
Aslında google.accounts.id.initialize
yöntemini her çağırdığınızda 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ı listelenmektedir:
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 modunda
bu özelliği kullanır. |
login_uri |
Giriş uç noktanızın URL'si. Google ile Oturum Aç düğmesi redirect kullanıcı deneyimi modunda bu özelliği kullanır. |
native_callback |
Şifre kimlik bilgilerini işleyen JavaScript işlevi. |
cancel_on_tap_outside |
Kullanıcı istemin dışında bir yeri tıklarsa istemi iptal eder. |
prompt_parent_id |
One Tap istem 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ç 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ılarda yükseltilmiş One Tap kullanıcı deneyimini etkinleştirir. |
login_hint |
Kullanıcı ipucu sağlayarak hesap seçimini atlayın. |
hd |
Hesap seçimini alan adına göre sınırlandırı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ı uyumlulaştırmasına izin verin. |
client_id
Bu alan, 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 | client_id: "CLIENT_ID.apps.googleusercontent.com" |
auto_select
Bu alan, daha önce uygulamanızı onaylayan tek bir Google oturumu olduğunda, kimlik jetonunun otomatik olarak herhangi bir kullanıcı etkileşimi olmadan döndürülüp döndürülmeyeceğini belirler. false
, varsayılan değerdir. Daha fazla bilgi için aşağıdaki tabloya bakın:
Tür | Gerekli | Örnek |
---|---|---|
boolean | İsteğe bağlı | auto_select: true |
geri çağırma
Bu alan, One Tap isteminden veya pop-up pencereden döndürülen kimlik jetonunu işleyen JavaScript işlevidir. Bu özellik, Google One Tap veya Google ile Oturum Aç düğmesi popup
kullanıcı deneyimi modu kullanıldığında zorunludur. Daha fazla bilgi için aşağıdaki tabloya bakın:
Tür | Gerekli | Örnek |
---|---|---|
işlev | One Tap 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 yetkili yönlendirme URI'lerinden biriyle tam olarak eşleşmelidir. Bu URI'ları Google Cloud Console'da yapılandırdığınız ve Yönlendirme URI'si doğrulama kurallarımıza uygun olması 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ı, bir kullanıcı Google ile Oturum Aç düğmesini tıkladığında ve yönlendirme kullanıcı deneyimi modu kullanı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. 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 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
native_callback
Bu alan, tarayıcının yerel kimlik bilgisi yöneticisinden döndürülen şifre kimlik bilgilerini işleyen JavaScript işlevinin adıdır. Daha fazla bilgi için aşağıdaki tabloya bakın:
Tür | Gerekli | Örnek |
---|---|---|
işlev | İsteğe bağlı | native_callback: handleResponse |
cancel_on_tap_outside
Bu alan, kullanıcı istemin dışını tıkladığında One Tap isteğinin iptal edilip edilmeyeceğini belirler. true
, varsayılan değerdir. Değeri false
olarak ayarlarsanız bu özelliği devre dışı bırakabilirsiniz. Daha fazla bilgi için aşağıdaki tabloya bakın:
Tür | Gerekli | Örnek |
---|---|---|
boolean | İ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örüntülenir. Daha fazla bilgi için aşağıdaki tabloya bakın:
Tür | Gerekli | Örnek |
---|---|---|
dize | İsteğe bağlı | prompt_parent_id: 'parent_id' |
tek seferlik rastgele sayı
Bu alan, 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ı | 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.
context
Bu alan, One Tap istemindeki başlık ve 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ı | 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" |
state_cookie_domain
Üst alan adında ve alt alan adlarında One Tap'i görüntülemeniz gerekiyorsa tek bir paylaşılan durum çerezinin kullanılabilmesi için üst alanı bu alana iletin. Daha fazla bilgi için aşağıdaki tabloya bakın:
Tür | Gerekli | Örnek |
---|---|---|
dize | İsteğe bağlı | state_cookie_domain: "example.com" |
ux_mode
Google ile Oturum Aç düğmesi tarafından kullanılan kullanıcı deneyimi akışını ayarlamak için bu alanı kullanın. popup
, varsayılan değerdir. Bu özelliğin OneTap 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ı | 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. |
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 | Gerekli | Ö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'sı. | "https://example.com" |
string array |
Alan URI'ları dizisi. | ["https://news.example.com", "https://local.example.com"] |
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
ile eşleşir. 2 farklı alanı temsil eden bir dizi 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.
allowed_parent_origin
alanının değeri geçersizse ara iframe modunun One Tap ile başlatılması 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 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.
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 çağrılmadan önce One Tap kullanıcı arayüzü kaldırılır.
Tür | Gerekli | Örnek |
---|---|---|
işlev | İsteğe bağlı | intermediate_iframe_close_callback: logBeforeClose |
itp_support
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ı | itp_support: true |
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 değeri.
Daha fazla bilgi için OpenID Connect belgelerindeki login_hint alanına bakın.
Tür | Gerekli | Örnek |
---|---|---|
Dize, bir 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. 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 OpenID Connect dokümanlarındaki hd alanına bakın.
Tür | Gerekli | Ö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ı 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ı | use_fedcm_for_prompt: 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ının yerel kimlik bilgisi yöneticisini görüntüler.
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üklemede çağrılır. Google tarafındaki oturum durumu ve kullanıcı ayarları nedeniyle One Tap istem kullanıcı arayüzü gösterilmeyebilir. Farklı anların kullanıcı arayüzü durumlarıyla ilgili bildirim almak için, kullanıcı arayüzü durum bildirimlerini alacak bir işlev iletin.
Bildirimler şu 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örüntülenip görüntülenmediğini belirten bir boole değeri içerir. Atlanan an: Bu durum, One Tap istemi otomatik iptal veya manuel iptal işlemiyle kapatıldığında ya da Google, seçilen oturumdaki Google oturumunun kapatılması gibi bir kimlik bilgisi yayınlayamadığında gerçekleşir.
Bu gibi durumlarda, varsa sonraki kimlik sağlayıcılarla devam etmenizi öneririz.
Kapatılma 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 kutunuza kullanıcı adını ve şifresini girmeye başladığında, One Tap istemini kapatmak ve kapatılma anını tetiklemek için
google.accounts.id.cancel()
yöntemini çağırabilirsiniz.
Aşağıdaki kod örneğinde atlanan an uygulanı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ı listelenmiştir:
Yöntem | |
---|---|
isDisplayMoment() |
Bu bildirim, videonun gösterildiği bir an için mi? Not: FedCM etkinleştirildiğinde bu bildirim tetiklenmez. Daha fazla bilgi için FedCM'ye geçiş sayfasına bakın. |
isDisplayed() |
Bu bildirim bir görüntüleme anıyla ilgili mi ve kullanıcı arayüzü görüntüleniyor mu? Not: FedCM etkinleştirildiğinde bu bildirim tetiklenmez. Daha fazla bilgi için FedCM'ye geçiş sayfasına bakın. |
isNotDisplayed() |
Bu bildirim, görüntüleme anına yönelik bir bildirim mi ve kullanıcı arayüzü görüntülenmiyor mu? Not: FedCM etkinleştirildiğinde bu bildirim tetiklenmez. Daha fazla bilgi için FedCM'ye geçiş sayfasına bakın. |
getNotDisplayedReason() |
Kullanıcı arayüzünün görüntülenmemesinin ayrıntılı nedeni. Olası değerler şunlardır:
|
isSkippedMoment() |
Bu bildirim, atlanan bir an için mi? |
getSkippedReason() |
Atlanan anın ayrıntılı nedeni. Olası değerler şunlardır:
|
isDismissedMoment() |
Bu bildirim kapatılma süresi için mi? |
getDismissedReason() |
Reddetmenin 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 aktarılır. Aşağıdaki tabloda, kimlik bilgisi yanıt nesnesinde bulunan alanlar listelenmiştir:
Alan | |
---|---|
credential |
Bu alan, döndürülen kimlik jetonudur. |
select_by |
Bu alan, kimlik bilgilerinin 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. |
giriş bilgisi
Bu alan, base64 kodlu bir JSON Web Token (JWT) dizesi olarak kimlik jetonudur.
Kod çö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ı'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_verfied
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ı. |
user |
Mevcut oturumunda daha önce izin vermiş bir kullanıcı, kimlik bilgilerini paylaşmak için One Tap "Farklı devam et" düğmesine bastı. |
user_1tap |
Mevcut oturumu olan bir kullanıcı, izin vermek ve kimlik bilgilerini paylaşmak için One Tap "Farklı devam et" düğmesine bastı. Yalnızca Chrome v75 ve sonraki sürü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 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.
Birden fazla Google ile Oturum Aç düğmesi aynı sayfada oluşturulabildiğinden, her düğmeye benzersiz bir dize atayabilirsiniz. Dolayısıyla, bu state
alanını kullanarak kullanıcının oturum açmak için hangi düğmeyi tıkladığını belirleyebilirsiniz.
Yöntem: google.accounts.id.renderButton
google.accounts.id.renderButton
yöntemi, web sayfalarınızda Google ile Oturum Aç 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, doldurulmuş_mavi veya dolgu_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 daire. |
logo_alignment |
Google logosunun hizalanması: sola veya ortaya. |
width |
Piksel cinsinden düğme 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 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.
tür
Düğme türü. standard
, varsayılan değerdir.
Daha fazla bilgi için aşağıdaki tabloya bakın:
Tür | Gerekli | Örnek |
---|---|---|
dize | Evet | 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ı. outline
, varsayılan değerdir. Daha fazla bilgi için aşağıdaki tabloya bakın:
Tür | Gerekli | Örnek |
---|---|---|
dize | İsteğe bağlı | theme: "filled_blue" |
Aşağıdaki tabloda mevcut temalar ve açıklamaları listelenmiştir:
Tema | |
---|---|
outline |
|
filled_blue |
|
filled_black |
beden
Düğme boyutu. large
, varsayılan değerdir. Daha fazla bilgi için aşağıdaki tabloya bakın:
Tür | Gerekli | Örnek |
---|---|---|
dize | İsteğe bağlı | 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. signin_with
, varsayılan değerdir. Farklı 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ı | text: "signup_with" |
Aşağıdaki tabloda, kullanılabilir tüm düğme metinleri ve açıklamaları listelenmektedir:
Metin | |
---|---|
signin_with |
|
signup_with |
|
continue_with |
|
signin |
shape
Düğme şekli. rectangular
, varsayılan değerdir. Daha fazla bilgi için aşağıdaki tabloya bakın:
Tür | Gerekli | Örnek |
---|---|---|
dize | İsteğe bağlı | shape: "rectangular" |
Aşağıdaki tabloda kullanılabilir düğme şekilleri ve açıklamaları listelenmiştir:
Şekil | |
---|---|
rectangular |
|
pill |
|
circle |
|
square |
logo_alignment
Google logosunun hizalaması. left
, varsayılan değerdir. Bu özellik yalnızca standard
düğme türü için geçerlidir. Daha fazla bilgi için aşağıdaki tabloya bakın:
Tür | Gerekli | Örnek |
---|---|---|
dize | İsteğe bağlı | 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 | Gerekli | Örnek |
---|---|---|
dize | İsteğe bağlı | width: "400" |
locale
İ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ı | locale: "zh_CN" |
click_listener
click_listener
özelliğini kullanarak, Google ile oturum aç düğmesi tıklandığında çağrılacak bir JavaScript işlevi tanımlayabilirsiniz.
google.accounts.id.renderButton(document.getElementById("signinDiv"), { theme: 'outline', size: 'large', click_listener: onClickHandler }); function onClickHandler(){ console.log("Sign in with Google button clicked...") }
Bu örnekte, Google ile oturum aç düğmesi tıklandığında Google ile oturum aç düğmesi tıklandığında... mesajı konsola kaydedilir.
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" |
Veri türü: Kimlik bilgisi
native_callback
işleviniz çağrıldığında, parametre olarak bir Credential
nesnesi aktarılır. 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, kullanıcı deneyiminin bir ölü döngüsünü önler. Yöntemin aşağıdaki kod snippet'ini inceleyin:
google.accounts.id.disableAutoSelect()
Aşağıdaki kod örneği, google.accounts.id.disableAutoSelect
yöntemini onSignout()
işleviyle uygular:
<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 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ği, google.accounts.id.storeCredential
yöntemini onSignIn()
işleviyle uygular:
<script>
function onSignIn() {
let cred = {id: '...', password: '...'};
google.accounts.id.storeCredential(cred);
}
</script>
Yöntem: google.accounts.id.cancel
İstemi bağlı taraf DOM'den kaldırırsanız One Tap akışını iptal edebilirsiniz. Bir kimlik bilgisi zaten 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ği, google.accounts.id.cancel()
yöntemini onNextButtonClicked()
işleviyle uygular:
<script>
function onNextButtonClicked() {
google.accounts.id.cancel();
showPasswordPage();
}
</script>
Kitaplık yükleme geri çağırması: onGoogleLibraryLoad
onGoogleLibraryLoad
geri çağırması kaydedebilirsiniz. Google JavaScript ile Oturum Açma kitaplığı
yüklendikten sonra bildirim gönderilir:
window.onGoogleLibraryLoad = () => {
...
};
Bu geri çağırma yalnızca window.onload
geri çağırma işleminin kısayolu. Davranış açısından bir fark yoktur.
Aşağıdaki kod örneği, bir onGoogleLibraryLoad
geri çağırması 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 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ü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 aktarılır. Aşağıdaki tabloda, iptal yanıtı nesnesinde bulunan alanlar listelenmiştir:
Alan | |
---|---|
successful |
Bu alan, yöntem çağrısının döndürülen 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" (doğru), başarısız olduğunda "false" (yanlış) olarak ayarlanmış 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 tanımlanmamış olur.