Auf dieser Referenzseite wird die JavaScript API für „Über Google anmelden“ beschrieben, mit der der Button „Über Google anmelden“ oder die One Tap-Aufforderung auf Webseiten angezeigt wird.
Methode: google.accounts.id.initialize
Mit der Methode google.accounts.id.initialize wird der „Über Google anmelden“-Client anhand des Konfigurationsobjekts initialisiert. Hier ist ein Codebeispiel für die Methode:
google.accounts.id.initialize(IdConfiguration)
Im folgenden Codebeispiel wird die Methode google.accounts.id.initialize mit einer onload-Funktion implementiert:
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse
});
google.accounts.id.prompt();
};
</script>
Mit der Methode google.accounts.id.initialize wird eine „Über Google anmelden“-Clientinstanz erstellt, die implizit von allen Modulen auf derselben Webseite verwendet werden kann.
- Sie müssen die
google.accounts.id.initialize-Methode nur einmal aufrufen, auch wenn Sie mehrere Module (z. B. One Tap, personalisierte Schaltfläche, Widerruf usw.) auf derselben Webseite verwenden. - Wenn Sie die Methode
google.accounts.id.initializemehrmals aufrufen, werden nur die Konfigurationen im letzten Aufruf gespeichert und verwendet.
Die Konfigurationen werden jedes Mal zurückgesetzt, wenn Sie die Methode google.accounts.id.initialize aufrufen. Alle nachfolgenden Methoden auf derselben Webseite verwenden sofort die neuen Konfigurationen.
Datentyp: IdConfiguration
In der folgenden Tabelle sind die Felder und Beschreibungen des Datentyps IdConfiguration aufgeführt:
| Feld | |
|---|---|
client_id |
Die Client-ID Ihrer Anwendung |
color_scheme |
Das auf den One Tap-Prompt angewendete Farbschema. |
auto_select |
Aktiviert die automatische Auswahl. |
callback |
Die JavaScript-Funktion, die ID-Tokens verarbeitet. Google One Tap und der Button „Über Google anmelden“ im popup-UX-Modus verwenden dieses Attribut. |
login_uri |
Die URL Ihres Anmeldeendpunkts. Für den redirect-UX-Modus des Buttons „Über Google anmelden“ wird dieses Attribut verwendet. |
native_callback |
Die JavaScript-Funktion, die Anmeldedaten für das Passwort verarbeitet. |
cancel_on_tap_outside |
Bricht die Aufforderung ab, wenn der Nutzer außerhalb der Aufforderung klickt. |
prompt_parent_id |
Die DOM-ID des Container-Elements für die One Tap-Aufforderung |
nonce |
Zufälliger String für ID-Tokens |
essential_claims |
Zusätzliche Anforderungen, die in das von Google zurückgegebene ID-Token aufgenommen werden sollen. |
context |
Der Titel und die Wörter im One Tap-Prompt |
state_cookie_domain |
Wenn Sie One Tap in der übergeordneten Domain und ihren Subdomains aufrufen müssen, übergeben Sie die übergeordnete Domain an dieses Feld, damit ein gemeinsamer Cookie verwendet wird. |
ux_mode |
Nutzererfahrung für den Button „Über Google anmelden“ |
allowed_parent_origin |
Die Ursprünge, die den Zwischen-iFrame einbetten dürfen. One Tap wird im Zwischen-iFrame-Modus ausgeführt, wenn dieses Feld vorhanden ist. |
intermediate_iframe_close_callback |
Überschreibt das Standardverhalten des Zwischen-iFrames, wenn Nutzer One Tap manuell schließen. |
itp_support |
Aktiviert die aktualisierte One Tap-Benutzeroberfläche in ITP-Browsern. |
login_hint |
Die Kontoauswahl überspringen, indem Sie einen Nutzerhinweis angeben. |
hd |
Kontenauswahl nach Domain einschränken |
use_fedcm_for_prompt |
Dem Browser erlauben, Anmeldeaufforderungen für Nutzer zu steuern und den Anmeldevorgang zwischen Ihrer Website und Google zu vermitteln. |
use_fedcm_for_button |
Dieses Feld bestimmt, ob die FedCM-Schaltflächen-Benutzeroberfläche in Chrome verwendet werden soll (Desktop M125+ und Android M128+). Der Standardwert ist false. |
button_auto_select |
Gibt an, ob die Option Automatische Auswahl für den FedCM-Schaltflächenablauf aktiviert werden soll. Wenn diese Option aktiviert ist, werden wiederkehrende Nutzer mit einer aktiven Google-Sitzung automatisch angemeldet. Die Aufforderung zur Kontoauswahl wird umgangen. Der Standardwert ist false. |
client_id
Dieses Feld enthält die Client-ID Ihrer Anwendung, die in der Google Cloud Console zu finden und zu erstellen ist. Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| String | Ja | client_id: "CLIENT_ID.apps.googleusercontent.com" |
color_scheme
Dieses Feld enthält das Farbschema, das auf die One Tap-Aufforderung angewendet wird. Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| String | Optional. Standardmäßig wird das Standardfarbschema des Systems des Nutzers verwendet. | color_scheme: "dark" |
In der folgenden Tabelle sind die verfügbaren Farbschemas und ihre Beschreibungen aufgeführt.
| Farbschema | |
|---|---|
default |
Das Standardfarbschema des Systems des Nutzers wird angewendet. Je nach Nutzereinstellung ist das Schema entweder hell oder dunkel. |
light |
Wenden Sie ein helles Farbschema an. |
dark |
Wenden Sie ein dunkles Farbschema an. |
auto_select
Dieses Feld bestimmt, ob ein ID-Token automatisch zurückgegeben wird, ohne dass der Nutzer interagieren muss, wenn es nur eine Google-Sitzung gibt, in der Ihre App zuvor genehmigt wurde. Der Standardwert ist false. Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| boolean | Optional | auto_select: true |
callback
Dieses Feld enthält die JavaScript-Funktion, die das vom One Tap-Prompt oder vom Pop-up-Fenster zurückgegebene ID-Token verarbeitet. Dieses Attribut ist erforderlich, wenn der UX-Modus popup von Google One Tap oder der Schaltfläche „Über Google anmelden“ verwendet wird. Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| Funktion | Erforderlich für One Tap und den UX-Modus popup |
callback: handleResponse |
login_uri
Dieses Attribut ist der URI Ihres Anmeldeendpunkts.
Der Wert muss genau mit einem der autorisierten Weiterleitungs-URIs für den OAuth 2.0-Client übereinstimmen, den Sie in der Google Cloud Console konfiguriert haben, und muss unseren Regeln für die Validierung von Weiterleitungs-URIs entsprechen.
Dieses Attribut kann weggelassen werden, wenn die aktuelle Seite Ihre Anmeldeseite ist. In diesem Fall werden die Anmeldedaten standardmäßig an diese Seite gesendet.
Die Antwort mit den ID-Token-Anmeldedaten wird an Ihren Anmeldeendpunkt gesendet, wenn ein Nutzer auf die Schaltfläche „Mit Google anmelden“ klickt und der UX-Modus „Weiterleitung“ verwendet wird.
Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Optional | Beispiel |
|---|---|---|
| URL | Standardmäßig wird der URI der aktuellen Seite oder der von Ihnen angegebene Wert verwendet. Wird nur verwendet, wenn ux_mode: "redirect" festgelegt ist. |
login_uri: "https://www.example.com/login" |
Ihr Anmelde-Endpunkt muss POST-Anfragen mit einem credential-Parameter mit einem ID-Token-Wert im Text verarbeiten können.
native_callback
Dieses Feld enthält den Namen der JavaScript-Funktion, die das vom integrierten Credential Manager des Browsers zurückgegebene Passwort-Credential verarbeitet. Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| Funktion | Optional | native_callback: handleResponse |
cancel_on_tap_outside
Mit diesem Feld wird festgelegt, ob die One Tap-Anfrage abgebrochen werden soll, wenn ein Nutzer außerhalb der Aufforderung klickt. Der Standardwert ist true. Sie können die Funktion deaktivieren, indem Sie den Wert auf false setzen. Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| boolean | Optional | cancel_on_tap_outside: false |
prompt_parent_id
Mit diesem Attribut wird die DOM-ID des Containerelements festgelegt. Wenn sie nicht festgelegt ist, wird die Aufforderung für One Tap oben rechts im Fenster angezeigt. Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| String | Optional | prompt_parent_id: 'parent_id' |
Nonce
Dieses Feld ist ein zufälliger String, der vom ID-Token verwendet wird, um Replay-Angriffe zu verhindern. Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| String | Optional | nonce: "biaqbm70g23" |
Die Nonce-Länge ist auf die maximale JWT-Größe begrenzt, die von Ihrer Umgebung unterstützt wird, sowie auf die HTTP-Größenbeschränkungen für einzelne Browser und Server.
essential_claims
Dieses Feld ist ein String, mit dem zusätzliche Ansprüche angefordert werden, die in das von Google zurückgegebene ID-Token aufgenommen werden sollen. Eine vollständige Liste der von Google akzeptierten Ansprüchen finden Sie unter Unterstützte Ansprüche.
Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| String | Optional | essential_claims: "auth_time, amr" |
context
Mit diesem Feld wird der Text des Titels und der Meldungen im One Tap-Prompt geändert. Es hat keine Auswirkungen auf ITP-Browser. Die Standardeinstellung ist signin.
Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| String | Optional | context: "use" |
In der folgenden Tabelle sind alle verfügbaren Kontexte und ihre Beschreibungen aufgeführt:
| Kontext | |
|---|---|
signin |
„Bei“ anmelden |
signup |
„Registrieren für“ |
use |
„Verwenden“ |
state_cookie_domain
Wenn Sie One Tap in der übergeordneten Domain und ihren Subdomains anzeigen müssen, übergeben Sie die übergeordnete Domain an dieses Feld, damit ein einzelner Cookie mit gemeinsamem Status verwendet wird. Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| String | Optional | state_cookie_domain: "example.com" |
ux_mode
Mit diesem Feld legen Sie den UX-Ablauf fest, der vom Button „Über Google anmelden“ verwendet wird. Der Standardwert ist popup. Dieses Attribut hat keine Auswirkungen auf die OneTap-Benutzeroberfläche. Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| String | Optional | ux_mode: "redirect" |
In der folgenden Tabelle sind die verfügbaren UX-Modi und ihre Beschreibungen aufgeführt.
| UX-Modus | |
|---|---|
popup |
Führt den Anmelde-UX-Ablauf in einem Pop-up-Fenster aus. |
redirect |
Führt den UX-Ablauf für die Anmeldung durch eine Weiterleitung der gesamten Seite aus. |
allowed_parent_origin
Die Ursprünge, die den Zwischen-iFrame einbetten dürfen. One Tap wird im Zwischen-iFrame-Modus ausgeführt, wenn dieses Feld vorhanden ist. Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| String oder String-Array | Optional | allowed_parent_origin: "https://example.com" |
In der folgenden Tabelle sind die unterstützten Werttypen und ihre Beschreibungen aufgeführt.
| Werttypen | ||
|---|---|---|
string |
Ein einzelner Domain-URI. | "https://example.com" |
string array |
Ein Array von Domain-URIs. | ["https://news.example.com", "https://local.example.com"] |
Platzhalterpräfixe werden ebenfalls unterstützt. Beispiel: "https://*.example.com" stimmt mit example.com und seinen Subdomains auf allen Ebenen überein (z. B. news.example.com, login.news.example.com). Beachten Sie bei der Verwendung von Platzhaltern Folgendes:
- Musterstrings dürfen nicht nur aus einem Platzhalter und einer Top-Level-Domain bestehen.
https://.comundhttps://.co.uksind beispielsweise ungültig, da"https://.example.com"mitexample.comund allen zugehörigen Subdomains übereinstimmt. Verwenden Sie eine durch Kommas getrennte Liste, um zwei verschiedene Domains darzustellen. Beispiel:"https://example1.com,https://.example2.com"stimmt mit den Domainsexample1.comundexample2.comsowie den Subdomains vonexample2.comüberein. - Domains mit Platzhaltern müssen mit dem sicheren Schema „https://“ beginnen.
"*.example.com"ist also ungültig.
Wenn der Wert des Felds allowed_parent_origin ungültig ist, schlägt die One Tap-Initialisierung des Zwischen-iFrame-Modus fehl und wird beendet.
intermediate_iframe_close_callback
Überschreibt das Standardverhalten des Zwischen-iFrames, wenn Nutzer One Tap manuell schließen, indem sie in der One Tap-Benutzeroberfläche auf die Schaltfläche „X“ tippen. Standardmäßig wird das Zwischen-iFrame sofort aus dem DOM entfernt.
Das Feld intermediate_iframe_close_callback wird nur im Zwischen-iFrame-Modus berücksichtigt und wirkt sich nur auf das Zwischen-iFrame und nicht auf das One Tap-iFrame aus. Die One Tap-Benutzeroberfläche wird entfernt, bevor der Callback aufgerufen wird.
| Typ | Erforderlich | Beispiel |
|---|---|---|
| Funktion | Optional | intermediate_iframe_close_callback: logBeforeClose |
itp_support
Mit diesem Feld wird festgelegt, ob die
aktualisierte One Tap-Benutzeroberfläche in Browsern aktiviert werden soll, die Intelligent Tracking Prevention (ITP) unterstützen. Der Standardwert ist false. Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| boolean | Optional | itp_support: true |
login_hint
Wenn Ihre Anwendung im Voraus weiß, welcher Nutzer angemeldet werden soll, kann sie Google einen Anmeldehinweis geben. Wenn dies erfolgreich ist, wird die Kontoauswahl übersprungen. Akzeptierte Werte sind eine E-Mail-Adresse oder ein ID-Token-Feldwert sub.
Weitere Informationen finden Sie in der OpenID Connect-Dokumentation im Feld login_hint.
| Typ | Erforderlich | Beispiel |
|---|---|---|
String, eine E-Mail-Adresse oder der Wert aus dem Feld sub eines ID-Tokens. |
Optional | login_hint: 'elisa.beckett@gmail.com' |
HD
Wenn ein Nutzer mehrere Konten hat und sich nur mit seinem Workspace-Konto anmelden soll, können Sie Google mit dieser Option einen Domainnamen-Hinweis geben. Wenn dies gelingt, werden bei der Kontoauswahl nur Nutzerkonten mit der angegebenen Domain angezeigt. Mit dem Platzhalterwert * werden dem Nutzer bei der Kontoauswahl nur Workspace-Konten und keine privaten Konten (nutzer@gmail.com) angezeigt.
Weitere Informationen finden Sie in der OpenID Connect-Dokumentation im Feld hd.
| Typ | Erforderlich | Beispiel |
|---|---|---|
| String. Ein voll qualifizierter Domainname oder *. | Optional | hd: '*' |
use_fedcm_for_prompt
Dem Browser erlauben, Anmeldeaufforderungen für Nutzer zu steuern und den Anmeldevorgang zwischen Ihrer Website und Google zu vermitteln. Die Standardeinstellung ist "false". Weitere Informationen finden Sie auf der Seite Zu FedCM migrieren.
| Typ | Erforderlich | Beispiel |
|---|---|---|
| boolean | Verworfen | use_fedcm_for_prompt: true |
use_fedcm_for_button
Dieses Feld bestimmt, ob die FedCM-Schaltflächen-Benutzeroberfläche in Chrome (Desktop M125+ und Android M128+) verwendet werden soll. Der Standardwert ist false. Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| boolean | Optional | use_fedcm_for_button: true |
button_auto_select
In diesem Feld wird festgelegt, ob die Option auto select für den FedCM-Button-Ablauf aktiviert werden soll. Wenn sie aktiviert ist, werden wiederkehrende Nutzer mit einer aktiven Google-Sitzung automatisch angemeldet, sodass die Aufforderung zur Kontoauswahl umgangen wird. Der Standardwert ist false. Sie müssen die automatische Anmeldung über den Button während der Einführung der Einwilligung explizit aktivieren. Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| boolean | Optional | button_auto_select: true |
Methode: google.accounts.id.prompt
Die Methode google.accounts.id.prompt zeigt nach dem Aufrufen der Methode initialize() die One Tap-Aufforderung oder den im Browser integrierten Anmeldedatenmanager an.
Hier ein Codebeispiel für die Methode:
google.accounts.id.prompt(/**
@type{(function(!PromptMomentNotification):void)=} */ momentListener)
Normalerweise wird die Methode prompt() beim Seitenaufbau aufgerufen. Aufgrund des Sitzungsstatus und der Nutzereinstellungen auf Google-Seite wird die Benutzeroberfläche für die One Tap-Aufforderung möglicherweise nicht angezeigt. Wenn Sie über den UI-Status für verschiedene Momente benachrichtigt werden möchten, übergeben Sie eine Funktion, die UI-Statusbenachrichtigungen empfängt.
Benachrichtigungen werden in den folgenden Fällen ausgelöst:
- Anzeigemoment:Dieser tritt nach dem Aufruf der Methode
prompt()ein. Die Benachrichtigung enthält einen booleschen Wert, der angibt, ob die Benutzeroberfläche angezeigt wird oder nicht. Übersprungener Moment:Dies tritt auf, wenn die One Tap-Aufforderung durch eine automatische oder manuelle Kündigung geschlossen wird oder wenn Google keine Anmeldedaten ausstellen kann, z. B. wenn die ausgewählte Sitzung von Google abgemeldet wurde.
In diesen Fällen empfehlen wir, mit den nächsten Identitätsanbietern fortzufahren, sofern vorhanden.
Moment „Abgelehnt“:Dieser Moment tritt ein, wenn Google Anmeldedaten erfolgreich abruft oder ein Nutzer den Abrufvorgang für Anmeldedaten beenden möchte. Wenn der Nutzer beispielsweise beginnt, seinen Nutzernamen und sein Passwort in Ihr Anmeldedialogfeld einzugeben, können Sie die Methode
google.accounts.id.cancel()aufrufen, um die Aufforderung zur Einmalanmeldung zu schließen und den Moment „Abgelehnt“ auszulösen.
Im folgenden Codebeispiel wird der übersprungene Moment implementiert:
<script>
window.onload = function () {
google.accounts.id.initialize(...);
google.accounts.id.prompt((notification) => {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// continue with another identity provider.
}
});
};
</script>
Datentyp: PromptMomentNotification
In der folgenden Tabelle sind Methoden und Beschreibungen des Datentyps PromptMomentNotification aufgeführt:
| Methode | |
|---|---|
isDisplayMoment() |
Gibt true zurück, wenn die One Tap-Aufforderung angezeigt wird.Hinweis : Wenn FedCM aktiviert ist, wird diese Benachrichtigung nicht unterstützt. Weitere Informationen finden Sie auf der Seite Zu FedCM migrieren. |
isDisplayed() |
Gibt true zurück, wenn der Momenttyp PromptMoment.DISPLAY ist und die One Tap-Aufforderung angezeigt wird.Hinweis : Wenn FedCM aktiviert ist, wird diese Benachrichtigung nicht unterstützt. Weitere Informationen finden Sie auf der Seite Zu FedCM migrieren. |
isNotDisplayed() |
Gibt true zurück, wenn der Momenttyp PromptMoment.DISPLAY ist und die One Tap-Aufforderung nicht angezeigt wird.Hinweis : Wenn FedCM aktiviert ist, wird diese Benachrichtigung nicht unterstützt. Weitere Informationen finden Sie auf der Seite Zu FedCM migrieren. |
getNotDisplayedReason() |
Der genaue Grund, warum die Benutzeroberfläche nicht angezeigt wird. Folgende Werte sind möglich:
|
isSkippedMoment() |
Gibt true zurück, wenn der Momenttyp PromptMoment.SKIPPEDist. Hinweis : Wenn FedCM aktiviert ist, wird diese Methode teilweise unterstützt. Insbesondere wird der übersprungene Grund user_cancel nicht unterstützt. Weitere Informationen finden Sie auf der Seite Zu FedCM migrieren.
|
getSkippedReason() |
Der genaue Grund für das Überspringen des Moments. Folgende Werte sind möglich:
user_cancel für das Überspringen nicht unterstützt. Weitere Informationen finden Sie auf der Seite Zu FedCM migrieren.
|
isDismissedMoment() |
Gibt true zurück, wenn der Momenttyp PromptMoment.DISMISSED ist.Hinweis : Wenn FedCM aktiviert ist, wird diese Methode vollständig unterstützt. Weitere Informationen finden Sie auf der Seite Zu FedCM migrieren. |
getDismissedReason() |
Der genaue Grund für die Kündigung. Folgende Werte sind möglich:
|
getMomentType() |
Gibt einen String für den Momenttyp zurück. Folgende Werte sind möglich:
|
Datentyp: CredentialResponse
Wenn Ihre callback-Funktion aufgerufen wird, wird ein CredentialResponse-Objekt als Parameter übergeben. In der folgenden Tabelle sind die Felder aufgeführt, die im Anmeldedaten-Antwortobjekt enthalten sind:
| Feld | |
|---|---|
credential |
Das codierte JWT-ID-Token, das von Google ausgestellt wird. |
select_by |
Wie sich der Nutzer angemeldet hat. |
state |
Dieses Feld wird nur definiert, wenn der Nutzer auf einen „Über Google anmelden“-Button klickt, um sich anzumelden, und das Attribut state des Buttons angegeben ist. |
Anmeldedaten
Dieses Feld ist das ID-Token als base64-codierter JSON Web Token-String (JWT).
Decodiert sieht das JWT so aus:
header { "alg": "RS256", "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature "typ": "JWT" } payload { "iss": "https://accounts.google.com", // The JWT's issuer "nbf": 161803398874, "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID "sub": "3141592653589793238", // The unique ID of the user's Google Account "hd": "gmail.com", // If present, the host domain of the user's Google Workspace email address "auth_time": 1748875426, "amr": ["mfa", "pwd", "tel"], "email": "elisa.g.beckett@gmail.com", // The user's email address "email_verified": true, // true, if Google has verified the email address "azp": "314159265-pi.apps.googleusercontent.com", "name": "Elisa Beckett", // If present, a URL to user's profile picture "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler", "given_name": "Elisa", "family_name": "Beckett", "iat": 1596474000, // Unix timestamp of the assertion creation time "exp": 1596477600, // Unix timestamp of the assertion expiration time "jti": "abc161803398874def" }
Das Feld sub ist eine global eindeutige Kennung für das Google-Konto. Verwenden Sie nur das Feld sub als Kennung für den Nutzer, da es für alle Google-Konten eindeutig ist und nie wiederverwendet wird.
Mithilfe der Felder email, email_verified und hd können Sie feststellen, ob Google eine E-Mail-Adresse hostet und für sie autoritativ ist. Wenn Google autoritativ ist, wird bestätigt, dass der Nutzer der rechtmäßige Kontoinhaber ist.
Fälle, in denen Google maßgeblich ist:
emailhat das Suffix@gmail.com. Es handelt sich also um ein Gmail-Konto.- Wenn
email_verifiedauf „true“ gesetzt undhdfestgelegt ist, handelt es sich um ein Google Workspace-Konto.
Nutzer können sich für Google-Konten registrieren, ohne Gmail oder Google Workspace zu verwenden.
Wenn email kein @gmail.com-Suffix enthält und hd nicht vorhanden ist, ist Google nicht autoritativ und es wird empfohlen, das Passwort oder andere Challenge-Methoden zur Bestätigung des Nutzers zu verwenden. email_verfied kann auch zutreffen, da Google den Nutzer ursprünglich bei der Erstellung des Google-Kontos bestätigt hat. Die Inhaberschaft des Drittanbieter-E-Mail-Kontos kann sich jedoch inzwischen geändert haben.
Im Feld exp wird die Ablaufzeit für die Bestätigung des Tokens auf Ihrer Serverseite angezeigt. Für das über „Mit Google anmelden“ abgerufene ID-Token beträgt sie eine Stunde. Sie müssen das Token vor Ablauf der Zeit bestätigen. Verwenden Sie exp nicht für die Sitzungsverwaltung. Ein abgelaufenes ID-Token bedeutet nicht, dass der Nutzer abgemeldet ist. Die Sitzungsverwaltung Ihrer Nutzer liegt in der Verantwortung Ihrer App.
select_by
In der folgenden Tabelle sind die möglichen Werte für das Feld select_by aufgeführt. Der Typ des verwendeten Buttons sowie der Sitzungs- und Einwilligungsstatus werden verwendet, um den Wert festzulegen.
Der Nutzer hat entweder auf den Button „One Tap“ oder „Über Google anmelden“ geklickt oder die berührungslose automatische Anmeldung verwendet.
Es wurde eine bestehende Sitzung gefunden oder der Nutzer hat ein Google-Konto ausgewählt und sich darin angemeldet, um eine neue Sitzung zu starten.
Bevor die ID-Token-Anmeldedaten für Ihre App freigegeben werden, muss der Nutzer
- auf den Button „Bestätigen“ geklickt haben, um ihre Einwilligung zur Weitergabe von Anmeldedaten zu erteilen, oder
- zuvor die Einwilligung erteilt und ein Google-Konto über „Konto auswählen“ ausgewählt haben.
Der Wert dieses Felds ist auf einen dieser Typen festgelegt:
| Wert | Beschreibung |
|---|---|
auto |
Automatische Anmeldung eines Nutzers mit einer bestehenden Sitzung, der zuvor die Einwilligung zur Weitergabe von Anmeldedaten erteilt hat. Gilt nur für Browser, die FedCM nicht unterstützen. |
user |
Ein Nutzer mit einer bestehenden Sitzung, der zuvor die Einwilligung erteilt hatte, hat auf die Schaltfläche „Weiter als“ von One Tap geklickt, um Anmeldedaten freizugeben. Gilt nur für Browser, die FedCM nicht unterstützen. |
fedcm |
Ein Nutzer hat die Schaltfläche „Weiter als“ für One Tap gedrückt, um Anmeldedaten über FedCM freizugeben. Gilt nur für Browser, die FedCM unterstützen. |
fedcm_auto |
Automatische Anmeldung eines Nutzers mit einer bestehenden Sitzung, der zuvor die Einwilligung zur Weitergabe von Anmeldedaten über FedCM One Tap erteilt hat. Gilt nur für Browser, die FedCM unterstützen. |
user_1tap |
Ein Nutzer mit einer bestehenden Sitzung hat auf die Schaltfläche „Weiter als“ von One Tap geklickt, um die Einwilligung zu erteilen und Anmeldedaten freizugeben. Gilt nur für Chrome 75 und höher. |
user_2tap |
Ein Nutzer ohne vorhandene Sitzung hat auf die Schaltfläche „Weiter als“ von One Tap geklickt, um ein Konto auszuwählen, und dann in einem Pop-up-Fenster auf die Schaltfläche „Bestätigen“ geklickt, um die Einwilligung zu erteilen und Anmeldedaten freizugeben. Gilt für Browser, die nicht auf Chromium basieren. |
itp |
Ein Nutzer, der zuvor die Einwilligung erteilt hatte, hat in ITP-Browsern auf „One Tap“ geklickt. |
itp_confirm |
Ein Nutzer, der keine Einwilligung erteilt hat, hat in ITP-Browsern auf „Einmal tippen“ und dann auf „Weiter“ geklickt, um die Einwilligung zu erteilen und Anmeldedaten freizugeben. |
btn |
Ein Nutzer, der zuvor die Einwilligung erteilt hat, hat auf die Schaltfläche „Über Google anmelden“ getippt und in „Konto auswählen“ ein Google-Konto ausgewählt, um Anmeldedaten freizugeben. |
btn_confirm |
Ein Nutzer, der keine Einwilligung erteilt hat, hat auf die Schaltfläche „Mit Google anmelden“ und dann auf „Weiter“ geklickt, um die Einwilligung zu erteilen und Anmeldedaten freizugeben. |
Bundesstaat
Dieses Feld wird nur definiert, wenn ein Nutzer auf einen „Über Google anmelden“-Button klickt, um sich anzumelden, und das Attribut state des angeklickten Buttons angegeben ist. Der Wert dieses Felds entspricht dem Wert, den Sie im Attribut state der Schaltfläche angegeben haben.
Da auf derselben Seite mehrere „Über Google anmelden“-Schaltflächen gerendert werden können, können Sie jeder Schaltfläche einen eindeutigen String zuweisen. Daher können Sie dieses state-Feld verwenden, um zu ermitteln, auf welche Schaltfläche der Nutzer geklickt hat, um sich anzumelden.
Methode: google.accounts.id.renderButton
Mit der Methode google.accounts.id.renderButton wird ein „Über Google anmelden“-Button auf Ihren Webseiten gerendert.
Hier ein Codebeispiel für die Methode:
google.accounts.id.renderButton(
/** @type{!HTMLElement} */ parent,
/** @type{!GsiButtonConfiguration} */ options
)
Datentyp: GsiButtonConfiguration
In der folgenden Tabelle sind die Felder und Beschreibungen des Datentyps GsiButtonConfiguration aufgeführt:
| Attribut | |
|---|---|
type |
Der Schaltflächentyp: Symbol oder Standardschaltfläche. |
theme |
Das Design des Buttons. Beispiel: filled_blue oder filled_black. |
size |
Die Größe des Buttons. Beispiel: klein oder groß. |
text |
Der Text des Buttons. Beispiele: „Über Google anmelden“ oder „Mit Google registrieren“. |
shape |
Die Form des Buttons. Beispiel: rechteckig oder kreisförmig. |
logo_alignment |
Die Ausrichtung des Google-Logos: links oder zentriert. |
width |
Die Breite der Schaltfläche in Pixeln. |
locale |
Wenn festgelegt, wird die Sprache des Buttons gerendert. |
click_listener |
Wenn diese Funktion festgelegt ist, wird sie aufgerufen, wenn auf die Schaltfläche „Über Google anmelden“ geklickt wird. |
state |
Wenn festgelegt, wird dieser String mit dem ID-Token zurückgegeben. |
Attributtypen
In den folgenden Abschnitten finden Sie Details zu den einzelnen Attributtypen sowie ein Beispiel.
Typ
Der Schaltflächentyp. Der Standardwert ist standard.
Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| String | Ja | type: "icon" |
In der folgenden Tabelle sind die verfügbaren Schaltflächentypen und ihre Beschreibungen aufgeführt:
| Typ | |
|---|---|
standard |
|
icon |
|
Design
Das Design des Buttons. Der Standardwert ist outline. Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| String | Optional | theme: "filled_blue" |
In der folgenden Tabelle sind die verfügbaren Designs und ihre Beschreibungen aufgeführt:
| Design | |
|---|---|
outline |
|
filled_blue |
|
filled_black |
|
Größe
Die Größe des Buttons. Der Standardwert ist large. Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| String | Optional | size: "small" |
In der folgenden Tabelle sind die verfügbaren Schaltflächengrößen und ihre Beschreibungen aufgeführt:
| Größe | |
|---|---|
large |
|
medium |
|
small |
|
Text
Der Text des Buttons. Der Standardwert ist signin_with. Es gibt keine visuellen Unterschiede für den Text von Symbolschaltflächen mit unterschiedlichen text-Attributen.
Die einzige Ausnahme ist, wenn der Text für die Barrierefreiheit auf dem Bildschirm gelesen wird.
Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| String | Optional | text: "signup_with" |
In der folgenden Tabelle sind alle verfügbaren Schaltflächentexte und ihre Beschreibungen aufgeführt:
| Text | |
|---|---|
signin_with |
|
signup_with |
|
continue_with |
|
signin |
|
shape
Die Form des Buttons. Der Standardwert ist rectangular. Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| String | Optional | shape: "rectangular" |
In der folgenden Tabelle sind die verfügbaren Schaltflächenformen und ihre Beschreibungen aufgeführt:
| Form | |
|---|---|
rectangular |
icon verwendet wird, entspricht sie square.
|
pill |
icon verwendet wird, entspricht sie circle.
|
circle |
standard verwendet wird, entspricht sie pill.
|
square |
standard verwendet wird, entspricht sie rectangular.
|
logo_alignment
Die Ausrichtung des Google-Logos. Der Standardwert ist left. Dieses Attribut gilt nur für den Schaltflächentyp standard. Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| String | Optional | logo_alignment: "center" |
In der folgenden Tabelle sind die verfügbaren Ausrichtungen und ihre Beschreibungen aufgeführt:
| logo_alignment | |
|---|---|
left |
|
center |
|
Breite
Die Mindestbreite des Buttons in Pixeln. Die maximale Breite beträgt 400 Pixel.
Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| String | Optional | width: "400" |
locale
Optional. Schaltflächentext in der angegebenen Sprache anzeigen. Andernfalls wird die Sprache verwendet, die in den Google-Konto- oder Browsereinstellungen des Nutzers festgelegt ist. Fügen Sie beim Laden der Bibliothek den Parameter hl und den Sprachcode in die src-Anweisung ein, z. B.: gsi/client?hl=<iso-639-code>.
Wenn sie nicht festgelegt ist, wird die Standardsprache des Browsers oder die bevorzugte Sprache des Google-Sitzungsnutzers verwendet. Daher sehen verschiedene Nutzer möglicherweise unterschiedliche Versionen lokalisierter Schaltflächen, die auch unterschiedlich groß sein können.
Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| String | Optional | locale: "zh_CN" |
click_listener
Mit dem Attribut click_listener können Sie eine JavaScript-Funktion definieren, die aufgerufen wird, wenn auf die Schaltfläche „Über Google anmelden“ geklickt wird.
google.accounts.id.renderButton(document.getElementById("signinDiv"), { theme: 'outline', size: 'large', click_listener: onClickHandler }); function onClickHandler(){ console.log("Sign in with Google button clicked...") }
In diesem Beispiel wird die Meldung Sign in with Google button clicked... (Schaltfläche „Über Google anmelden“ wurde angeklickt) in der Konsole protokolliert, wenn auf die Schaltfläche „Über Google anmelden“ geklickt wird.
Bundesstaat
Optional: Da auf derselben Seite mehrere „Über Google anmelden“-Schaltflächen gerendert werden können, können Sie jeder Schaltfläche einen eindeutigen String zuweisen. Derselbe String wird zusammen mit dem ID-Token zurückgegeben, sodass Sie erkennen können, auf welche Schaltfläche der Nutzer geklickt hat, um sich anzumelden.
Weitere Informationen finden Sie in der folgenden Tabelle:
| Typ | Erforderlich | Beispiel |
|---|---|---|
| String | Optional | data-state: "button 1" |
Datentyp: Anmeldedaten
Wenn Ihre native_callback-Funktion aufgerufen wird, wird ein Credential-Objekt als Parameter übergeben. In der folgenden Tabelle sind die Felder aufgeführt, die das Objekt enthält:
| Feld | |
|---|---|
id |
Identifiziert den Nutzer. |
password |
Das Passwort |
Methode: google.accounts.id.disableAutoSelect
Wenn sich der Nutzer von Ihrer Website abmeldet, müssen Sie die Methode google.accounts.id.disableAutoSelect aufrufen, um den Status in Cookies zu erfassen. Dadurch wird eine UX-Endlosschleife verhindert. Hier ein Code-Snippet der Methode:
google.accounts.id.disableAutoSelect()
Im folgenden Codebeispiel wird die Methode google.accounts.id.disableAutoSelect mit einer onSignout()-Funktion implementiert:
<script>
function onSignout() {
google.accounts.id.disableAutoSelect();
}
</script>
Methode: google.accounts.id.storeCredential
Diese Methode ist ein Wrapper für die Methode store() der integrierten Credential Manager API des Browsers. Daher kann er nur zum Speichern von Anmeldedaten für ein Passwort verwendet werden. Hier ein Codebeispiel für die Methode:
google.accounts.id.storeCredential(Credential, callback)
Im folgenden Codebeispiel wird die Methode google.accounts.id.storeCredential mit einer onSignIn()-Funktion implementiert:
<script>
function onSignIn() {
let cred = {id: '...', password: '...'};
google.accounts.id.storeCredential(cred);
}
</script>
Methode: google.accounts.id.cancel
Sie können den One Tap-Ablauf abbrechen, indem Sie die Aufforderung aus dem DOM der vertrauenden Partei entfernen. Der Abbruchvorgang wird ignoriert, wenn bereits Anmeldedaten ausgewählt sind. Hier ist ein Codebeispiel für die Methode:
google.accounts.id.cancel()
Im folgenden Codebeispiel wird die Methode google.accounts.id.cancel() mit einer onNextButtonClicked()-Funktion implementiert:
<script>
function onNextButtonClicked() {
google.accounts.id.cancel();
showPasswordPage();
}
</script>
Callback für das Laden der Bibliothek: onGoogleLibraryLoad
Sie können einen onGoogleLibraryLoad-Callback registrieren. Sie wird nach dem Laden der Sign In With Google JavaScript-Bibliothek ausgegeben:
window.onGoogleLibraryLoad = () => {
...
};
Dieser Callback ist nur eine Abkürzung für den window.onload-Callback. Es gibt keine Unterschiede im Verhalten.
Im folgenden Codebeispiel wird ein onGoogleLibraryLoad-Callback implementiert:
<script>
window.onGoogleLibraryLoad = () => {
google.accounts.id.initialize({
...
});
google.accounts.id.prompt();
};
</script>
Methode: google.accounts.id.revoke
Mit der Methode google.accounts.id.revoke wird die OAuth-Zustimmung widerrufen, die zum Teilen des ID-Tokens für den angegebenen Nutzer verwendet wurde. Hier ein Code-Snippet zur Veranschaulichung:javascript
google.accounts.id.revoke(login_hint, callback)
| Parameter | Typ | Beschreibung |
|---|---|---|
login_hint |
String | Die E-Mail-Adresse oder eindeutige ID des Google-Kontos des Nutzers. Die ID ist die sub-Eigenschaft der credential-Nutzlast. |
callback |
Funktion | Optionaler RevocationResponse-Handler. |
Das folgende Codebeispiel zeigt, wie die Methode revoke mit einer ID verwendet wird.
google.accounts.id.revoke('1618033988749895', done => {
console.log(done.error);
});Datentyp: RevocationResponse
Wenn Ihre callback-Funktion aufgerufen wird, wird ein RevocationResponse-Objekt als Parameter übergeben. In der folgenden Tabelle sind die Felder aufgeführt, die im Objekt der Widerrufsantwort enthalten sind:
| Feld | |
|---|---|
successful |
Dieses Feld ist der Rückgabewert des Methodenaufrufs. |
error |
Dieses Feld enthält optional eine detaillierte Fehlermeldung. |
erfolgreich
Dieses Feld ist ein boolescher Wert, der auf „true“ gesetzt wird, wenn der Methodenaufruf „revoke“ erfolgreich war, und auf „false“, wenn er fehlgeschlagen ist.
Fehler
Dieses Feld ist ein Stringwert und enthält eine detaillierte Fehlermeldung, wenn der Methodenaufruf „revoke“ fehlgeschlagen ist. Bei Erfolg ist es nicht definiert.