Google HTML API'si ile Oturum Açma referansı

Bu referans sayfasında, Google ile oturum açma HTML veri özellikleri API'si açıklanmaktadır. Web sayfalarınızda One Tap istemini veya Google ile Oturum Aç düğmesini görüntülemek için API'yi kullanabilirsiniz.

"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 koymayın.

Veri özellikleri

Aşağıdaki tabloda, veri özellikleri açıklamalarıyla birlikte listelenmektedir:

Özellik türleri

Aşağıdaki bölümlerde, her bir özelliğin türü ve bir örnek hakkında ayrıntılı bilgi verilmektedir.

data-client_id

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

data-auto_prompt

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

otomatik_veri_seçimi

Bu özellik, uygulamanızı yalnızca bir Google oturumu onayladıysa kullanıcı etkileşimi olmadan otomatik olarak bir kimlik jetonunun döndürülüp döndürülmeyeceğini belirler. Varsayılan değer false'tür. 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, API Konsolu'nda 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ımlanmamışsa ve kullanıcı Google ile oturum açma veya OneTap düğmelerini tıkladığında ya da otomatik oturum açma işlemi gerçekleştiğinde kimlik jetonu kimlik bilgisi yanıtı, giriş uç noktanıza gönderilir.

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

Giriş uç noktanız, gövdesinde kimlik jetonu değerine sahip bir credential anahtarı içeren POST isteklerini işlemelidir.

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

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

credential=ID_TOKEN

veri geri çağırma

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 değer, 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çma düğmesi redirect kullanıcı deneyimi modu için gereklidir. Bu modda data-callback özelliği yoksayılır.

• 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. Her ikisi de ayarlanmışsa data-callback özelliği daha önceliklidir.

Bir ad alanındaki JavaScript işlevleri HTML API tarafından desteklenmez. Bunun yerine, ad alanı içermeyen bir genel JavaScript işlevi kullanın. Örneğin, mylib.callback yerine mylibCallback kullanı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 yerel 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:

veri-yerel_geri_arama

Bu özellik, tarayıcının yerel 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 yerel kimlik bilgisi yöneticisine geri döner. Hem data-native_callback hem de data-native_login_uri ayarlamanıza izin verilmiyor. Daha fazla bilgi için aşağıdaki tabloya bakın:

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

data-native_id_param

Şifre kimliğini şifre kimliği işleyici uç noktasına gönderirken credential.id alanının parametre adını belirtebilirsiniz. Varsayılan ad email. 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'tir. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-cancel_on_tap_outside

Bu özellik, kullanıcı istem dışında bir yeri tıkladığında 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ı öğesinin DOM kimliğini ayarlar. Bu ayar yapılmadıysa pencerenin sağ üst köşesinde Tek Dokunma istemi gösterilir. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-skip_prompt_cookie

Bu özellik, belirtilen çerezin değeri boş değilse One Tap'ı atlar. Daha fazla bilgi için aşağıdaki tabloya bakın:

veri tek seferlik rastgele sayısı

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

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.

data-context

Bu özellik, tek dokunuş isteminde gösterilen başlığın ve mesajların metnini değiştirir. Daha fazla bilgi için aşağıdaki tabloya bakın:

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

veri-an_geri_arama

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

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

Ad alanındaki JavaScript işlevleri HTML API'si tarafından desteklenmez. Bunun yerine, ad alanı içermeyen bir genel 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 tek bir paylaşılan durum çerezi kullanılması için üst alan adını bu özelliğe iletin. Daha fazla bilgi için aşağıdaki tabloya bakın:

veri-ux_modu

Bu özellik, Google ile Oturum Aç düğmesinin kullandığı kullanıcı deneyimi akışını ayarlar. Varsayılan değer popup değeridir. Bu özelliğin Tek Dokunuş kullanıcı deneyimi üzerinde 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'in yerleştirilmesine 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'i başlatma işlemi başarısız olur ve durur.

Joker karakter ön ekleri de desteklenir. Örneğin "https://*.example.com", example.com ve alt alan adlarıyla tüm düzeylerde (ör.news.example.com, login.news.example.com) eşleşir. Joker karakter kullanırken göz önünde bulundurulması gerekenler:

• Kalıp dizeleri yalnızca joker karakter ve üst düzey bir alandan oluşamaz. Örneğin, https://*.com ve https://*.co.uk geçersizdir. Yukarıda belirtildiği gibi "https://*.example.com", example.com ve alt alan adları ile eşleşir. 2 farklı alanı temsil etmek için virgülle ayrılmış bir liste 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 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'ı manuel olarak kapattığında varsayılan ara iframe davranışını geçersiz kılar. Varsayılan davranış, ara iframe'in DOM'den hemen kaldırılmasıdır.

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

Bir ad alanındaki JavaScript işlevleri HTML API tarafından desteklenmez. Bunun yerine, ad alanı olmadan genel 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 yeni sürüme geçirilmiş Tek Dokunuş 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 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 belgelerine bakın.

veri-hd

Bir kullanıcının birden fazla hesabı varsa ve yalnızca Workspace hesabıyla oturum açması gerekiyorsa Google'a alan adı ipucu sağlamak için bunu 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ı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ı (kullanıcı@gmail.com) hariç tutar.

Daha fazla bilgi için hd ile ilgili OpenID Connect belgelerine bakın.

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 değer yanlıştır. Daha fazla bilgi için FedCM'ye taşıma sayfasına bakın.

data-enable_redirect_uri_validation

Yönlendirme URI'si doğrulama kuralları ile uyumlu düğme yönlendirme akışını etkinleştirin.

"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ı listelenmektedir:

Özellik türleri

Aşağıdaki bölümlerde, her bir özelliğin türü ve bir örnek hakkında ayrıntılı bilgi verilmektedir.

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

veri-teması

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
outline
filled_blue
filled_black

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ılabilen 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 metninde görsel farklılık 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 mevcut 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ılabilen 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ılabilen hizalamalar ve açıklamaları listelenmiştir:

logo_alignment
left
center

data-width

Piksel cinsinden minimum düğme genişliği. Kullanılabilir 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österin. 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 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ç düğmesi tıklandığında Google ile oturum aç 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. Kimlik jetonuyla birlikte aynı dize 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çıp bir kayıt sayfasına veya daha fazla bilgi edinmesi için bir hesap bağlama sayfasına yönlendirebilirsiniz.

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

yeterlilik belgesi

Kodunun çözüldüğünde kimlik jetonu 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": "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's creation time
  "exp": 1596477600, // Unix timestamp of the assertion's expiration time
  "jti": "abc161803398874def"
}

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 sub alanını yalnızca kullanın. Bir Google Hesabı'nın farklı zamanlarda birden fazla e-posta adresi olabileceğinden tanımlayıcı olarak e-posta adresi 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 bu e-posta adresi için 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, @gmail.com son ekiyle bitiyorsa 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'i kullanmadan Google Hesabı'na kaydolabilir. email, @gmail.com soneki içermiyorsa ve hd yoksa Google yetkili değildir ve kullanıcıyı doğrulamak için şifre veya başka istem yöntemleri önerilir. Google, Google Hesabı oluşturulduğunda kullanıcıyı ilk kez doğruladığı için email_verified doğru olabilir. Ancak üçüncü taraf e-posta hesabının sahipliği o zamandan beri değişmiş olabilir.

exp alanında, jetonu sunucu tarafında doğrulamanız için son kullanma zamanı gösterilir. Google ile Oturum Açma işlevinden alınan kimlik jetonu bir saattir. Süre dolmadan önce jetonu doğrulamanız gerekir. Oturum yönetimi için exp kullanmayın. Geçerlilik süresi dolmuş bir kimlik jetonu, kullanıcının oturumunun kapalı olduğu anlamına gelmez. Kullanıcılarınızın oturum yönetiminden uygulamanız sorumludur.

select_by

Aşağıdaki tabloda select_by alanı için olası değerler listelenmektedir. Değeri ayarlamak için oturum ve izin durumuyla birlikte kullanılan düğme türü kullanılır.

• Kullanıcı, One Tap veya Google ile oturum aç düğmesine bastı ya da dokunmadan 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 oturum açtı.

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

  • kullanıcı kimlik bilgilerini paylaşma iznini vermek için Onayla düğmesine bastığında veya
  • Daha önce izin verdiyseniz ve Google Hesabı seçmek için Hesap Seç'i kullandıysanız

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

durum

Bu parametre yalnızca kullanıcı oturum açmak için Google ile oturum açma 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.

Birden fazla Google ile Oturum Aç düğmesi aynı sayfada oluşturulabildiğ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 parametreyi kullanabilirsiniz.

Şifre kimlik bilgisi işleyici uç noktası

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

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