Google ile oturum açma HTML API referansı

Bu referans sayfasında, web sayfalarında Google ile oturum aç düğmesini veya One Tap istemini göstermek için kullanılan Google ile oturum aç 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 yerleştirmeyin.

Veri özellikleri

Aşağıdaki tabloda, veri özelliklerinin açıklamalarıyla birlikte listesi verilmiştir:

Özellik türleri

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

data-client_id

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

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şla ödeme seçeneğinin gösterilip gösterilmeyeceğini belirler. Varsayılan değer true'dır. Bu değer false olduğunda Google One dokunma özelliği gösterilmez. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-auto_select

Bu özellik, yalnızca bir Google oturumu uygulamanızı onaylamışsa kullanıcı etkileşimi olmadan kimlik jetonunun otomatik olarak döndürülüp döndürülmeyeceğini belirler. Varsayılan değer false'dı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, Google Kimlik Doğrulama Platformu'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.

Mevcut sayfa giriş sayfanızsa bu özellik atlanabilir. Bu durumda kimlik bilgisi 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ı, oturum açma uç noktanıza gönderilir.

Giriş uç noktanız, gövdede kimlik jetonu değeri içeren bir credential parametresi içeren 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. Aşağıdaki bileşen ve kullanıcı deneyimi modu yapılandırmalarına bağlıdır:

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

• Google One Tap ve Google oturum açma düğmesi popup kullanıcı deneyimi modu için bu iki özellikten biri ayarlanmalıdır. Her ikisi de ayarlanırsa data-callback özelliği daha öncelikli olur.

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

data-native_login_uri

Bu özellik, şifre kimlik bilgisi işleyicinizin uç noktasının URL'sidir. data-native_login_uri özelliğini 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 ayarlayamazsınız. 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 değerini ayarlayamazsınız. Daha fazla bilgi için aşağıdaki tabloya bakın:

Bir ad alanındaki JavaScript işlevleri, HTML API'si tarafından desteklenmez. Bunun yerine, ad alanı içermeyen genel bir 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önderdiğinizde credential.id alanı için parametre adını belirtebilirsiniz. Varsayılan ad email'dır. 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'dır. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-cancel_on_tap_outside

Bu özellik, kullanıcı istemin dışını 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ı öğenin DOM kimliğini ayarlar. Ayarlanmamışsa 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

One Tap isteminin gösterilmesini kontrol etmek için çerez kullanır. Bu özellikle belirtilen çerez boş olmayan bir değere sahipse istem görüntülenmez. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-nonce

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

Nonce uzunluğu, ortamınızın desteklediği maksimum JWT boyutu ile tarayıcı ve 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 taleplerin dahil edilmesini istemek için kullanılan bir dizedir. Google tarafından kabul edilen taleplerin tam listesi için desteklenen talepler başlıklı makaleyi inceleyin.

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

data-context

Bu alan, One Tap 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 değer signin'dır.

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

Aşağıdaki tabloda, mevcut 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 veri türü PromptMomentNotification başlıklı makaleyi inceleyin.

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

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

data-state_cookie_domain

Tek Tık'ı bir üst alan adında ve alt alan adlarında göstermeniz gerekiyorsa tek bir paylaşılan durum çerezinin kullanılması için üst alan adını bu özelliğe iletin. 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'dır. Bu özelliğin One Tap kullanıcı deneyimi üzerinde etkisi yoktur. Daha fazla bilgi için aşağıdaki tabloya bakın:

Aşağıdaki tabloda, kullanılabilen 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ı listelenmektedir.

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

Joker karakterli önekler 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 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 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 ve 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.

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

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

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

data-itp_support

Bu alan, Akıllı İzlemeyi Önleme (ITP) özelliğini 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:

data-login_hint

Uygulamanız hangi kullanıcının oturum açması gerektiğini önceden biliyorsa Google'a oturum açma ipucu sağlayabilir. Bu durumda 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.

data-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 vermek için 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ı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ı (user@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 olarak false değerine ayarlanır. Daha fazla bilgi için FedCM'ye geçiş sayfasını inceleyin.

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 olarak false değerini alır. Daha fazla bilgi için aşağıdaki tabloya bakın:

data-button_auto_select

Bu alan, FedCM düğmesi 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, hesap seçici istemi atlanarak otomatik olarak oturum açar. Varsayılan olarak false'dır. Düğme ile otomatik oturum açmayı, etkinleştirme lansmanı 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 eklediğinizde öğ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 ö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ılabilen 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
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ıklar yoktur. Bunun tek istisnası, metnin ekran erişilebilirliği için okunduğu durumlardır.

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

Aşağıdaki tabloda, kullanılabilen 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. 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, kullanıcıları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ı boyutlarını 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

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:

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 bağlı olarak kullanıcının oturumunu açabilir ve kullanıcıyı kayıt sayfasına veya ek bilgiler için hesap bağlama sayfasına yönlendirebilirsiniz. İstemciler, tanınmayan yanıt parametrelerini YOK SAYMALIDIR.

Giriş uç noktanıza yönelik bir istek örneği:

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

Kimlik jetonu 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 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ı'nın genel olarak benzersiz tanımlayıcısıdır. Yalnızca sub alanını, tüm Google Hesapları arasında benzersiz olduğu ve asla yeniden kullanılmadığı için kullanıcı tanımlayıcısı olarak 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, @gmail.com sonekine sahipse bu bir Gmail hesabıdır.
• 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 sorgulama yöntemleri önerilir. Google, Google Hesabı oluşturulurken kullanıcıyı ilk başta doğruladığı için email_verified 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 kapalı olduğu anlamına gelmez. Uygulamanız, kullanıcılarınızın oturum yönetiminden sorumludur.

g_csrf_token

Sahteciliğe karşı koruma sağlayan bir durum jetonu. Bu, gsi/client kitaplığı tarafından oluşturulan bir siteler arası istek sahtekarlığı (CSRF) jetonudur. Rastgele bir değer, hem POST yükü gövdesinde Çerez hem de İstek Parametresi olarak bulunur. İsteği sunucunuzda işlerken bu iki değer eşleşmezse istek geçersiz kabul edilmelidir.

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:

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