Google JavaScript API referansıyla oturum açma

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"

Ü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 ve https://.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şme example1.com, example2.com ve example2.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:

  • browser_not_supported
  • invalid_client
  • missing_client_id
  • opt_out_or_no_session
  • secure_http_required
  • suppressed_by_user
  • unregistered_origin
  • unknown_reason
ziyaret edin. Not: FedCM, etkin ise bu yöntem desteklenmez. Görüntüleyin FedCM'ye geçiş sayfasına bakın.
isSkippedMoment() Bu bildirim, atlanan bir an için mi?
getSkippedReason()

Atlanan anın ayrıntılı nedeni. Bu alanlar: olası değerler:

  • auto_cancel
  • user_cancel
  • tap_outside
  • issuing_failed
ziyaret edin. Not: FedCM, etkin ise bu yöntem desteklenmez. Görüntüleyin FedCM'ye geçiş sayfasına bakın.
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:

  • credential_returned
  • cancel_called
  • flow_restarted
getMomentType()

An türü için bir dize döndürün. Aşağıdakiler mümkündür değerleri:

  • display
  • skipped
  • dismissed

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
Metin veya kişiselleştirilmiş bilgiler içeren düğme.
icon
Metin içermeyen simge düğmesi.

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
Standart bir düğme teması.
filled_blue
Mavi dolgulu bir düğme teması.
filled_black
Siyah dolu bir düğme teması.

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
Büyük boyutlu standart düğme Büyük simge düğmesi Büyük, kişiselleştirilmiş bir düğme
Büyük bir düğme.
medium
Orta seviye standart düğme Orta boy simge düğmesi
Orta boyutlu bir düğme.
small
Küçük bir düğme Küçük simge düğmesi
Küçük bir düğme.

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
Düğme metni "Google ile oturum açın" şeklindedir.
signup_with
Düğme metni "Google ile kaydolun" şeklindedir.
continue_with
Düğme metni "Google ile Devam Et" şeklindedir.
signin
Düğme metni "Oturum aç" şeklindedir.

ş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
Dikdörtgen şekilli düğme. icon için kullanılıyorsa düğme türündeyse square ile aynıdır.
pill
Hap şeklindeki düğme. icon düğmesi için kullanılırsa türü, circle ile aynı olur.
circle
Daire şeklindeki düğme. standard için kullanılıyorsa düğme türündeyse pill ile aynıdır.
square
Kare şekilli düğme. standard için kullanılıyorsa düğme türündeyse 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 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
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
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ış.