Auf dieser Referenzseite wird die Log-in JavaScript API beschrieben. Sie können diese API verwenden, um die One Tap-Aufforderung oder die Schaltfläche „Über Google anmelden“ auf Ihren Webseiten anzuzeigen.
Methode: google.accounts.id.initial
Die Methode google.accounts.id.initialize
initialisiert „Über Google anmelden“
basierend auf dem Konfigurationsobjekt. Im folgenden Codebeispiel finden Sie
:
google.accounts.id.initialize(IdConfiguration)
Im folgenden Codebeispiel wird die Methode google.accounts.id.initialize
implementiert
mit einer onload
-Funktion:
<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 ein „Über Google anmelden“-Client erstellt
-Instanz, die implizit von allen Modulen auf derselben Webseite verwendet werden kann.
- Sie müssen die Methode
google.accounts.id.initialize
nur einmal aufrufen, Wenn Sie mehrere Module verwenden (z. B. One Tap, personalisierte Schaltfläche, Widerruf, auf derselben Webseite. - Wenn Sie die Methode
google.accounts.id.initialize
mehrmals aufrufen, werden nur die Konfigurationen im letzten Aufruf gespeichert und verwendet.
Sie setzen die Konfigurationen bei jedem Aufruf der
google.accounts.id.initialize
-Methode und alle nachfolgenden Methoden in derselben
sofort die neuen Konfigurationen verwenden.
Datentyp: IdConfiguration
In der folgenden Tabelle sind die Felder und Beschreibungen von IdConfiguration
aufgeführt.
Datentyp:
Feld | |
---|---|
client_id |
Client-ID Ihrer Anwendung |
auto_select |
Aktiviert die automatische Auswahl. |
callback |
Die JavaScript-Funktion, die ID-Tokens verarbeitet. Google One Tap und
Schaltfläche „Über Google anmelden“ popup im UX-Modus verwenden
. |
login_uri |
Die URL Ihres Anmeldeendpunkts. Die Schaltfläche „Über Google anmelden“
redirect Im UX-Modus wird dieses Attribut verwendet. |
native_callback |
Die JavaScript-Funktion, die Passwort-Anmeldedaten 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 One Tap-Aufforderungs-Containerelements |
nonce |
Ein zufälliger String für ID-Tokens |
context |
Titel und Wörter in der One Tap-Aufforderung |
state_cookie_domain |
Wenn Sie One Tap in der übergeordneten Domain und den zugehörigen Subdomains aufrufen möchten, die übergeordnete Domain an dieses Feld übergeben, sodass ein einzelnes freigegebenes Cookie verwendet. |
ux_mode |
UX-Ablauf der Schaltfläche „Über Google anmelden“ |
allowed_parent_origin |
Die Ursprünge, in denen der dazwischenliegende iFrame eingebettet werden darf. Einmal tippen wird im iFrame-Zwischenmodus ausgeführt, wenn dieses Feld vorhanden ist. |
intermediate_iframe_close_callback |
Überschreibt das Standardverhalten zwischen iFrames, wenn Nutzer manuell schließen Sie One Tap. |
itp_support |
Aktiviert das aktualisierte One Tap-UX in ITP-Browsern. |
login_hint |
Mit einem Nutzerhinweis kannst du die Kontoauswahl überspringen. |
hd |
Beschränken Sie die Kontoauswahl nach Domain. |
use_fedcm_for_prompt |
Dem Browser erlauben, Aufforderungen zur Anmeldung von Nutzern zu steuern und die Anmeldevorgang zwischen Ihrer Website und Google. |
client_id
Dieses Feld enthält die Client-ID Ihrer Anwendung, die im Google Cloud Console Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
String | Ja | client_id: "CLIENT_ID.apps.googleusercontent.com" |
auto_select
Mit diesem Feld wird festgelegt, ob ein ID-Token automatisch ohne Nutzer zurückgegeben wird
Interaktion, wenn Ihre App nur durch eine Google-Sitzung genehmigt wurde
vorher. Der Standardwert ist false
. Weitere Informationen finden Sie in der
Informationen:
Typ | Erforderlich | Beispiel |
---|---|---|
boolean | Optional | auto_select: true |
callback
Dieses Feld ist die JavaScript-Funktion, die das von
die One Tap-Aufforderung oder das Pop-up-Fenster öffnen. Dieses Attribut ist erforderlich, wenn Google
Durch einmaliges Tippen oder die Schaltfläche „Über Google anmelden“ popup
wird der UX-Modus verwendet. Weitere Informationen finden Sie in der
folgende Tabelle mit weiteren Informationen:
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 das OAuth übereinstimmen. 2.0-Client, den Sie konfiguriert haben in der Google Cloud Console und muss unserer Weiterleitungs-URI-Validierung entsprechen Regeln.
Dieses Attribut kann weggelassen werden, wenn die aktuelle Seite Ihre Anmeldeseite ist, auf der Die Anmeldedaten werden standardmäßig auf dieser Seite veröffentlicht.
Die Antwort auf die Anmeldedaten des ID-Tokens wird an Ihren Anmeldeendpunkt gesendet, wenn ein Nutzer auf die Schaltfläche „Über Google anmelden“ klickt und der UX-Modus „Weiterleitung“ 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" |
Dein Anmeldeendpunkt muss POST-Anfragen mit einem
credential
-Schlüssel mit einem
ID-Tokenwert im Text.
Hier sehen Sie 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 enthält den Namen der JavaScript-Funktion, die das Passwort verarbeitet Anmeldedaten, die vom nativen Anmeldeinformations-Manager des Browsers zurückgegeben werden. Weitere Informationen finden Sie in der folgende Tabelle mit weiteren Informationen:
Typ | Erforderlich | Beispiel |
---|---|---|
Funktion | Optional | native_callback: handleResponse |
cancel_on_tap_outside
In diesem Feld wird festgelegt, ob die One Tap-Anfrage abgebrochen werden soll, wenn ein Nutzer auf
außerhalb des Prompts. Der Standardwert ist true
. Sie können sie deaktivieren, wenn Sie
den Wert in false
. 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. Ist dies nicht festgelegt, Die One Tap-Aufforderung wird rechts oben im Fenster angezeigt. Weitere Informationen finden Sie in der folgende Tabelle mit weiteren Informationen:
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 begrenzt. und HTTP-Größenbeschränkungen für Browser und Server.
context
In diesem Feld ändern Sie den Text des Titels und der Nachrichten in der One Tap-Aufforderung. Weitere Informationen finden Sie unter in der folgenden Tabelle finden Sie weitere Informationen:
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 |
„Mit Google registrieren“ |
use |
Mit Google verwenden |
state_cookie_domain
Wenn One Tap in der übergeordneten Domain und deren Subdomains angezeigt werden soll, übergeben Sie den Parameter übergeordneten Domain in dieses Feld, sodass ein einzelnes Cookie mit gemeinsam genutztem Status verwendet wird. Weitere Informationen finden Sie unter in der folgenden Tabelle finden Sie weitere Informationen:
Typ | Erforderlich | Beispiel |
---|---|---|
String | Optional | state_cookie_domain: "example.com" |
ux_mode
In diesem Feld können Sie den UX-Ablauf festlegen, der für die 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
folgende Tabelle mit weiteren Informationen:
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-Anmeldevorgang in einem Pop-up-Fenster aus. |
redirect |
Führt den UX-Anmeldevorgang durch eine ganzseitige Weiterleitung durch. |
allowed_parent_origin
Die Ursprünge, in denen der dazwischenliegende iFrame eingebettet werden darf. One Tap-Ausführungen in den iFrame-Zwischenmodus versetzt, wenn dieses Feld vorhanden ist. Weitere Informationen: finden Sie weitere Informationen:
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
). Hinweise zur Verwendung von
Platzhalter:
- Musterstrings dürfen nicht nur aus einem Platzhalter und einer übergeordneten Ebene bestehen.
. Beispiel:
https://.com
undhttps://
.co.uk
sind ungültig. Wie oben erwähnt,"https://.example.com"
entsprichtexample.com
und den zugehörigen Subdomains. Sie können auch ein Array zur Darstellung von zwei verschiedenen Domains. Beispiel:["https://example1.com", "https://
.example2.com"]
Übereinstimmungen die Domainsexample1.com
,example2.com
und Subdomains vonexample2.com
- Platzhalterdomains müssen mit einem sicheren https://-Schema beginnen.
"*.example.com"
gilt als ungültig.
Wenn der Wert im Feld allowed_parent_origin
ungültig ist, wird über One Tap
würde die Initialisierung des iFrame-Zwischenmodus fehlschlagen und beendet werden.
intermediate_iframe_close_callback
Überschreibt das Standardverhalten zwischen iFrame-Zwischeneinstellungen, wenn Nutzer One manuell schließen. Tippe auf das „X“. in der One Tap-Benutzeroberfläche. Das Standardverhalten ist den dazwischen liegenden iFrame sofort aus dem DOM zu entfernen.
Das Feld intermediate_iframe_close_callback
tritt nur in der mittleren Phase in Kraft.
iFrame-Modus. Und es wirkt sich nur auf den zwischengeschalteten 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
Mit diesem Feld wird festgelegt, ob der
aktualisierte One Tap-UX
sollten in Browsern aktiviert sein, die Intelligent Tracking Prevention unterstützen
(ITP). Der Standardwert ist false
. Weitere Informationen finden Sie in der
Informationen:
Typ | Erforderlich | Beispiel |
---|---|---|
boolean | Optional | itp_support: true |
login_hint
Wenn Ihrer Anwendung im Voraus bekannt ist, welcher Nutzer angemeldet sein muss, kann sie Anmeldehinweis für Google bereitstellen. Wenn der Vorgang erfolgreich war, wird die Kontoauswahl übersprungen. Zulässige Werte sind: eine E-Mail-Adresse oder der Wert eines sub-Felds für das ID-Token.
Weitere Informationen finden Sie im Feld login_hint von OpenID Connect Dokumentation.
Typ | Erforderlich | Beispiel |
---|---|---|
String, E-Mail-Adresse oder Wert aus einem ID-Token
sub . |
Optional | login_hint: 'elisa.beckett@gmail.com' |
HD
Wenn ein Nutzer mehrere Konten hat und sich nur mit seinem Workspace-Konto anmelden soll
verwendet, um Google einen Hinweis zum Domainnamen bereitzustellen. Wenn der Vorgang erfolgreich war,
Konten, die während der Kontoauswahl angezeigt werden, sind auf die angegebene Domain beschränkt.
Platzhalterwert: *
bietet dem Nutzer nur Workspace-Konten an und schließt Folgendes aus:
Privatnutzerkonten (nutzer@gmail.com) hinzugefügt werden.
Weitere Informationen finden Sie in der Dokumentation zu OpenID Connect im Feld hd.
Typ | Erforderlich | Beispiel |
---|---|---|
String. Ein voll qualifizierter Domainname oder *. | Optional | hd: '*' |
use_fedcm_for_prompt
Dem Browser erlauben, Aufforderungen zur Anmeldung von Nutzern zu steuern und den Anmeldevorgang zu vermitteln zwischen Ihrer Website und Google. Die Standardeinstellung ist "false". Siehe Migration zu FedCM finden Sie weitere Informationen.
Typ | Erforderlich | Beispiel |
---|---|---|
boolean | Optional | use_fedcm_for_prompt: true |
Methode: google.accounts.id.prompt
Mit der Methode google.accounts.id.prompt
wird die One Tap-Aufforderung oder die
nach dem Aufrufen der Methode initialize()
.
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 der Sitzung
Status und Nutzereinstellungen gibt, ist die Benutzeroberfläche für One Tap-Aufforderungen möglicherweise nicht
angezeigt. Übergeben Sie eine Benachrichtigung über den UI-Status
um UI-Statusbenachrichtigungen zu erhalten.
Benachrichtigungen werden in den folgenden Momenten ausgelöst:
- Anzeigemoment: Findet nach dem Aufruf der Methode
prompt()
statt. Die Die Benachrichtigung enthält einen booleschen Wert, der angibt, ob die Benutzeroberfläche oder nicht angezeigt wird. Übersprungen:Dieser Fall tritt ein, wenn die One Tap-Aufforderung durch eine automatische oder wenn Google keine Anmeldedaten ausstellt, z. B. Die ausgewählte Sitzung wurde von Google abgemeldet.
In diesen Fällen sollten Sie mit der nächsten Anbietern, falls vorhanden.
Geschlossener-Moment:Dieser Fall tritt ein, wenn Google erfolgreich eine oder ein Nutzer möchte den Abruf von Anmeldedaten beenden. Für wenn Nutzer damit beginnen, ihren Nutzernamen und ihr Passwort in Ihr Anmeldedialogfeld nicht unterstützt, können Sie die Methode
google.accounts.id.cancel()
aufrufen, um die One Tap-Aufforderung und lösen einen Schließvorgang aus.
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 der
Datentyp PromptMomentNotification
:
Methode | |
---|---|
isDisplayMoment() |
Ist diese Benachrichtigung nur eine Anzeige? Hinweis : Wenn FedCM aktiviert, wird diese Benachrichtigung nicht ausgelöst. Weitere Informationen finden Sie unter Zu FedCM migrieren finden Sie weitere Informationen. |
isDisplayed() |
Ist dies eine Anzeige und die Benutzeroberfläche ist
angezeigt? Hinweis : Wenn FedCM aktiviert, wird diese Benachrichtigung nicht ausgelöst. Weitere Informationen finden Sie unter Zu FedCM migrieren finden Sie weitere Informationen. |
isNotDisplayed() |
Ist dies eine Anzeige, aber die Benutzeroberfläche wird nicht angezeigt,
angezeigt? Hinweis : Wenn FedCM aktiviert, wird diese Benachrichtigung nicht ausgelöst. Weitere Informationen finden Sie unter Zu FedCM migrieren finden Sie weitere Informationen. |
getNotDisplayedReason() |
Der detaillierte Grund, warum die Benutzeroberfläche nicht angezeigt wird. Im Folgenden finden Sie mögliche Werte:
|
isSkippedMoment() |
Ist diese Benachrichtigung ein übersprungener Moment? |
getSkippedReason() |
Der detaillierte Grund für den übersprungenen Moment. Im Folgenden finden Sie mögliche Werte:
|
isDismissedMoment() |
Handelt es sich bei dieser Benachrichtigung um einen geschlossenen Moment? |
getDismissedReason() |
Der detaillierte Grund für die Ablehnung. Folgende Möglichkeiten sind möglich: Werte:
|
getMomentType() |
Gibt einen String für den Momenttyp zurück. Folgende Möglichkeiten sind möglich: Werte:
|
Datentyp: CredentialResponse
Wenn die callback
-Funktion aufgerufen wird, wird ein CredentialResponse
-Objekt
als Parameter übergeben werden. In der folgenden Tabelle sind die Felder aufgeführt,
im Antwortobjekt für Anmeldedaten ein:
Feld | |
---|---|
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 auf eine „Über Google anmelden“-Schaltfläche klickt
Schaltfläche zum Anmelden und der state der Schaltfläche
angegeben ist. |
Anmeldedaten
Dieses Feld ist das ID-Token als base64-codierter JWT-String (JSON Web Token).
Wann? 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 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. Nur
Verwenden Sie das Feld sub
als Kennung für den Nutzer, da es unter allen Google-Diensten eindeutig ist.
Konten und werden nicht wiederverwendet. Verwenden Sie nicht eine E-Mail-Adresse als Kennung,
Ein Google-Konto kann mehrere E-Mail-Adressen zu verschiedenen Zeitpunkten haben.
Mit den Feldern email
, email_verified
und hd
können Sie festlegen,
gehostet wird und für eine E-Mail-Adresse autoritativ ist. In Fällen, in denen Google
maßgeblich ist, dass der Nutzer als rechtmäßiger Kontoinhaber bestätigt wird.
Fälle, in denen Google als vertrauenswürdig eingestuft wird:
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 ein Google-Konto registrieren, ohne Gmail oder Google Workspace zu verwenden.
Wenn email
kein @gmail.com
-Suffix enthält und hd
nicht vorhanden ist, wird Google
nicht autoritativ sind, werden Passwörter oder andere Methoden zur Identitätsbestätigung empfohlen,
den Nutzer zu verifizieren. email_verfied
kann auch „true“ sein, wenn Google ursprünglich überprüft hat
Nutzer beim Erstellen des Google-Kontos, aber die Inhaberschaft des dritten
hat sich in der Zwischenzeit möglicherweise geändert.
Das Feld exp
zeigt die Ablaufzeit an, zu der Sie das Token auf Ihrem
serverseitig. Es ist eine Stunde.
für das ID-Token, das Sie von „Über Google anmelden“ erhalten haben. Sie müssen die
Token vor dem Ablaufdatum
. Verwenden Sie exp
nicht für die Sitzungsverwaltung. Ein abgelaufenes ID-Token
bedeutet das nicht, dass der Nutzer abgemeldet ist. Ihre App ist für die
die Verwaltung Ihrer Nutzer.
select_by
In der folgenden Tabelle sind die möglichen Werte für das Feld select_by
aufgeführt. Die
Der Schaltflächentyp, der in Verbindung mit der Sitzung und dem Einwilligungsstatus verwendet wird, werden verwendet, um
Wert,
Der Nutzer hat entweder auf die Schaltfläche „One Tap“ oder „Über Google anmelden“ geklickt oder die berührungslose automatische Anmeldung.
Es wurde eine bestehende Sitzung gefunden oder der Nutzer hat eine Sitzung ausgewählt und sich in einem angemeldet. Google-Konto, um eine neue Sitzung zu erstellen.
Vor der Freigabe von ID-Token-Anmeldedaten für Ihre App muss der Nutzer entweder
- die Schaltfläche „Bestätigen“ gedrückt haben, um der Weitergabe von Anmeldedaten zuzustimmen, oder
- dem Nutzer zuvor seine Einwilligung erteilt und mit „Konto auswählen“ eine Google-Konto.
Der Wert dieses Feldes ist auf einen dieser Typen festgelegt,
Wert | Beschreibung |
---|---|
auto |
Automatische Anmeldung eines Nutzers mit einer bestehenden Sitzung, der bereits zuvor ihre Einwilligung zur Freigabe von Anmeldedaten erteilt hat. Gilt nur für nicht von FedCM unterstützten Browser. |
user |
Nutzer in einer bestehenden Sitzung, die zuvor ihre Einwilligung erteilt haben auf „Weiter als“ um die Anmeldedaten zu teilen. Gilt nur in nicht von FedCM unterstützten Browsern. |
fedcm |
Ein Nutzer hat auf „Weiter als“ geklickt Schaltfläche zum Teilen mithilfe von FedCM. Gilt nur für FedCM unterstützt Browser. |
fedcm_auto |
Automatische Anmeldung eines Nutzers mit einer bestehenden Sitzung, der hat zuvor die Einwilligung zum Teilen von Anmeldedaten über FedCM One Tap erteilt. Gilt nur für FedCM unterstützt Browser. |
user_1tap |
Ein Nutzer mit einer bestehenden Sitzung hat auf „Weiter als“ über One Tap geklickt um Ihre Einwilligung zu erteilen und die Anmeldedaten zu teilen. Gilt nur für Chrome v75 und höher. |
user_2tap |
Ein Nutzer ohne bestehende Sitzung hat auf „Weiter als“ über One Tap geklickt um ein Konto auszuwählen, und drücken dann in einer um Ihre Einwilligung zu erteilen und die Anmeldedaten zu teilen. Gilt für Browser, die nicht auf Chromium basieren. |
btn |
Nutzer in einer bestehenden Sitzung, die ihre Einwilligung zuvor erteilt haben auf „Über Google anmelden“ geklickt und ein Google-Konto ausgewählt „Konto auswählen“ Anmeldedaten zu teilen. |
btn_confirm |
Ein Nutzer mit einer bestehenden Sitzung hat die Schaltfläche „Über Google anmelden“ angeklickt und auf „Bestätigen“ geklickt, um die Einwilligung zu erteilen und die Anmeldedaten zu teilen. |
btn_add_session |
Ein Nutzer ohne bestehende Sitzung, der zuvor eine Berechtigung erteilt hat Einwilligung hat die Schaltfläche „Über Google anmelden“ gedrückt, um ein Google-Konto auszuwählen und Anmeldedaten teilen. |
btn_confirm_add_session |
Ein Nutzer ohne bestehende Sitzung hat zuerst auf „Über Google anmelden“ geklickt um ein Google-Konto auszuwählen, und dann auf „Bestätigen“ um Ihre Einwilligung zu erteilen und Anmeldedaten zu teilen. |
Bundesstaat
Dieses Feld wird nur definiert, wenn der Nutzer auf die Schaltfläche „Über Google anmelden“ klickt,
angemeldet sind und das Attribut state
der angeklickten Schaltfläche angegeben ist. Die
Wert dieses Felds mit dem Wert übereinstimmt, den Sie in den
state
-Attribut.
Da mehrere „Über Google anmelden“-Schaltflächen auf derselben Seite gerendert werden können,
kann jeder Schaltfläche einen eindeutigen String zuweisen. Daher können Sie dieses state
-Feld
um zu ermitteln, auf welche Schaltfläche der Nutzer zur Anmeldung geklickt hat.
Methode: google.accounts.id.renderButton
Die Methode google.accounts.id.renderButton
rendert „Über Google anmelden“
auf Ihren 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 der
Datentyp GsiButtonConfiguration
:
Attribut | |
---|---|
type |
Der Schaltflächentyp: Symbol oder Standardschaltfläche. |
theme |
Das Schaltflächendesign. Beispiel: gefülltes_blau oder gefülltes_schwarz. |
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. Beispiel: rechteckig oder rund. |
logo_alignment |
Ausrichtung des Google-Logos: links oder mittig |
width |
Die Breite der Schaltfläche in Pixeln. |
locale |
Wenn festgelegt, wird die Sprache der Schaltfläche gerendert. |
click_listener |
Wenn festgelegt, wird diese Funktion aufgerufen, wenn die Schaltfläche „Über Google anmelden“ wenn auf die Schaltfläche 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 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 Textzeilen:
Typ | |
---|---|
standard |
<ph type="x-smartling-placeholder"> |
icon |
<ph type="x-smartling-placeholder"> |
Thema
Das Schaltflächendesign. Der Standardwert ist outline
. In der folgenden Tabelle finden Sie
Weitere Informationen:
Typ | Erforderlich | Beispiel |
---|---|---|
String | Optional | theme: "filled_blue" |
In der folgenden Tabelle sind die verfügbaren Themen und ihre Beschreibungen aufgeführt:
Design | |
---|---|
outline |
<ph type="x-smartling-placeholder"> |
filled_blue |
<ph type="x-smartling-placeholder"> |
filled_black |
<ph type="x-smartling-placeholder"> |
Größe
Die Größe der Schaltfläche. Der Standardwert ist large
. In der folgenden Tabelle finden Sie
Weitere Informationen:
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 |
<ph type="x-smartling-placeholder"> |
medium |
<ph type="x-smartling-placeholder"> |
small |
<ph type="x-smartling-placeholder"> |
Text
Der Text der Schaltfläche. Der Standardwert ist signin_with
. Es gibt keine visuellen
Unterschiede beim Text von Symbolschaltflächen mit unterschiedlichen text
-Attributen.
Die einzige Ausnahme ist, wenn der Text für Bedienungshilfen 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 Textzeilen:
Text | |
---|---|
signin_with |
<ph type="x-smartling-placeholder"> |
signup_with |
<ph type="x-smartling-placeholder"> |
continue_with |
<ph type="x-smartling-placeholder"> |
signin |
<ph type="x-smartling-placeholder"> |
shape
Die Form der Schaltfläche. Der Standardwert ist rectangular
. Siehe folgende Tabelle
, um weitere Informationen zu erhalten:
Typ | Erforderlich | Beispiel |
---|---|---|
String | Optional | shape: "rectangular" |
In der folgenden Tabelle sind die verfügbaren Schaltflächenformen und ihre Beschreibungen aufgeführt:
Form | |
---|---|
rectangular |
<ph type="x-smartling-placeholder"> |
pill |
<ph type="x-smartling-placeholder"> |
circle |
<ph type="x-smartling-placeholder"> |
square |
<ph type="x-smartling-placeholder"> |
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
Informationen:
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 |
<ph type="x-smartling-placeholder"> |
center |
<ph type="x-smartling-placeholder"> |
Breite
Die minimale Breite der Schaltfläche 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 Standard auf
Google-Konto- oder Browsereinstellungen des Nutzers ändern. Fügen Sie den Parameter hl
und
Sprachcode an die Anweisung src beim Laden der Bibliothek. Beispiel:
gsi/client?hl=<iso-639-code>
.
Wenn sie nicht konfiguriert ist, wird die Standardsprache des Browsers oder die des Nutzers der Google-Sitzung verwendet verwendet wird. Daher sehen unterschiedliche Nutzer unterschiedliche Versionen lokalisierten Schaltflächen und möglicherweise mit unterschiedlichen Größen.
Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
String | Optional | locale: "zh_CN" |
click_listener
Sie können eine JavaScript-Funktion definieren, die aufgerufen wird, wenn die Funktion „Über Google anmelden“
wird mit dem Attribut click_listener
angeklickt.
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-Schaltfläche angeklickt... protokolliert. wenn auf die Schaltfläche „Über Google anmelden“ geklickt wird.
Bundesstaat
Optional, da mehrere „Über Google anmelden“-Schaltflächen auf demselben Bildschirm können Sie jeder Schaltfläche eine eindeutige Zeichenfolge zuweisen. Derselbe String zusammen mit dem ID-Token zurückgegeben, damit Sie erkennen können, welcher Schaltflächennutzer zum Anmelden geklickt.
Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
String | Optional | data-state: "button 1" |
Datentyp: Anmeldedaten
Wenn Ihre
native_callback
aufgerufen wird, wird ein Credential
-Objekt als Parameter übergeben. Die
In der folgenden Tabelle sind die im Objekt enthaltenen Felder aufgeführt:
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 aufrufen,
google.accounts.id.disableAutoSelect
, um den Status in Cookies aufzuzeichnen. Dieses
verhindert eine leere UX-Schleife. Hier ein Code-Snippet der Methode:
google.accounts.id.disableAutoSelect()
Mit dem folgenden Codebeispiel wird google.accounts.id.disableAutoSelect
implementiert
mit einer onSignout()
-Funktion:
<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 Browseroberfläche
Credential Manager API. Daher kann es nur zum Speichern eines Passworts verwendet werden.
Anmeldedaten Hier ein Codebeispiel für die Methode:
google.accounts.id.storeCredential(Credential, callback)
Mit dem folgenden Codebeispiel wird google.accounts.id.storeCredential
implementiert
mit einer onSignIn()
-Funktion:
<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 den Prompt von der vertrauenden Partei entfernen DOM. Der Abbruchvorgang wird ignoriert, wenn bereits Anmeldedaten ausgewählt sind. Weitere Informationen finden Sie unter das folgende Codebeispiel der Methode:
google.accounts.id.cancel()
Im folgenden Codebeispiel wird die Methode google.accounts.id.cancel()
implementiert
mit einer onNextButtonClicked()
-Funktion:
<script>
function onNextButtonClicked() {
google.accounts.id.cancel();
showPasswordPage();
}
</script>
Callback beim Laden der Bibliothek: onGoogleLibraryLoad
Du kannst einen onGoogleLibraryLoad
-Callback registrieren. Er wird nach dem Schild
Die JavaScript-Bibliothek "In With Google" wird geladen:
window.onGoogleLibraryLoad = () => {
...
};
Dieser Callback ist nur eine Kurzform für den window.onload
-Callback. Es sind keine
Verhaltensunterschiede.
Mit dem 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-Token für den angegebenen Nutzer. 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 des
Nutzlast der 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
Wenn die callback
-Funktion aufgerufen wird, wird ein RevocationResponse
-Objekt
als Parameter übergeben werden. In der folgenden Tabelle sind die Felder aufgeführt,
im Widerrufsantwortobjekt:
Feld | |
---|---|
successful |
Dieses Feld ist der Rückgabewert des Methodenaufrufs. |
error |
Dieses Feld enthält optional eine detaillierte Fehlermeldung. |
erfolgreich
Dieses Feld enthält einen booleschen Wert, der auf „true“ gesetzt ist, wenn der Aufruf der Widerrufsmethode erfolgreich war oder "false" bei einem Fehler.
Fehler
Dieses Feld ist ein Stringwert und enthält eine detaillierte Fehlermeldung, wenn der Widerruf Methodenaufruf fehlgeschlagen. Bei Erfolg ist dieser nicht definiert.