Auf dieser Referenzseite wird die API für HTML-Datenattribute für „Mit Google anmelden“ beschrieben. Mit der API können Sie die Aufforderung zur Ein-Klick-Anmeldung oder die Schaltfläche „Über Google anmelden“ auf Ihren Webseiten anzeigen.
Element mit der ID „g_id_onload“
Sie können Datenattribute für „Mit Google anmelden“ in beliebige sichtbare oder unsichtbare Elemente wie <div>
und <span>
einfügen. Die einzige Voraussetzung ist, dass die Element-ID auf g_id_onload
festgelegt ist. Verwenden Sie diese ID nicht für mehrere Elemente.
Datenattribute
In der folgenden Tabelle sind die Datenattribute mit ihren Beschreibungen aufgeführt:
Attribut | |
---|---|
data-client_id |
Die Client-ID Ihrer Anwendung |
data-auto_prompt |
Google One-Tipp anzeigen |
data-auto_select |
Ermöglicht die automatische Auswahl bei Google One Tap. |
data-login_uri |
Die URL Ihres Anmeldeendpunkts |
data-callback |
Der Name der JavaScript-Handler-Funktion für das ID-Token |
data-native_login_uri |
Die URL Ihres Endpunkts für die Verarbeitung von Anmeldedaten für Passwörter |
data-native_callback |
Der Name der JavaScript-Handler-Funktion für Passwortanmeldedaten |
data-native_id_param |
Der Parametername für den credential.id -Wert |
data-native_password_param |
Der Parametername für den credential.password -Wert |
data-cancel_on_tap_outside |
Legt fest, ob die Aufforderung abgebrochen werden soll, wenn der Nutzer außerhalb der Aufforderung klickt. |
data-prompt_parent_id |
Die DOM-ID des Container-Elements für die Aufforderung zur Einmalanmeldung |
data-skip_prompt_cookie |
Überspringt One Tap, wenn das angegebene Cookie einen nicht leeren Wert hat. |
data-nonce |
Ein zufälliger String für ID-Tokens |
data-context |
Der Titel und die Wörter in der One Tap-Aufforderung |
data-moment_callback |
Der Funktionsname des Listeners für Benachrichtigungen zum Status der Aufforderungs-UI |
data-state_cookie_domain |
Wenn Sie One Tap in der übergeordneten Domain und ihren Subdomains aufrufen müssen, übergeben Sie die übergeordnete Domain an dieses Attribut, damit ein gemeinsames Cookie verwendet wird. |
data-ux_mode |
Nutzererfahrung für die Schaltfläche „Über Google anmelden“ |
data-allowed_parent_origin |
Die Ursprünge, die den Zwischen-iFrame einbetten dürfen. One Tap wird im Zwischen-iFrame-Modus ausgeführt, wenn dieses Attribut vorhanden ist. |
data-intermediate_iframe_close_callback |
Überschreibt das Standardverhalten des Zwischen-iFrames, wenn Nutzer One Tap manuell schließen. |
data-itp_support |
Aktiviert die aktualisierte One Tap-Benutzeroberfläche in ITP-Browsern. |
data-login_hint |
Die Kontoauswahl überspringen, indem Sie einen Nutzerhinweis angeben. |
data-hd |
Kontenauswahl nach Domain einschränken |
data-use_fedcm_for_prompt |
Dem Browser erlauben, Anmeldeaufforderungen für Nutzer zu steuern und den Anmeldevorgang zwischen Ihrer Website und Google zu vermitteln. |
data-use_fedcm_for_button |
In diesem Feld wird festgelegt, ob die FedCM-Schaltflächen-Benutzeroberfläche in Chrome verwendet werden soll (Desktop M125+ und Android M128+). Der Standardwert ist false . |
data-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 dann umgangen. Der Standardwert ist false . |
Attributtypen
In den folgenden Abschnitten finden Sie Details zum Typ der einzelnen Attribute sowie ein Beispiel.
data-client_id
Dieses Attribut ist die Client-ID Ihrer App, 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 | data-client_id="CLIENT_ID.apps.googleusercontent.com" |
data-auto_prompt
Mit diesem Attribut wird festgelegt, ob die Funktion „Mit Google Pay bezahlen“ angezeigt werden soll. Der Standardwert ist true
. Google One Tap wird nicht angezeigt, wenn dieser Wert false
ist. Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
boolean | Optional | data-auto_prompt="true" |
data-auto_select
Mit diesem Attribut wird festgelegt, ob ein ID-Token automatisch zurückgegeben werden soll, ohne dass der Nutzer interagieren muss, wenn nur eine Google-Sitzung Ihre App genehmigt hat. Der Standardwert ist false
. Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
boolean | Optional | data-auto_select="true" |
data-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 Auth Platform konfiguriert haben, und 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 gepostet.
Die Antwort mit den ID-Token-Anmeldedaten wird an Ihren Anmeldeendpunkt gesendet, wenn keine Callback-Funktion definiert ist und ein Nutzer auf die Schaltfläche „Über Google anmelden“ oder „One Tap“ klickt oder die automatische Anmeldung erfolgt.
Ihr Anmeldeendpunkt muss POST-Anfragen mit einem credential
-Parameter mit einem ID-Token-Wert im Text verarbeiten.
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 ignoriert, wenn data-ux_mode="popup" und data-callback festgelegt sind. |
data-login_uri="https://www.example.com/login" |
data-callback
Dieses Attribut ist der Name der JavaScript-Funktion, die das zurückgegebene ID-Token verarbeitet. Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
String | Erforderlich, wenn data-login_uri nicht festgelegt ist. |
data-callback="handleToken" |
Eines der Attribute data-login_uri
und data-callback
kann verwendet werden. Das hängt von den folgenden Komponenten- und UX-Modus-Konfigurationen ab:
Das Attribut
data-login_uri
ist für den UX-Modus der Schaltfläche „Über Google anmelden“redirect
erforderlich. Das Attributdata-callback
wird in diesem Modus ignoriert.Eines dieser beiden Attribute muss für den UX-Modus „Google One Tap“ und die Schaltfläche „Über Google anmelden“
popup
festgelegt werden. Wenn beide festgelegt sind, hat das Attributdata-callback
eine höhere Priorität.
JavaScript-Funktionen in einem Namespace werden von der HTML API nicht unterstützt.
Verwenden Sie stattdessen eine globale JavaScript-Funktion ohne Namespace. Verwenden Sie z. B. mylibCallback
statt mylib.callback
.
data-native_login_uri
Dieses Attribut ist die URL Ihres Endpunkts für die Verarbeitung von Anmeldedaten für Passwörter. Wenn Sie entweder das Attribut data-native_login_uri
oder das Attribut data-native_callback
festlegen, greift die JavaScript-Bibliothek auf den integrierten Credential Manager zurück, wenn keine Google-Sitzung vorhanden ist. Sie dürfen nicht sowohl das Attribut data-native_callback
als auch das Attribut data-native_login_uri
festlegen. Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
String | Optional | data-login_uri="https://www.example.com/password_login" |
data-native_callback
Dieses Attribut ist der Name der JavaScript-Funktion, die das vom integrierten Credential Manager des Browsers zurückgegebene Passwort-Credential verarbeitet. Wenn Sie entweder das Attribut data-native_login_uri
oder das Attribut data-native_callback
festlegen, greift die JavaScript-Bibliothek auf den integrierten Anmeldedatenmanager zurück, wenn keine Google-Sitzung vorhanden ist. Sie dürfen nicht sowohl data-native_callback
als auch data-native_login_uri
festlegen. Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
String | Optional | data-native_callback="handlePasswordCredential" |
JavaScript-Funktionen in einem Namespace werden von der HTML API nicht unterstützt.
Verwenden Sie stattdessen eine globale JavaScript-Funktion ohne Namespace. Verwenden Sie z. B. mylibCallback
statt mylib.callback
.
data-native_id_param
Wenn Sie die Passwortanmeldedaten an den Endpunkt des Passwortanmeldedaten-Handlers senden, können Sie den Parameternamen für das Feld credential.id
angeben. Der Standardname ist email
. Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
URL | Optional | data-native_id_param="user_id" |
data-native_password_param
Wenn Sie die Anmeldedaten für das Passwort an den Endpunkt des Passwort-Anmeldedaten-Handlers senden, können Sie den Parameternamen für den credential.password
-Wert angeben. Der Standardname ist password
. Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
URL | Optional | data-native_password_param="pwd" |
data-cancel_on_tap_outside
Mit diesem Attribut wird festgelegt, ob die One Tap-Anfrage abgebrochen werden soll, wenn der Nutzer außerhalb der Aufforderung klickt. Der Standardwert ist true
. Wenn Sie die Funktion deaktivieren möchten, setzen Sie den Wert auf false
. Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
boolean | Optional | data-cancel_on_tap_outside="false" |
data-prompt_parent_id
Mit diesem Attribut wird die DOM-ID des Containerelements festgelegt. Wenn sie nicht festgelegt ist, wird die Aufforderung für die Ein-Klick-Anmeldung oben rechts im Fenster angezeigt. Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
String | Optional | data-prompt_parent_id="parent_id" |
data-skip_prompt_cookie
Verwendet ein Cookie, um die Anzeige des One Tap-Prompts zu steuern. Wenn das durch dieses Attribut angegebene Cookie einen nicht leeren Wert hat, wird die Aufforderung nicht angezeigt. Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
String | Optional | data-skip_prompt_cookie="SID" |
data-nonce
Dieses Attribut 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 | data-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.
data-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 | data-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“ |
data-moment_callback
Dieses Attribut ist der Funktionsname des Listeners für Benachrichtigungen zum Status der Aufforderungs-UI. Weitere Informationen finden Sie unter dem Datentyp PromptMomentNotification
.
Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
String | Optional | data-moment_callback="logMomentNotification" |
JavaScript-Funktionen in einem Namespace werden von der HTML API nicht unterstützt.
Verwenden Sie stattdessen eine globale JavaScript-Funktion ohne Namespace. Verwenden Sie z. B. mylibCallback
statt mylib.callback
.
data-state_cookie_domain
Wenn Sie „Mit Google anmelden“ in einer übergeordneten Domain und ihren Subdomains anzeigen müssen, übergeben Sie die übergeordnete Domain an dieses Attribut, damit ein einzelner Cookie mit gemeinsamem Status verwendet wird. Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
String | Optional | data-state_cookie_domain="example.com" |
data-ux_mode
Mit diesem Attribut wird der UX-Ablauf festgelegt, der von der Schaltfläche „Über Google anmelden“ verwendet wird. Der Standardwert ist popup
. Dieses Attribut hat keine Auswirkungen auf die One Tap-Benutzeroberfläche. Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
String | Optional | data-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-Ablauf für die Anmeldung in einem Pop-up-Fenster aus. |
redirect |
Führt den Anmelde-UX-Ablauf durch eine Weiterleitung der gesamten Seite aus. |
data-allowed_parent_origin
Die Ursprünge, die den Zwischen-iFrame einbetten dürfen. One Tap wird im Zwischen-iFrame-Modus ausgeführt, wenn dieses Attribut vorhanden ist. Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
String oder String-Array | Optional | data-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://beispiel.de“ |
string array |
Eine Liste von durch Kommas getrennten Domain-URIs. | "https://news.example.com,https://local.example.com" |
Wenn der Wert des Attributs data-allowed_parent_origin
ungültig ist, schlägt die One Tap-Initialisierung des Zwischen-iFrame-Modus fehl und wird beendet.
Platzhalterpräfixe werden ebenfalls unterstützt. "https://*.example.com"
entspricht beispielsweise example.com
und den zugehörigen Subdomains auf allen Ebenen (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://.com
undhttps://
.co.uk
sind beispielsweise ungültig, da"https://.example.com"
mitexample.com
und 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.com
undexample2.com
sowie den Subdomains vonexample2.com
überein. - Domains mit Platzhaltern müssen mit dem sicheren Schema „https://“ beginnen.
"*.example.com"
ist also ungültig.
data-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 data-intermediate_iframe_close_callback
ist nur im Zwischen-iFrame-Modus wirksam. Die Änderung 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 | data-intermediate_iframe_close_callback="logBeforeClose" |
JavaScript-Funktionen in einem Namespace werden von der HTML API nicht unterstützt.
Verwenden Sie stattdessen eine globale JavaScript-Funktion ohne Namespace. Verwenden Sie z. B. mylibCallback
statt mylib.callback
.
data-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 | data-itp_support="true" |
data-login_hint
Wenn Ihre Anwendung im Voraus weiß, welcher Nutzer angemeldet werden soll, kann sie Google einen Anmeldehinweis geben. Wenn die Anmeldung erfolgreich ist, wird die Kontoauswahl übersprungen. Zulässige Werte sind eine E-Mail-Adresse oder das Feld sub eines ID-Tokens.
Weitere Informationen finden Sie in der OpenID Connect-Dokumentation für
login_hint
.
Typ | Erforderlich | Beispiel |
---|---|---|
String. Kann eine E‑Mail-Adresse oder der Feldwert sub aus dem ID-Token sein. |
Optional | data-login_hint="[email protected]" |
data-hd
Wenn ein Nutzer mehrere Konten hat und sich nur mit seinem Workspace-Konto anmelden soll, können Sie Google mit diesem Parameter einen Domainnamen-Hinweis geben. Bei Erfolg werden bei der Kontoauswahl nur Nutzerkonten der angegebenen Domain angezeigt.
Ein Platzhalterwert: *
bietet dem Nutzer nur Workspace-Konten an und schließt Privatkonten ([email protected]) bei der Kontoauswahl aus.
Weitere Informationen finden Sie in der OpenID Connect-Dokumentation für
hd
.
Typ | Erforderlich | Beispiel |
---|---|---|
String. Ein voll qualifizierter Domainname oder *. | Optional | data-hd="*" |
data-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 | Optional | data-use_fedcm_for_prompt="true" |
data-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 | data-use_fedcm_for_button="true" |
data-button_auto_select
In diesem Feld wird festgelegt, 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 dann übersprungen. Die Standardeinstellung ist false
. Sie müssen die automatische Anmeldung über Schaltflächen während der Einführung der Aktivierung explizit aktivieren. Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
boolean | Optional | data-button_auto_select="true" |
Element mit der Klasse „g_id_signin“
Wenn Sie einem Element das Attribut class
mit dem Wert g_id_signin
hinzufügen, wird das Element als „Über Google anmelden“-Schaltfläche gerendert.
Sie können auf derselben Seite mehrere „Mit Google anmelden“-Schaltflächen rendern. Jede Schaltfläche kann eigene visuelle Einstellungen haben. Die Einstellungen werden durch die folgenden Datenattribute definiert.
Attribute für visuelle Daten
In der folgenden Tabelle sind die Attribute für visuelle Daten und ihre Beschreibungen aufgeführt:
Attribut | |
---|---|
data-type |
Der Schaltflächentyp: Symbol oder Standardschaltfläche. |
data-theme |
Das Design der Schaltfläche. Beispiel: filled_blue oder filled_black. |
data-size |
Die Größe der Schaltfläche. Beispiel: klein oder groß. |
data-text |
Der Text der Schaltfläche. Beispiele: „Über Google anmelden“ oder „Mit Google registrieren“. |
data-shape |
Die Form der Schaltfläche. Beispiel: rechteckig oder kreisförmig. |
data-logo_alignment |
Die Ausrichtung des Google-Logos: links oder zentriert. |
data-width |
Die Breite der Schaltfläche in Pixeln. |
data-locale |
Der Schaltflächentext wird in der Sprache gerendert, die in diesem Attribut festgelegt ist. |
data-click_listener |
Falls festgelegt, wird diese Funktion aufgerufen, wenn auf die Schaltfläche „Über Google anmelden“ geklickt wird. |
data-state |
Wenn festgelegt, wird dieser String mit dem ID-Token zurückgegeben. |
Attributtypen
In den folgenden Abschnitten finden Sie Details zum Typ der einzelnen Attribute sowie ein Beispiel.
data-type
Der Schaltflächentyp. Der Standardwert ist standard
. Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
String | Ja | data-type="icon" |
In der folgenden Tabelle sind alle verfügbaren Schaltflächentypen und ihre Beschreibungen aufgeführt:
Typ | |
---|---|
standard |
![]() ![]() |
icon |
![]() |
data-theme
Das Design der Schaltfläche. Der Standardwert ist outline
. Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
String | Optional | data-theme="filled_blue" |
In der folgenden Tabelle sind die verfügbaren Designs und ihre Beschreibungen aufgeführt:
Design | |
---|---|
outline |
![]() ![]() ![]() |
filled_blue |
![]() ![]() ![]() |
filled_black |
![]() ![]() ![]() |
data-size
Die Größe der Schaltfläche. Der Standardwert ist large
. Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
String | Optional | data-size="small" |
In der folgenden Tabelle sind die verfügbaren Schaltflächengrößen und ihre Beschreibungen aufgeführt.
Größe | |
---|---|
large |
![]() ![]() ![]() |
medium |
![]() ![]() |
small |
![]() ![]() |
data-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 data-text
-Attributen. Die einzige Ausnahme ist, wenn der Text für die Barrierefreiheit auf dem Bildschirm vorgelesen wird.
Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
String | Optional | data-text="signup_with" |
In der folgenden Tabelle sind die verfügbaren Schaltflächentexte und ihre Beschreibungen aufgeführt:
Text | |
---|---|
signin_with |
![]() ![]() |
signup_with |
![]() ![]() |
continue_with |
![]() ![]() |
signin |
![]() ![]() |
data-shape
Die Form der Schaltfläche. Der Standardwert ist rectangular
. Weitere Informationen finden Sie in der folgenden Tabelle:
Typ | Erforderlich | Beispiel |
---|---|---|
String | Optional | data-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 .
|
data-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 | data-logo_alignment="center" |
In der folgenden Tabelle sind die verfügbaren Ausrichtungen und ihre Beschreibungen aufgeführt:
logo_alignment | |
---|---|
left |
![]() |
center |
![]() |
data-width
Die Mindestbreite 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 | data-width=400 |
data-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 Nutzers der Google-Sitzung 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 | data-locale="zh_CN" |
data-click_listener
Mit dem Attribut data-click_listener
können Sie eine JavaScript-Funktion definieren, die aufgerufen wird, wenn auf die Schaltfläche „Über Google anmelden“ geklickt wird.
<script> function onClickHandler(){ console.log("Sign in with Google button clicked...") } </script> ..... <div class="g_id_signin" data-size="large" data-theme="outline" data-click_listener="onClickHandler"> </div>
In diesem Beispiel wird die Meldung Sign in with Google button clicked... (Schaltfläche „Über Google anmelden“ wurde geklickt) in der Konsole protokolliert, wenn auf die Schaltfläche „Über Google anmelden“ geklickt wird.
data-state
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" |
Serverseitige Integration
Ihre serverseitigen Endpunkte müssen die folgenden HTTP-POST
-Anfragen verarbeiten.
Der Endpunkt des ID-Token-Handlers
Der ID-Token-Handler-Endpunkt verarbeitet das ID-Token. Je nach Status des entsprechenden Kontos können Sie den Nutzer anmelden und ihn entweder auf eine Registrierungsseite oder auf eine Seite zur Kontoverknüpfung weiterleiten, um zusätzliche Informationen zu erhalten.
Beispielanfrage an Ihren Anmeldeendpunkt:
POST /login HTTP/1.1
Content-Type: application/x-www-form-urlencoded
Cookie: g_csrf_token=<RANDOM_STRING>
Host: www.example.com
credential=<JWT_ENCODED_ID_TOKEN>&g_csrf_token=<RANDOM_STRING>
Die HTTP-Anfrage POST
enthält die folgenden Informationen:
Format | Name | Beschreibung |
---|---|---|
Cookie | g_csrf_token |
Ein zufälliger String, der sich mit jeder Anfrage an den vom data-login_uri -Endpunkt angegebenen Anmelde-Endpunkt ändert, muss mit dem Wert im g_csrf_token -Anfrageparameter übereinstimmen. |
Anfrageparameter | g_csrf_token |
Ein zufälliger String, der sich mit jeder Anfrage an den vom data-login_uri angegebenen Anmelde-Endpunkt ändert, muss mit dem Wert des g_csrf_token -Cookies übereinstimmen. |
Anfrageparameter | credential |
Das codierte JWT-ID-Token, das von Google ausgestellt wird. |
Anfrageparameter | select_by |
Wie sich der Nutzer angemeldet hat. |
Anfrageparameter | state |
Dieser Parameter wird nur definiert, wenn der Nutzer auf die Schaltfläche „Über Google anmelden“ klickt, um sich anzumelden, und das Attribut state der Schaltfläche angegeben ist. |
Anmeldedaten
Dekodiert sieht das ID-Token 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": "[email protected]", // 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": "Eliza", "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.
Mithilfe der Felder email
, email_verified
und hd
können Sie ermitteln, ob Google eine E-Mail-Adresse hostet und autoritativ für sie ist. In Fällen, in denen Google maßgeblich ist, wird bestätigt, dass der Nutzer der rechtmäßige Kontoinhaber ist.
Fälle, in denen Google maßgebend ist:
- Wenn die E‑Mail-Adresse von
email
mit@gmail.com
endet, handelt es sich um ein Gmail-Konto. - Wenn
email_verified
auf „true“ gesetzt undhd
festgelegt 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_verified
kann auch zutreffen, da Google den Nutzer bei der Erstellung des Google-Kontos ursprünglich bestätigt hat. Die Inhaberschaft des E-Mail-Kontos des Drittanbieters kann sich jedoch inzwischen geändert haben.
Im Feld exp
sehen Sie die Ablaufzeit, innerhalb derer Sie das Token serverseitig bestätigen müssen. Für das ID-Token, das über „Mit Google anmelden“ abgerufen wird, beträgt die Gültigkeitsdauer eine Stunde. Sie müssen das Token vor dem Ablaufdatum bestätigen. 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 Ihrer Nutzer verantwortlich.
g_csrf_token
Ein Token für den Anti-Fälschungsstatus. Dies ist ein CSRF-Token (Cross-Site Request Forgery), das von der gsi/client
-Bibliothek erstellt wurde. Ein zufälliger Wert ist sowohl als Cookie als auch als Anfrageparameter im POST-Payload-Text enthalten. Wenn diese beiden Werte bei der Verarbeitung der Anfrage auf Ihrem Server nicht übereinstimmen, sollte die Anfrage als ungültig betrachtet werden.
select_by
In der folgenden Tabelle sind die möglichen Werte für das Feld select_by
aufgeführt. Der Typ der Schaltfläche, die zusammen mit dem Sitzungs- und Einwilligungsstatus verwendet wird, wird zum Festlegen des Werts verwendet.
Der Nutzer hat entweder auf die Schaltfläche „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 die Schaltfläche „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 die Einmalanmeldung 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 bestehende 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. |
btn |
Ein Nutzer mit einer bestehenden Sitzung, der zuvor die 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 bestehenden 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 freizugeben. |
btn_add_session |
Ein Nutzer ohne bestehende Sitzung, der zuvor die Einwilligung erteilt hat, hat auf die Schaltfläche „Mit Google anmelden“ geklickt, um ein Google-Konto auszuwählen und Anmeldedaten freizugeben. |
btn_confirm_add_session |
Ein Nutzer ohne bestehende Sitzung hat zuerst auf die Schaltfläche „Mit Google anmelden“ getippt, um ein Google-Konto auszuwählen, und dann auf die Schaltfläche „Bestätigen“, um der Weitergabe von Anmeldedaten zuzustimmen. |
Bundesstaat
Dieser Parameter wird nur definiert, wenn der Nutzer auf eine Schaltfläche „Über Google anmelden“ klickt, um sich anzumelden, und das Attribut data-state
der angeklickten Schaltfläche angegeben ist. Der Wert dieses Felds entspricht dem Wert, den Sie im Attribut data-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. Mit diesem state
-Parameter können Sie ermitteln, auf welche Schaltfläche der Nutzer geklickt hat, um sich anzumelden.
Endpunkt für die Verarbeitung von Passwortanmeldedaten
Der Endpunkt des Passwort-Anmeldedaten-Handlers verarbeitet Passwort-Anmeldedaten, die vom integrierten Anmeldedaten-Manager abgerufen werden.
Die HTTP-Anfrage POST
enthält die folgenden Informationen:
Format | Name | Beschreibung |
---|---|---|
Cookie | g_csrf_token |
Ein zufälliger String, der sich mit jeder Anfrage an den vom data-native_login_uri -Endpunkt angegebenen Anmelde-Endpunkt ändert, muss mit dem Wert im g_csrf_token -Anfrageparameter übereinstimmen. |
Anfrageparameter | g_csrf_token |
Ein zufälliger String, der sich mit jeder Anfrage an den vom data-native_login_uri angegebenen Anmelde-Endpunkt ändert, muss mit dem Wert des g_csrf_token -Cookies übereinstimmen. |
Anfrageparameter | email |
Dieses ID-Token wird von Google ausgestellt. |
Anfrageparameter | password |
Wie die Anmeldedaten ausgewählt werden. |