Schaltfläche „Über Google anmelden“ anzeigen

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

Personalisierte Anmeldeschaltfläche

Nachdem ein Nutzer ein Google-Konto ausgewählt und seine Einwilligung erteilt hat, gibt Google das Nutzerprofil mit einem JSON Web Token (JWT) weiter. Eine Übersicht über die Schritte bei der Anmeldung und die Nutzerfreundlichkeit finden Sie unter Funktionsweise. Im Hilfeartikel Die personalisierte Schaltfläche werden die verschiedenen Bedingungen und Status beschrieben, die sich darauf auswirken, wie die Schaltfläche Nutzern angezeigt wird.

Vorbereitung

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

Schaltflächen-Rendering

Sie können die Schaltfläche „Über Google anmelden“ entweder mit HTML oder JavaScript auf Ihrer Anmeldeseite anzeigen lassen:

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 anhand der Parameter in den Datenattributen angepasst.

Wenn Sie auf derselben Seite die Schaltfläche „Über Google anmelden“ und Google One Tap anzeigen lassen möchten, entfernen Sie data-auto_prompt="false". Dies wird empfohlen, um die Abläufe zu vereinfachen und die Anmelderaten zu verbessern.

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

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 Element, das als erster Parameter für renderButton angegeben ist, 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 für renderButton angegeben sind.

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

Die GIS-Bibliothek analysiert das HTML-Dokument auf Elemente, deren ID-Attribut auf g_id_onload festgelegt ist, oder auf Klassenattribute, die g_id_signin enthalten. Wenn ein übereinstimmendes Element gefunden wird, wird die Schaltfläche mit HTML gerendert, unabhängig davon, ob Sie die Schaltfläche auch in JavaScript gerendert haben. Damit die Schaltfläche nicht zweimal angezeigt wird, möglicherweise mit in Konflikt stehenden Parametern, sollten Sie in Ihren HTML-Seiten keine HTML-Elemente mit diesen Namen einfügen.

Sprache der Schaltfläche

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

HTML

Im folgenden Code-Snippet wird gezeigt, wie die Sprache der Schaltfläche auf Französisch angezeigt wird, indem der URL der Clientbibliothek der Parameter hl hinzugefügt und das Attribut data-locale auf „Französisch“ gesetzt wird:

<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 wird gezeigt, wie die Sprache der Schaltfläche auf Französisch angezeigt wird. Dazu wird der Parameter hl der URL der Clientbibliothek hinzugefügt und die Methode google.accounts.id.renderButton mit dem Parameter locale aufgerufen, der auf „French“ (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 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 du das JWT empfängst, hängt davon ab, ob du 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 Anmeldevorgang in einem Pop-up-Fenster ausgeführt. Das ist in der Regel weniger störend für Nutzer und ist der Standard-UX-Modus.

Wenn die Schaltfläche mit folgenden Elementen gerendert wird:

HTML

Sie haben folgende Möglichkeiten:

  • data-callback, um das JWT an deinen Callback-Handler zurückzugeben, oder
  • data-login_uri, damit Google das JWT über eine 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 Rückruf-Handler zum Debuggen verwenden.

JavaScript

Sie müssen ein callback angeben, da im Pop-up-Modus keine Weiterleitungen beim Rendern der Schaltfläche in JavaScript unterstützt werden. Wenn diese Option festgelegt ist, wird login_uri ignoriert.

Weitere Informationen zum Decodieren des JWT in deinem JS-Callback-Handler findest du unter Die zurückgegebene Anmeldedatenantwort verarbeiten.

Weiterleitungsmodus

Wenn Sie den UX-Modus redirect verwenden, wird der UX-Anmeldevorgang mit einer vollständigen Weiterleitung des Browsers des Nutzers ausgeführt. Google gibt das JWT dann über eine POST-Anfrage direkt an Ihren Anmeldeendpunkt zurück. Diese Methode ist in der Regel aufdringlicher für Nutzer, gilt aber als die sicherste Anmeldemethode.

Wenn die Schaltfläche mit folgenden Elementen gerendert wird:

  • HTML: Legen Sie data-login_uri optional auf den URI Ihres Anmeldeendpunkts fest.
  • JavaScript: Legen Sie login_uri optional auf den URI Ihres Anmeldeendpunkts fest.

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

URI des Anmeldeendpunkts

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 finden Sie unter Sichere JavaScript-Quellen und Weiterleitungs-URIs verwenden.