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.

Opcjonalnie możesz użyć atrybutu data-skip_prompt_cookie i pliku cookie, aby określić, czy prompt „Jedno kliknięcie” ma się wyświetlać na statycznych stronach HTML, na których nie można zmienić treści. Jeśli określony plik cookie jest ustawiony, komunikat nie jest wyświetlany.

Aby zmienić tekst używany w tytule prompta, użyj opcjonalnego atrybutu data-context. Na przykład data-context: "signup" zmienia „Zaloguj się w” na „Zarejestruj się w”.

Domyślnie prompt One Tap zamyka się automatycznie, jeśli użytkownik kliknie poza nim. Możesz wyłączyć to zachowanie, ustawiając atrybut data-cancel_on_tap_outside na wartość false.

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 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 w interfejsie użytkownika.

Aby zmienić tekst używany w tytule prompta, użyj opcjonalnego pola context. Na przykład context: 'signup' zmienia „Zaloguj się w” na „Zarejestruj się w”.

Domyślnie prompt One Tap zamyka się automatycznie, jeśli użytkownik kliknie poza nim. Możesz wyłączyć to zachowanie, ustawiając właściwość cancel_on_tap_outside na wartość fałsz.

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

Ważna informacja: aby interaktywnie dostosowywać One Tap i tworzyć fragmenty kodu do wykorzystania w witrynie, użyj generatora kodu.

Stan prompta

Aby odbierać powiadomienia o stanie promptu w interfejsie, użyj funkcji JavaScript callback.

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.

  Ostrzeżenie: gdy nastąpi odrzucenie, nie próbuj używać żadnego z następnych dostawców tożsamości.

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 zarówno przycisk Zaloguj się przez Google, jak i prośbę o zalogowanie się jednym dotknięciem, uwzględniają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.

Ważne: nie zasłaniaj Google One Tap żadną inną treścią.

Ostrzeżenie: nie ukrywaj żadnej treści promptu One Tap. Nie zasłaniaj treści, które wskazują, że treść powiadomienia One Tap pochodzi z elementu iframe Google. Jeśli tego nie zrobisz, możemy zawiesić projekt lub konto.

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.

Ważne: po otrzymaniu tokena JWT zdecydowanie zalecamy zweryfikowanie go na serwerze.

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>

Uwaga: nie można ustawić jednocześnie atrybutu data-login_uri i atrybutu data-callback.

JavaScript

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

Uwaga: nie można ustawić pól login_uri i callback jednocześnie.

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 końcowego logowania na platformie, 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>

Uwaga: nie można ustawić jednocześnie atrybutu data-login_uri i atrybutu data-callback.

JavaScript

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

Uwaga: nie można ustawić pól login_uri i callback jednocześnie.