Wyświetlaj Google One Tap

Dodaj do swojej witryny prośbę o zalogowanie się jednym dotknięciem, aby umożliwić użytkownikom rejestrację lub logowanie się w aplikacji internetowej. Użyj kodu HTML i JavaScript, aby renderować i dostosowywać prośbę.

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 do strony logowania.

Renderowanie prośby

Umieść fragment kodu na dowolnych stronach, na których chcesz wyświetlać prośbę o zalogowanie się jednym dotknięciem.

HTML

Wyświetl prośbę 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 końcowego logowania aplikacji internetowej. Możesz dodać niestandardowe atrybuty danych, które są wysyłane do punktu końcowego logowania wraz z tokenem identyfikatora wydanym przez Google.

Opcjonalnie możesz użyć atrybutu data-skip_prompt_cookie i pliku cookie, aby określić, czy prośba o zalogowanie się jednym dotknięciem ma być wyświetlana na statycznych stronach HTML, na których nie można zmienić treści. Jeśli określony plik cookie jest ustawiony, prośba nie jest wyświetlana.

Użyj opcjonalnego atrybutu data-context, aby zmienić tekst używany w tytule prośby. Na przykład data-context: "signup" zmienia "Zaloguj się w" na "Zarejestruj się w".

Domyślnie prośba o zalogowanie się jednym dotknięciem zamyka się automatycznie, jeśli użytkownik kliknie poza nią. Możesz wyłączyć to zachowanie, ustawiając atrybut data-cancel_on_tap_outside na false.

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

JavaScript

Wyświetl prompt One Tap, zwracając dane logowania JWT do modułu obsługi wywołania zwrotnego JavaScript 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ć prośbę o zalogowanie się jednym dotknięciem w JavaScript, musisz najpierw wywołać metodę initialize(). Następnie wywołaj metodę prompt(), aby wyświetlić interfejs prośby.

Użyj opcjonalnego pola context, aby zmienić tekst używany w tytule prośby. Na przykład context: 'signup' zmienia "Zaloguj się w" na "Zarejestruj się w".

Domyślnie prośba o zalogowanie się jednym dotknięciem zamyka się automatycznie, jeśli użytkownik kliknie poza nią. Możesz wyłączyć to zachowanie, ustawiając właściwość cancel_on_tap_outside na false.

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

Stan prośby

Użyj funkcji wywołania zwrotnego JavaScript, aby nasłuchiwać powiadomienia o stanie interfejsu prośby.

Powiadomienia są wysyłane w tych momentach:

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

  • Moment pominięcia: występuje, gdy prośba o zalogowanie się jednym dotknięciem zostanie zamknięta przez automatyczne anulowanie, ręczne anulowanie lub gdy Google nie uda się wydać danych logowania, np. gdy wybrana sesja zostanie wylogowana z Google.

    W takim przypadku zalecamy przejście do następnych dostawców tożsamości, jeśli tacy istnieją.

  • Moment odrzucenia: występuje, gdy Google pomyślnie pobierze dane logowania lub gdy użytkownik chce zatrzymać proces pobierania danych logowania. Na przykład, gdy użytkownik zacznie wpisywać nazwę użytkownika i hasło w oknie logowania, możesz wywołać metodę google.accounts.id.cancel(), aby zamknąć prośbę o zalogowanie się jednym dotknięciem i wywołać moment odrzucenia.

HTML

Użyj atrybutu data-moment_callback, aby określić funkcję wywołania zwrotnego JavaScript. Do odbierania powiadomień wymagany jest moduł obsługi 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 rejestrację, możesz komunikować się z wieloma dostawcami tożsamości, aby znaleźć dostępne dane logowania. Możesz chcieć poznać stan interfejsu prośby, aby móc wywołać następnego dostawcę tożsamości.

JavaScript

Przekaż moduł obsługi wywołania zwrotnego jako parametr do google.accounts.id.prompt. W tym przypadku do obsługi aktualizacji powiadomień używana jest funkcja strzałkowa.

<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 prośba

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

HTML

Wyświetl zarówno przycisk Zaloguj się przez Google, jak 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 prośby o zalogowanie się jednym dotknięciem

Ta sekcja dotyczy tylko sytuacji, gdy FedCM jest wyłączony. Gdy FedCM jest włączony, przeglądarka wyświetla prośby użytkownika na wierzchu treści strony.

Aby mieć pewność, że użytkownicy widzą wszystkie wyświetlane informacje, Google One Tap nie może być zasłonięte przez żadne inne treści. W przeciwnym razie w niektórych przypadkach mogą się pojawiać wyskakujące okienka.

Sprawdź układ strony i właściwości z-index elementów, aby mieć pewność, że Google One Tap nie jest w żadnym momencie zasłonięty przez inne treści. Zmiana procesu UX może zostać wywołana nawet wtedy, gdy zasłonięty jest tylko 1 piksel na obramowaniach.

Odpowiedź dotycząca danych logowania

Odpowiedź dotycząca danych logowania zawiera token JWT podpisany przez Google. Odpowiedź jest zwracana do przeglądarki za pomocą funkcji wywołania zwrotnego JavaScript lub do Twojej platformy przez przekierowanie do punktu końcowego 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 zapisuje niektóre pola tokena identyfikatora 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 końcowego logowania platformy, dodaj adres URL do ustawień autoryzowanych identyfikatorów URI przekierowania klienta internetowego 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'
});