Bu referans sayfasında, Oturum Açma JavaScript API'si açıklanmaktadır. Bu API'yi kullanabilirsiniz web sayfalarınızda One Tap istemini veya Google ile Oturum Aç düğmesini görüntülemek için.
Yöntem: google.accounts.id.initialize
google.accounts.id.initialize
yöntemi, Google ile Oturum Açma işlemini başlatır
kullanarak yapılandırma nesnesine bağlı olarak değiştirebilirsiniz. Aşağıdaki kod örneğine bakın:
yöntem:
google.accounts.id.initialize(IdConfiguration)
Aşağıdaki kod örneği google.accounts.id.initialize
yöntemini uygular
onload
işleviyle:
<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, Google ile Oturum Açma istemcisi oluşturur
aynı web sayfasındaki tüm modüller tarafından kapalı olarak kullanılabilen bir örneğidir.
google.accounts.id.initialize
yöntemini yalnızca bir kez çağırmanız yeterlidir. One Tap, Kişiselleştirilmiş düğme, iptal veya vb.) olmasını öneririz.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.
Bir Google Hesabı'nı her çağırdığınızda yapılandırmaları
google.accounts.id.initialize
yöntemi ve sonraki tüm yöntemler aynı
web sayfasının hemen yeni yapılandırmaları kullanması gerekir.
Veri türü: IdConfiguration
Aşağıdaki tabloda IdConfiguration
alanları ve açıklamaları listelenmiştir
veri türü:
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 şunu kullanır:
özelliğini gönderin. |
login_uri |
Giriş uç noktanızın URL'si. Google ile Oturum Aç 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 aramanız gerekiyorsa üst alanı bu alana geçirin. Böylece, tek bir paylaşılan çerez kullanılır. |
ux_mode |
Google ile Oturum Aç düğmesi kullanıcı deneyimi akışı |
allowed_parent_origin |
Ara iframe'i yerleştirmesine izin verilen kaynaklar. Tek dokunuşla işlevi, ara iframe modunda çalıştırılır. |
intermediate_iframe_close_callback |
Kullanıcılar manuel olarak yaptıklarında varsayılan ara iframe davranışını geçersiz kılar One Tap'i kapatın. |
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 alana göre sınırlayın. |
use_fedcm_for_prompt |
Tarayıcının, kullanıcı oturum açma istemlerini kontrol etmesine ve arabuluculuk yapmasına izin ver Google arasındaki oturum açma akışını anlamanız gerekir. |
client_id
Bu alan, uygulamanızın istemci kimliğidir ve Google Cloud konsolunu kullanın. 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, herhangi bir kullanıcı olmadan otomatik olarak bir kimlik jetonunun döndürülüp döndürülmeyeceğini belirler
uygulamanızı onaylayan tek bir Google oturumu olduğunda etkileşim
kontrol edin. Varsayılan değer: false
. Daha fazla bilgi için aşağıdaki tabloya bakın
bilgi:
Tür | Zorunlu | Örnek |
---|---|---|
boolean | İsteğe bağlı | auto_select: true |
geri çağırma
Bu alan, şuradan döndürülen kimlik jetonunu işleyen JavaScript işlevidir:
One Tap istemi veya pop-up pencere. Bu özellik, Google
One Tap veya Google ile Oturum Aç düğmesi popup
kullanıcı deneyimi modu kullanılır. Bkz.
aşağıdaki tabloya bakın:
Tür | Zorunlu | Ö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 için yetkili yönlendirme URI'lerinden biriyle tam olarak eşleşmelidir Yapılandırdığınız 2.0 istemcisi ve Yönlendirme URI'si doğrulamamıza uygun olması gerekir. kuralları hakkında daha fazla bilgi edinin.
Geçerli sayfa, giriş sayfanızsa ve giriş sayfanızsa, bu varsayılan olarak bu sayfada yayınlanır.
Bir kullanıcı aşağıdaki işlemleri gerçekleştirdiğinde kimlik jetonu kimlik bilgisi yanıtı, giriş uç noktanızda yayınlanır. Google ile Oturum Aç düğmesini tıklar ve yönlendirme kullanıcı deneyimi modu kullanılır.
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ğ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,
credential
tuşunu kullanarak
Gövdedeki kimlik jetonu değeri.
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, şifreyi işleyen JavaScript işlevinin adıdır. tarayıcının yerel kimlik bilgisi yöneticisinden döndürülen kimlik bilgisi. Bkz. 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ı tıkladığında Tek Dokunma isteğinin iptal edilip edilmeyeceğini belirler
kullanabilirsiniz. Varsayılan değer: true
. Bu özelliği devre dışı bırakabilirsiniz.
değeri false
olarak ayarlayın. 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ı öğenin DOM kimliğini ayarlar. Ayarlanmamışsa Pencerenin sağ üst köşesinde One Tap istemi gösterilir. Bkz. 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 boyutuyla sınırlıdır. ve ayrı tarayıcı ve sunucu HTTP boyutu kısıtlamalarına sahiptir.
context
Bu alan, One Tap istemindeki başlık ve mesajların metnini değiştirir. Görüntüleyin 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 tüm mevcut 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 ve alt alan adlarında One Tap'i göstermeniz gerekiyorsa bu alana üst alan adını ekler ve böylece tek bir paylaşılan durum çerezi kullanılır. Görüntüleyin 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ç düğmesinin kullandığı kullanıcı deneyimi akışını ayarlamak için bu alanı kullanın. İlgili içeriği oluşturmak için kullanılan
popup
varsayılan değerdir. Bu özelliğin OneTap kullanıcı deneyimi üzerinde bir etkisi yoktur. Bkz.
aşağıdaki tabloya bakın:
Tür | Zorunlu | Örnek |
---|---|---|
dize | İsteğe bağlı | ux_mode: "redirect" |
Aşağıdaki tabloda, kullanılabilen kullanıcı deneyimi modları ve açıklamaları listelenmiştir.
UX 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. |
allowed_parent_origin
Ara iframe'i yerleştirmesine izin verilen kaynaklar. One Tap koşuları bu alan varsa ara iframe modunda. Aşağıdakilere göz atın tablosuna 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 ö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
). Kullanım sırasında göz önünde bulundurulması gereken noktalar
joker karakterler:
- Kalıp dizeleri yalnızca bir joker karakter ve bir üst düzey bilgiden oluşamaz
alan adına sahip olmanız gerekir. Örneğin,
https://.com
vehttps://
.co.uk
geçersizdir; Yukarıda belirtildiği gibi,"https://.example.com"
example.com
ile ve alt alan adlarıyla eşleşiyor. Ayrıca şunu da kullanabilirsiniz: dizisidir. Örneğin,["https://example1.com", "https://
.example2.com"]
eşleşmeexample1.com
,example2.com
veexample2.com
alt alan adları - Joker karakter alanları, güvenli bir https:// şemasıyla başlamalıdır
"*.example.com"
geçersiz kabul edildi.
allowed_parent_origin
alanının değeri geçersizse One Tap
Ara iframe modunun başlatılması başarısız olur ve durur.
intermediate_iframe_close_callback
Kullanıcılar One'ı manuel olarak kapattığında varsayılan ara iframe davranışını geçersiz kılar "X"e dokunarak dokunun düğmesiyle de iletişim kurabilirsiniz. Varsayılan davranış Ara iframe'i DOM'den hemen kaldırın.
intermediate_iframe_close_callback
alanı yalnızca orta düzeyde etkilidir
iframe modunda. Ayrıca, reklam öğesinin sayfa görüntüleme sayısını değil,
One Tap iframe'i. One Tap kullanıcı arayüzü, geri arama çağrılmadan önce kaldırılır.
Tür | Zorunlu | Örnek |
---|---|---|
işlev | İsteğe bağlı | intermediate_iframe_close_callback: logBeforeClose |
itp_support
Bu alan,
yükseltilmiş One Tap kullanıcı deneyimi
Akıllı İzleme Önleme'yi destekleyen tarayıcılarda etkinleştirilmelidir
(ITP). Varsayılan değer false
değeridir. Daha fazla bilgi için aşağıdaki tabloya bakın
bilgi:
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ğlaması gerekir. İşlem başarılı olduğunda hesap seçimi atlanır. Kabul edilen değerler şunlardır: e-posta adresi veya kimlik jetonu sub alanı değeri.
Daha fazla bilgi edinmek için COPPA Connect'teki login_hint alanına bakın. belgelerinden faydalanabilirsiniz.
Tür | Zorunlu | Örnek |
---|---|---|
Dize, e-posta adresi veya kimlik jetonundan alınan değer
sub alanı boş bırakılamaz. |
İsteğe bağlı | login_hint: 'elisa.beckett@gmail.com' |
hd
Bir kullanıcının birden fazla hesabı varsa ve yalnızca Workspace ile oturum açması gerekiyorsa
Google'a bir alan adı ipucu sağlamak için bunu kullanır. Başarılı olduğunda, kullanıcı
Hesap seçimi sırasında görüntülenen hesaplar sağlanan alanla sınırlıdır.
Joker karakter değeri: *
, kullanıcıya yalnızca Workspace hesapları sunar ve şunları hariç tutar
hesap seçimi sırasında tüketici hesaplarına (kullanıcı@gmail.com) eklenmesine olanak tanır.
Daha fazla bilgi edinmek için COPPA Connect dokümanlarındaki 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 oturum açma akışını uyumlulaştırmasına izin ver web siteniz ile Google arasındaki Varsayılan olarak yanlış değerine ayarlanır. FedCM'ye geçiş konusunu inceleyin. sayfasına bakın.
Tür | Zorunlu | Örnek |
---|---|---|
boolean | İsteğe bağlı | use_fedcm_for_prompt: true |
Yöntem: google.accounts.id.prompt
google.accounts.id.prompt
yöntemi, One Tap istemini veya
initialize()
yöntemi çağrıldıktan sonra tarayıcının yerel kimlik bilgisi yöneticisini gönderir.
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. Oturum nedeniyle
One Tap istemi kullanıcı arayüzü, Google tarafından
görüntülenir. Farklı anlarla ilgili kullanıcı arayüzü durumu hakkında bildirim almak için
işlevini kullanın.
Bildirimler şu anlarda tetiklenir:
- Görüntüleme anı: Bu,
prompt()
yöntemi çağrıldıktan sonra gerçekleşir. İlgili içeriği oluşturmak için kullanılan bildirimi, kullanıcı arayüzünün görüntülenip görüntülenmeyeceğini belirler. Atlanan an: Bu durum, One Tap istemi otomatik bir komut tarafından kapatıldığında gerçekleşir veya Google’ın bir kimlik bilgisi sağlamaması (örneğin, (seçilen oturumda Google oturumu kapatıldığında).
Bu durumlarda, bir sonraki kimlikle devam etmenizi öneririz. sağlayıcı mevcut ise
Kapatılan an: Bu, Google bir veya bir kullanıcı kimlik bilgisi alma akışını durdurmak istiyorsa. Örneğin, Örneğin kullanıcı, hesabınıza kullanıcı adını ve şifresini girmeye başladığında iletişim kutusunu kapatmak için
google.accounts.id.cancel()
yöntemini çağırabilirsiniz One Tap istemine dokunup reddedilen bir anı tetikleyin.
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ü: PromptMomentBildirim
Aşağıdaki tabloda
PromptMomentNotification
veri türü:
Yöntem | |
---|---|
isDisplayMoment() |
Bu bildirim, görüntülenme an için mi? Not: FedCM, etkinleştirilirse bu bildirim tetiklenmez. Görüntüleyin FedCM'ye geçiş sayfasına bakın. |
isDisplayed() |
Bu bildirim bir görüntüleme anı için mi? Kullanıcı arayüzü
gösteriliyor mu? Not: FedCM, etkinleştirilirse bu bildirim tetiklenmez. Görüntüleyin FedCM'ye geçiş sayfasına bakın. |
isNotDisplayed() |
Bu bildirim bir görüntüleme anı için mi? Kullanıcı arayüzü
gösteriliyor mu? Not: FedCM, etkinleştirilirse bu bildirim tetiklenmez. Görüntüleyin FedCM'ye geçiş sayfasına bakın. |
getNotDisplayedReason() |
Kullanıcı arayüzünün gösterilmemesinin ayrıntılı nedeni. Bu alanlar: olası değerler:
|
isSkippedMoment() |
Bu bildirim, atlanan bir an için mi? |
getSkippedReason() |
Atlanan anın ayrıntılı nedeni. Bu alanlar: olası değerler:
|
isDismissedMoment() |
Bu bildirim, kapatılan bir an için mi? |
getDismissedReason() |
Kapatma kararının ayrıntılı nedeni. Aşağıdakiler mümkündür değerleri:
|
getMomentType() |
An türü için bir dize döndürün. Aşağıdakiler mümkündür değerleri:
|
Veri türü: CredentialResponse
callback
fonksiyonunuz çağrıldığında bir CredentialResponse
nesnesi
parametresiyle birlikte iletilir. Aşağıdaki tabloda, Google'a izin veren kullanıcıların
yanıt nesnesinde oturum açın:
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ı Google ile Oturum Aç'ı tıkladığında tanımlanır
oturum açma düğmesi ve düğmenin state
özelliğinin belirtildiğinden emin olun. |
yeterlilik belgesi
Bu alan, base64 kodlu bir JSON Web Token (JWT) dizesi olan kimlik jetonudur.
Zaman kodu çözülmüş, 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ıdır. Yalnızca
tüm Google ürünleri arasında benzersiz olduğundan, kullanıcı için tanımlayıcı olarak sub
alanını kullanın
Hesaplar ve hiçbir zaman yeniden kullanılmadı. Tanımlayıcı olarak e-posta adresi kullanmayın çünkü
bir Google Hesabı farklı zamanlarda birden fazla e-posta adresi içerebilir.
email
, email_verified
ve hd
alanlarını kullanarak Google'ın
bir e-posta adresi üzerinde yetki sahibidir. Google'ın,
kullanıcının meşru hesap sahibi olduğu onaylanır.
Google'ın yetkili olduğu durumlar:
email
adresinin@gmail.com
son eki var. Bu bir Gmail Hesabı.email_verified
doğru,hd
ayarlandı, bu bir Google Workspace hesap.
Kullanıcılar, Gmail veya Google Workspace kullanmadan Google Hesaplarına kaydolabilir.
email
bir @gmail.com
son eki içermiyorsa ve hd
yoksa Google
yetkili olmaması ve şifre ya da diğer giriş sorgulaması yöntemlerinin
kullanıcıyı doğrulayın. Google ilk kez doğrulandığı için, email_verfied
de doğru olabilir
Google Hesabı oluşturulurken kullanıcı, ancak üçüncü tarafın
taraf e-posta hesabı değişmiş olabilir.
exp
alanında, hesabınızdaki jetonu doğrulamanız için son kullanma tarihi gösterilir.
sunucu tarafındadır. Bir saat
Google ile Oturum Açma özelliğinden alınan kimlik jetonu için kullanılabilir. Bunun için
jetonu Geçerlilik süresi dolmadan önce
gerekir. Oturum yönetimi için exp
kodunu kullanmayın. Süresi dolmuş bir kimlik jetonu
kullanıcının oturumunun kapalı olduğu anlamına gelmez. Uygulamanız oturumdan sorumludur
iyi bir fırsattır.
select_by
Aşağıdaki tabloda select_by
alanına yönelik olası değerler listelenmiştir. İlgili içeriği oluşturmak için kullanılan
oturum ve izin durumuyla birlikte kullanılan düğme türünün türü,
değer,
Kullanıcı One Tap veya Google ile Oturum Aç düğmesine bastı ya da otomatik oturum açma işlemine olanak tanır.
Mevcut bir oturum bulundu veya kullanıcı bir oturum seçip Google Hesabı'na eklemeniz gerekir.
Kullanıcı, kimlik jetonu kimlik bilgilerini uygulamanızla paylaşmadan önce
- Kimlik bilgilerini paylaşma izni vermek için Onayla düğmesine bastı. veya
- ve daha önce bir hesap seçin. Google Hesabı.
Bu alanın değeri şu türlerden birine ayarlanır:
Değer | Açıklama |
---|---|
auto |
Mevcut oturumu olan ve daha önce daha önce kimlik bilgilerini paylaşmaya izin vermiş olmanız gerekir. Yalnızca şunlar için geçerlidir: FedCM dışındaki tarayıcılar. |
user |
Daha önce izin vermiş mevcut oturumu olan bir kullanıcı One Tap'te "Şu kullanıcı olarak devam et"e basıldı: düğmesini tıklayın. Geçerli yalnızca FedCM tarafından desteklenmeyen tarayıcılarda kullanılabilir. |
fedcm |
Bir kullanıcı One Tap için "Şu adla devam et"e bastı: paylaşma düğmesi kimlik bilgilerini girin. Yalnızca FedCM için geçerlidir destekleniyor izin verir. |
fedcm_auto |
Mevcut oturumu olan ve daha önce Daha önce FedCM One Tap'i kullanarak kimlik bilgilerinin paylaşılmasına izin vermişti. Yalnızca FedCM için geçerlidir destekleniyor izin verir. |
user_1tap |
Mevcut oturumu olan bir kullanıcı One Tap "Farklı devam et"e bastı düğmesini tıklayın. Yalnızca Chrome için geçerlidir Sürüm 75 ve sonraki sürümler. |
user_2tap |
Mevcut oturumu olmayan bir kullanıcı One Tap'te "Şu kullanıcı olarak devam et"e bastı: düğmesine basarak bir hesap seçin ve ardından pop-up pencere açılır. Geçerlilik kapsamı: tarayıcılarını kullanabilirsiniz. |
btn |
Daha önce izin vermiş mevcut oturumu olan bir kullanıcı Google ile Oturum Aç düğmesine bastım ve şuradan bir Google Hesabı seçti: "Bir Hesap Seçin" gerekiyor. |
btn_confirm |
Mevcut oturumu olan bir kullanıcı Google ile Oturum Aç düğmesine bastı ve Onayla düğmesine basarak izin verip kimlik bilgilerini paylaştı. |
btn_add_session |
Daha önce izin vermiş ve mevcut oturumu olmayan bir kullanıcı izin, bir Google Hesabı seçmek için Google ile Oturum Aç düğmesine bastı ve yeterlilik belgesini paylaşmaktır. |
btn_confirm_add_session |
Mevcut oturumu olmayan bir kullanıcı önce Google ile Oturum Aç'a bastı düğmesine basarak Google Hesabı'nı seçin ve ardından Onayla düğmesine düğmesini tıklayın. |
durum
Bu alan yalnızca kullanıcı oturum açmak için Google ile oturum aç düğmesini tıkladığında tanımlanır
oturum açar ve tıklanan düğmenin state
özelliği belirtilir. İlgili içeriği oluşturmak için kullanılan
bu alanın değeri düğmenin
state
özelliğini gönderin.
Birden fazla Google ile Oturum Aç düğmesi aynı sayfada oluşturulabildiğinden,
her düğmeye benzersiz bir dize atayabilir. Dolayısıyla, bu state
alanını
kullanıcının oturum açmak için hangi düğmeyi tıkladığını belirleyin.
Yöntem: google.accounts.id.renderButton
google.accounts.id.renderButton
yöntemi, Google ile Oturum Açma işlevini oluşturur
düğmesi ekleyin.
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ü:
Ö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çın" veya "Google ile kaydolun". |
shape |
Düğme şekli. Örneğin, dikdörtgen veya daire. |
logo_alignment |
Google logosunun hizalaması: sola veya ortaya. |
width |
Piksel cinsinden düğme genişliği. |
locale |
Ayarlanırsa düğme dili oluşturulur. |
click_listener |
Ayarlanırsa bu işlev, Google ile oturum açarken çağrılır. düğmesi tıklanı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 örneğine bakalım.
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 bunların özellikleri açıklamalar:
Tür | |
---|---|
standard |
|
icon |
tema
Düğme teması. Varsayılan değer: outline
. Aşağıdaki tabloya bakın:
daha fazla bilgi için:
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
. Aşağıdaki tabloya bakın:
daha fazla bilgi için:
Tür | Zorunlu | Örnek |
---|---|---|
dize | İsteğe bağlı | size: "small" |
Aşağıdaki tabloda, kullanılabilecek düğme boyutları ve açıklamaları listelenmiştir:
Boyut | |
---|---|
large |
|
medium |
|
small |
text (metin)
Düğme metni. Varsayılan değer: signin_with
. Görsel yok.
farklı text
özelliklerine sahip simge düğmelerinin metnindeki farklılıklar.
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 tüm kullanılabilir düğme metinleri ve açıklamalar:
Metin | |
---|---|
signin_with |
|
signup_with |
|
continue_with |
|
signin |
şekil
Düğme şekli. Varsayılan değer: rectangular
. Aşağıdaki tabloya bakın
şu adresi ziyaret ederek daha fazla bilgi edinebilirsiniz:
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 |
|
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
bilgi:
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örüntüle, aksi takdirde varsayılan olarak
kullanıcının Google Hesabı veya tarayıcı ayarları. hl
parametresini ekleyin ve
dil kodunu src yönergesine eklemek için kullanın, örneğin:
gsi/client?hl=<iso-639-code>
.
Ayarlanmadan bırakılırsa tarayıcının varsayılan yerel ayarı veya Google oturumu kullanıcısının kullanılır. Bu nedenle, farklı kullanıcılar düğmelerin yerelleştirilmesi ve muhtemelen farklı boyutlarda olması gerekir.
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
Google ile oturum açarken çağrılacak bir JavaScript işlevi tanımlayabilirsiniz.
düğmesi, click_listener
özelliği kullanılarak tıklanır.
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ı... mesajı günlüğe kaydedilir. Google ile Oturum Aç düğmesi tıklandığında konsola yönlendirilir.
durum
Birden fazla Google ile oturum açma düğmesi aynı anda oluşturulabildiğinden isteğe bağlı her bir düğmeye benzersiz bir dize atayabilirsiniz. Aynı dize kimlik jetonuyla birlikte döndürülür. Böylece, hangi düğme kullanıcısının oturum açmak için tıkladı.
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şlevi çağrılırsa parametre olarak bir Credential
nesnesi aktarılır. İlgili içeriği oluşturmak için kullanılan
nesnede bulunan alanlar aşağıdaki tabloda listelenmiştir:
Alan | |
---|---|
id |
Kullanıcıyı tanımlar. |
password |
Şifre |
Yöntem: google.accounts.id.disableAutoSelect
Kullanıcı web sitenizin oturumunu kapattığında, ilgili yöntemi çağırmanız gerekir.
Durumu çerezlere kaydetmek için google.accounts.id.disableAutoSelect
. Bu
UX ölü döngüsünü önler. 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 değiştirin:
<script>
function onSignout() {
google.accounts.id.disableAutoSelect();
}
</script>
Yöntem: google.accounts.id.storeCredential
Bu yöntem, tarayıcının yerel store()
yöntemi için bir sarmalayıcıdır
kimlik bilgisi yöneticisi API'si. Bu nedenle, yalnızca bir şifreyi depolamak için kullanılabilir.
kimlik bilgisi. 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 değiştirin:
<script>
function onSignIn() {
let cred = {id: '...', password: '...'};
google.accounts.id.storeCredential(cred);
}
</script>
Yöntem: google.accounts.id.cancel
İstemi bağlı taraftan kaldırırsanız One Tap akışını iptal edebilirsiniz DOM. Kimlik bilgileri zaten seçiliyse iptal işlemi yoksayılır. Görüntüleyin yöntemin aşağıdaki kod örneği:
google.accounts.id.cancel()
Aşağıdaki kod örneği google.accounts.id.cancel()
yöntemini uygular
onNextButtonClicked()
işleviyle:
<script>
function onNextButtonClicked() {
google.accounts.id.cancel();
showPasswordPage();
}
</script>
Kitaplık yükü geri çağırması: onGoogleLibraryLoad
onGoogleLibraryLoad
geri araması kaydedebilirsiniz. Tabela'dan sonra bildirim alırsınız
"Google JavaScript kitaplığıyla" bölümünde:
window.onGoogleLibraryLoad = () => {
...
};
Bu geri arama, yalnızca window.onload
geri çağırma işleminin kısayoludur. Hayır,
nasıl etkileyebileceğini öğreneceğiz.
Aşağıdaki kod örneğinde bir onGoogleLibraryLoad
geri çağırması uygulanı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 jetonu. Yöntemin aşağıdaki kod snippet'ine bakın:
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,sub
credential yükü. |
callback |
işlev | İsteğe bağlı RevocationResponse işleyici. |
Aşağıdaki kod örneğinde, revoke
yönteminin bir kimlik ile nasıl kullanılacağı gösterilmektedir.
google.accounts.id.revoke('1618033988749895', done => { console.log(done.error); });
Veri türü: RevocationResponse
callback
fonksiyonunuz çağrıldığında bir RevocationResponse
nesnesi
parametresiyle birlikte iletilir. Aşağıdaki tabloda, Google'a izin veren kullanıcıların
ifadesi:
Alan | |
---|---|
successful |
Bu alan, yöntem çağrısının döndürülen değeridir. |
error |
İsteğe bağlı olarak bu alan, ayrıntılı bir hata yanıtı mesajı içerir. |
tamamlandı
Bu alan, iptal yöntem çağrısı başarılı olursa veya doğru değerine ayarlanmış bir boole değeridir. false (yanlış) değerini alır.
hata
Bu alan bir dize değeridir ve iptal yöntem çağrısı başarısız oldu, başarı durumu tanımlanmamış.