Auf dieser Referenzseite wird die Sign-In JavaScript API beschrieben. Du kannst diese API verwenden, um die One Tap-Aufforderung oder die Schaltfläche „Über Google anmelden“ auf deinen Webseiten anzuzeigen.
Methode: google.accounts.id.initial
Die Methode google.accounts.id.initialize
initialisiert den „Über Google anmelden“-Client anhand des Konfigurationsobjekts. Hier ein Codebeispiel der 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>
Die Methode google.accounts.id.initialize
erstellt eine „Über Google anmelden“-Clientinstanz, die implizit von allen Modulen auf derselben Webseite verwendet werden kann.
- Sie müssen die Methode
google.accounts.id.initialize
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.initialize
mehrmals aufrufen, werden nur die Konfigurationen im letzten Aufruf gespeichert und verwendet.
Die Konfigurationen werden bei jedem Aufruf der Methode google.accounts.id.initialize
zurückgesetzt. 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:
Field | |
---|---|
client_id |
Die Client-ID Ihrer Anwendung |
auto_select |
Aktiviert die automatische Auswahl. |
callback |
Die JavaScript-Funktion, die ID-Tokens verarbeitet. „Google One Tap“ und die Schaltfläche „Über Google anmelden“ popup verwenden dieses Attribut. |
login_uri |
Die URL Ihres Anmeldeendpunkts. In der Schaltfläche „Über Google anmelden“ redirect wird dieses Attribut verwendet. |
native_callback |
Die JavaScript-Funktion, die Passwortanmeldedaten verarbeitet. |
cancel_on_tap_outside |
Bricht die Aufforderung ab, wenn der Nutzer auf eine Stelle außerhalb der Aufforderung klickt. |
prompt_parent_id |
Die DOM-ID des Containerelements der One Tap-Eingabeaufforderung |
nonce |
Ein zufälliger String für ID-Tokens |
context |
Titel und Wörter des One Tap-Prompts |
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 einzelnes gemeinsames Cookie verwendet wird. |
ux_mode |
UX-Vorgang für die Schaltfläche „Über Google anmelden“ |
allowed_parent_origin |
Die Ursprünge, in die der Zwischen-iFrame eingebettet werden darf. One Tap wird im iFrame-Zwischenmodus ausgeführt, wenn dieses Feld vorhanden ist. |
intermediate_iframe_close_callback |
Überschreibt das standardmäßige zwischenzeitliche iFrame-Verhalten, wenn Nutzer One Tap manuell schließen. |
itp_support |
Aktiviert aktualisierte One Tap-UX in ITP-Browsern. |
login_hint |
Überspringen Sie die Kontoauswahl, indem Sie einen Nutzerhinweis eingeben. |
hd |
Kontoauswahl nach Domain beschränken. |
use_fedcm_for_prompt |
Erlauben Sie dem Browser, die Anmeldeaufforderungen von Nutzern zu steuern und den Anmeldevorgang zwischen Ihrer Website und Google zu vermitteln. |
client_id
Dieses Feld ist die Client-ID Ihrer Anwendung, die in der Google Cloud Console ermittelt und erstellt wird. Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
String | Ja | client_id: "CLIENT_ID.apps.googleusercontent.com" |
auto_select
Dieses Feld bestimmt, ob ein ID-Token automatisch ohne Nutzerinteraktion zurückgegeben wird, wenn Ihre Anwendung zuvor nur in einer Google-Sitzung 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 ist die JavaScript-Funktion, mit der das von der One Tap-Aufforderung oder dem Pop-up-Fenster zurückgegebene ID-Token verarbeitet wird. Dieses Attribut ist erforderlich, wenn Google One Tap oder die Schaltfläche „Über Google anmelden“ popup
als UX-Modus 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. Er muss unseren Validierungsregeln für Weiterleitungs-URIs entsprechen.
Dieses Attribut kann weggelassen werden, wenn die aktuelle Seite Ihre Anmeldeseite ist. In diesem Fall werden die Anmeldedaten standardmäßig auf dieser Seite veröffentlicht.
Die Antwort auf die Anmeldedaten des ID-Tokens wird an deinen Anmeldeendpunkt gesendet, wenn ein Nutzer auf die Schaltfläche „Über Google anmelden“ klickt und der Weiterleitungsmodus verwendet wird.
Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Optional | Beispiel |
---|---|---|
URL | Die Standardeinstellung ist der URI der aktuellen Seite oder der von Ihnen angegebene Wert. Wird nur verwendet, wenn ux_mode: "redirect" festgelegt ist. |
login_uri="https://www.example.com/login" |
Der Anmeldeendpunkt muss POST-Anfragen verarbeiten, die einen credential
-Schlüssel mit einem ID-Tokenwert im Text enthalten.
Hier ist eine Beispielanfrage an Ihren Anmeldeendpunkt:
POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
credential=ID_TOKEN
native_callback
Dieses Feld ist der Name der JavaScript-Funktion, die die Passwortanmeldedaten verarbeitet, die vom nativen Anmeldedaten-Manager des Browsers zurückgegeben werden. Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
Funktion | Optional | native_callback: handleResponse |
cancel_on_tap_outside
In diesem Feld wird festgelegt, ob die One Tap-Anfrage abgebrochen wird, wenn ein Nutzer auf eine Stelle außerhalb der Aufforderung klickt. Der Standardwert ist true
. Sie können sie deaktivieren, wenn Sie den Wert auf false
festlegen. Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
boolean | Optional | cancel_on_tap_outside: false |
prompt_parent_id
Dieses Attribut legt die DOM-ID des Containerelements fest. Ist die Richtlinie nicht konfiguriert, wird die One Tap-Aufforderung rechts oben 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 von Ihrer Umgebung unterstützte JWT-Größe und die HTTP-Größenbeschränkungen der einzelnen Browser und Server begrenzt.
context
In diesem Feld werden der Text des Titels und der Nachrichten in der One Tap-Aufforderung geändert. 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 |
„Über Google anmelden“ |
signup |
„Bei Google registrieren“ |
use |
„Mit Google verwenden“ |
state_cookie_domain
Wenn One Tap in der übergeordneten Domain und ihren Subdomains angezeigt werden soll, übergeben Sie die übergeordnete Domain an dieses Feld, damit ein einzelnes 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
In diesem Feld kannst du den UX-Flow festlegen, der von der Schaltfläche „Über Google anmelden“ verwendet wird. Der Standardwert ist popup
. Dieses Attribut hat keine Auswirkungen auf die OneTap-UX. 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 UX-Vorgang für die Anmeldung in einem Pop-up-Fenster durch. |
redirect |
Führt bei der Anmeldung einen UX-Vorgang für eine vollständige Seitenweiterleitung durch. |
allowed_parent_origin
Die Ursprünge, in die der Zwischen-iFrame eingebettet werden darf. One Tap wird im iFrame-Zwischenmodus 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 Folgendes, wenn Sie Platzhalter verwenden:
- Musterstrings dürfen nicht nur aus einem Platzhalter und einer Top-Level-Domain bestehen. Beispiel:
https://.com
undhttps://
.co.uk
sind ungültig. Wie oben erwähnt, stimmt"https://.example.com"
mitexample.com
und dessen Subdomains überein. Sie können auch ein Array verwenden, um zwei verschiedene Domains darzustellen. Beispielsweise stimmt["https://example1.com", "https://
.example2.com"]
mit den Domainsexample1.com
,example2.com
und Subdomains vonexample2.com
überein. - Platzhalterdomains müssen mit einem sicheren https://-Schema beginnen. Daher gilt
"*.example.com"
als ungültig.
Wenn der Wert des Felds allowed_parent_origin
ungültig ist, schlägt die One Tap-Initialisierung des iFrame-Zwischenmodus fehl und wird beendet.
intermediate_iframe_close_callback
Überschreibt das standardmäßige zwischenzeitliche iFrame-Verhalten, wenn Nutzer One Tap manuell schließen, indem sie auf der One Tap-Benutzeroberfläche auf die Schaltfläche „X“ tippen. Standardmäßig wird der dazwischenliegende iFrame sofort aus dem DOM entfernt.
Das Feld intermediate_iframe_close_callback
wird nur im iFrame-Zwischenmodus wirksam. Außerdem wirkt sie sich nur auf den dazwischenliegenden iFrame aus, nicht auf den One Tap-iFrame. Die One Tap-Benutzeroberfläche wird entfernt, bevor der Callback aufgerufen wird.
Typ | Erforderlich | Beispiel |
---|---|---|
Funktion | Optional | intermediate_iframe_close_callback: logBeforeClose |
itp_support
Dieses Feld gibt an, ob die
aktualisierte One Tap UX 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 für Ihre Anwendung im Voraus bekannt ist, welcher Nutzer angemeldet werden soll, kann Google einen Anmeldehinweis bereitstellen. Wenn der Vorgang erfolgreich abgeschlossen wurde, wird die Kontoauswahl übersprungen. Zulässige Werte sind eine E-Mail-Adresse oder ein Wert im Feld sub eines ID-Tokens.
Weitere Informationen finden Sie in der Dokumentation zu OpenID Connect im Feld login_hint.
Typ | Erforderlich | Beispiel |
---|---|---|
String, eine E-Mail-Adresse oder der Wert aus dem Feld sub des 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, verwende dies, um Google einen Hinweis zu einem Domainnamen zu senden. Ist der Vorgang erfolgreich, sind die Nutzerkonten, die während der Kontoauswahl angezeigt werden, auf die angegebene Domain beschränkt.
Einen Platzhalterwert: *
bietet dem Nutzer nur Workspace-Konten und schließt Privatnutzerkonten (nutzer@gmail.com) bei der Kontoauswahl aus.
Weitere Informationen finden Sie in der Dokumentation zu OpenID Connect im Feld hd.
Typ | Erforderlich | Beispiel |
---|---|---|
String. Einen voll qualifizierten Domainnamen oder *. | Optional | hd: '*' |
use_fedcm_for_prompt
Erlauben Sie dem Browser, die Anmeldeaufforderungen von Nutzern zu steuern und den Anmeldevorgang zwischen Ihrer Website und Google zu vermitteln. Die Standardeinstellung ist "false". Weitere Informationen finden Sie auf der Seite Migration zu FedCM.
Typ | Erforderlich | Beispiel |
---|---|---|
boolean | Optional | use_fedcm_for_prompt: true |
Methode: google.accounts.id.prompt
Nachdem die Methode initialize()
aufgerufen wurde, zeigt die Methode google.accounts.id.prompt
die One Tap-Aufforderung oder den nativen Anmeldedatenmanager des Browsers 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 UI für One Tap-Aufforderungen möglicherweise nicht angezeigt. Übergeben Sie eine Funktion, um UI-Statusbenachrichtigungen zu erhalten, wenn Sie bestimmte Zeitpunkte über den UI-Status informieren möchten.
In folgenden Fällen werden Benachrichtigungen ausgelöst:
- Anzeigezeitpunkt: Dieser tritt auf, nachdem die Methode
prompt()
aufgerufen wurde. Die Benachrichtigung enthält einen booleschen Wert, der angibt, ob die UI angezeigt wird. Überspringen:Dieser Fall tritt auf, wenn die One Tap-Aufforderung durch einen automatischen Abbruch oder eine manuelle Stornierung geschlossen wird oder wenn Google keine Anmeldedaten ausstellt, z. B. wenn sich die ausgewählte Sitzung von Google abgemeldet hat.
In diesen Fällen sollten Sie mit dem nächsten Identitätsanbieter fortfahren, falls vorhanden.
Schließen-Moment: Dieser Fall tritt auf, wenn Google Anmeldedaten erfolgreich abruft oder ein Nutzer den Abruf von Anmeldedaten beenden möchte. Wenn der Nutzer beispielsweise beginnt, seinen Nutzernamen und sein Passwort im Anmeldedialogfeld einzugeben, können Sie die Methode
google.accounts.id.cancel()
aufrufen, um die One Tap-Aufforderung zu schließen und einen Moment zum Schließen 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: PromptMomentBenachrichtigung
In der folgenden Tabelle sind die Methoden und Beschreibungen des Datentyps PromptMomentNotification
aufgeführt:
Methode | |
---|---|
isDisplayMoment() |
Soll diese Benachrichtigung nur kurz angezeigt werden? Hinweis : Wenn FedCM aktiviert ist, wird diese Benachrichtigung nicht ausgelöst. Weitere Informationen finden Sie auf der Seite Zu FedCM migrieren. |
isDisplayed() |
Wird diese Benachrichtigung nur kurz angezeigt und wird die Benutzeroberfläche angezeigt? Hinweis : Wenn FedCM aktiviert ist, wird diese Benachrichtigung nicht ausgelöst. Weitere Informationen finden Sie auf der Seite Zu FedCM migrieren. |
isNotDisplayed() |
Wird diese Benachrichtigung nur kurz angezeigt und die UI wird nicht angezeigt? Hinweis : Wenn FedCM aktiviert ist, wird diese Benachrichtigung nicht ausgelöst. 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() |
Stammt diese Benachrichtigung nur, wenn sie übersprungen wird? |
getSkippedReason() |
Der genaue Grund für den übersprungenen Moment. Folgende Werte sind möglich:
|
isDismissedMoment() |
Ist diese Benachrichtigung geschlossen? |
getDismissedReason() |
Der genaue Grund für die Ablehnung. Folgende Werte sind möglich:
|
getMomentType() |
Gibt einen String für den Momenttyp zurück. Folgende Werte sind möglich:
|
Datentyp: CredentialResponse
Beim Aufrufen der callback
-Funktion wird ein CredentialResponse
-Objekt als Parameter übergeben. In der folgenden Tabelle sind die Felder aufgeführt, die im Antwortobjekt für Anmeldedaten enthalten sind:
Field | |
---|---|
credential |
Dieses Feld ist das zurückgegebene ID-Token. |
select_by |
In diesem Feld wird festgelegt, wie die Anmeldedaten ausgewählt werden. |
state |
Dieses Feld wird nur definiert, wenn der Nutzer zur Anmeldung auf die Schaltfläche „Über Google anmelden“ klickt und das Attribut state der Schaltfläche angegeben ist. |
anmelde daten
Dieses Feld ist das ID-Token als base64-codierter JWT-String (JSON Web Token).
Decodiert sieht das JWT in etwa 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 GSuite email address "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's creation time "exp": 1596477600, // Unix timestamp of the assertion's 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. Verwenden Sie keine E-Mail-Adresse als Kennung, da ein Google-Konto mehrere E-Mail-Adressen zu verschiedenen Zeitpunkten haben kann.
Mit den Feldern email
, email_verified
und hd
können Sie feststellen, ob Google eine E-Mail-Adresse hostet und für diese autoritativ ist. In Fällen, in denen Google maßgeblich ist, wird bestätigt, dass der Nutzer der legitime Kontoinhaber ist.
Fälle, in denen Google maßgeblich ist:
email
hat das Suffix@gmail.com
, dies ist ein Gmail-Konto.email_verified
ist „true“ undhd
ist festgelegt. Das ist 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, den Nutzer mit einem Passwort oder anderen Methoden zu bestätigen. email_verfied
kann auch "true" sein, da Google den Nutzer ursprünglich bei der Erstellung des Google-Kontos bestätigt hat. Die Inhaberschaft des E-Mail-Kontos des Drittanbieters kann sich jedoch inzwischen geändert haben.
Im Feld exp
wird die Ablaufzeit angezeigt, in der Sie das Token auf Ihrer Serverseite überprüfen müssen. Für das ID-Token von „Über Google anmelden“ dauert es eine Stunde. Sie müssen das Token vor Ablauf der Ablaufzeit überprüfen. Verwenden Sie exp
nicht für die Sitzungsverwaltung. Ein abgelaufenes ID-Token bedeutet nicht, dass der Nutzer abgemeldet ist. Ihre App ist für die Sitzungsverwaltung der Nutzer verantwortlich.
select_by
In der folgenden Tabelle sind die möglichen Werte für das Feld select_by
aufgeführt. Die Art der Schaltfläche, die zusammen mit dem Sitzungs- und Einwilligungsstatus verwendet wird, wird verwendet, um den Wert festzulegen.
Der Nutzer hat entweder die Schaltfläche „One Tap“ oder „Über Google anmelden“ verwendet oder die berührungslose automatische Anmeldung verwendet.
Es wurde eine vorhandene Sitzung gefunden oder der Nutzer hat sich ausgewählt und in einem Google-Konto angemeldet, um eine neue Sitzung einzurichten.
Vor der Weitergabe von ID-Token-Anmeldedaten für Ihre App hat der Nutzer entweder
- die Schaltfläche „Bestätigen“ gedrückt haben, um der Weitergabe der Anmeldedaten zuzustimmen, oder
- zuvor eingewilligt hatten und über „Konto auswählen“ ein Google-Konto ausgewählt haben.
Der Wert dieses Feldes ist auf einen der folgenden Typen festgelegt:
Wert | Beschreibung |
---|---|
auto |
Automatische Anmeldung eines Nutzers mit einer vorhandenen Sitzung, der zuvor die Einwilligung zum Teilen von Anmeldedaten erteilt hatte. |
user |
Ein Nutzer mit einer vorhandenen Sitzung, der zuvor eine Einwilligung erteilt hat, hat die One Tap-Schaltfläche „Weiter als“ gedrückt, um Anmeldedaten zu teilen. |
user_1tap |
Ein Nutzer mit einer vorhandenen Sitzung hat die One Tap-Schaltfläche „Weiter als“ angeklickt, um seine Einwilligung zu erteilen und Anmeldedaten zu teilen. Gilt nur für Chrome v75 und höher. |
user_2tap |
Ein Nutzer ohne vorhandene Sitzung hat die One Tap-Schaltfläche „Weiter als“ angeklickt, um ein Konto auszuwählen, und dann die Schaltfläche „Bestätigen“ in einem Pop-up-Fenster, um die Einwilligung zu erteilen und die Anmeldedaten zu teilen. Gilt für Browser, die nicht auf Chromium basieren. |
btn |
Ein Nutzer mit einer vorhandenen Sitzung, der zuvor seine Einwilligung erteilt hat, hat auf die Schaltfläche „Über Google anmelden“ geklickt und ein Google-Konto aus „Konto auswählen“ ausgewählt, um Anmeldedaten freizugeben. |
btn_confirm |
Ein Nutzer mit einer vorhandenen Sitzung hat auf die Schaltfläche „Über Google anmelden“ und dann auf die Schaltfläche „Bestätigen“ geklickt, um die Einwilligung zu erteilen und Anmeldedaten zu teilen. |
btn_add_session |
Ein Nutzer ohne bestehende Sitzung, der zuvor eine Einwilligung erteilt hat, hat die Schaltfläche „Über Google anmelden“ gedrückt, um ein Google-Konto auszuwählen und Anmeldedaten zu teilen. |
btn_confirm_add_session |
Ein Nutzer ohne vorhandene Sitzung hat zuerst auf die Schaltfläche „Über Google anmelden“ geklickt, um ein Google-Konto auszuwählen, und dann auf die Schaltfläche „Bestätigen“, um seine Einwilligung zu geben und Anmeldedaten zu teilen. |
state
Dieses Feld wird nur definiert, wenn der Nutzer zur Anmeldung auf die Schaltfläche „Über Google anmelden“ klickt und das Attribut state
der angeklickten Schaltfläche angegeben ist. Der Wert dieses Felds ist mit dem Wert identisch, den Sie im Attribut state
der Schaltfläche angegeben haben.
Da mehrere „Über Google anmelden“-Schaltflächen auf derselben Seite gerendert werden können, kannst du jeder Schaltfläche einen eindeutigen String zuweisen. Daher können Sie mit diesem state
-Feld festlegen, auf welche Schaltfläche der Nutzer bei der Anmeldung geklickt hat.
Methode: google.accounts.id.renderButton
Die Methode google.accounts.id.renderButton
rendert eine „Über Google anmelden“-Schaltfläche auf deinen Webseiten.
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 Schaltflächendesign Beispiel: „fill_blue“ oder „filled_black“. |
size |
Die Größe der Schaltfläche. z. B. klein oder groß. |
text |
Der Text der Schaltfläche. Beispiel: „Über Google anmelden“ oder „Über Google anmelden“. |
shape |
Die Form der Schaltfläche. z. B. rechteckig oder kreisförmig. |
logo_alignment |
Ausrichtung des Google-Logos: links oder mittig. |
width |
Die Breite der Schaltfläche in Pixeln. |
locale |
Wenn festgelegt, wird die Schaltflächensprache gerendert. |
click_listener |
Wenn festgelegt, wird diese Funktion aufgerufen, wenn auf die Schaltfläche „Über Google anmelden“ geklickt wird. |
state |
Wenn festgelegt, wird dieser String mit dem ID-Token zurückgegeben. |
Attributtypen
Die folgenden Abschnitte enthalten Details zum Typ der einzelnen Attribute und 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 Schaltflächendesign 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 Themen und ihre Beschreibungen aufgeführt:
Design | |
---|---|
outline |
|
filled_blue |
|
filled_black |
Größe
Die Größe der Schaltfläche. 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 der Schaltfläche. 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 zur Barrierefreiheit vorgelesen 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 der Schaltfläche. 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 |
|
pill |
|
circle |
|
square |
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 minimale Schaltflächenbreite 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. Zeigt den Schaltflächentext in der angegebenen Sprache an. Andernfalls werden standardmäßig die Google-Konto- oder Browsereinstellungen des Nutzers verwendet. Fügen Sie der „src“-Anweisung den Parameter hl
und den Sprachcode hinzu, wenn Sie die Bibliothek laden. Beispiel: gsi/client?hl=<iso-639-code>
.
Wenn die Richtlinie nicht konfiguriert ist, wird die Standardsprache des Browsers oder die Einstellung des Nutzers der Google-Sitzung verwendet. Daher sehen unterschiedliche Nutzer möglicherweise unterschiedliche Versionen lokalisierter Schaltflächen, die eventuell auch unterschiedliche Größen haben.
Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
String | Optional | locale: "zh_CN" |
click_listener
Du kannst mit dem Attribut click_listener
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 „Über Google anmelden“ angeklickt... in der Konsole protokolliert, wenn auf die Schaltfläche „Über Google anmelden“ geklickt wird.
state
Optional, da mehrere „Über Google anmelden“-Schaltflächen auf derselben Seite gerendert werden können, kannst du jeder Schaltfläche einen eindeutigen String zuweisen. Derselbe String würde zusammen mit dem ID-Token zurückgegeben werden, sodass Sie feststellen können, auf welche Schaltfläche der Nutzer zum Anmelden geklickt hat.
Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
String | Optional | data-state="button 1" |
Datentyp: Anmeldedaten
Beim Aufrufen der Funktion native_callback
wird ein Credential
-Objekt als Parameter übergeben. In der folgenden Tabelle sind die im Objekt enthaltenen Felder aufgeführt:
Field | |
---|---|
id |
Identifiziert den Nutzer. |
password |
Das Passwort |
Methode: google.accounts.id.disableAutoSelect
Wenn sich der Nutzer von deiner Website abmeldet, musst du die Methode google.accounts.id.disableAutoSelect
aufrufen, um den Status in Cookies zu erfassen. Dies verhindert eine tote UX-Schleife. 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 nativen Anmeldedaten-Manager-API des Browsers. Daher können sie nur zum Speichern von Anmeldedaten mit Passwörtern 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-Vorgang abbrechen, wenn Sie die Aufforderung aus dem DOM der vertrauenden Partei entfernen. Der Abbruchvorgang wird ignoriert, wenn bereits ein Berechtigungsnachweis ausgewählt ist. Hier ein Codebeispiel der 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 zum Laden der Bibliothek: onGoogleLibraryLoad
Du kannst einen onGoogleLibraryLoad
-Callback registrieren. Es wird benachrichtigt, nachdem die JavaScript-Bibliothek für „Über Google anmelden“ geladen wurde:
window.onGoogleLibraryLoad = () => {
...
};
Dieser Callback ist nur eine Verknüpfung für den window.onload
-Callback. Es gibt keine Unterschiede beim 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
Die Methode google.accounts.id.revoke
widerruft die OAuth-Zustimmung, die zur Freigabe des ID-Tokens für den angegebenen Nutzer verwendet wurde. Hier ein Code-Snippet der Methode: 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 das Attribut sub der Nutzlast Anmeldedaten. |
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
Beim Aufrufen der callback
-Funktion wird ein RevocationResponse
-Objekt als Parameter übergeben. In der folgenden Tabelle sind die Felder aufgeführt, die im Widerrufsantwortobjekt enthalten sind:
Field | |
---|---|
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 ist, wenn der Aufruf der Aufhebungsmethode erfolgreich war, oder „false“ bei einem Fehler.
error
Dieses Feld enthält einen Stringwert und enthält eine detaillierte Fehlermeldung, wenn der Aufruf der Widerrufsmethode fehlgeschlagen ist. Bei Erfolg ist das Feld nicht definiert.