Google One Tap anzeigen

Fügen Sie Ihrer Website einen One Tap-Prompt hinzu, damit sich Nutzer in Ihrer Webanwendung registrieren oder anmelden können. Verwenden Sie HTML und JavaScript, um den Prompt zu rendern und anzupassen.

Vorbereitung

Folgen Sie der Anleitung unter Einrichtung, um den OAuth-Zustimmungsbildschirm zu konfigurieren, eine Client-ID abzurufen und die Clientbibliothek zu laden.

Fügen Sie Ihrer Anmeldeseite die Schaltfläche Über Google anmelden hinzu.

Prompt-Rendering

Fügen Sie ein Code-Snippet auf allen Seiten ein, auf denen One Tap angezeigt werden soll.

HTML

Rufen Sie die Aufforderung für die One-Tap-Anmeldung auf und geben Sie die JWT-Anmeldedaten an einen Anmeldeendpunkt zurück.

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

Das data-login_uri-Attribut ist der URI des Anmeldeendpunkts Ihrer Webanwendung. Sie können benutzerdefinierte Datenattribute hinzufügen, die zusammen mit dem von Google ausgestellten ID-Token an Ihren Anmeldeendpunkt gesendet werden.

Eine vollständige Liste der unterstützten Attribute finden Sie in der g_id_onload-Referenz.

JavaScript

Zeige die Aufforderung für die One-Tap-Authentifizierung an und gib die JWT-Anmeldedaten an den JavaScript-Callback-Handler des Browsers zurück.

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

Wenn Sie die Aufforderung zum Bezahlen mit nur einem Tastenanschlag in JavaScript konfigurieren möchten, müssen Sie zuerst die Methode initialize() aufrufen. Rufen Sie dann die Methode prompt() auf, um die Prompt-Benutzeroberfläche anzuzeigen.

Eine vollständige Liste der Datenoptionen finden Sie in der idConfiguration-Referenz.

Prompt-Status

Verwenden Sie eine JavaScript-Callback-Funktion, um Benachrichtigungen zum Status der Prompt-Benutzeroberfläche zu empfangen.

Benachrichtigungen werden in folgenden Fällen gesendet:

  • Anzeigenmoment:Dieser tritt auf, nachdem die Methode prompt() aufgerufen wurde. Die Benachrichtigung enthält einen booleschen Wert, der angibt, ob die Benutzeroberfläche angezeigt wird oder nicht.

  • Übersprungener Moment:Dieser Fall tritt auf, wenn die Aufforderung zum One-Tap-Login durch eine automatische oder manuelle Stornierung geschlossen wird oder Google keine Anmeldedaten ausstellen kann, z. B. wenn die ausgewählte Sitzung von Google abgemeldet ist.

    In diesem Fall empfehlen wir Ihnen, mit dem nächsten Identitätsanbieter fortzufahren, falls vorhanden.

  • Abgelehnt:Dieser Status wird angezeigt, wenn Google Anmeldedaten erfolgreich abgerufen hat oder ein Nutzer den Abrufvorgang abbrechen möchte. Wenn der Nutzer beispielsweise beginnt, seinen Nutzernamen und sein Passwort in das Anmeldedialogfeld einzugeben, können Sie die Methode google.accounts.id.cancel() aufrufen, um die Aufforderung zum schnellen Anmelden zu schließen und einen Moment des Ausblendens auszulösen.

HTML

Verwenden Sie das Attribut data-moment_callback, um eine JavaScript-Callback-Funktion anzugeben. Für den Empfang von Benachrichtigungen ist ein Callback-Handler erforderlich.

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

Damit sich Ihre Nutzer einfacher anmelden oder registrieren können, können Sie mit mehreren Identitätsanbietern kommunizieren, um verfügbare Anmeldedaten zu finden. Möglicherweise möchten Sie den Status der Aufforderungs-UI kennen, damit Sie den nächsten Identitätsanbieter aufrufen können.

JavaScript

Übergeben Sie Ihren Callback-Handler als Parameter an google.accounts.id.prompt. Hier wird eine Pfeilfunktion verwendet, um Benachrichtigungsaktualisierungen zu verarbeiten.

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

Schaltfläche und Prompt

Die Schaltfläche „Über Google anmelden“ und die One Tap-Aufforderung können auf einer einzigen Seite angezeigt werden.

HTML

Wenn Sie sowohl die Schaltfläche „Über Google anmelden“ als auch die One Tap-Aufforderung anzeigen möchten, fügen Sie die Elemente g_id_onload und g_id_signin ein.

<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

Rufen Sie die Schaltfläche „Über Google anmelden“ und die One Tap-Aufforderung auf, indem Sie gleichzeitig die Funktionen renderButton() und prompt() aufrufen.

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

Abdeckung darf One Tap nicht verdecken

Dieser Abschnitt gilt nur, wenn FedCM deaktiviert ist. Wenn FedCM aktiviert ist, werden im Browser Nutzeraufforderungen über den Seiteninhalten angezeigt.

Damit Endnutzer alle angezeigten Informationen sehen können, darf Google One Tap nicht von anderen Inhalten verdeckt werden. Andernfalls werden in einigen Fällen möglicherweise Pop-up-Fenster ausgelöst.

Prüfen Sie Ihr Seitenlayout und die Z-Index-Eigenschaften der Elemente, damit Google One Tap zu keinem Zeitpunkt von anderen Inhalten verdeckt wird. Die Änderung des UX-Flows kann auch ausgelöst werden, wenn nur ein einziges Pixel in den Rändern bedeckt ist.

Antwort auf Anmeldedatenanfrage

Die Antwort auf die Anfrage enthält ein von Google signiertes JWT. Die Antwort wird entweder über eine JavaScript-Callback-Funktion an den Browser oder über eine Weiterleitung an einen Anmeldeendpunkt an deine Plattform zurückgegeben.

JS-Callback

Sie können entweder HTML oder JavaScript verwenden, um einen Callback zu konfigurieren.

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

Beispielsweise decodiert handleCredentialResponse das JWT und druckt einige der ID-Token-Felder in die Konsole.

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

Weiterleitung

Wenn du Anmeldedaten an den Anmeldeendpunkt deiner Plattform zurückgeben möchtest, füge die URL den Einstellungen für Autorisierte Weiterleitungs-URIs deines OAuth 2.0-Webclients hinzu.

Konfigurieren Sie eine Weiterleitungs-URI entweder mit HTML oder 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'
});