Wyświetlaj Google One Tap

Dodaj do swojej witryny prompt „Zarejestruj się jednym kliknięciem”, aby umożliwić użytkownikom rejestrowanie się lub logowanie w aplikacji internetowej. Aby renderować i dostosowywać prompt, użyj kodu HTML i JavaScript.

Wymagania wstępne

Aby skonfigurować ekran zgody OAuth, uzyskać identyfikator klienta i wczytać bibliotekę klienta, wykonaj czynności opisane w sekcji Konfiguracja.

Dodaj przycisk Zaloguj się przez Google na stronie logowania.

Renderowanie promptu

Umieść fragment kodu na wszystkich stronach, na których chcesz wyświetlać funkcję One Tap.

HTML

Wyświetlić prompt One Tap, zwracając dane logowania JWT do punktu końcowego logowania.

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

Atrybut data-login_uri to identyfikator URI punktu logowania w aplikacji internetowej. Możesz dodawać niestandardowe atrybuty danych, które są wysyłane do punktu logowania wraz z tokenem identyfikacyjnym wydanym przez Google.

Pełną listę obsługiwanych atrybutów znajdziesz w sekcji g_id_onload dokumentacji.

JavaScript

Wyświetlić prompt One Tap, zwracając dane logowania JWT do modułu obsługi wywołania zwrotnego JavaScriptu w przeglądarce.

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

Aby skonfigurować prompt One Tap w JavaScript, musisz najpierw wywołać metodę initialize(). Następnie wywołaj metodę prompt(), aby wyświetlić prompt interfejsu użytkownika.

Pełną listę opcji danych znajdziesz w opisie idConfiguration.

Stan promptu

Aby odbierać powiadomienia o stanie promptu w interfejsie, użyj funkcji wywołania zwrotnego w JavaScript.

Powiadomienia są wysyłane w tych momentach:

  • Moment wyświetlania: następuje po wywołaniu metody prompt(). Powiadomienie zawiera wartość logiczną wskazującą, czy interfejs użytkownika jest wyświetlany.

  • Pominięcie momentu: występuje, gdy prośba o jeden klik jest zamknięta przez automatyczne anulowanie, ręczne anulowanie lub gdy Google nie może wydać danych logowania, na przykład gdy wybrana sesja jest wylogowana z Google.

    W takim przypadku zalecamy przejście do następnego dostawcy tożsamości, jeśli taki istnieje.

  • Moment odrzucenia: występuje, gdy Google pomyślnie odzyska dane logowania lub użytkownik chce przerwać proces ich pobierania. Gdy na przykład użytkownik zacznie wpisywać nazwę użytkownika i hasło w oknie logowania, możesz wywołać metodę google.accounts.id.cancel(), aby zamknąć prompt „Jedno kliknięcie” i wywołać moment odrzucenia.

HTML

Aby określić funkcję wywołania zwrotnego JavaScript, użyj atrybutu data-moment_callback. Aby otrzymywać powiadomienia, musisz użyć wywołania zwrotnego.

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

Aby ułatwić użytkownikom logowanie się lub rejestrowanie, możesz komunikować się z wieloma dostawcami tożsamości, aby znaleźć dostępne dane logowania. Możesz chcieć znać stan interfejsu promptu, aby móc wywołać następnego dostawcę tożsamości.

JavaScript

Przekaż uchwyt wywołania zwrotnego jako parametr do funkcji google.accounts.id.prompt, która używa funkcji strzałki do obsługi aktualizacji powiadomień.

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

Przycisk i prompt

Przycisk Zaloguj się przez Google i prośba o zalogowanie się jednym dotknięciem mogą być wyświetlane na jednej stronie.

HTML

Wyświetlaj przycisk Zaloguj się przez Google i prośbę o zalogowanie się jednym dotknięciem, dodając elementy g_id_onload i g_id_signin.

<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

Wyświetl przycisk Zaloguj się przez Google i prośbę o zalogowanie się jednym dotknięciem, wywołując jednocześnie funkcje renderButton() i prompt().

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

Nie zasłaniaj przycisku One Tap

Ta sekcja ma zastosowanie tylko wtedy, gdy funkcja FedCM jest wyłączona. Jeśli funkcja FedCM jest włączona, przeglądarka wyświetla prompty dla użytkownika u góry treści strony.

Aby użytkownicy mogli zobaczyć wszystkie wyświetlane informacje, Google One Tap nie może być objęty żadną inną treścią. W przeciwnym razie w niektórych przypadkach mogą się wyświetlać wyskakujące okienka.

Sprawdź układ strony i właściwości indeksu Z elementów, aby mieć pewność, że Google One Tap nie jest w żadnym momencie przysłonięty przez inne treści. Zmiana przepływu interfejsu użytkownika może zostać wywołana, nawet jeśli pokryta jest tylko część piksela na krawędziach.

Odpowiedź dotycząca danych logowania

Odpowiedź z danymi uwierzytelniania zawiera podpisany przez Google token JWT. Odpowiedź jest zwracana do przeglądarki za pomocą funkcji wywołania zwrotnego JavaScript lub do Twojej platformy przez przekierowanie do punktu logowania.

wywołanie zwrotne JS,

Aby skonfigurować wywołanie zwrotne, użyj kodu HTML lub JavaScript.

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

Na przykład handleCredentialResponse dekoduje token JWT i wypisuje niektóre pola tokenu identyfikacyjnego w konsoli.

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

Przekierowanie

Aby zwrócić dane logowania do punktu logowania platformy, dodaj adres URL do ustawień autoryzowanego identyfikatora URI przekierowania w kliencie internetowym OAuth 2.0.

Aby skonfigurować identyfikator URI przekierowania, użyj kodu HTML lub JavaScript.

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