Google One Tap anzeigen

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

Vorbereitung

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

Fügen Sie Ihrer Anmeldeseite einen Button für die Anmeldung mit Google hinzu.

Prompt-Rendering

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

HTML

Das One Tap-Prompt wird angezeigt und das JWT-Anmeldedaten an einen Anmeldeendpunkt zurückgegeben.

<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 Attribut data-login_uri ist der URI des Anmeldeendpunkts Ihrer Web-App. Sie können benutzerdefinierte Datenattribute hinzufügen, die zusammen mit dem von Google ausgestellten ID-Token an Ihren Anmeldeendpunkt gesendet werden.

Optional können Sie das Attribut data-skip_prompt_cookie und ein Cookie verwenden, um zu steuern, ob die Aufforderung zur Anmeldung mit einem Tippen auf statischen HTML-Seiten angezeigt wird, auf denen Sie den Inhalt nicht ändern können. Wenn das angegebene Cookie gesetzt ist, wird die Aufforderung nicht angezeigt.

Mit dem optionalen Attribut data-context können Sie den Text im Aufforderungstitel ändern. Beispiel: data-context: "signup" ändert „Anmelden bei“ in „Registrieren bei“.

Standardmäßig wird der One Tap-Prompt automatisch geschlossen, wenn der Nutzer außerhalb des Prompts klickt. Sie können dieses Verhalten deaktivieren, indem Sie das Attribut data-cancel_on_tap_outside auf „false“ setzen.

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

JavaScript

Die Aufforderung zur Einmalanmeldung wird angezeigt und das JWT-Anmeldedatenobjekt wird an den JavaScript-Callback-Handler des Browsers zurückgegeben.

<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 den One Tap-Hinweis in JavaScript konfigurieren möchten, müssen Sie zuerst die Methode initialize() aufrufen. Rufen Sie dann die Methode prompt() auf, um die Benutzeroberfläche für den Prompt aufzurufen.

Mit dem optionalen Feld context können Sie den Text ändern, der im Prompttitel verwendet wird. Beispiel: context: 'signup' ändert „Anmelden bei“ in „Registrieren bei“.

Standardmäßig wird der One Tap-Prompt automatisch geschlossen, wenn der Nutzer außerhalb des Prompts klickt. Sie können dieses Verhalten deaktivieren, indem Sie die Eigenschaft cancel_on_tap_outside auf „false“ setzen.

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

Prompt-Status

Verwenden Sie eine JavaScript-Callback-Funktion, um auf Statusbenachrichtigungen der Prompt-Benutzeroberfläche zu warten.

Benachrichtigungen werden in den folgenden Fällen gesendet:

  • Anzeigemoment:Dieser tritt nach dem Aufruf der Methode prompt() ein. Die Benachrichtigung enthält einen booleschen Wert, der angibt, ob die Benutzeroberfläche angezeigt wird oder nicht.

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

    In diesem Fall empfehlen wir, mit den nächsten Identitätsanbietern fortzufahren, sofern vorhanden.

  • Verworfenes Moment:Dies tritt ein, wenn Google Anmeldedaten erfolgreich abruft oder ein Nutzer den Abrufvorgang für Anmeldedaten beenden möchte. Wenn der Nutzer beispielsweise beginnt, seinen Nutzernamen und sein Passwort in das Anmeldedialogfeld einzugeben, können Sie die google.accounts.id.cancel()-Methode aufrufen, um die One Tap-Aufforderung zu schließen und einen Moment des Schließens auszulösen.

HTML

Verwenden Sie das Attribut data-moment_callback, um eine JavaScript-Callback-Funktion anzugeben. Zum Empfangen 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>

Um Nutzern die Anmeldung oder Registrierung zu erleichtern, können Sie mit mehreren Identitätsanbietern kommunizieren, um verfügbare Anmeldedaten zu finden. Möglicherweise möchten Sie den Status der Prompt-Benutzeroberfläche 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>

Button und Prompt

Der Button „Über Google anmelden“ und die One Tap-Aufforderung können zusammen auf einer Seite angezeigt werden.

HTML

Wenn Sie sowohl den Button „Über Google anmelden“ als auch die One Tap-Aufforderung anzeigen möchten, müssen Sie sowohl das g_id_onload- als auch das g_id_signin-Element einfügen.

<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

Sie können die Schaltfläche „Über Google anmelden“ und den One Tap-Prompt gleichzeitig anzeigen lassen, indem Sie die Funktionen renderButton() und prompt() gleichzeitig 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>

One Tap nicht abdecken

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

Damit Endnutzer alle angezeigten Informationen sehen, 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 das Seitenlayout und die z-index-Eigenschaften der Elemente, um sicherzustellen, dass Google One Tap zu keinem Zeitpunkt von anderen Inhalten verdeckt wird. Die Änderung des UX-Ablaufs kann auch dann ausgelöst werden, wenn nur ein einzelnes Pixel an den Rändern abgedeckt ist.

Antwort auf Anmeldedaten

Die Antwort für Berechtigungsnachweise 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 Ihre Plattform zurückgegeben.

JS-Callback

Sie können einen Callback entweder mit HTML oder mit JavaScript 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'
});

Im Beispiel wird das JWT mit handleCredentialResponse decodiert und einige der ID-Tokenfelder werden in der Konsole ausgegeben.

<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 Sie Anmeldedaten an den Anmeldeendpunkt Ihrer Plattform zurückgeben möchten, fügen Sie die URL den Einstellungen für Autorisierte Weiterleitungs-URIs Ihres OAuth 2.0-Webclients hinzu.

Sie können entweder HTML oder JavaScript verwenden, um einen Weiterleitungs-URI zu konfigurieren.

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