Bu sayfa, Cloud Translation API ile çevrilmiştir.

Google One Tap'i göster
Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Kullanıcıların web uygulamanızda kaydolmasını veya oturum açmasını sağlamak için sitenize bir Tek Dokunuş istemi ekleyin. İstemi oluşturmak ve özelleştirmek için HTML ve JavaScript'i kullanın.

Ön koşullar

OAuth kullanıcı rızası ekranınızı yapılandırmak, istemci kimliği almak ve istemci kitaplığını yüklemek için Kurulum bölümünde açıklanan adımları uygulayın.

Giriş sayfanıza Google ile oturum açma düğmesi ekleyin.

İstem oluşturma

Tek Dokunuş'un gösterilmesini istediğiniz tüm sayfalara bir kod snippet'i yerleştirin.

HTML

JWT kimlik bilgisini bir giriş uç noktasına döndürerek Tek Dokunuş istemini gösterin.

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-your_own_param_1_to_login="any_value"
   data-your_own_param_2_to_login="any_value">
</div>

data-login_uri özelliği, web uygulamanızın oturum açma uç noktasının URI'sidir. Google tarafından verilen kimlik jetonuyla birlikte oturum açma uç noktanıza gönderilen özel veri özellikleri ekleyebilirsiniz.

İsteğe bağlı olarak, içeriği değiştiremediğiniz statik HTML sayfalarında Tek Dokunma isteğinin gösterilip gösterilmeyeceğini kontrol etmek için data-skip_prompt_cookie özelliğini ve bir çerezi kullanın. Belirtilen çerez ayarlanırsa istem gösterilmez.

İstem başlığında kullanılan metni değiştirmek için isteğe bağlı data-context özelliğini kullanın. Örneğin, data-context: "signup" "Oturum aç" ifadesini "Kaydol" olarak değiştirir.

Varsayılan olarak, kullanıcı istem dışında bir yeri tıklarsa Tek Dokunuş istemi otomatik olarak kapanır. data-cancel_on_tap_outside özelliğini yanlış olarak ayarlayarak bu davranışı devre dışı bırakabilirsiniz.

Desteklenen özelliklerin tam listesi için g_id_onload referansına bakın.

JavaScript

JWT kimlik bilgisini tarayıcının JavaScript geri çağırma işleyicisine döndürerek Tek Dokunuş istemini gösterin.

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

JavaScript'te Tek Dokunma istemini yapılandırmak için öncelikle initialize() yöntemini çağırmanız gerekir. Ardından, istem kullanıcı arayüzünü görüntülemek için prompt() yöntemini çağırın.

İstem başlığında kullanılan metni değiştirmek için isteğe bağlı context alanını kullanın. Örneğin, context: 'signup' "Oturum aç" ifadesini "Kaydol" olarak değiştirir.

Varsayılan olarak, kullanıcı istem dışında bir yeri tıklarsa Tek Dokunuş istemi otomatik olarak kapanır. cancel_on_tap_outside mülkünü yanlış olarak ayarlayarak bu davranışı devre dışı bırakabilirsiniz.

Veri seçeneklerinin tam listesi için idConfiguration referansına bakın.

İstem durumu

İstem kullanıcı arayüzü durum bildirimlerini dinlemek için bir JavaScript geri çağırma işlevi kullanın.

Bildirimler aşağıdaki anlarda gönderilir:

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 olarak veya manuel olarak iptal edildiğinde ya da Google, seçili oturumda Google oturumu kapatıldığında kimlik bilgisi yayınlayamadığında ortaya çıkar.

Bu durumda, varsa sonraki kimlik sağlayıcılara geçmenizi öneririz.
Kapatma anı: Bu durum, Google bir kimlik bilgisini başarıyla aldığında veya kullanıcı kimlik bilgisi alma akışını durdurmak istediğinde gerçekleşir. Örneğin, kullanıcı giriş iletişim kutusuna kullanıcı adını ve şifresini girmeye başladığında Tek Tıklama istemini kapatmak ve reddedilen bir an tetiklemek için google.accounts.id.cancel() yöntemini çağırabilirsiniz.

Uyarı: Bir anınız reddedilirse sonraki kimlik sağlayıcılardan hiçbirini denemeyin.

HTML

JavaScript geri çağırma işlevi belirtmek için data-moment_callback özelliğini kullanın. Bildirim almak için geri çağırma işleyici gerekir.

<html>
  <head>
    <script>
      function continueWithNextIdp(notification) {
        if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
          // try Next provider if One Tap is not displayed or skipped
        }
      }
    </script>
  </head>
  <body>
    ...
    <div id="g_id_onload"
      data-client_id="YOUR_GOOGLE_CLIENT_ID"
      data-login_uri="https://your.domain/your_login_endpoint"
      data-moment_callback="continueWithNextIdp"
    </div>
    ...
  </body>
</html>

Kullanıcılarınızın oturum açmasını veya kaydolmasını kolaylaştırmak için mevcut kimlik bilgilerini bulmak üzere birden fazla kimlik sağlayıcıyla iletişim kurabilirsiniz. Bir sonraki kimlik sağlayıcıyı arayabilmeniz için istem kullanıcı arayüzü durumumuzu öğrenmek isteyebilirsiniz.

JavaScript

Geri çağırma işleyicinizi google.accounts.id.prompt parametresi olarak iletin. Burada bildirim güncellemelerini işlemek için bir ok işlevi kullanılır.

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  google.accounts.id.prompt((notification) => {
    if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
      // try next provider if OneTap is not displayed or skipped
    }
  });
}
</script>

Düğme ve istem

Google ile oturum aç düğmesi ve One Tap isteği tek bir sayfada birlikte gösterilebilir.

HTML

Hem g_id_onload hem de g_id_signin öğelerini ekleyerek hem Google ile oturum aç düğmesini hem de OneTap istemini gösterin.

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-context="signin"
   data-ux_mode="redirect"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-itp_support="true">
</div>

<div class="g_id_signin"
   data-type="standard"
   data-shape="rectangular"
   data-theme="outline"
   data-text="signin_with"
   data-size="large"
   data-logo_alignment="left">
</div>

JavaScript

Hem renderButton() hem de prompt() işlevlerini aynı anda çağırarak Google ile oturum açma düğmesini ve One Tap istemini görüntüleyin.

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  const parent = document.getElementById('google_btn');
  google.accounts.id.renderButton(parent, {theme: "filled_blue"});
  google.accounts.id.prompt();
}
</script>

One Tap'i kapatmayın

Bu bölüm yalnızca FedCM devre dışıyken geçerlidir. FedCM etkinleştirildiğinde tarayıcı, sayfa içeriğinin üstünde kullanıcı istemleri gösterir.

Son kullanıcıların gösterilen tüm bilgileri görmesini sağlamak için Google One Tap başka bir içerikle örtülmemelidir. Aksi takdirde, bazı durumlarda pop-up pencereler tetiklenebilir.

Google One Tap'in hiçbir zaman başka bir içerik tarafından örtülmediğinden emin olmak için sayfa düzeninizi ve öğelerin z-dizini özelliklerini tekrar kontrol edin. Kullanıcı deneyimi akışı değişikliği, kenarlıklardaki yalnızca tek bir piksel kapatıldığında bile tetiklenebilir.

Kimlik bilgisi yanıtı

Kimlik bilgisi yanıtına Google imzalı bir JWT dahildir. Yanıt, JavaScript geri çağırma işlevi kullanılarak tarayıcıya veya giriş uç noktasına yönlendirme yoluyla platformunuza döndürülür.

JS geri çağırma

Geri çağırma işlevini yapılandırmak için HTML veya JavaScript kullanın.

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-callback="YOUR_CALLBACK_HANDLER"
</div>

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  callback: 'YOUR_CALLBACK_HANDLER'
});

Örneğin, handleCredentialResponse JWT'nin kodunu çözer ve kimlik jetonu alanlarının bazılarını konsola yazdırır.

<script>
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: handleCredentialResponse
  });

  function handleCredentialResponse(response) {
    const responsePayload = decodeJwtResponse(response.credential);

    console.log("ID: " + responsePayload.sub);
    console.log('Full Name: ' + responsePayload.name);
    console.log('Given Name: ' + responsePayload.given_name);
    console.log('Family Name: ' + responsePayload.family_name);
    console.log("Image URL: " + responsePayload.picture);
    console.log("Email: " + responsePayload.email);
  }

  function decodeJwtResponse(token) {
    let base64Url = token.split('.')[1];
    let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    let jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    return JSON.parse(jsonPayload);
  }
</script>

Yönlendirme

Platformunuzun giriş uç noktasına kimlik bilgisi döndürmek için URL'yi OAuth 2.0 web istemcinizin Yetkilendirilmiş yönlendirme URI'si ayarlarına ekleyin.

Yeniden yönlendirme URI'sini yapılandırmak için HTML veya JavaScript kullanın.

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-ux_mode="redirect"
  data-login-uri="YOUR_LOGIN_URI"
</div>

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  ux_mode: 'redirect',
  login_uri: 'YOUR_LOGIN_URI'
});

Google One Tap'i göster Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Ön koşullar

İstem oluşturma

HTML

JavaScript

İstem durumu

HTML

JavaScript

Düğme ve istem

HTML

JavaScript

One Tap'i kapatmayın

Kimlik bilgisi yanıtı

JS geri çağırma

HTML

JavaScript

Yönlendirme

HTML

JavaScript

Google One Tap'i göster
Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.