Google One Tap'i göster

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

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

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 önce 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 context alanını kullanın. Örneğin, context: 'signup' "Oturum aç" ifadesini "Kaydol" olarak değiştirir.

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 bir kimlik bilgisi yayınlayamadığında (ör. seçili oturumda Google oturumu kapatıldığı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.

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'
});