Warnung:Diese Daten werden gemäß der Richtlinie zu Google-Nutzerdaten bereitgestellt. Bitte lesen Sie sich die Richtlinien durch und halten Sie sie ein. Andernfalls kann das zu einem Projekt oder einem Konto führen.

Schaltfläche „Über Google anmelden“ anzeigen

Fügen Sie Ihrer Website eine Schaltfläche „Über Google anmelden“ hinzu, damit sich Nutzer in der Webanwendung registrieren oder anmelden können. Verwenden Sie entweder HTML oder JavaScript, um die Schaltfläche und die Attribute anzupassen, um die Form, Größe, den Text und das Design der Schaltfläche anzupassen.

Alternativer Text

Nachdem ein Nutzer ein Google-Konto ausgewählt und seine Einwilligung gegeben hat, teilt Google das Nutzerprofil über ein JSON-Webtoken (JWT). Hier findest du eine Übersicht über die Schritte zur Anmeldung und zur Nutzererfahrung. Verstehen der personalisierten Schaltfläche werden die verschiedenen Bedingungen und Statusangaben für die Darstellung der Schaltfläche durch Nutzer geprüft.

Vorbereitung

Führe die folgenden Schritte aus, bevor du die Schaltfläche zu deiner Anmeldeseite hinzufügst:

Schaltflächen-Rendering

Zur Anzeige der Schaltfläche „Über Google anmelden“ kannst du entweder HTML oder JavaScript auswählen, um die Schaltfläche auf deiner Anmeldeseite zu rendern:

HTML

Hiermit wird die Anmeldeschaltfläche in HTML gerendert und das JWT an Ihren Plattformendpunkt zurückgegeben.

<html>
  <body>
      <script src="https://accounts.google.com/gsi/client" async defer></script>
      <div id="g_id_onload"
         data-client_id="YOUR_GOOGLE_CLIENT_ID"
         data-login_uri="https://your.domain/your_login_endpoint"
         data-auto_prompt="false">
      </div>
      <div class="g_id_signin"
         data-type="standard"
         data-size="large"
         data-theme="outline"
         data-text="sign_in_with"
         data-shape="rectangular"
         data-logo_alignment="left">
      </div>
  </body>
</html>

Ein Element mit der Klasse g_id_signin wird als Schaltfläche „Über Google anmelden“ gerendert. Die Schaltfläche wird über die in den Datenattributen bereitgestellten Parameter angepasst.

Damit die Schaltfläche „Über Google anmelden“ und Google One Tap auf derselben Seite angezeigt werden, musst du data-auto_prompt="false" entfernen. Dies wird empfohlen, um die Abläufe zu vereinfachen und die Anmelderaten zu verbessern.

Eine vollständige Liste der Datenattribute finden Sie auf der Seite g_id_signin – Referenz.

JavaScript

Hiermit wird die Anmeldeschaltfläche mit JavaScript gerendert und das JWT an den JavaScript-Callback-Handler des Browsers zurückgegeben.

<html>
  <body>
      <script src="https://accounts.google.com/gsi/client" async defer></script>
      <script>
        function handleCredentialResponse(response) {
          console.log("Encoded JWT ID token: " + response.credential);
        }
        window.onload = function () {
          google.accounts.id.initialize({
            client_id: "YOUR_GOOGLE_CLIENT_ID",
            callback: handleCredentialResponse
          });
          google.accounts.id.renderButton(
            document.getElementById("buttonDiv"),
            { theme: "outline", size: "large" }  // customization attributes
          );
          google.accounts.id.prompt(); // also display the One Tap dialog
        }
    </script>
    <div id="buttonDiv"></div> 
  </body>
</html>

Das Element, das als erster Parameter für renderButton angegeben ist, wird als Schaltfläche „Über Google anmelden“ angezeigt. In diesem Beispiel wird buttonDiv für das Rendern der Schaltfläche auf der Seite verwendet. Die Schaltfläche wird über die im zweiten Parameter angegebenen Attribute an renderButton angepasst.

Um die Nutzerfreundlichkeit zu optimieren, wird google.accounts.id.prompt() aufgerufen, um One Tap als zweite Alternative zur Registrierung oder Anmeldung über die Schaltfläche anzuzeigen.

Die GIS-Bibliothek parst das HTML-Dokument nach Elementen mit einem ID-Attribut, das auf g_id_onload festgelegt ist, oder nach Klassenattributen, die g_id_signin enthalten. Wird ein passendes Element gefunden, wird die Schaltfläche auch mit HTML gerendert, unabhängig davon, ob sie auch in JavaScript gerendert wurden. Damit die Schaltfläche nicht zweimal angezeigt wird, enthalten möglicherweise widersprüchliche Parameter keine HTML-Elemente, die diesen Namen auf Ihren HTML-Seiten entsprechen.

Umgang mit Anmeldedaten

Nachdem die Nutzereinwilligung erteilt wurde, gibt Google ein JSON Web Token (JWT)-Anmeldedaten zurück, das als ID-Token bezeichnet wird, und zwar entweder an den Browser des Nutzers oder direkt an einen von Ihrer Plattform gehosteten Anmeldeendpunkt.

Wo Sie das JWT empfangen können, hängt davon ab, ob Sie die Schaltfläche mit HTML oder JavaScript rendern und ob ein Pop-up- oder UX-Modus verwendet wird.

Im UX-Modus von popup wird der Anmelde-UX-Ablauf in einem Pop-up-Fenster ausgeführt. Das ist im Allgemeinen ein weniger störendes Erlebnis und der Standard-UX-Modus.

Beim Rendern der Schaltfläche:

  • HTML können Sie festlegen:

    • data-callback, um das JWT an Ihren Callback-Handler zurückzugeben
    • data-login_uri für Google, um das JWT mit einer POST-Anfrage direkt an Ihren Anmeldeendpunkt zu senden.

    Wenn beide Werte festgelegt sind, hat data-callback Vorrang vor data-login_uri. Dies kann beispielsweise nützlich sein, wenn während des Debuggings ein Callback-Handler verwendet wird.

  • JavaScript muss auf callback gesetzt sein. Im Pop-up-Modus werden Weiterleitungen beim Senden der Schaltfläche in JavaScript nicht unterstützt. Wenn die Richtlinie festgelegt ist, wird login_uri ignoriert.

    Weitere Informationen zum Decodieren des JWT innerhalb des JS-Callback-Handlers finden Sie unter Umgang mit der zurückgegebenen Antwortantwort.

Weiterleitungsmodus

Im UX-Modus von redirect wird der Anmelde-UX-Ablauf mit der vollständigen Seitenweiterleitung des Browsers des Nutzers durchgeführt. Google gibt das JWT mithilfe einer POST-Anfrage direkt an Ihren Anmeldeendpunkt zurück. Dies ist in der Regel eine störendere Erfahrung für Nutzer, wird aber als sicherste Anmeldemethode angesehen.

Beim Rendern der Schaltfläche:

  • HTML: Optional können Sie für data-login_uri den URI des Anmeldeendpunkts festlegen.
  • Bei JavaScript können Sie für login_uri den URI des Anmeldeendpunkts festlegen.

Wenn Sie keinen Wert angeben, gibt Google das JWT an den URI der aktuellen Seite zurück.

Der URI des Anmelde-Endpunkts

Verwende HTTPS und einen absoluten URI, wenn du data-login_uri oder login_uri festlegst. Beispiel: https://example.com/path

HTTP ist nur zulässig, wenn während der Entwicklung „localhost“ verwendet wird: http://localhost/path.

Eine vollständige Beschreibung der Anforderungen und Validierungsregeln von Google findest du unter Sichere JavaScript-Quellen und Weiterleitungs-URIs verwenden.