Google JavaScript API referansıyla oturum açma

Bu referans sayfasında, Sign-In JavaScript API açıklanmaktadır. Bu API'yi, web sayfalarınızda tek dokunma istemini veya Google ile oturum açma düğmesini göstermek için 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ğinde, google.accounts.id.initialize yöntemi onload işleviyle uygulanmaktadır:

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt();
  };
</script>

google.accounts.id.initialize yöntemi, aynı web sayfasındaki tüm modüller tarafından örtülü olarak kullanılabilen bir Google ile oturum açma istemci örneği oluşturur.

  • Aynı web sayfasında birden fazla modül (ör. tek dokunuş, kişiselleştirilmiş düğme, iptal vb.) kullansanız bile google.accounts.id.initialize yöntemini yalnızca bir kez çağırmanız gerekir.
  • google.accounts.id.initialize yöntemini birden fazla kez çağırırsanız yalnızca son çağrıdaki yapılandırmalar hatırlanır ve kullanılır.

google.accounts.id.initialize yöntemini her çağırdığınızda yapılandırmaları sıfırlarsınız ve aynı web sayfasındaki sonraki tüm yöntemler yeni yapılandırmaları hemen kullanır.

Veri türü: IdConfiguration

Aşağıdaki tabloda IdConfiguration veri türünün alanları ve açıklamaları listelenmiştir:

Alan
client_id Uygulamanızın istemci kimliği
color_scheme One Tap istemine uygulanan renk şeması.
auto_select Otomatik seçimi etkinleştirir.
callback Kimlik jetonlarını işleyen JavaScript işlevi. Google One Tap ve Google ile oturum açma düğmesi popup kullanıcı deneyimi modu bu özelliği kullanır.
login_uri Giriş uç noktanızın URL'si. Google ile oturum açma düğmesi redirect UX modu bu özelliği kullanır.
native_callback Şifre kimlik bilgilerini işleyen JavaScript işlevi.
cancel_on_tap_outside Kullanıcı istemin dışını tıklarsa istemi iptal eder.
prompt_parent_id Tek Dokunma 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 Tek Dokunma'yı çağırmanız gerekiyorsa tek bir paylaşılan çerez kullanılması için üst alan adını bu alana iletin.
ux_mode Google ile oturum açma düğmesi kullanıcı deneyimi akışı
allowed_parent_origin Ara iframe'in yerleştirilmesine izin verilen kaynaklar. Bu alan varsa Tek Dokunuş, ara iFrame modunda çalıştırılır.
intermediate_iframe_close_callback Kullanıcılar Tek Dokunma'yı manuel olarak kapattığında varsayılan ara iFrame davranışını geçersiz kılar.
itp_support ITP tarayıcılarda geliştirilmiş tek dokunuşla ödeme kullanıcı deneyimini etkinleştirir.
login_hint Kullanıcı ipucu sağlayarak hesap seçimini atlayın.
hd Hesap seçimini alana göre sınırlayın.
use_fedcm_for_prompt Tarayıcının, kullanıcı oturum açma istemlerini kontrol etmesine ve web siteniz ile Google arasındaki oturum açma akışına aracılık etmesine izin verin.
use_fedcm_for_button Bu alan, Chrome'da (masaüstü M125+ ve Android M128+) FedCM düğmesi kullanıcı deneyiminin kullanılıp kullanılmayacağını belirler. Varsayılan olarak false'dır.
button_auto_select FedCM düğmesi akışı için otomatik seçme seçeneğinin etkinleştirilip etkinleştirilmeyeceği. Etkinleştirilirse etkin bir Google oturumu olan geri gelen kullanıcıların oturumu otomatik olarak açılır ve hesap seçici istemi atlanır.Varsayılan değer false'dır.

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 Zorunlu Örnek
dize Evet client_id: "CLIENT_ID.apps.googleusercontent.com"

color_scheme

Bu alan, tek dokunma istemine uygulanan renk şemasıdır. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Zorunlu Örnek
dize İsteğe bağlıdır. Varsayılan olarak kullanıcının sistemindeki varsayılan renk şeması kullanılır. color_scheme: "dark"

Aşağıdaki tabloda, kullanılabilir renk şemaları ve açıklamaları listelenmiştir.

Renk şeması
default Kullanıcının sisteminin varsayılan renk şemasını uygulayın. Kullanıcı tercihi şemasına bağlı olarak açık veya koyu renk şeması kullanılır.
light Açık renk şeması uygulayın.
dark Koyu renk şeması uygulayın.

auto_select

Bu alan, daha önce uygulamanızı onaylamış tek bir Google oturumu olduğunda kimlik jetonunun 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

callback

Bu alan, Tek Dokunma isteminden veya pop-up pencereden döndürülen kimlik jetonunu işleyen JavaScript işlevidir. Google One Tap veya Google ile oturum açma düğmesi popup kullanıcı deneyimi modu kullanılıyorsa bu özellik zorunludur. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Zorunlu Örnek
işlev Tek Dokunma ve popup kullanıcı deneyimi modu için gereklidir. callback: handleResponse

login_uri

Bu özellik, giriş uç noktanızın URI'sidir.

Değer, Google Cloud Console'da yapılandırdığınız OAuth 2.0 istemcisinin yetkili yönlendirme URI'lerinden biriyle tam olarak eşleşmeli ve Yönlendirme URI'si doğrulama kurallarımıza uygun olmalıdır.

Mevcut sayfa giriş sayfanızsa bu özellik atlanabilir. Bu durumda kimlik bilgisi varsayılan olarak bu sayfaya gönderilir.

Kullanıcı, Google ile Giriş Yap 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 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, gövdesinde kimlik jetonu değeri bulunan credential parametresini içeren POST isteklerini işlemelidir.

native_callback

Bu alan, tarayıcının yerleşik kimlik bilgisi yöneticisinden döndürülen şifre kimlik bilgisini işleyen JavaScript işlevinin adıdır. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Zorunlu Örnek
işlev İsteğe bağlı native_callback: handleResponse

cancel_on_tap_outside

Bu alan, kullanıcı istemin dışını tıkladığında Tek Dokunma isteğinin iptal edilip edilmeyeceğini belirler. Varsayılan değer: true. Değeri false olarak ayarlarsanız devre dışı bırakabilirsiniz. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Zorunlu Örnek
boolean İsteğe bağlı cancel_on_tap_outside: false

prompt_parent_id

Bu özellik, kapsayıcı öğenin DOM kimliğini ayarlar. Ayarlanmamışsa Tek Dokunma istemi pencerenin sağ üst köşesinde gösterilir. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Zorunlu Örnek
dize İsteğe bağlı prompt_parent_id: 'parent_id'

tek seferlik rastgele sayı

Bu alan, kimlik jetonunun yeniden oynatma saldırılarını önlemek için kullandığı 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ın desteklediği maksimum JWT boyutu ile tarayıcı ve sunucu HTTP boyut kısıtlamalarıyla sınırlıdır.

bağlam

Bu alan, tek dokunma isteminde gösterilen başlığın ve mesajların metnini değiştirir. ITP tarayıcılar için geçerli değildir. Varsayılan olarak signin değerine ayarlanır.

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, mevcut tüm bağlamlar ve açıklamaları listelenmiştir:

Bağlam
signin "Şurada oturum açın:"
signup "Şuna kaydol"
use "Kullanım"

Tek Tıklama'yı üst alan adında ve alt alan adlarında göstermeniz gerekiyorsa tek bir paylaşılan durum çerezi kullanılabilmesi için üst alan adını bu alana iletin. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Zorunlu Örnek
dize İsteğe bağlı state_cookie_domain: "example.com"

ux_mode

Google ile oturum açma düğmesi tarafından kullanılan kullanıcı deneyimi akışını ayarlamak için bu alanı kullanın. Varsayılan değer popup'dır. Bu özelliğin OneTap kullanıcı deneyimi üzerinde etkisi yoktur. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Zorunlu Örnek
dize İsteğe bağlı ux_mode: "redirect"

Aşağıdaki tabloda, kullanılabilen kullanıcı deneyimi modları ve açıklamaları listelenmiştir.

Kullanıcı deneyimi modu
popup Oturum açma kullanıcı deneyimi akışını pop-up pencerede gerçekleştirir.
redirect Tam sayfa yönlendirmesiyle oturum açma kullanıcı deneyimi akışını gerçekleştirir.

allowed_parent_origin

Ara iframe'in yerleştirilmesine izin verilen kaynaklar. Bu alan varsa Tek Dokunma, ara iFrame modunda çalışır. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Zorunlu Örnek
dize veya dize dizisi İsteğe bağlı allowed_parent_origin: "https://example.com"

Aşağıdaki tabloda desteklenen değer türleri ve açıklamaları listelenmiştir.

Değer Türleri
string Tek bir alan adı URI'si. "https://example.com"
string array Alan URI'lerinin dizisi. ["https://news.example.com", "https://local.example.com"]

Joker karakter önekleri de desteklenir. Örneğin, "https://*.example.com" tüm düzeylerdeki example.com ve alt alanlarıyla (ör.news.example.com, login.news.example.com) eşleşir. Joker karakterleri kullanırken dikkat edilmesi gerekenler:

  • Desen dizeleri yalnızca bir joker karakter ve üst düzey alan adından oluşamaz. Örneğin, https://.com ve https://.co.uk geçersizdir. Çünkü "https://.example.com", example.com ile ve tüm alt alanlarıyla eşleşir. İki farklı alanı temsil etmek için virgülle ayrılmış bir liste kullanın. Örneğin, "https://example1.com,https://.example2.com", example1.com ve example2.com alanlarıyla example2.com alt alanlarıyla eşleşir.
  • Joker karakterli alan adları güvenli bir https:// şemasıyla başlamalıdır. Bu nedenle, "*.example.com" geçersiz kabul edilir.

allowed_parent_origin alanının değeri geçersizse ara iFrame modunun tek dokunuşla başlatılması başarısız olur ve durdurulur.

intermediate_iframe_close_callback

Kullanıcılar, Tek Dokunma kullanıcı arayüzündeki "X" düğmesine dokunarak Tek Dokunma'yı manuel olarak kapattığında varsayılan ara iFrame davranışını geçersiz kılar. Varsayılan davranış, ara iframe'i DOM'dan hemen kaldırmaktır.

intermediate_iframe_close_callback alanı yalnızca ara iFrame modunda geçerli olur. Bu durum, Tek Dokunma iframe'i yerine yalnızca ara iframe'i etkiler. Geri arama başlatılmadan önce tek dokunma kullanıcı arayüzü kaldırılır.

Tür Zorunlu Örnek
işlev İsteğe bağlı intermediate_iframe_close_callback: logBeforeClose

itp_support

Bu alan, Akıllı Takip Önleme'yi (ITP) destekleyen tarayıcılarda yükseltilmiş tek dokunma kullanıcı deneyiminin etkinleştirilip etkinleştirilmeyeceğini belirler. Varsayılan değer false'dır. Daha fazla bilgi için aşağıdaki tabloya bakın:

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ğlayabilir. Başarılı olduğunda hesap seçimi atlanır. Kabul edilen değerler: e-posta adresi veya kimlik jetonu sub alan değeri.

Daha fazla bilgi için OpenID Connect belgelerindeki login_hint alanına bakın.

Tür Zorunlu Örnek
Dize, e-posta adresi veya kimlik jetonundaki bir alanın değeri. sub İsteğe bağlı login_hint: '[email protected]'

hd

Birden fazla hesabı olan ve yalnızca Workspace hesabıyla oturum açması gereken kullanıcılar için Google'a alan adı ipucu vermek üzere bu özelliği kullanın. İşlem başarılı olduğunda, hesap seçimi sırasında gösterilen kullanıcı hesapları sağlanan alanla sınırlanır. Joker karakter değeri: *, kullanıcıya yalnızca Workspace hesaplarını sunar ve hesap seçimi sırasında tüketici hesaplarını ([email protected]) hariç tutar.

Daha fazla bilgi için OpenID Connect belgelerindeki 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 web siteniz ile Google arasındaki oturum açma akışına aracılık etmesine izin verin. Varsayılan olarak false değerine ayarlanır. Daha fazla bilgi için FedCM'ye geçiş sayfasına bakın.

Tür Zorunlu Örnek
boolean İsteğe bağlı use_fedcm_for_prompt: true

use_fedcm_for_button

Bu alan, Chrome'da (masaüstü M125+ ve Android M128+) FedCM düğmesi kullanıcı deneyiminin kullanılıp kullanılmayacağını belirler. Varsayılan olarak false'dır. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Zorunlu Örnek
boolean İsteğe bağlı use_fedcm_for_button: true

button_auto_select

Bu alan, FedCM düğme akışı için otomatik seç seçeneğinin etkinleştirilip etkinleştirilmeyeceğini belirler. Etkinleştirilirse etkin bir Google oturumu olan geri gelen kullanıcıların oturumu, Hesap Seçici istemi atlanarak otomatik olarak açılır. Varsayılan olarak false'dır. Etkinleştirme lansmanı sırasında düğme ile otomatik oturum açma özelliğini açıkça etkinleştirmeniz gerekir. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Zorunlu Örnek
boolean İsteğe bağlı button_auto_select: true

Yöntem: google.accounts.id.prompt

google.accounts.id.prompt yöntemi çağrıldıktan sonra google.accounts.id.prompt yöntemi, tek dokunma istemini veya tarayıcıda yerleşik kimlik bilgisi yöneticisini gösterir.initialize() 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üklendiğinde çağrılır. Google tarafındaki oturum durumu ve kullanıcı ayarları nedeniyle Tek Dokunma istemi kullanıcı arayüzü gösterilmeyebilir. Farklı anlardaki kullanıcı arayüzü durumu hakkında bildirim almak için kullanıcı arayüzü durumu bildirimlerini alacak bir işlev iletin.

Bildirimler aşağıdaki anlarda tetiklenir:

  • Görüntüleme anı: Bu, prompt() yöntemi çağrıldıktan sonra gerçekleşir. Bildirim, kullanıcı arayüzünün gösterilip gösterilmediğini belirten bir Boole değeri içerir.
  • Atlanan an: Bu durum, tek dokunma istemi otomatik iptal, manuel iptal ile kapatıldığında veya Google, kimlik bilgisi vermediğinde (ör. seçilen oturumun Google oturumu kapatıldığında) meydana gelir.

    Bu durumlarda, varsa bir sonraki kimlik sağlayıcıya geçmenizi öneririz.

  • Kapatılan an: Bu durum, Google kimlik bilgilerini başarıyla aldığında veya kullanıcı kimlik bilgilerinin alınması 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 google.accounts.id.cancel() yöntemini çağırarak tek dokunmayla oturum açma istemini kapatabilir ve kapatma anını tetikleyebilirsiniz.

Aşağıdaki kod örneğinde atlanan an uygulanmaktadı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, bir gösterim 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österim anı için mi ve kullanıcı arayüzü gösteriliyor 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 bir görüntüleme anı için mi ve kullanıcı arayüzü gösterilmiyor 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österilmeme nedeninin ayrıntılı açıklaması. Aşağıdaki değerler gösterilebilir:

  • browser_not_supported
  • invalid_client
  • missing_client_id
  • opt_out_or_no_session
  • secure_http_required
  • suppressed_by_user
  • unregistered_origin
  • unknown_reason
Not: FedCM etkinleştirildiğinde bu yöntem desteklenmez. Daha fazla bilgi için FedCM'ye geçiş sayfasına bakın.
isSkippedMoment() Bu bildirim, atlanan bir anla mı ilgili?
getSkippedReason()

Atlanan anın ayrıntılı nedeni. Aşağıdaki değerler gösterilebilir:

  • auto_cancel
  • user_cancel
  • tap_outside
  • issuing_failed
Not: FedCM etkinleştirildiğinde bu yöntem desteklenmez. Daha fazla bilgi için FedCM'ye geçiş sayfasına bakın.
isDismissedMoment() Bu bildirim, kapatılan bir anla mı ilgili?
getDismissedReason()

Reddetme işleminin ayrıntılı nedeni. Aşağıdaki değerler mümkündür:

  • credential_returned
  • cancel_called
  • flow_restarted
getMomentType()

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

  • display
  • skipped
  • dismissed

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 Google'ın verdiği kodlanmış JWT kimlik jetonu.
select_by Kullanıcının oturum açma yöntemi.
state Bu alan yalnızca kullanıcı oturum açmak için Google ile oturum aç düğmesini tıkladığında ve düğmenin state özelliği belirtildiğinde tanımlanır.

yeterlilik belgesi

Bu alan, base64 kodlamalı JSON Web Token (JWT) dizesi olarak kimlik jetonudur.

JWT, kod çözüldüğünde 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": "[email protected]", // 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ı'nın genel olarak benzersiz tanımlayıcısıdır. sub alanı, tüm Google Hesapları arasında benzersiz olduğu ve asla yeniden kullanılmadığı için kullanıcı tanımlayıcısı olarak yalnızca bu alanı kullanın.

email, email_verified ve hd alanlarını kullanarak Google'ın bir e-posta adresini barındırıp barındırmadığını ve bu adres için yetkili olup olmadığını belirleyebilirsiniz. Google'ın yetkili olduğu durumlarda kullanıcının hesabın yasal sahibi olduğu onaylanır.

Google'ın yetkili olduğu durumlar:

  • email uzantısı varsa bu bir Gmail hesabıdır.@gmail.com
  • email_verified doğruysa ve hd ayarlanmışsa bu, Google Workspace hesabıdır.

Kullanıcılar, Gmail veya Google Workspace kullanmadan Google Hesabı'na kaydolabilir. email, @gmail.com sonekini içermediğinde ve hd yoksa Google yetkili değildir ve kullanıcının doğrulanması için şifre veya diğer sorgu yöntemleri önerilir. Google, Google Hesabı oluşturulurken kullanıcıyı ilk başta doğruladığı için email_verfied da doğru olabilir. Ancak üçüncü taraf e-posta hesabının sahipliği o zamandan beri değişmiş olabilir.

exp alanı, sunucu tarafında jetonu doğrulamanız için geçerlilik bitiş zamanını gösterir. Google ile oturum açma işleminden alınan kimlik jetonu için bu süre bir saattir. Son kullanma süresi dolmadan önce jetonu doğrulamanız gerekir. Oturum yönetimi için exp kullanmayın. Geçerliliği dolmuş bir 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 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ç düğmesine bastı ya da temassız otomatik oturum açma sürecini kullandı.

  • Mevcut bir oturum bulundu veya kullanıcı yeni bir oturum oluşturmak için bir Google Hesabı seçip bu hesapta oturum açtı.

  • Kullanıcı, kimlik jetonu kimlik bilgilerini uygulamanızla paylaşmadan önce

    • Kimlik bilgilerini paylaşma izni vermek için Onayla düğmesine bastıysa veya
    • Daha önce izin vermiş ve Google Hesabı seçmek için Hesap Seç'i kullanmışsa.

Bu alanın değeri şu türlerden birine ayarlanır:

Değer Açıklama
auto Daha önce kimlik bilgilerini paylaşma izni vermiş olan ve mevcut oturumu olan bir kullanıcının otomatik olarak oturum açması. Yalnızca FedCM'nin desteklenmediği tarayıcılar için geçerlidir.
user Daha önce izin vermiş olan ve mevcut bir oturumu olan bir kullanıcı, kimlik bilgilerini paylaşmak için tek dokunmayla "Şu kullanıcı olarak devam et" düğmesine bastı. Yalnızca FedCM'nin desteklenmediği tarayıcılarda geçerlidir.
fedcm Bir kullanıcı, FedCM kullanarak kimlik bilgilerini paylaşmak için tek dokunmayla "Devam et" düğmesine bastı. Yalnızca FedCM'nin desteklendiği tarayıcılar için geçerlidir.
fedcm_auto Daha önce FedCM One Tap kullanarak kimlik bilgilerini paylaşma izni vermiş olan ve mevcut oturumu olan bir kullanıcının otomatik olarak oturum açması. Yalnızca FedCM'nin desteklendiği tarayıcılar için geçerlidir.
user_1tap Mevcut bir oturumu olan bir kullanıcı, izni vermek ve kimlik bilgilerini paylaşmak için tek dokunuşla "Şu kullanıcı olarak devam et" düğmesine bastı. Yalnızca Chrome 75 ve sonraki sürümlerinde geçerlidir.
user_2tap Mevcut oturumu olmayan bir kullanıcı, hesap seçmek için tek dokunuşla "Şu kullanıcı olarak devam et" düğmesine, ardından izin vermek ve kimlik bilgilerini paylaşmak için pop-up penceresindeki Onayla düğmesine bastı. Chromium tabanlı olmayan tarayıcılar için geçerlidir.
itp Daha önce izin vermiş bir kullanıcı, ITP tarayıcılarda tek dokunma özelliğini kullanırsa.
itp_confirm İzin vermeyen bir kullanıcı, ITP tarayıcılarda tek dokunma özelliğine bastı ve izin verip kimlik bilgilerini paylaşmak için "Devam" düğmesine bastı.
btn Daha önce izin vermiş bir kullanıcı, Google ile oturum açma düğmesine basıp "Bir hesap seçin" bölümünden kimlik bilgilerini paylaşmak için bir Google Hesabı seçtiğinde
btn_confirm İzin vermeyen bir kullanıcı, Google ile oturum açma düğmesini ve ardından izin verip kimlik bilgilerini paylaşmak için "Devam" düğmesini tıkladı.

durum

Bu alan yalnızca kullanıcı oturum açmak için Google ile oturum aç düğmesini tıkladığında ve tıklanan düğmenin state özelliği belirtildiğinde tanımlanır. Bu alanın değeri, düğmenin state özelliğinde belirttiğiniz değerle aynıdır.

Aynı sayfada birden fazla Google ile oturum açma düğmesi oluşturulabileceğinden her düğmeye benzersiz bir dize atayabilirsiniz. Bu nedenle, kullanıcıların oturum açmak için hangi düğmeyi tıkladığını belirlemek üzere bu state alanını kullanabilirsiniz.

Yöntem: google.accounts.id.renderButton

google.accounts.id.renderButton yöntemi, web sayfalarınızda Google ile oturum açma düğmesi oluşturur.

Yöntemin aşağıdaki kod örneğine bakın:

google.accounts.id.renderButton(
      /** @type{!HTMLElement} */ parent,
      /** @type{!GsiButtonConfiguration} */ options
    )

Veri türü: GsiButtonConfiguration

Aşağıdaki tabloda GsiButtonConfiguration veri türünün alanları ve açıklamaları listelenmiştir:

Özellik
type Düğme türü: simge veya standart düğme.
theme Düğme teması. Örneğin, filled_blue veya filled_black.
size Düğme boyutu. Örneğin, küçük veya büyük.
text Düğme metni. Örneğin, "Google ile oturum açın" veya "Google ile kaydolun".
shape Düğme şekli. Örneğin, dikdörtgen veya daire.
logo_alignment Google logosunun hizalaması: sol veya orta.
width Düğme genişliği (piksel cinsinden).
locale Ayarlanmışsa düğme dili oluşturulur.
click_listener Ayarlanırsa bu işlev, Google ile oturum aç düğmesi tıklandığında ç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 özelliğin türü ve bir örnek hakkında ayrıntılı bilgi verilmektedir.

tür

Düğme türü. Varsayılan değer: standard.

Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Zorunlu Örnek
dize Evet type: "icon"

Aşağıdaki tabloda, kullanılabilir düğme türleri ve açıklamaları listelenmiştir:

Tür
standard
Metin veya kişiselleştirilmiş bilgiler içeren 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
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 renkli düğme teması.
filled_black
Siyah dolgulu düğme teması.

beden

Düğme boyutu. Varsayılan değer: large. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Zorunlu Örnek
dize İsteğe bağlı size: "small"

Aşağıdaki tabloda, kullanılabilen düğme boyutları ve açıklamaları listelenmiştir:

Boyut
large
Büyük bir standart düğme Büyük bir simge düğmesi Büyük ve kişiselleştirilmiş bir düğme
Büyük bir düğme.
medium
Orta boy standart düğme Orta simge düğmesi
Orta boyutlu bir düğme.
small
Küçük bir oturum açma düğmesi Küçük bir oturum açma düğmesi
Küçük bir düğme.

text (metin)

Düğme metni. Varsayılan değer: signin_with. Farklı text özelliklerine sahip simge düğmelerinin metninde görsel farklılıklar 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 Zorunlu Örnek
dize İsteğe bağlı text: "signup_with"

Aşağıdaki tabloda, kullanılabilen tüm düğme metinleri ve açıklamaları listelenmiştir:

Metin
signin_with
Düğme metni "Google ile oturum açın" olmalıdır.
signup_with
Düğme metni "Google ile kaydolun" olmalıdır.
continue_with
Düğme metni "Google ile devam et" olmalıdır.
signin
Düğme metni "Oturum aç"tır.

şekil

Düğme şekli. Varsayılan değer: rectangular. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Zorunlu Örnek
dize İsteğe bağlı shape: "rectangular"

Aşağıdaki tabloda, kullanılabilen düğme şekilleri ve açıklamaları listelenmiştir:

Şekil
rectangular
Dikdörtgen şeklindeki düğme. icon düğme türü için kullanılıyorsa square ile aynıdır.
pill
Hap şeklindeki düğme. icon düğmesi türü için kullanılıyorsa circle ile aynıdır.
circle
Daire şeklindeki düğme. standard düğme türü için kullanılıyorsa pill ile aynıdır.
square
Kare şeklindeki düğme. standard düğme türü için kullanılıyorsa rectangular ile aynıdır.

logo_alignment

Google logosunun hizalaması. Varsayılan değer: left. Bu özellik yalnızca standard düğme türü için geçerlidir. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Zorunlu Örnek
dize İsteğe bağlı logo_alignment: "center"

Aşağıdaki tabloda, kullanılabilen hizalamalar ve açıklamaları listelenmiştir:

logo_alignment
left
Google logosunu sola hizalar.
center
Google logosunu ortalar.

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ır. Düğme metnini belirtilen yerel ayarı kullanarak gösterin. Aksi takdirde, kullanıcıların Google Hesabı veya tarayıcı ayarları varsayılan olarak kullanılır. Kitaplığı yüklerken hl parametresini ve dil kodunu src yönergesine ekleyin. Örneğin: gsi/client?hl=<iso-639-code>.

Ayarlanmazsa tarayıcının varsayılan yerel ayarı veya Google oturumu kullanıcısının tercihi kullanılır. Bu nedenle, farklı kullanıcılar yerelleştirilmiş düğmelerin farklı sürümlerini ve muhtemelen farklı boyutlarını görebilir.

Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Zorunlu Örnek
dize İsteğe bağlı locale: "zh_CN"

click_listener

click_listener özelliğini kullanarak Google ile oturum açma düğmesi tıklandığında çağrılacak bir JavaScript işlevi tanımlayabilirsiniz.

  google.accounts.id.renderButton(document.getElementById("signinDiv"), {
      theme: 'outline',
      size: 'large',
      click_listener: onClickHandler
    });

  
  function onClickHandler(){
    console.log("Sign in with Google button clicked...")
  }
  

Bu örnekte, Google ile oturum açma düğmesi tıklandığında Google ile oturum açma düğmesi tıklandı... mesajı konsola kaydedilir.

durum

Aynı sayfada birden fazla Google ile oturum açma düğmesi oluşturulabileceğinden isteğe bağlı olarak her düğmeye benzersiz bir dize atayabilirsiniz. Aynı dize, kimlik jetonuyla birlikte döndürülür. Böylece kullanıcının oturum açmak için hangi düğmeyi tıkladığını belirleyebilirsiniz.

Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Zorunlu Örnek
dize İsteğe bağlı data-state: "button 1"

Veri türü: Kimlik bilgisi

native_callback işleviniz çağrıldığında parametre olarak bir Credential nesnesi iletilir. Aşağıdaki tabloda, nesnede bulunan alanlar listelenmiştir:

Alan
id Kullanıcıyı tanımlar.
password Şifre

Yöntem: google.accounts.id.disableAutoSelect

Kullanıcı web sitenizden çıktığında, durumu çerezlere kaydetmek için google.accounts.id.disableAutoSelect yöntemini çağırmanız gerekir. Bu, kullanıcı deneyiminde çıkmaz döngü oluşmasını önler. Yöntemin aşağıdaki kod snippet'ine bakın:

google.accounts.id.disableAutoSelect()

Aşağıdaki kod örneğinde, google.accounts.id.disableAutoSelect yöntemi onSignout() işleviyle uygulanmaktadır:

<script>
  function onSignout() {
    google.accounts.id.disableAutoSelect();
  }
</script>

Yöntem: google.accounts.id.storeCredential

Bu yöntem, tarayıcının yerleşik kimlik bilgisi yöneticisi API'sinin store() yöntemi için bir sarmalayıcıdır. Bu nedenle, yalnızca şifre kimlik bilgilerini saklamak için kullanılabilir. Yöntemin aşağıdaki kod örneğine bakın:

google.accounts.id.storeCredential(Credential, callback)

Aşağıdaki kod örneğinde, google.accounts.id.storeCredential yöntemi onSignIn() işleviyle uygulanmaktadır:

<script>
  function onSignIn() {
    let cred = {id: '...', password: '...'};
    google.accounts.id.storeCredential(cred);
  }
</script>

Yöntem: google.accounts.id.cancel

İstem, güvenen taraf DOM'undan kaldırılırsa tek dokunma akışını iptal edebilirsiniz. Kimlik bilgisi zaten seçilmişse iptal işlemi yok sayılır. Yöntemin aşağıdaki kod örneğine bakın:

google.accounts.id.cancel()

Aşağıdaki kod örneğinde, google.accounts.id.cancel() yöntemi onNextButtonClicked() işleviyle uygulanmaktadır:

<script>
  function onNextButtonClicked() {
    google.accounts.id.cancel();
    showPasswordPage();
  }
</script>

Kitaplık yükleme geri çağırması: onGoogleLibraryLoad

onGoogleLibraryLoad geri arama kaydı yapabilirsiniz. Google ile Oturum Açma JavaScript kitaplığı yüklendikten sonra bildirim gönderilir:

window.onGoogleLibraryLoad = () => {
    ...
};

Bu geri çağırma, yalnızca window.onload geri çağırması için bir kısayoldur. Davranışta herhangi bir farklılık yok.

Aşağıdaki kod örneğinde bir onGoogleLibraryLoad geri çağırması uygulanmaktadı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ının kimlik jetonunu paylaşmak için kullanılan OAuth iznini iptal eder. 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, credential yükünün sub özelliğidir.
callback işlev İsteğe bağlı RevocationResponse işleyici.

Aşağıdaki kod örneğinde, revoke yönteminin kimlikle nasıl kullanılacağı gösterilmektedir.

  google.accounts.id.revoke('1618033988749895', done => {
    console.log(done.error);
  });

Veri türü: RevocationResponse

callback işleviniz çağrıldığında parametre olarak bir RevocationResponse nesnesi iletilir. Aşağıdaki tabloda, iptal yanıtı nesnesinde bulunan alanlar listelenmiştir:

Alan
successful Bu alan, yöntem çağrısının dönüş değeridir.
error Bu alan, isteğe bağlı olarak ayrıntılı bir hata yanıtı mesajı içerir.

başarılı

Bu alan, iptal yöntemi çağrısı başarılı olursa true, başarısız olursa false olarak ayarlanan bir Boole değeridir.

hata

Bu alan bir dize değeridir ve iptal yöntemi çağrısı başarısız olursa ayrıntılı bir hata mesajı içerir. Başarılı olursa tanımsızdır.