Schaltfläche „Über Google anmelden“ anzeigen

Fügen Sie Ihrer Website die Schaltfläche „Über Google anmelden“ hinzu, damit sich Nutzer registrieren oder melden Sie sich in Ihrer Webanwendung an. Verwenden Sie entweder HTML oder JavaScript zum Rendern der Schaltfläche und , 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 gegeben hat, gibt Google das Nutzerprofil mit einem JSON Web Token (JWT) erstellen. Eine Übersicht über die einzelnen Schritte bei der Anmeldung und der Nutzererfahrung, siehe Funktionsweise. Unter Informationen zur personalisierten Schaltfläche werden die verschiedenen Bedingungen und gibt an, wie die Schaltfläche den Nutzenden angezeigt wird.

Vorbereitung

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

Schaltflächenrendering

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

HTML

Rendern Sie die Anmeldeschaltfläche mit HTML und geben Sie das JWT an das Anmeldeendpunkt.

<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.

So blenden Sie die Schaltfläche „Über Google anmelden“ und Google One Tap auf derselben Seite ein: 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 g_id_signin-Referenzseite.

JavaScript

Rendern Sie die Anmeldeschaltfläche mit JavaScript und geben Sie das JWT an den JavaScript-Callback-Handler des Browsers.

<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 festgelegt ist, wird als Schaltfläche „Über Google anmelden“. In diesem Beispiel wird buttonDiv verwendet, auf die Schaltfläche auf der Seite. Die Schaltfläche wird mithilfe der Attribute angepasst. der im zweiten Parameter für renderButton angegeben ist.

Um die Nutzerfreundlichkeit zu minimieren, wird google.accounts.id.prompt() aufgerufen, um Displayanzeigen One Tap stellt eine Alternative zur Registrierung oder Anmeldung dar.

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 eine Übereinstimmung gefunden wird, wird die Schaltfläche mit HTML gerendert, unabhängig davon, ob Sie die Schaltfläche auch in JavaScript gerendert. Um das Einblenden der Schaltfläche zu vermeiden zweimal, möglicherweise mit in Konflikt stehenden Parametern, keine HTML-Elemente enthalten die mit diesen Namen in Ihren HTML-Seiten übereinstimmen.

Sprache der Schaltfläche

Die Sprache der Schaltfläche wird automatisch durch die Standardeinstellung des Browsers bestimmt. Sprache oder die Einstellungen des Nutzers der Google-Sitzung. 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 Anmeldedaten für JSON Web Tokens (JWT) zurück. wird als ID-Token an den Browser des Nutzers oder direkt für eine Anmeldung Endpunkt, 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.

Beim Rendern der Schaltfläche mit:

HTML

Sie haben folgende Möglichkeiten:

  • data-callback, um das JWT an den 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. Bei Verwendung eines Callbacks kann es hilfreich sein, beide Werte festzulegen. für das Debugging.

JavaScript

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

Weitere Informationen zum Dekodieren 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. Dies ist in der Regel eine aufdringlichere Erfahrung für Nutzer, wird jedoch als ist dies die sicherste Anmeldemethode.

Wenn die Schaltfläche mit folgenden Elementen gerendert wird:

  • HTML legt für data-login_uri optional den URI Ihres Anmeldeendpunkts fest.
  • Bei JavaScript können Sie optional login_uri auf den URI Ihres Anmeldeendpunkts festlegen.

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

Die 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.

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