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.
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:
- Folgen Sie der Anleitung unter Einrichtung, um den OAuth-Zustimmungsbildschirm zu konfigurieren und eine Client-ID zu erhalten.
- Laden Sie die Clientbibliothek.
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.
Pop-up-Modus
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, oderdata-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.