Google Identity Services wird zu FedCM APIs migriert. Folgen Sie der Migrationsanleitung, um potenzielle Änderungen zu überprüfen und negative Auswirkungen auf die Nutzeranmeldung auf Ihrer Website zu vermeiden.

Diese Seite wurde von der Cloud Translation API übersetzt.

HTML API-Referenz für „Über Google anmelden“

Auf dieser Referenzseite wird die „Über Google anmelden“-API für HTML-Datenattribute beschrieben. Du kannst die API verwenden, um die One Tap-Aufforderung oder die Schaltfläche „Über Google anmelden“ auf deinen Webseiten anzuzeigen.

Element mit der ID „g_id_onload“

Du kannst „Über Google anmelden“-Datenattribute in alle sichtbaren oder unsichtbaren Elemente wie <div> und <span> einfügen. Die einzige Anforderung 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`	Display mit Google One Tap.
`data-auto_select`	Aktiviert die automatische Auswahl bei Google One Tap.
`data-login_uri`	URL Ihres Anmeldeendpunkts
`data-callback`	Name der Funktion des JavaScript-ID-Token-Handlers
`data-native_login_uri`	Die URL Ihres Endpunkts des Handlers für Passwort-Anmeldedaten
`data-native_callback`	Der Funktionsname des Handlers für den Anmeldedaten-Handler für JavaScript-Passwörter
`data-native_id_param`	Der Parametername für den Wert `credential.id`
`data-native_password_param`	Der Parametername für den Wert `credential.password`
`data-cancel_on_tap_outside`	Steuert, ob die Aufforderung abgebrochen wird, wenn der Nutzer auf eine Stelle außerhalb der Aufforderung klickt.
`data-prompt_parent_id`	Die DOM-ID des Containerelements der One Tap-Eingabeaufforderung
`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`	Titel und Wörter des One Tap-Prompts
`data-moment_callback`	Der Funktionsname des Benachrichtigungs-Listeners der Benutzeroberfläche für die Eingabeaufforderung
`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 einzelnes gemeinsames Cookie verwendet wird.
`data-ux_mode`	UX-Vorgang für die Schaltfläche „Über Google anmelden“
`data-allowed_parent_origin`	Die Ursprünge, in die der Zwischen-iFrame eingebettet werden darf. One Tap wird im iFrame-Zwischenmodus ausgeführt, wenn dieses Attribut vorhanden ist.
`data-intermediate_iframe_close_callback`	Überschreibt das standardmäßige zwischenzeitliche iFrame-Verhalten, wenn Nutzer One Tap manuell schließen.
`data-itp_support`	Aktiviert aktualisierte One Tap-UX in ITP-Browsern.
`data-login_hint`	Überspringen Sie die Kontoauswahl, indem Sie einen Nutzerhinweis eingeben.
`data-hd`	Kontoauswahl nach Domain beschränken.
`data-use_fedcm_for_prompt`	Erlauben Sie dem Browser, die Anmeldeaufforderungen von Nutzern zu steuern und den Anmeldevorgang zwischen Ihrer Website und Google zu vermitteln.

Attributtypen

Die folgenden Abschnitte enthalten Details zum Typ der einzelnen Attribute und ein Beispiel.

Daten-Client-ID

Dieses Attribut 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	`data-client_id="CLIENT_ID.apps.googleusercontent.com"`

data-auto_prompt

Dieses Attribut bestimmt, ob „One Tap“ angezeigt wird oder nicht. 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

Dieses Attribut bestimmt, ob ein ID-Token automatisch und ohne Nutzerinteraktion zurückgegeben wird, wenn Ihre App nur von einer Google-Sitzung genehmigt wurde. 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 API Console konfiguriert haben. Er muss außerdem 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 für die Anmeldedaten des ID-Tokens wird an deinen 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 Signierung stattfindet.

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 ignoriert, wenn `data-ux_mode="popup"` und `data-callback` festgelegt sind.	`data-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

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"`

Hierfür kann eines der Attribute data-login_uri oder data-callback verwendet werden. Dies hängt von den folgenden Komponenten- und UX-Moduskonfigurationen ab:

Das Attribut data-login_uri ist für den UX-Modus der Schaltfläche „Über Google anmelden“ redirect erforderlich, in dem das Attribut data-callback ignoriert wird.
Für den UX-Modus von Google One Tap und der Schaltfläche „Google Log-in“ popup muss eines dieser beiden Attribute festgelegt werden. Wenn beide festgelegt sind, hat das Attribut data-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 beispielsweise mylibCallback anstelle von mylib.callback.

data-native_login_uri

Dieses Attribut ist die URL Ihres Endpunkts des Handlers für Anmeldedaten für Passwörter. Wenn du entweder das Attribut data-native_login_uri oder das Attribut data-native_callback festlegst, greift die JavaScript-Bibliothek auf den nativen Anmeldedaten-Manager zurück, wenn keine Google-Sitzung vorhanden ist. Sie dürfen nicht gleichzeitig die Attribute data-native_callback und 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"`

datennativer_Callback

Dieses Attribut ist der Name der JavaScript-Funktion, die die Passwortanmeldedaten verarbeitet, die vom nativen Anmeldedaten-Manager des Browsers zurückgegeben werden. Wenn Sie entweder das Attribut data-native_login_uri oder das Attribut data-native_callback festlegen, greift die JavaScript-Bibliothek auf den nativen Anmeldedaten-Manager 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"`

data-native_id_param

Wenn Sie die Anmeldedaten für das Passwort an den Endpunkt des Handlers des Anmeldedaten-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 Handlers des Anmeldedaten-Handlers senden, können Sie den Parameternamen für den Wert credential.password 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

Dieses Attribut legt fest, ob die One Tap-Anfrage abgebrochen wird, wenn der Nutzer außerhalb der Aufforderung klickt. Der Standardwert ist true. Legen Sie den Wert auf false fest, um sie zu deaktivieren. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ	Erforderlich	Beispiel
boolean	Optional	`data-cancel_on_tap_outside="false"`

data-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	`data-prompt_parent_id="parent_id"`

data-skip_prompt_cookie

Dieses Attribut überspringt One Tap, wenn das angegebene Cookie einen nicht leeren Wert hat. 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 von Ihrer Umgebung unterstützte JWT-Größe und die HTTP-Größenbeschränkungen der einzelnen Browser und Server begrenzt.

Datenkontext

Dieses Attribut ändert den Text des Titels und der Nachrichten, die in der One Tap-Eingabeaufforderung angezeigt werden. 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`	„Über Google anmelden“
`signup`	„Bei Google registrieren“
`use`	„Mit Google verwenden“

data-moment_callback

Dieses Attribut ist der Funktionsname des UI-Statusbenachrichtigungs-Listeners für Prompts. Weitere Informationen finden Sie im Datentyp PromptMomentNotification.

Weitere Informationen finden Sie in der folgenden Tabelle:

Typ	Erforderlich	Beispiel
String	Optional	`data-moment_callback="logMomentNotification"`

data-state_cookie_domain

Wenn Sie One Tap in einer übergeordneten Domain und deren Subdomains anzeigen möchten, übergeben Sie die übergeordnete Domain an dieses Attribut, damit ein einzelnes 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

Dieses Attribut legt den UX-Flow fest, der von der Schaltfläche „Über Google anmelden“ verwendet wird. Der Standardwert ist popup. Dieses Attribut hat keine Auswirkungen auf die One Tap-UX. 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-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.

data-allowed_parent_origin

Die Ursprünge, in die der Zwischen-iFrame eingebettet werden darf. One Tap wird im iFrame-Zwischenmodus 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 mit 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 iFrame-Zwischenmodus fehl und wird beendet.

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 bei der Verwendung von Platzhaltern:

Musterstrings dürfen nicht nur aus einem Platzhalter und einer Top-Level-Domain bestehen. Beispiel: https://*.com und https://*.co.uk sind ungültig. Wie oben erwähnt, stimmt "https://*.example.com" mit example.com und den zugehörigen Subdomains überein. Sie können auch eine durch Kommas getrennte Liste verwenden, um zwei verschiedene Domains darzustellen. Beispielsweise stimmt "https://example1.com,https://*.example2.com" mit den Domains example1.com, example2.com und Subdomains von example2.com überein.
Platzhalterdomains müssen mit einem sicheren https://-Schema beginnen, sodass "*.example.com" als ungültig betrachtet wird.

data-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 data-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-UI wird entfernt, bevor der Callback aufgerufen wird.

Typ	Erforderlich	Beispiel
Funktion	Optional	`data-intermediate_iframe_close_callback="logBeforeClose"`

Data-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	`data-itp_support="true"`

data-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 untergeordnetes Feld 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="elisa.beckett@gmail.com"`

Daten-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 OpenID Connect-Dokumentation für hd.

Typ	Erforderlich	Beispiel
String. Einen voll qualifizierten Domainnamen oder *.	Optional	`data-hd="*"`

data-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	`data-use_fedcm_for_prompt="true"`

Element mit der Klasse „g_id_signin“

Wenn du dem Attribut class eines Elements g_id_signin hinzufügst, wird das Element als Schaltfläche „Über Google anmelden“ gerendert.

Du kannst mehrere „Über Google anmelden“-Schaltflächen auf einer Seite rendern. Jede Schaltfläche kann ihre eigenen visuellen Einstellungen haben. Die Einstellungen werden durch die folgenden Datenattribute definiert.

Visuelle Datenattribute

In der folgenden Tabelle sind visuelle Datenattribute und ihre Beschreibungen aufgeführt:

Attribut
`data-type`	Der Schaltflächentyp: Symbol oder Standardschaltfläche.
`data-theme`	Das Schaltflächendesign Beispiel: „fill_blue“ oder „filled_black“.
`data-size`	Die Größe der Schaltfläche. z. B. klein oder groß.
`data-text`	Der Text der Schaltfläche. Beispiel: „Über Google anmelden“ oder „Über Google anmelden“.
`data-shape`	Die Form der Schaltfläche. z. B. rechteckig oder kreisförmig.
`data-logo_alignment`	Ausrichtung des Google-Logos: links oder mittig.
`data-width`	Die Breite der Schaltfläche in Pixeln.
`data-locale`	Der Schaltflächentext wird in der in diesem Attribut festgelegten Sprache gerendert.
`data-click_listener`	Wenn 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

Die folgenden Abschnitte enthalten Details zum Typ der einzelnen Attribute und ein Beispiel.

Datentyp

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`	Eine Schaltfläche mit Text oder personalisierten Informationen.
`icon`	Eine Symbolschaltfläche ohne Text.

data-theme

Das Schaltflächendesign 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 Themen und ihre Beschreibungen aufgeführt:

Design
`outline`	Das Standarddesign der Schaltfläche.
`filled_blue`	Das Schaltflächendesign mit blauer Füllung.
`filled_black`	Das Schaltflächendesign mit schwarzer Füllung.

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`	Eine große Schaltfläche.
`medium`	Eine mittelgroße Schaltfläche.
`small`	Eine kleine Schaltfläche.

Datentext

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 Bildschirm-Bedienungshilfen 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`	Der Text der Schaltfläche lautet „Über Google anmelden“.
`signup_with`	Der Schaltflächentext lautet „Über Google registrieren“.
`continue_with`	Der Schaltflächentext lautet „Weiter mit Google“.
`signin`	Der Schaltflächentext lautet „Anmelden“.

Datenform

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`	Die rechteckige Schaltfläche. Wenn er für den Schaltflächentyp `icon` verwendet wird, entspricht er der Option `square`.
`pill`	Die pillenförmige Schaltfläche. Wenn er für den Schaltflächentyp `icon` verwendet wird, entspricht er der von `circle`.
`circle`	Die kreisförmige Schaltfläche. Wenn er für den Schaltflächentyp `standard` verwendet wird, entspricht dies `pill`.
`square`	Die quadratische Schaltfläche. Wenn er für den Schaltflächentyp `standard` verwendet wird, entspricht dies `rectangular`.

Datenlogo_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`	Das Google-Logo wird linksbündig.
`center`	Das Google-Logo wird zentriert.

Datenbreite

Die minimale Schaltflächenbreite in Pixeln. Die maximal verfügbare Breite beträgt 400 Pixel.

Weitere Informationen finden Sie in der folgenden Tabelle:

Typ	Erforderlich	Beispiel
String	Optional	`data-width=400`

Datensprache

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	`data-locale="zh_CN"`

Data-Click-Listener

Du kannst mit dem Attribut data-click_listener 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 Nachricht „Über Google anmelden“ angeklickt... in der Konsole protokolliert, wenn auf die Schaltfläche „Über Google anmelden“ geklickt wird.

data-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"`

Serverseitige Integration

Ihre serverseitigen Endpunkte müssen die folgenden HTTP-POST-Anfragen verarbeiten können.

Endpunkt des ID-Token-Handlers

Der Endpunkt des ID-Token-Handlers verarbeitet das ID-Token. Je nach Status des entsprechenden Kontos kannst du den Nutzer anmelden und ihn entweder auf eine Registrierungsseite oder auf eine Seite zur Kontoverknüpfung mit weiteren Informationen weiterleiten.

Die HTTP-POST-Anfrage enthält die folgenden Informationen:

Format	Name	Beschreibung
Cookie	`g_csrf_token`	Ein zufälliger String, der sich mit jeder Anfrage an den Handler-Endpunkt ändert.
Anfrageparameter	`g_csrf_token`	Ein String, der mit dem vorherigen Cookie-Wert `g_csrf_token` übereinstimmt.
Anfrageparameter	`credential`	Das von Google ausgestellte ID-Token.
Anfrageparameter	`select_by`	Die Art und Weise, wie die Anmeldedaten ausgewählt werden.
Anfrageparameter	`state`	Dieser Parameter 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

Nach der Decodierung sieht das ID-Token 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": "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. 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“ und hd 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_verified 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. Gilt nur für Browser, die nicht von FedCM unterstützt werden.
`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. Gilt nur für Browser, die nicht von FedCM unterstützt werden.
`fedcm`	Ein Nutzer hat die One Tap-Schaltfläche „Weiter als“ angeklickt, um Anmeldedaten über FedCM zu teilen. Gilt nur für von FedCM unterstützte Browser.
`fedcm_auto`	Automatische Anmeldung eines Nutzers mit einer vorhandenen Sitzung, der zuvor die Einwilligung zur Weitergabe von Anmeldedaten über FedCM One Tap erteilt hat. Gilt nur für von FedCM unterstützte Browser.
`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

Dieser Parameter wird nur definiert, wenn der Nutzer zur Anmeldung auf die Schaltfläche „Über Google anmelden“ klickt und das Attribut data-state der angeklickten Schaltfläche angegeben ist. Der Wert dieses Felds ist mit dem Wert identisch, den du im Attribut data-state der Schaltfläche angegeben hast.

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-Parameter angeben, auf welche Schaltfläche der Nutzer bei der Anmeldung geklickt hat.

Endpunkt des Handlers für Passwort-Anmeldedaten

Der Endpunkt des Handlers für Passwort-Anmeldedaten verarbeitet die Anmeldedaten, die vom nativen Anmeldedaten-Manager abgerufen werden.

Die HTTP-POST-Anfrage enthält die folgenden Informationen:

Format	Name	Beschreibung
Cookie	`g_csrf_token`	Ein zufälliger String, der sich mit jeder Anfrage an den Handler-Endpunkt ändert.
Anfrageparameter	`g_csrf_token`	Ein String, der mit dem vorherigen Cookie-Wert `g_csrf_token` übereinstimmt.
Anfrageparameter	`email`	Dieses von Google ausgestellte ID-Token.
Anfrageparameter	`password`	Die Art und Weise, wie die Anmeldedaten ausgewählt werden.