Bu referans sayfasında, Oturum Açma JavaScript API'si açıklanmaktadır. Web sayfalarınızda One Tap 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öntemle ilgili aşağıdaki kod örneğini inceleyin:
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 Google ile Oturum Açma istemci örneği oluşturur.
- Aynı web sayfasında birden çok modül (ör. One Tap, Kişiselleştirilmiş düğme, iptal vb.) kullanıyor olsanız bile
google.accounts.id.initializeyöntemini yalnızca bir kez çağırmanız gerekir. google.accounts.id.initializeyöntemini birden çok kez çağırırsanız yalnızca son çağrıdaki yapılandırmalar hatırlanıp 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ında bunu izleyen tüm yeni 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ç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ı istem dışında bir yeri 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 alanda ve alt alan adlarında One Tap'i çağırmanız gerekiyorsa paylaşılan tek bir çerezin kullanılması 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 yerleştirmesine izin verilen kaynaklar. Bu alan gösterilirse bir kez dokunma işlemi ara iframe modunda çalışı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 UX'i etkinleştirir. |
client_id
Bu alan, Google Developers 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 | Zorunlu | Örnek |
|---|---|---|
| string | Evet | client_id: "CLIENT_ID.apps.googleusercontent.com" |
otomatik_seç
Bu alan, uygulamanızı daha önce onaylayan tek bir Google oturumu olduğunda, bir kimlik jetonunun hiç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 |
|---|---|---|
| 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. Google One One veya Google ile Oturum Açma düğmesi popup kullanıcı deneyimi modu kullanılıyorsa bu özellik gereklidir.
Daha fazla bilgi için aşağıdaki tabloya bakın:
| Tür | Zorunlu | Örnek |
|---|---|---|
| fonksiyon | One Tap ve popup kullanıcı deneyimi modu için gereklidir |
callback: handleResponse |
oturum_açma_uri
Bu özellik, giriş uç noktanızın URI'sıdır. Mevcut sayfa giriş sayfanız ise atlanabilir. Bu durumda kimlik bilgisi varsayılan olarak bu sayfada yayınlanır.
Bir kullanıcı Google ile Oturum Aç 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 mevcut sayfanın URI'sını veya belirttiğiniz değeri belirtir. 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 olan bir credential anahtarı içeren POST isteklerini işlemelidir.
Aşağıda giriş uç noktanız için örnek bir istek verilmiştir:
POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
credential=ID_TOKEN
yerel_geri çağırma
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 |
|---|---|---|
| fonksiyon | İsteğe bağlı | native_callback: handleResponse |
iptal et_on_tap_outside
Bu alan, kullanıcı istem dışında bir alanı tıklarsa One Tap isteğinin iptal edilip edilmeyeceğini ayarlar. 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 |
|---|---|---|
| boolean | İsteğe bağlı | cancel_on_tap_outside: false |
İstem_üst_kimlik
Bu özellik, kapsayıcı öğenin DOM kimliğini ayarlar. Ayarlanmamışsa pencerenin sağ üst köşesinde One Tap istemi gösterilir. Daha fazla bilgi için aşağıdaki tabloya bakın:
| Tür | Zorunlu | Örnek |
|---|---|---|
| string | İsteğe bağlı | prompt_parent_id: 'parent_id' |
tek seferlik rastgele sayı
Bu alan, tekrarlama 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 |
|---|---|---|
| string | İ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, One Tap isteminde başlık ve mesajların metnini değiştirir. Daha fazla bilgi için aşağıdaki tabloya bakın:
| Tür | Zorunlu | Örnek |
|---|---|---|
| string | İsteğe bağlı | context: "use" |
Aşağıdaki tabloda mevcut bağlamlar ve açıklamaları listelenmektedir:
| İçerik | |
|---|---|
signin |
"Google ile oturum aç" |
signup |
"Google'a kaydolun" |
use |
"Google ile kullan" |
eyalet_çerez_alanı
Üst alanda ve alt alanlarında One Tap'i görüntülemeniz 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 |
|---|---|---|
| string | İsteğe bağlı | state_cookie_domain: "example.com" |
ux_modu
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 Bu özelliğin OneTap kullanıcı deneyimi üzerinde hiçbir etkisi yoktur. Daha fazla bilgi için aşağıdaki tabloya bakın:
| Tür | Zorunlu | Örnek |
|---|---|---|
| string | İ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 |
Pop-up pencerede oturum açma kullanıcı deneyimi akışı gerçekleştirir. |
redirect |
Tam sayfa yönlendirmesiyle oturum açma kullanıcı deneyimi akışı gerçekleştirir. |
izin verilen_ebeveyn_kaynak
Ara iframe yerleştirmesine izin verilen kaynaklar. Bu alan gösterilirse 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ı listelenmektedir.
| 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 ön ekleri de desteklenir. Örneğin, "https://*.example.com" example.com ve tüm alt düzeylerle (ör.news.example.com, login.news.example.com) eşleşir. Joker karakterler kullanırken akılda bulundurulması gerekenler:
- Kalıp dizeleri yalnızca joker karakter ve üst düzey alandan oluşamaz. Örneğin,
https://*.comvehttps://*.co.ukgeçersizdir. Yukarıda belirtildiği gibi"https://*.example.com",example.comve alt alanlarıyla eşleşir. Diziyi 2 farklı alanı temsil etmek için de kullanabilirsiniz. Örneğin,["https://example1.com", "https://*.example2.com"];example1.com,example2.comveexample2.comalt alanlarıyla eşleşir - Joker karakterli alanlar güvenli https:// şemasıyla başlamalıdır.
"*.example.com"geçersiz sayılacak.
allowed_parent_origin alanının değeri geçersizse, ortadaki iframe modunun Tek Dokunuş başlatma işlemi başarısız olur ve durur.
orta_iframe_close_callback
Kullanıcılar Tek Dokunma kullanıcı arayüzünde "X" düğmesine dokunarak varsayılan olarak 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çerlidir. Bu işlem, One Tap iframe'i 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 | Zorunlu | Örnek |
|---|---|---|
| fonksiyon | İsteğe bağlı | intermediate_iframe_close_callback: logBeforeClose |
itp_destek
Bu alan, Akıllı İzleme Önleme (ITP) özelliğini destekleyen tarayıcılarda yeni sürüme yükseltilmiş One Tap Kullanıcı Deneyimi'nin 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 |
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öntemle ilgili aşağıdaki kod örneğini inceleyin:
google.accounts.id.prompt(/**
@type{(function(!PromptMomentNotification):void)=} */ momentListener)
Normalde prompt() yöntemi, sayfa yüklemesinde çağrılır. Google tarafındaki oturum durumu ve kullanıcı ayarları nedeniyle One Tap istemi kullanıcı arayüzü gösterilmeyebilir. Farklı anlara ait kullanıcı arayüzü durumu hakkında bildirim almak için bir işlev girerek kullanıcı arayüzü durumu bildirimleri alın.
Bildirimler şu anda 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 işlem, One Tap istemi otomatik iptal veya manuel iptal nedeniyle kapatıldığında ya da Google, kimlik bilgisi düzenleyemediğinde (ör. seçilen oturumda Google oturumu kapatıldığında) gerçekleşir.
Bu gibi durumlarda, bir sonraki kimlik sağlayıcılarınıza devam etmenizi öneririz.
Kapatılan an: Bu, 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 reddedilen bir anı 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ü: İstemAnında Bildirimi
Aşağıdaki tabloda PromptMomentNotification veri türünün yöntemleri ve açıklamaları listelenmiştir:
| Yöntem | |
|---|---|
isDisplayMoment() |
Bu bildirim görüntüleme anına ait mi? |
isDisplayed() |
Bu bildirim bir görüntüleme anına ait mi ve kullanıcı arayüzü gösteriliyor mu? |
isNotDisplayed() |
Bu bildirim bir görüntüleme anına ait mi ve kullanıcı arayüzü gösterilmiyor mu? |
getNotDisplayedReason() |
Kullanıcı arayüzünün gösterilmemesinin ayrıntılı nedeni. Aşağıda, olası değerler verilmiştir:
|
isSkippedMoment() |
Bu bildirim atlanan bir an için mi? |
getSkippedReason() |
Atlanan anın ayrıntılı nedeni. Aşağıda, olası değerler verilmiştir:
|
isDismissedMoment() |
Bu bildirim reddedilen bir an için mi? |
getDismissedReason() |
Reddedilmenin ayrıntılı nedeni. Aşağıda, olası değerler verilmiştir:
|
getMomentType() |
An türü için bir dize döndürün. Aşağıda, olası değerler verilmiştir:
|
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 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. |
yeterlilik belgesi
Bu alan, base64 kodlu bir JSON Web Token (JWT) dizesi olarak kimlik jetonudur.
Kod çö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 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 genel olarak benzersiz bir tanımlayıcı içerir.
email, email_verified ve hd alanlarını kullanarak Google'ın bir e-posta adresi barındırıp barındırmadığını ve yetkili olup olmadığını belirleyebilirsiniz. Google'ın yetkili olduğu durumlarda, kullanıcının şu anda hesabın sahibi olduğu bilinmektedir.
Google'ın yetkili olduğu durumlar:
emailbir@gmail.comson ekine sahip. Bu bir Gmail hesabı.email_verifieddoğru vehdayarlandı. Bu bir G Suite hesabıdır.
Kullanıcılar Gmail veya G Suite kullanmadan Google Hesaplarına kaydolabilir. email içinde @gmail.com son eki bulunmadığında hd yoksa Google yetkili değildir ve kullanıcıyı doğrulamak için şifre veya başka sorgulama yöntemleri önerilir. Google, Google hesabı oluşturulurken kullanıcıyı ilk kez doğruladığından da email_verfied doğru olabilir ancak üçüncü taraf e-posta hesabının sahipliği değişmiş olabilir.
seçme_seçeneği
Aşağıdaki tabloda select_by alanı için olası değerler listelenmiştir. Oturum ve izin durumuyla birlikte kullanılan
düğme türü, değeri ayarlamak için kullanılır.
Kullanıcı, One Tap veya Google ile Oturum Açma düğmesine bastı veya dokunmatik olmayan Otomatik oturum açma işlemini kullandı.
Mevcut bir oturum bulundu veya kullanıcı, yeni bir oturum oluşturmak için bir Google Hesabı'nda oturum açtı.
Kimlik jetonu kimlik bilgilerini uygulamanızla paylaşmadan önce kullanıcı,
- Kimlik bilgilerinin paylaşılmasına izin vermek için Onayla düğmesine basın veya
- ve daha önce rıza vermiş ve bir Google Hesabı seçmek için Hesap Seç özelliğini kullanmışlardır.
Bu alanın değeri bu türlerden birine ayarlanmıştır.
| Değer | Açıklama |
|---|---|
auto |
Kimlik bilgilerini paylaşmak için daha önce izin vermiş olan bir kullanıcının otomatik olarak oturum açması. |
user |
Mevcut bir oturumu daha önce izin vermiş olan bir kullanıcı, kimlik bilgilerini paylaşmak için One Tap'e "Farklı devam et" düğmesine bastı. |
user_1tap |
Mevcut bir oturumu olan kullanıcı, izin vermek ve kimlik bilgilerini paylaşmak için One Tap'e "Farklı devam et" düğmesine bastı. Yalnızca Chrome 75 ve sonraki sürümler için geçerlidir. |
user_2tap |
Oturumu olmayan bir kullanıcı, hesap seçmek için One Tap "Devam" düğmesine ve ardından pop-up pencerede Onayla düğmesine basarak izin verebilir ve kimlik bilgilerini paylaşabilir. Chromium tabanlı olmayan tarayıcılar için geçerlidir. |
btn |
Halihazırda oturum açmış olan bir kullanıcı, Google ile Oturum Aç düğmesine bastı ve kimlik bilgilerini paylaşmak için "Hesap Seç" bölümünden Google Hesabı seçti. |
btn_confirm |
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 |
Önceden oturum izni vermiş olan 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 |
Oturumu olmayan bir kullanıcı, önce bir Google Hesabı seçmek için Google ile oturum aç düğmesine ve ardından izin vermek ve kimlik bilgilerini paylaşmak için Onayla düğmesine bastı. |
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öntemle ilgili aşağıdaki kod örneğini inceleyin:
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, dolu_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çın" veya "Google ile kaydolun". |
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ç düğmesi tıklandığında bu işlev çağrılır. |
Özellik türleri
Aşağıdaki bölümlerde her ö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 |
|---|---|---|
| string | Evet | type: "icon" |
Aşağıdaki tabloda kullanılabilir düğme türleri ve açıklamaları listelenmektedir:
| Tür | |
|---|---|
standard |
Metin veya kişiselleştirilmiş bilgiler içeren bir düğme:
|
icon |
Metin içermeyen bir simge düğmesi:
|
tema
Düğme teması. Varsayılan değer: outline Daha fazla bilgi için aşağıdaki tabloya bakın:
| Tür | Zorunlu | Örnek |
|---|---|---|
| string | İsteğe bağlı | theme: "filled_blue" |
Aşağıdaki tabloda mevcut temalar ve açıklamaları listelenmektedir:
| Tema | |
|---|---|
outline |
Standart düğme teması:
|
filled_blue |
Mavi dolgulu düğme teması:
|
filled_black |
Siyah renkli düğme teması:
|
boy
Düğme boyutu. Varsayılan değer: large Daha fazla bilgi için aşağıdaki tabloya bakın:
| Tür | Zorunlu | Örnek |
|---|---|---|
| string | İsteğe bağlı | size: "small" |
Aşağıdaki tabloda, kullanılabilir düğme boyutları ve açıklamaları listelenmektedir:
| Boyut | |
|---|---|
large |
Büyük bir düğme:
|
medium |
Orta boyutlu düğme:
|
small |
Küçük bir düğme:
|
kısa mesaj
Düğme metni. Varsayılan değer: signin_with Farklı text özelliklerine sahip simge düğmelerinin metni için görsel farklılıklar yoktur.
Tek istisna, metnin ekrandaki erişilebilirlik için okunmasıdır.
Daha fazla bilgi için aşağıdaki tabloya bakın:
| Tür | Zorunlu | Örnek |
|---|---|---|
| string | İsteğe bağlı | text: "signup_with" |
Aşağıdaki tabloda kullanılabilir düğme metinleri ve açıklamaları listelenmektedir:
| Metin | |
|---|---|
signin_with |
"Google ile oturum aç" düğme metni:
|
signup_with |
"Google'a kaydolun" düğme metni:
|
continue_with |
"Google ile devam et" düğme metni:
|
signin |
Düğme metni "Oturum aç" şeklindedir:
|
shape
Düğme şekli. Varsayılan değer: rectangular Daha fazla bilgi için aşağıdaki tabloya bakın:
| Tür | Zorunlu | Örnek |
|---|---|---|
| string | İsteğe bağlı | shape: "rectangular" |
Aşağıdaki tabloda kullanılabilir düğme şekilleri ve açıklamaları listelenmektedir:
| Şekil | |
|---|---|
rectangular |
Dikdörtgen şekilli düğme. icon düğme türü için kullanılıyorsa bu değer square ile aynıdır.
|
pill |
Hap şeklindeki düğme. icon düğme türü için kullanılıyorsa bu değer circle ile aynıdır.
|
circle |
Daire şeklindeki düğme. standard düğme türü için kullanılıyorsa bu değer pill ile aynıdır.
|
square |
Kare şekilli düğme. standard düğme türü için kullanılıyorsa bu değer rectangular ile aynıdır.
|
logo_hizalama
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 |
|---|---|---|
| string | İsteğe bağlı | logo_alignment: "center" |
Aşağıdaki tabloda kullanılabilir hizalamalar ve açıklamaları listelenmiştir:
| logo_hizalama | |
|---|---|
left |
Google logosunu sola hizalar.
|
center |
Google logosunu ortaya hizalar.
|
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 |
|---|---|---|
| string | İsteğe bağlı | width: 400 |
locale
Düğme metninin önceden ayarlanmış yerel ayarı. Ayarlanmamışsa, 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 olabilirler.
Daha fazla bilgi için aşağıdaki tabloya bakın:
| Tür | Zorunlu | Örnek |
|---|---|---|
| string | İsteğe bağlı | locale: "zh_CN" |
tıklama_listesi
Google ile oturum aç düğmesi click_listener özelliği kullanılarak çağrıldığı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...")
}
Yukarıdaki örnekte, Google ile oturum aç düğmesi tıklanıyor... mesajı, Google ile oturum aç düğmesi tıklandığında konsola kaydedilir.
Veri türü: Kimlik bilgisi
native_callback işleviniz çağrıldığında, parametre olarak bir Credential nesnesi iletilir. Aşağıdaki tabloda nesnede yer alan 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ı deneyiminde geçersiz bir döngünün oluşmasını engeller. Yöntemin aşağıdaki kod snippet'ine bakın:
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 basit bir sarmalayıcıdır. Bu nedenle, yalnızca şifreyle ilgili kimlik bilgilerini depolamak için kullanılabilir. Yöntemle ilgili aşağıdaki kod örneğini inceleyin:
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. Kimlik bilgisi seçilmişse iptal işlemi yok sayılır. Yöntemin aşağıdaki kod örneğini inceleyin:
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
Bir onGoogleLibraryLoad geri çağırma kaydedebilirsiniz. Google ile Oturum Açma JavaScript kitaplığı yüklendikten sonra bilgilendirilir.
window.onGoogleLibraryLoad = () => {
...
};
Bu geri çağırma yalnızca window.onload geri çağırma işleminin bir kısayoludur. Davranışta 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 erişim iznini iptal eder. Yöntemin aşağıdaki kod snippet'ine bakın:
google.accounts.id.revoke(hint, callback)
| Parametre | Tür | Açıklama |
|---|---|---|
hint |
string | 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 |
fonksiyon | İsteğe bağlı RevocationResponse işleyicisi. |
Aşağıdaki kod örneği, bir kimlikle birlikte revoke yönteminin nasıl kullanıldığını göstermektedir.
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ürme değeridir. |
error |
Bu alan isteğe bağlı olarak ayrıntılı bir hata yanıtı mesajı içerir. |
başarılı
Bu alan, iptal etme yöntemi başarılı olduysa başarısız olduğunda veya yanlış değerine ayarlandığında yanlış olarak ayarlanmış bir boole değeridir.
hata
Bu alan bir dize değeridir ve iptal etme yöntemi çağrısı başarısız olursa ayrıntılı bir hata mesajı içerir.