Schaltfläche „Über Google anmelden“ anzeigen

Fügen Sie Ihrer Website einen Button „Über Google anmelden“ hinzu, damit sich Nutzer in Ihrer Web-App registrieren oder anmelden können. Sie können den Button und die Attribute entweder mit HTML oder JavaScript rendern, um Form, Größe, Text und Design des Buttons anzupassen.

Personalisierter Anmeldebutton

Nachdem ein Nutzer ein Google-Konto ausgewählt und seine Einwilligung gegeben hat, gibt Google das Nutzerprofil über ein JSON Web Token (JWT) weiter. Eine Übersicht über die Schritte bei der Anmeldung und die Nutzererfahrung finden Sie unter Funktionsweise. Unter Personalisierter Button werden die verschiedenen Bedingungen und Status beschrieben, die sich darauf auswirken, wie der Button Nutzern angezeigt wird.

Vorbereitung

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

Button rendern

Sie können den Button „Über Google anmelden“ entweder mit HTML oder JavaScript auf Ihrer Anmeldeseite rendern:

HTML

Rendern Sie den Anmeldebutton mit HTML und geben Sie das JWT an den Anmeldeendpunkt Ihrer Plattform zurück.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></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 Button „Über Google anmelden“ gerendert. Der Button wird durch die in den Datenattributen angegebenen Parameter angepasst.

Wenn Sie auf derselben Seite einen Button „Über Google anmelden“ und Google One Tap anzeigen möchten, entfernen Sie data-auto_prompt="false". So lassen sich Reibungsverluste reduzieren und die Anmelderaten verbessern.

Die vollständige Liste der Datenattribute finden Sie auf der g_id_signin Referenz seite

JavaScript

Rendern Sie den Anmeldebutton mit JavaScript und geben Sie das JWT an den JavaScript-Callback-Handler des Browsers zurück.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></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 als erster Parameter für renderButton angegebene Element wird als Button „Über Google anmelden“ angezeigt. In diesem Beispiel wird buttonDiv verwendet, um den Button auf der Seite zu rendern. Der Button wird mit den Attributen angepasst, die im zweiten Parameter für renderButton angegeben sind.

Um Reibungsverluste für Nutzer zu minimieren, wird google.accounts.id.prompt() aufgerufen, um One Tap als zweite Alternative zur Verwendung des Buttons für die Registrierung oder Anmeldung anzuzeigen.

Die GIS-Bibliothek parst das HTML-Dokument nach Elementen, bei denen das Attribut „ID“ auf g_id_onload gesetzt ist, oder nach Klassenattributen, die g_id_signin enthalten. Wenn ein übereinstimmendes Element gefunden wird, wird der Button mit HTML gerendert, unabhängig davon, ob Sie den Button auch in JavaScript gerendert haben. Damit der Button nicht zweimal angezeigt wird und möglicherweise in Konflikt stehende Parameter verwendet werden, sollten Sie keine HTML-Elemente mit diesen Namen in Ihre HTML-Seiten einfügen.

Sprache des Buttons

Die Sprache des Buttons wird automatisch durch die Standardsprache des Browsers oder die Einstellung des Nutzers in der Google-Sitzung bestimmt. Sie können die Sprache auch manuell auswählen, indem Sie beim Laden der Bibliothek den Parameter hl und den Sprachcode zur Direktive „src“ hinzufügen und den optionalen Parameter „data-locale“ (in HTML) oder „locale“ (in JavaScript) hinzufügen.

HTML

Das folgende Code-Snippet zeigt, wie Sie die Sprache des Buttons auf Französisch festlegen. Fügen Sie dazu der URL der Clientbibliothek den Parameter hl hinzu und setzen Sie das Attribut data-locale auf Französisch:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>

JavaScript

Das folgende Code-Snippet zeigt, wie Sie die Sprache des Buttons auf Französisch festlegen. Fügen Sie dazu der URL der Clientbibliothek den Parameter hl hinzu und rufen Sie die Methode google.accounts.id.renderButton auf, wobei der Parameter locale auf Französisch gesetzt ist:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
  google.accounts.id.renderButton(
    document.getElementById("buttonDiv"),
    { locale: "fr" }
  );
</script>

Anmeldedaten verarbeiten

Nachdem der Nutzer seine Einwilligung gegeben hat, gibt Google ein JSON Web Token (JWT) zurück, das als ID-Token bezeichnet wird. Dieses wird entweder an den Browser des Nutzers oder direkt an einen Anmeldeendpunkt gesendet, der von Ihrer Plattform gehostet wird.

Wo Sie das JWT empfangen, hängt davon ab, ob Sie den Button mit HTML oder JavaScript rendern und ob der UX-Modus „Pop-up“ oder „Weiterleitung“ verwendet wird.

Im UX-Modus popup wird der Anmeldeablauf in einem Pop-up-Fenster ausgeführt. Dieser Modus ist in der Regel weniger aufdringlich für Nutzer und ist der Standard-UX-Modus.

Wenn Sie den Button mit Folgendem rendern:

HTML

Sie können Folgendes festlegen:

  • data-callback, um das JWT an Ihren Callback-Handler zurückzugeben, oder
  • data-login_uri damit Google das JWT mit einer POST-Anfrage direkt an Ihren Anmelde endpunkt sendet.

Wenn beide Werte festgelegt sind, hat data-callback Vorrang vor data-login_uri. Es kann hilfreich sein, beide Werte festzulegen, wenn Sie einen Callback-Handler zum Debuggen verwenden.

JavaScript

Sie müssen einen callback angeben. Der Pop-up-Modus unterstützt keine Weiterleitungen, wenn der Button in JavaScript gerendert wird. Wenn login_uri festgelegt ist, wird er ignoriert.

Weitere Informationen zum Decodieren des JWT in Ihrem JS-Callback-Handler finden Sie unter Zurückgegebene Anmeldedatenantwort verarbeiten.

Weiterleitungsmodus

Im UX-Modus redirect wird der Anmeldeablauf mit einer Weiterleitung der gesamten Seite im Browser des Nutzers ausgeführt. Google sendet das JWT mit einer POST-Anfrage direkt an Ihren Anmeldeendpunkt. Dieser Modus ist in der Regel aufdringlicher für Nutzer, gilt aber als die sicherste Anmeldemethode.

Wenn Sie den Button mit Folgendem rendern:

  • HTML : Optional können Sie data-login_uri auf den URI Ihres Anmeldeendpunkts setzen.
  • JavaScript : Optional können Sie login_uri auf den URI Ihres Anmeldeendpunkts setzen.

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

URI Ihres Anmeldeendpunkts

Verwenden Sie HTTPS und einen absoluten URI, wenn Sie data-login_uri oder login_uri festlegen. Beispiel: https://example.com/path.

HTTP ist nur zulässig, wenn Sie während der Entwicklung localhost verwenden: http://localhost/path.

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