Google JavaScript API referansıyla oturum açma

Bu referans sayfası, Sign-In JavaScript API'yi açıklamaktadır. Web sayfalarınızda One Tap istemini veya Google ile oturum aç düğmesini görüntülemek için bu API'yi kullanabilirsiniz.

Yöntem: google.accounts.id.initialize

google.accounts.id.initialize yöntemi, yapılandırma nesnesine göre Google ile Oturum Açma istemcisini başlatır. Yöntemin aşağıdaki kod örneğine bakın:

google.accounts.id.initialize(IdConfiguration)

Aşağıdaki kod örneği, google.accounts.id.initialize yöntemini onload işleviyle uygular:

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

google.accounts.id.initialize yöntemi, aynı web sayfasındaki tüm modüller tarafından dolaylı olarak kullanılabilecek bir Google ile Oturum Açma istemci örneği oluşturur.

  • Aynı web sayfasında birden fazla modül (ör. One Tap, Kişiselleştirilmiş düğme, iptal etme vb.) kullanıyor olsanız bile google.accounts.id.initialize yöntemini yalnızca bir kez çağırmanız gerekir.
  • 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.

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

Veri türü: IdConfiguration

Aşağıdaki tabloda IdConfiguration veri türünün alanları ve açıklamaları 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ç düğmesi popup kullanıcı deneyimi modunda bu özelliği kullanır.
login_uri Giriş uç noktanızın URL'si. Google ile Oturum Aç düğmesi redirect kullanıcı deneyimi modunda bu özelliği kullanır.
native_callback Şifre kimlik bilgilerini işleyen JavaScript işlevi.
cancel_on_tap_outside Kullanıcı istem dışını tıklarsa istemi iptal eder.
prompt_parent_id One Tap istem kapsayıcı öğesinin DOM kimliği
nonce Kimlik jetonları için rastgele bir dize
context One Tap istemindeki başlık ve kelimeler
state_cookie_domain Üst alan adında ve alt alan adlarında One Tap'i çağırmanız gerekiyorsa tek bir paylaşılan çerezin kullanılabilmesi için üst alanı bu alana iletin.
ux_mode Google ile Oturum Açma düğmesi kullanıcı deneyimi akışı
allowed_parent_origin Ara iframe'i yerleştirmesine izin verilen kaynaklar. Bu alan mevcutsa One Tap, ara iframe modunda çalıştırılır.
intermediate_iframe_close_callback Kullanıcılar One Tap'i manuel olarak kapattığında varsayılan ara iframe davranışını geçersiz kılar.
itp_support ITP tarayıcılarda yükseltilmiş One Tap kullanıcı deneyimini etkinleştirir.
login_hint Kullanıcı ipucu sağlayarak hesap seçimini atlayın.
hd Hesap seçimini alana göre sınırlandırın.
use_fedcm_for_prompt Tarayıcının, kullanıcı oturum açma istemlerini kontrol etmesine ve web siteniz ile Google arasındaki oturum açma akışını uyumlulaştırmasına izin verin.

client_id

Bu alan, Google 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 Gerekli Örnek
dize Evet client_id: "CLIENT_ID.apps.googleusercontent.com"

auto_select

Bu alan, uygulamanızı daha önce onaylayan yalnızca bir Google oturumu olduğunda, kimlik jetonunun otomatik olarak herhangi bir kullanıcı etkileşimi olmadan döndürülüp döndürülmeyeceğini belirler. false, varsayılan değerdir. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Gerekli Örnek
boolean İsteğe bağlı auto_select: true

geri çağırma

Bu alan, One Tap isteminden veya pop-up pencereden döndürülen kimlik jetonunu işleyen JavaScript işlevidir. Bu özellik, Google One Tap veya Google ile Oturum Aç düğmesi popup kullanıcı deneyimi modu kullanıldığında gereklidir. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Gerekli Örnek
function 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, API Konsolu'nda yapılandırdığınız ve Yönlendirme URI'si doğrulama kurallarımıza uygun olan OAuth 2.0 istemcisi için yetkili yönlendirme URI'lerinden biriyle tam olarak eşleşmelidir.

Geçerli sayfa giriş sayfanızsa bu özellik atlanabilir. Bu durumda, kimlik bilgileri varsayılan olarak bu sayfaya gönderilir.

Kimlik jetonu kimlik bilgisi yanıtı, bir kullanıcı Google ile Oturum Aç düğmesini tıkladığında ve yönlendirme kullanıcı deneyimi modu kullanıldığında giriş uç noktanızda yayınlanı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'sına 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 olan bir credential anahtarı içeren POST isteklerini işlemelidir.

Aşağıda, giriş uç noktanıza gönderilen örnek bir istek gösterilmektedir:

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded

credential=ID_TOKEN

native_callback

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

Tür Gerekli Örnek
function İsteğe bağlı native_callback: handleResponse

cancel_on_tap_outside

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

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

prompt_parent_id

Bu özellik, kapsayıcı öğesinin DOM kimliğini ayarlar. Ayarlanmazsa pencerenin sağ üst köşesinde One Tap istemi görüntülenir. Daha fazla bilgi için aşağıdaki tabloya bakın:

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

tek seferlik rastgele sayı

Bu alan, tekrar oynatma saldırılarını önlemek için kimlik jetonu tarafından kullanılan rastgele bir dizedir. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Gerekli Örnek
dize İsteğe bağlı nonce: "biaqbm70g23"

Nonce uzunluğu, ortamınız tarafından desteklenen maksimum JWT 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 istemindeki başlık ve mesajların metnini değiştirir. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Gerekli Örnek
dize İsteğe bağlı context: "use"

Aşağıdaki tabloda, mevcut bağlamlar ve bunların açıklamaları listelenmiştir:

İçerik
signin "Google ile oturum aç"
signup "Google ile kaydolun"
use "Google ile kullan"

One Tap'i üst alanda ve alt alan adlarında görüntülemeniz gerekiyorsa tek bir paylaşılan durum çerezinin kullanılabilmesi için üst alanı bu alana iletin. Daha fazla bilgi için aşağıdaki tabloya bakın:

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

ux_mode

Google ile Oturum Aç düğmesinin kullandığı kullanıcı deneyimi akışını ayarlamak için bu alanı kullanın. popup, varsayılan değerdir. Bu özelliğin OneTap kullanıcı deneyimi üzerinde herhangi bir etkisi yoktur. Daha fazla bilgi için aşağıdaki tabloya bakın:

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

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

Kullanıcı Deneyimi Modu
popup Pop-up pencerede oturum açma kullanıcı deneyimi akışı gerçekleştirir.
redirect Tam sayfa yönlendirmesi ile oturum açma kullanıcı deneyimi akışını gerçekleştirir.

allowed_parent_origin

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

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

Aşağıdaki tabloda, desteklenen değer türleri ve bunların 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 ön ekleri de desteklenir. Örneğin, "https://*.example.com", example.com ve alt alan adlarıyla tüm düzeylerde eşleşir (ör.news.example.com, login.news.example.com). Joker karakter kullanırken göz önünde bulundurulması gerekenler:

  • Kalıp dizeleri yalnızca bir joker karakter ve üst düzey alandan oluşabilir. Örneğin, https://.com ve https://.co.uk geçersizdir. Yukarıda belirtildiği gibi, "https://.example.com" example.com ile eşleşir. 2 farklı alanı temsil etmek için bir dizi de kullanabilirsiniz. Örneğin ["https://example1.com", "https://.example2.com"]; example1.com, example2.com alanları ve example2.com alt alan adlarıyla eşleşir
  • Joker karakterli alan adları güvenli bir https:// şemasıyla başlamalıdır ve bu nedenle "*.example.com" geçersiz olarak kabul edilir.

allowed_parent_origin alanının değeri geçersizse ara iframe modunun One Tap ile başlatılması başarısız olur ve durur.

intermediate_iframe_close_callback

Kullanıcılar One Tap kullanıcı arayüzündeki "X" düğmesine dokunarak One Tap'i 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. Ve One Tap iframe'in yerine yalnızca ara iframe'i etkiler. One Tap kullanıcı arayüzü, geri çağırma başlatılmadan önce kaldırılır.

Tür Gerekli Örnek
function İsteğe bağlı intermediate_iframe_close_callback: logBeforeClose

itp_support

Bu alan, yeni sürüme geçirilmiş One Tap UX'in, Akıllı İzleme Önleme'yi (ITP) destekleyen tarayıcılarda etkinleştirilip etkinleştirilmeyeceğini belirler. Varsayılan değer: false. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Gerekli Örnek
boolean İsteğe bağlı itp_support: true

login_hint

Uygulamanız hangi kullanıcının oturum açması gerektiğini önceden bilirse Google'a giriş ipucu sağlayabilir. İşlem başarılı olduğunda hesap seçimi atlanır. Kabul edilen değerler şunlardır: e-posta adresi veya kimlik jetonu alt alan değeri.

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

Tür Gerekli Örnek
Dize, bir e-posta adresi veya kimlik jetonu sub alanındaki değer. İsteğe bağlı login_hint: 'elisa.beckett@gmail.com'

hd

Kullanıcının birden fazla hesabı varsa ve yalnızca Workspace hesabıyla oturum açması gerekiyorsa bu özelliği Google'a alan adıyla ilgili ipucu vermek için kullanın. İşlem başarılı olduğunda, hesap seçimi sırasında görüntülenen kullanıcı hesapları verilen alanla sınırlıdır. Joker karakter değeri: *, kullanıcıya yalnızca Workspace hesapları sunar ve hesap seçimi sırasında tüketici hesaplarını (kullanici@gmail.com) hariç tutar.

Daha fazla bilgi için OpenID Connect dokümanlarındaki hd alanına bakın.

Tür Gerekli Örnek
Dize. Tam nitelikli bir alan adı veya *. İsteğe bağlı hd: '*'

use_fedcm_for_prompt

Tarayıcının, kullanıcı oturum açma istemlerini kontrol etmesine ve web siteniz ile Google arasındaki oturum açma akışını uyumlulaştırmasına izin verin. Varsayılan olarak "false" (yanlış) değerine ayarlanır. Daha fazla bilgi için FedCM'ye geçiş sayfasına bakın.

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

Yöntem: google.accounts.id.prompt

google.accounts.id.prompt yöntemi, initialize() yöntemi çağrıldıktan sonra One Tap istemini veya tarayıcının yerel kimlik bilgisi yöneticisini görüntüler. Yöntemin aşağıdaki kod örneğine bakın:

 google.accounts.id.prompt(/**
 @type{(function(!PromptMomentNotification):void)=} */ momentListener)

Normalde prompt() yöntemi sayfa yüklemede çağrılır. Google tarafındaki oturum durumu ve kullanıcı ayarları nedeniyle, One Tap istem kullanıcı arayüzü gösterilmeyebilir. Farklı anların kullanıcı arayüzü durumu hakkında bildirim almak için, kullanıcı arayüzü durum bildirimleri alacak şekilde bir işlev iletin.

Bildirimler şu anlarda etkinleşir:

  • Görüntüleme anı: Bu, prompt() yöntemi çağrıldıktan sonra gerçekleşir. Bildirim, kullanıcı arayüzünün görüntülenip görüntülenmediğini belirten bir boole değeri içerir.
  • Atlanan an: Bu durum, One Tap istemi otomatik iptal veya manuel iptal nedeniyle kapatıldığında veya Google bir kimlik bilgisi gönderemediğinde (ör. seçili oturumda Google'dan çıkış yapıldığında) meydana gelir.

    Bu durumlarda, varsa sonraki kimlik sağlayıcılarıyla devam etmenizi öneririz.

  • Kapatılan an: Bu durum, Google bir kimlik bilgisini başarıyla aldığında veya bir kullanıcı kimlik bilgisi alma akışını durdurmak istediğinde ortaya çıkar. Örneğin, kullanıcı giriş iletişim kutunuza kullanıcı adını ve şifresini girmeye başladığında, One Tap istemini kapatmak ve kapatma anını tetiklemek için google.accounts.id.cancel() yöntemini çağırabilirsiniz.

Aşağıdaki kod örneğinde atlanan an uygulanır:

<script>
  window.onload = function () {
    google.accounts.id.initialize(...);
    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        // continue with another identity provider.
      }
    });
  };
</script>

Veri türü: PromptMomentBildirim

Aşağıdaki tabloda PromptMomentNotification veri türünün yöntemleri ve açıklamaları listelenmektedir:

Yöntem
isDisplayMoment() Bildirim, belirli bir süre için mi gönderilsin?

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 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 süreliğine mi gelsin ve kullanıcı arayüzü görüntülenmiyor mu?

Not: FedCM etkinleştirildiğinde bu bildirim tetiklenmez. Daha fazla bilgi için FedCM'ye geçiş sayfasına bakın.
getNotDisplayedReason()

Kullanıcı arayüzünün görüntülenmeme nedeni. Olası değerler şunlardır:

  • 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 an için mi?
getSkippedReason()

Atlanan anın ayrıntılı nedeni. Olası değerler şunlardır:

  • 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() Bildirim kapatıldığı bir süre için mi?
getDismissedReason()

Reddedilmenin ayrıntılı nedeni. Olası değerler şunlardır:

  • credential_returned
  • cancel_called
  • flow_restarted
getMomentType()

An türü için bir dize döndürün. Olası değerler şunlardı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 Bu alan, döndürülen kimlik jetonudur.
select_by Bu alan, kimlik bilgilerinin nasıl seçileceğini belirler.

giriş bilgisi

Bu alan, base64 kodlu bir JSON Web Token (JWT) dizesi olarak kimlik jetonudur.

Kod çözüldüğünde JWT aşağıdaki örnekte olduğu gibi görünür:

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's GSuite email address
  "email": "elisa.g.beckett@gmail.com", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "Elisa",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion's creation time
  "exp": 1596477600, // Unix timestamp of the assertion's expiration time
  "jti": "abc161803398874def"
}

sub alanı, Google Hesabı için genel olarak benzersiz bir tanımlayıcıdır. Kullanıcı tanımlayıcısı olarak yalnızca sub alanını kullanın. Bu alan, tüm Google Hesaplarında benzersizdir ve hiçbir zaman tekrar kullanılamaz. Bir Google Hesabı'nın farklı zamanlarda birden fazla e-posta adresi olabileceğinden tanımlayıcı olarak e-posta adresini kullanmayın.

email, email_verified ve hd alanlarını kullanarak Google'ın bir e-posta adresini barındırıp barındırmadığını ve yetkili olup olmadığını belirleyebilirsiniz. Google'ın yetkili olduğu durumlarda, kullanıcının meşru hesap sahibi olduğu onaylanır.

Google'ın yetkili olduğu durumlar:

  • email ile ilişkili @gmail.com son eki var. Bu bir Gmail Hesabı.
  • email_verified doğru ve hd ayarlandı. Bu bir Google Workspace hesabı.

Kullanıcılar Gmail veya Google Workspace kullanmadan Google Hesaplarına kaydolabilir. email, @gmail.com son eki içermediğinde ve hd yoksa Google yetkili değilse kullanıcıyı doğrulamak için şifre veya başka sorgulama yöntemleri önerilir. Google, kullanıcıyı Google Hesabı oluşturulurken ilk kez doğruladığı için email_verfied doğru olabilir ancak üçüncü taraf e-posta hesabının sahipliği o zamandan beri değişmiş olabilir.

exp alanı, sunucu tarafınızdaki jetonu doğrulamanız için son kullanma süresini gösterir. Google ile Oturum Açma'dan alınan kimlik jetonu için bu süre bir saattir. Geçerlilik süresi sona ermeden önce jetonu doğrulamanız gerekir. Oturum yönetimi için exp kullanmayın. Süresi dolmuş bir kimlik jetonu kullanıcının oturumunun kapatıldığı anlamına gelmez. Uygulamanız, kullanıcılarınızın oturumlarını yönetmekten 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 dokunmadan otomatik oturum açma işlemini kullandı.

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

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

    • kimlik bilgilerini paylaşma izni vermek için Onayla düğmesine bastıktan sonra veya
    • Kullanıcı, daha önce izin vermiş ve bir Google Hesabı seçmek için Hesap Seç özelliğini kullanmışsa.

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

Değer Açıklama
auto Daha önce kimlik bilgilerinin paylaşılmasına izin vermiş bir kullanıcının mevcut oturumuyla otomatik olarak oturum açması.
user Mevcut oturumunda daha önce izin vermiş bir kullanıcı, kimlik bilgilerini paylaşmak için One Tap "Farklı devam et" düğmesine bastı.
user_1tap Mevcut oturumu olan bir kullanıcı, izin vermek ve kimlik bilgilerini paylaşmak için One Tap "Farklı devam et" düğmesine bastı. Yalnızca Chrome v75 ve sonraki sürümleri için geçerlidir.
user_2tap Mevcut oturumu olmayan bir kullanıcı, hesap seçmek için One Tap "Farklı devam et" düğmesine, ardından izin vermek ve kimlik bilgilerini paylaşmak için pop-up penceredeki Onayla düğmesine bastı. Chromium tabanlı olmayan tarayıcılar için geçerlidir.
btn Daha önce izin vermiş, mevcut oturumu olan bir kullanıcı Google ile Oturum Aç düğmesine bastı ve kimlik bilgilerini paylaşmak için "Hesap Seçin"den bir Google Hesabı seçti.
btn_confirm Mevcut oturumu olan bir kullanıcı, izin vermek ve kimlik bilgilerini paylaşmak için Google ile Oturum Aç düğmesine, ardından Onayla düğmesine bastı.
btn_add_session Mevcut oturumu olmayan ve daha önce izin veren bir kullanıcı, bir Google Hesabı seçmek ve kimlik bilgilerini paylaşmak için Google ile Oturum Aç düğmesine bastı.
btn_confirm_add_session Mevcut oturumu olmayan bir kullanıcı, önce Google Hesabı seçmek için Google ile Oturum Aç düğmesine, ardından izin vermek ve kimlik bilgilerini paylaşmak için Onayla düğmesine bastı.

Yöntem: google.accounts.id.renderButton

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

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

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

Veri türü: GsiButtonConfiguration

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

Özellik
type Düğme türü: simge veya standart düğme.
theme Düğme teması. Örneğin, doldurulmuş_mavi veya doldurulmuş_siyah.
size Düğme boyutu. Örneğin, küçük veya büyük.
text Düğme metni. Örneğin, "Google ile oturum aç" veya "Google ile kaydol".
shape Düğme şekli. Örneğin, dikdörtgen veya yuvarlak.
logo_alignment Google logosunun hizalanması: sola veya ortaya.
width Piksel cinsinden düğme genişliği.
locale Ayarlanırsa düğme dili oluşturulur.
click_listener Ayarlanırsa Google ile oturum aç düğmesi tıklandığında bu işlev çağrılır.

Özellik türleri

Aşağıdaki bölümlerde her bir özelliğin türüyle ilgili ayrıntılar ve bir örnek bulunmaktadır.

tür

Düğme türü. standard, varsayılan değerdir.

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

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

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

Tür
standard
Metin veya kişiselleştirilmiş bilgi içeren düğme.
icon
Metin içermeyen simge düğmesi.

tema

Düğme teması. outline, varsayılan değerdir. Daha fazla bilgi için aşağıdaki tabloya bakın:

Tür Gerekli Örnek
dize İsteğe bağlı theme: "filled_blue"

Aşağıdaki tabloda mevcut temalar ve açıklamaları listelenmiştir:

Tema
outline
Standart bir düğme teması.
filled_blue
Mavi dolgulu bir düğme teması.
filled_black
Siyah dolu düğme teması.

boy

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

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

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

text (metin)

Düğme metni. signin_with, varsayılan değerdir. Farklı text özelliklerine sahip simge düğmelerinin metninde görsel bir fark yoktur. Bunun tek istisnası metnin, ekran erişilebilirliği amacıyla okunmasıdır.

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

Tür Gerekli Örnek
dize İsteğe bağlı text: "signup_with"

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

Metin
signin_with
Düğme metni "Google ile oturum aç" ş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.

shape

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

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

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

Şekil
rectangular
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üğme 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 hizalanması. left, varsayılan değerdir. Bu özellik yalnızca standard düğme türü için geçerlidir. Daha fazla bilgi için aşağıdaki tabloya bakın:

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

Aşağıdaki tabloda mevcut 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 Gerekli Örnek
dize İsteğe bağlı width: "400"

locale

İsteğe bağlı. Düğme metnini belirtilen yerel ayarı kullanarak görüntüleyin. Aksi takdirde varsayılan olarak kullanıcının Google Hesabı veya tarayıcı ayarları kullanılır. Kitaplığı yüklerken src yönergesine hl parametresini ve dil kodunu ekleyin. Örneğin: gsi/client?hl=<iso-639-code>.

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

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

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

click_listener

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

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

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

Bu örnekte, Google ile oturum aç düğmesi tıklandığında konsolda Google ile oturum aç düğmesi tıkla... mesajı günlüğe 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 bulunan alanlar listelenmiştir:

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

Yöntem: google.accounts.id.disableAutoSelect

Kullanıcı web sitenizde oturumu kapattığında, durumu çerezlere kaydetmek için google.accounts.id.disableAutoSelect yöntemini çağırmanız gerekir. Bu, kullanıcı deneyimindeki ölü döngüyü önler. Yöntemin aşağıdaki kod snippet'ini inceleyin:

google.accounts.id.disableAutoSelect()

Aşağıdaki kod örneği, google.accounts.id.disableAutoSelect yöntemini bir 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 sarmalayıcıdır. Bu nedenle, yalnızca şifre kimlik bilgilerini depolamak için kullanılabilir. Yöntemin aşağıdaki kod örneğine bakın:

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

Aşağıdaki kod örneği, google.accounts.id.storeCredential yöntemini bir 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'dan kaldırırsanız One Tap akışını iptal edebilirsiniz. Bir kimlik bilgisi zaten seçilmişse iptal işlemi yoksayılır. Yöntemin aşağıdaki kod örneğine bakın:

google.accounts.id.cancel()

Aşağıdaki kod örneği, google.accounts.id.cancel() yöntemini onNextButtonClicked() işleviyle uygular:

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

Kitaplık yüklemesi geri çağırması: onGoogleKitaplıkLoad

onGoogleLibraryLoad geri aramasını kaydedebilirsiniz. Google JavaScript ile Oturum Açma kitaplığı yüklendikten sonra bilgilendirilir:

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

Bu geri çağırma, window.onload geri çağırma işleminin kısayoludur. Davranışta herhangi bir fark yok.

Aşağıdaki kod örneği, bir onGoogleLibraryLoad geri çağırma uygular:

<script>
  window.onGoogleLibraryLoad = () => {
   google.accounts.id.initialize({
     ...
   });
   google.accounts.id.prompt();
  };
</script>

Yöntem: google.accounts.id.revoke

google.accounts.id.revoke yöntemi, belirtilen kullanıcının kimlik jetonunu paylaşmak için kullanılan OAuth iznini iptal eder. Yöntemin aşağıdaki kod snippet'ini inceleyin: javascript google.accounts.id.revoke(login_hint, callback)

Parametre Tür Açıklama
login_hint dize Kullanıcının Google Hesabının e-posta adresi veya benzersiz kimliği. Kimlik, kimlik bilgisi yükünün sub özelliğidir.
callback function İsteğe bağlı RevocationResponse işleyici.

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

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

Veri türü: RevocationResponse

callback işleviniz çağrıldığında, parametre olarak bir RevocationResponse nesnesi 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öndürülen değeridir.
error Bu alan isteğe bağlı olarak ayrıntılı bir hata yanıtı mesajı içerir.

tamamlandı

Bu alan, iptal yöntemi çağrısı başarılı olursa "true" (doğru), başarısız olduğunda "false" (yanlış) olarak ayarlanmış bir boole değeridir.

hata

Bu alan bir dize değeridir ve iptal yöntemi çağrısı başarısız olduysa ayrıntılı bir hata mesajı içerir. Başarılı olup olmadığı tespit edilmez.