Google ile oturum açma HTML API referansı

Bu referans sayfasında, web sayfalarında Google ile oturum açma düğmesini veya One Tap istemini görüntülemek için kullanılan Google ile oturum açma HTML veri özellikleri API'si açıklanmaktadır.

"g_id_onload" kimlikli öğe

Google ile oturum açma veri özelliklerini <div> ve <span> gibi görünür veya görünmez öğelere yerleştirebilirsiniz. Tek şart, öğe kimliğinin g_id_onload olarak ayarlanmasıdır. Bu kimliği birden fazla öğeye eklemeyin.

Veri özellikleri

Aşağıdaki tabloda, veri özellikleri ve açıklamaları listelenmiştir:

Özellik türleri

Aşağıdaki bölümlerde her bir özellik türüyle ilgili ayrıntılar ve bir örnek yer almaktadır.

data-client_id

Bu özellik, uygulamanızın istemci kimliğidir. Bu kimlik, Google Cloud Console'da bulunur ve oluşturulur. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-color_scheme

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

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

data-auto_prompt

Bu özellik, Tek Dokunuş'un gösterilip gösterilmeyeceğini belirler. Varsayılan değer: true. Bu değer false olduğunda Google One Tap gösterilmez. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-auto_select

Bu özellik, uygulamanızı yalnızca bir Google oturumu onayladıysa herhangi bir kullanıcı etkileşimi olmadan otomatik olarak kimlik jetonu döndürülüp döndürülmeyeceğini belirler. Varsayılan değer false şeklindedir. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-login_uri

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

Değer, Google Auth Platform'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.

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

Geri çağırma işlevi tanımlanmadığında ve kullanıcı Google ile Oturum Açma veya One Tap düğmelerini tıkladığında ya da otomatik oturum açma gerçekleştiğinde kimlik jetonu kimlik bilgisi yanıtı, giriş uç noktanıza gönderilir.

Giriş uç noktanız, gövdede kimlik jetonu değeri içeren bir credential parametresi barındıran POST isteklerini işlemelidir.

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

data-callback

Bu özellik, döndürülen kimlik jetonunu işleyen JavaScript işlevinin adıdır. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-login_uri ve data-callback özelliklerinden biri kullanılabilir. Bu, aşağıdaki bileşen ve kullanıcı deneyimi modu yapılandırmalarına bağlıdır:

• data-login_uri özelliği, Google ile oturum aç düğmesi redirect kullanıcı deneyimi modu için gereklidir. Bu mod, data-callback özelliğini yok sayar.

• Google One Tap ve Google ile Oturum Açma düğmesi popup kullanıcı deneyimi modu için bu iki özellikten biri ayarlanmalıdır. İkisi de ayarlanırsa data-callback özelliği daha yüksek önceliğe sahip olur.

Ad alanındaki JavaScript işlevleri HTML API tarafından desteklenmez. Bunun yerine, ad alanı olmayan global bir JavaScript işlevi kullanın. Örneğin, mylib.callback yerine mylibCallback kullanın.

Geri çağırma işlevine parametre olarak bir CredentialResponse nesnesi iletilir. Olası yanıt değerlerinin ayrıntıları için CredentialResponse bölümüne bakın.

data-native_login_uri

Bu özellik, şifre kimlik bilgisi işleyici uç noktanızın URL'sidir. data-native_login_uri veya data-native_callback özelliğini ayarlarsanız JavaScript kitaplığı, Google oturumu olmadığında yerleşik kimlik bilgisi yöneticisine geri döner. Hem data-native_callback hem de data-native_login_uri özelliklerini ayarlamanıza izin verilmez. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-native_callback

Bu özellik, 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. data-native_login_uri veya data-native_callback özelliğini ayarlarsanız JavaScript kitaplığı, Google oturumu olmadığında yerleşik kimlik bilgisi yöneticisine geri döner. Hem data-native_callback hem de data-native_login_uri ayarını yapmanıza izin verilmez. Daha fazla bilgi için aşağıdaki tabloya bakın:

Ad alanındaki JavaScript işlevleri HTML API tarafından desteklenmez. Bunun yerine, ad alanı olmayan global bir JavaScript işlevi kullanın. Örneğin, mylib.callback yerine mylibCallback kullanın.

data-native_id_param

Şifre kimlik bilgisini şifre kimlik bilgisi işleyici uç noktasına gönderdiğinizde credential.id alanı için parametre adını belirtebilirsiniz. Varsayılan ad email şeklindedir. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-native_password_param

Şifre kimlik bilgisini şifre kimlik bilgisi işleyici uç noktasına gönderdiğinizde credential.password değeri için parametre adını belirtebilirsiniz. Varsayılan ad password şeklindedir. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-cancel_on_tap_outside

Bu özellik, kullanıcı istemin dışını tıklarsa One Tap isteğinin iptal edilip edilmeyeceğini belirler. Varsayılan değer: true. Devre dışı bırakmak için değeri false olarak ayarlayın. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-prompt_parent_id

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

data-skip_prompt_cookie

Tek Dokunuş isteminin gösterimini kontrol etmek için bir çerez kullanır. Bu özellik tarafından belirtilen çerezin değeri boş değilse istem gösterilmez. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-nonce

Bu özellik, 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:

Tek seferlik rastgele sayı uzunluğu, ortamınız tarafından desteklenen maksimum JWT boyutu ve tarayıcı ile sunucu HTTP boyutu kısıtlamalarıyla sınırlıdır.

data-essential_claims

Bu özellik, Google tarafından döndürülen kimlik jetonuna ek hak taleplerinin dahil edilmesini istemek için kullanılan bir dizedir. Google tarafından kabul edilen hak taleplerinin tam listesi için desteklenen hak talepleri bölümüne bakın.

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

data-context

Bu alan, One Tap isteminde gösterilen başlık ve mesajların metnini değiştirir. ITP tarayıcıları üzerinde herhangi bir etkisi yoktur. Varsayılan değer signin'dir.

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

Aşağıdaki tabloda, kullanılabilir tüm bağlamlar ve açıklamaları listelenmiştir:

data-moment_callback

Bu özellik, istem kullanıcı arayüzü durum bildirimi dinleyicisinin işlev adıdır. Daha fazla bilgi için PromptMomentNotification veri türünü inceleyin.

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

Ad alanındaki JavaScript işlevleri HTML API tarafından desteklenmez. Bunun yerine, ad alanı olmayan global bir JavaScript işlevi kullanın. Örneğin, mylib.callback yerine mylibCallback kullanın.

data-state_cookie_domain

One Tap'i bir üst alan adında ve alt alan adlarında göstermeniz gerekiyorsa üst alan adını bu özelliğe iletin. Böylece tek bir paylaşılan durum çerezi kullanılır. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-ux_mode

Bu özellik, Google ile oturum açma düğmesi tarafından kullanılan kullanıcı deneyimi akışını ayarlar. Varsayılan değer popup'dir. Bu özelliğin One Tap kullanıcı deneyimi üzerinde hiçbir etkisi yoktur. Daha fazla bilgi için aşağıdaki tabloya bakın:

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

data-allowed_parent_origin

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

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

data-allowed_parent_origin özelliğinin değeri geçersizse ara iframe modunun One Tap başlatma işlemi başarısız olur ve durur.

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

• Kalıp dizeleri yalnızca bir joker karakter ve bir üst düzey alandan oluşamaz. Örneğin, https://.com ve https://.co.uk geçersizdir. Çünkü "https://.example.com", example.com ve tüm alt alan adlarıyla eşleşir. İki farklı alan adını 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 ve example2.com alt alanlarıyla eşleşir.
• Joker karakter alanları güvenli bir https:// şemasıyla başlamalıdır. Bu nedenle "*.example.com" geçersiz kabul edilir.

data-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.

data-intermediate_iframe_close_callback alanı yalnızca ara iFrame modunda geçerli olur. Bu durum, One Tap iframe'i yerine yalnızca ara iframe'i etkiler. Geri çağırma işlevi çağrılmadan önce One Tap kullanıcı arayüzü kaldırılır.

Ad alanındaki JavaScript işlevleri HTML API tarafından desteklenmez. Bunun yerine, ad alanı olmayan global bir JavaScript işlevi kullanın. Örneğin, mylib.callback yerine mylibCallback kullanın.

data-itp_support

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

data-login_hint

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

Daha fazla bilgi için login_hint ile ilgili OpenID Connect belgelerini inceleyin.

data-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 sağlamak üzere bu ayarı kullanın. İşlem başarılı olduğunda, hesap seçimi sırasında gösterilen kullanıcı hesapları, sağlanan alanla sınırlı olur. Joker karakter değeri: *, kullanıcıya yalnızca Workspace hesapları sunar ve hesap seçimi sırasında tüketici hesaplarını (user@gmail.com) hariç tutar.

Daha fazla bilgi için hd ile ilgili OpenID Connect belgelerini inceleyin.

data-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.

data-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 değer false şeklindedir. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-button_auto_select

Bu alan, FedCM düğme akışı için otomatik seçim 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 değer false olarak ayarlanır. Düğmeyle otomatik oturum açma özelliğini, ilk kullanıma sunma sırasında açıkça etkinleştirmeniz gerekir. Daha fazla bilgi için aşağıdaki tabloya bakın:

"g_id_signin" sınıfına sahip öğe

Bir öğenin class özelliğine g_id_signin eklerseniz öğe, Google ile oturum açma düğmesi olarak oluşturulur.

Aynı sayfada birden fazla Google ile oturum açma düğmesi oluşturabilirsiniz. Her düğmenin kendi görsel ayarları olabilir. Ayarlar, aşağıdaki veri özellikleriyle tanımlanır.

Görsel veri özellikleri

Aşağıdaki tabloda görsel veri özellikleri ve açıklamaları listelenmiştir:

Özellik türleri

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

data-type

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

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

Tür
standard
icon

data-theme

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

Aşağıdaki tabloda, kullanılabilir temalar ve açıklamaları listelenmiştir:

Tema	Örnekler	Teknik Özellikler
outline		Dolgu: #FFFFFF Kontur: #747775 | 1 piksel | iç Yazı tipi: #1F1F1F | Roboto Medium | 14/20 Kişiselleştirilmiş: #1F1F1F | Roboto | Medium 12/14 | Regular 11/13
filled_blue		Dolgu: #0B57D0 Kontur: #OB57D0 | 1 piksel | iç Yazı tipi: #FFFFFF | Google Sans Medium | 14/20 Kişiselleştirilmiş: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13
filled_black		Dolgu: #202124 Kontur: #OB57D0 | 1 piksel | iç Yazı tipi: #FFFFFF | Google Sans Medium | 14/20 Kişiselleştirilmiş: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13
outline_dark		Dolgu: #131314 Kontur: #8E918F | 1 piksel | iç Yazı tipi: #FFFFFF | Google Sans Medium | 14/20 Kişiselleştirilmiş: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13

data-size

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

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

Boyut
large
medium
small

data-text

Düğme metni. Varsayılan değer: signin_with. Farklı data-text özelliklerine sahip simge düğmelerinin metinleri arasında görsel fark 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:

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

Metin
signin_with
signup_with
continue_with
signin

data-shape

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

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

Şekil
rectangular
pill
circle
square

data-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:

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

logo_alignment
left
center

data-width

Piksel cinsinden minimum düğme genişliği. Maksimum genişlik 400 pikseldir.

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

data-locale

İsteğe bağlı. Düğme metnini belirtilen yerel ayarı kullanarak gösterir. Aksi takdirde, kullanıcının Google Hesabı veya tarayıcı ayarları varsayılan olarak 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 ve muhtemelen farklı boyutlarda görebilir.

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

data-click_listener

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

  <script>
    function onClickHandler(){
      console.log("Sign in with Google button clicked...")
    }
  </script>
  .....
  <div class="g_id_signin"
      data-size="large"
      data-theme="outline"
      data-click_listener="onClickHandler">
  </div>

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

data-state

İsteğe bağlı olarak, aynı sayfada birden fazla Google ile oturum açma düğmesi oluşturulabileceğinden 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:

Sunucu tarafı entegrasyonu

Sunucu tarafı uç noktalarınız aşağıdaki HTTP POST isteklerini işlemelidir.

Kimlik jetonu işleyici uç noktası

Kimlik jetonu işleyici uç noktası, kimlik jetonunu işler. İlgili hesabın durumuna göre kullanıcıyı oturum açtırabilir ve bir kaydolma sayfasına ya da ek bilgi için hesap bağlama sayfasına yönlendirebilirsiniz. İstemciler, tanınmayan yanıt parametrelerini YOKSAYMALIDIR.

Giriş uç noktanıza gönderilen örnek bir istek:

POST /login HTTP/1.1
Content-Type: application/x-www-form-urlencoded
Cookie: g_csrf_token=<RANDOM_STRING>
Host: www.example.com

credential=<JWT_ENCODED_ID_TOKEN>&g_csrf_token=<RANDOM_STRING>

HTTP POST isteği aşağıdaki bilgileri içerir:

yeterlilik belgesi

Kodu çözüldüğünde kimlik jetonu 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 Google Workspace email address
  "auth_time": 1748875426,
  "amr": ["mfa", "pwd", "tel"],
  "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": "Eliza",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion creation time
  "exp": 1596477600, // Unix timestamp of the assertion expiration time
  "jti": "abc161803398874def"
}

İstemciler, tanınmayan JWT taleplerini YOK SAYMALIDIR.

sub alanı, Google Hesabı için dünya genelinde benzersiz bir tanımlayıcıdır. Tüm Google Hesapları arasında benzersiz olduğu ve hiçbir zaman yeniden kullanılmadığı için kullanıcının tanımlayıcısı olarak yalnızca sub alanını 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 yasal hesap sahibi olduğu doğrulanır.

Google'ın yetkili olduğu durumlar:

• email, @gmail.com son ekine sahip. Bu bir Gmail hesabıdır.
• email_verified doğruysa ve hd ayarlanmışsa bu bir Google Workspace hesabıdır.

Kullanıcılar, Gmail veya Google Workspace kullanmadan Google Hesaplarına kaydolabilir. email, @gmail.com son ekini içermediğinde ve hd olmadığında Google yetkili değildir ve kullanıcıyı doğrulamak için şifre veya diğer sorgulama yöntemleri önerilir. Google, Google Hesabı oluşturulduğunda kullanıcıyı doğruladığı için email_verified de doğru olabilir ancak üçüncü taraf e-posta hesabının sahipliği o zamandan beri değişmiş olabilir.

exp alanı, jetonu sunucu tarafında doğrulamanız için geçerlilik süresini gösterir. Google ile oturum açma özelliğinden alınan kimlik jetonu için bu süre bir saattir. Süre dolmadan ö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 kapalı olduğu anlamına gelmez. Uygulamanız, kullanıcılarınızın oturum yönetiminden sorumludur.

g_csrf_token

Sahteciliğe karşı durum jetonu. Bu, gsi/client kitaplığı tarafından oluşturulan bir siteler arası istek sahtekarlığı (CSRF) jetonudur. POST yük gövdesine hem çerez hem de istek parametresi olarak rastgele bir değer eklenir. Sunucunuzda istek işlenirken bu iki değer eşleşmiyorsa istek geçersiz kabul edilmelidir.

durum

Bu parametre yalnızca kullanıcı oturum açmak için Google ile oturum aç düğmesini tıkladığında ve tıklanan düğmenin data-state özelliği belirtildiğinde tanımlanır. Bu alanın değeri, düğmenin data-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ının oturum açmak için hangi düğmeyi tıkladığını belirlemek üzere bu state parametresini kullanabilirsiniz.

Şifre kimlik bilgisi işleyici uç noktası

Şifre kimlik bilgisi işleyici uç noktası, yerleşik kimlik bilgisi yöneticisinin aldığı şifre kimlik bilgilerini işler.

HTTP POST isteği aşağıdaki bilgileri içerir: