Schaltfläche „Über Google anmelden“ anzeigen

Füge deiner Website die Schaltfläche „Über Google anmelden“ hinzu, damit sich Nutzer bei deiner Webanwendung registrieren oder anmelden können. Verwende HTML oder JavaScript, um die Schaltfläche und die Attribute zu rendern. So kannst du Form, Größe, Text und Design der Schaltfläche anpassen.

Personalisierte Anmeldeschaltfläche.

Nachdem ein Nutzer ein Google-Konto ausgewählt und seine Einwilligung erteilt hat, gibt Google das Nutzerprofil mithilfe eines JSON Web Tokens (JWT) weiter. Eine Übersicht über die Schritte bei der Anmeldung und die Nutzererfahrung finden Sie unter Funktionsweise. Unter Informationen zur personalisierten Schaltfläche werden die verschiedenen Bedingungen und Statusangaben geprüft, die sich darauf auswirken, wie die Schaltfläche den Nutzern angezeigt wird.

Voraussetzungen

Führen Sie die folgenden Schritte aus, bevor Sie die Schaltfläche Ihrer Anmeldeseite hinzufügen:

Schaltflächen-Rendering

Wenn die Schaltfläche „Über Google anmelden“ angezeigt werden soll, kannst du entweder HTML oder JavaScript auswählen, um die Schaltfläche auf deiner Anmeldeseite zu rendern:

HTML

Rendere die Anmeldeschaltfläche mit HTML und gib das JWT an den Anmeldeendpunkt deiner 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 Schaltfläche „Über Google anmelden“ gerendert. Die Schaltfläche wird durch die Parameter in den Datenattributen angepasst.

Wenn die Schaltfläche „Über Google anmelden“ und Google One Tap auf derselben Seite angezeigt werden sollen, entferne data-auto_prompt="false". Dies wird empfohlen, um Probleme zu verringern und die Anmelderaten zu verbessern.

Eine vollständige Liste der Datenattribute finden Sie auf der Referenzseite zu g_id_signin.

JavaScript

Rendere die Anmeldeschaltfläche mit JavaScript und gib 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 Schaltfläche „Über Google anmelden“ angezeigt. In diesem Beispiel wird buttonDiv verwendet, um die Schaltfläche auf der Seite zu rendern. Die Schaltfläche wird mithilfe der Attribute angepasst, die im zweiten Parameter von renderButton angegeben sind.

Um die Nutzerfreundlichkeit zu minimieren, 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 gesetzt ist, oder nach Klassenattributen, die g_id_signin enthalten. Wenn ein übereinstimmendes Element gefunden wird, wird die Schaltfläche im HTML-Format gerendert, unabhängig davon, ob Sie die Schaltfläche auch in JavaScript gerendert haben. Damit die Schaltfläche nicht zweimal angezeigt wird, sollten Sie auf Ihren HTML-Seiten keine HTML-Elemente einfügen, die mit diesen Namen übereinstimmen, da sie möglicherweise in Konflikt stehende Parameter enthalten.

Sprache der Schaltfläche

Die Sprache der Schaltfläche wird automatisch durch die Standardsprache des Browsers oder die Einstellung des Nutzers der Google-Sitzung bestimmt. Sie können die Sprache auch manuell auswählen. Dazu fügen Sie der „src“-Anweisung den Parameter hl und den Sprachcode beim Laden der Bibliothek sowie den optionalen data-locale- oder Locale-Parameter data-locale in HTML bzw. locale in JavaScript hinzu.

HTML

Im folgenden Code-Snippet sehen Sie, wie die Sprache der Schaltfläche auf Französisch angezeigt wird. Dazu fügen Sie der URL der Clientbibliothek den Parameter hl hinzu und legen das Attribut data-locale auf Französisch fest:

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

JavaScript

Im folgenden Code-Snippet sehen Sie, wie die Schaltflächensprache auf Französisch angezeigt wird. Dazu fügen Sie der URL der Clientbibliothek den Parameter hl hinzu und rufen die Methode google.accounts.id.renderButton auf, wobei der Parameter locale auf Französisch festgelegt ist:

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

Umgang mit Anmeldedaten

Nachdem die Nutzereinwilligung erteilt wurde, gibt Google die als ID-Token bezeichneten JSON Web Token-Anmeldedaten (JSON Web Token) entweder an den Browser des Nutzers oder direkt an einen Anmeldeendpunkt zurück, der von Ihrer Plattform gehostet wird.

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

Im UX-Modus popup wird der UX-Vorgang für die Anmeldung in einem Pop-up-Fenster ausgeführt. Dies ist im Allgemeinen weniger aufdringlich für Nutzer und ist der standardmäßige UX-Modus.

Beim Rendern der Schaltfläche mit:

HTML

Sie können Folgendes festlegen:

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

Wenn beide Werte festgelegt sind, hat data-callback Vorrang vor data-login_uri. Das Festlegen beider Werte kann hilfreich sein, wenn Sie einen Callback-Handler zur Fehlerbehebung verwenden.

JavaScript

Sie müssen eine callback angeben. Im Pop-up-Modus werden beim Retouren der Schaltfläche in JavaScript keine Weiterleitungen unterstützt. Wenn festgelegt, wird login_uri ignoriert.

Weitere Informationen zum Decodieren des JWT in Ihrem JS-Callback-Handler finden Sie unter Antwort auf zurückgegebene Anmeldedaten verarbeiten.

Weiterleitungsmodus

Im UX-Modus redirect wird der UX-Vorgang für die Anmeldung über eine vollständige Seitenweiterleitung des Browsers des Nutzers durchgeführt. Google gibt das JWT mit einer POST-Anfrage direkt an Ihren Anmeldeendpunkt zurück. Dies ist im Allgemeinen ein aufdringlicheres Erlebnis für Nutzer, gilt aber als die sicherste Anmeldemethode.

Beim Rendern der Schaltfläche mit:

  • HTML legte optional data-login_uri auf den URI Ihres Anmeldeendpunkts fest.
  • JavaScript hat optional login_uri auf den URI Ihres Anmeldeendpunkts festgelegt.

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

Der URI des 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 während der Entwicklung „localhost“ verwendet wird: http://localhost/path.

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