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 API für HTML-Datenattribute von „Über Google anmelden“ beschrieben. Sie können die API verwenden, um den One Tap-Prompt oder die Schaltfläche „Über Google anmelden“ auf Ihren Webseiten anzuzeigen.

Element mit der ID „g_id_onload“

Sie können Datenattribute für „Über Google anmelden“ in alle sichtbaren oder unsichtbaren Elemente einfügen, z. B. <div> und <span>. Die einzige Voraussetzung ist, dass die Element-ID auf g_id_onload festgelegt ist. Diese ID darf nicht für mehrere Elemente verwendet werden.

Datenattribute

In der folgenden Tabelle sind die Datenattribute mit ihren Beschreibungen aufgeführt:

Attribut
`data-client_id`	Client-ID Ihrer Anwendung
`data-auto_prompt`	Google One-Schaltfläche anzeigen
`data-auto_select`	Aktiviert die automatische Auswahl bei Google One Tap.
`data-login_uri`	Die URL Ihres Anmeldeendpunkts
`data-callback`	Der Name der JavaScript-ID-Token-Handlerfunktion
`data-native_login_uri`	Die URL des Endpunkts für den Passwort-Anmeldedaten-Handler
`data-native_callback`	Der Name der JavaScript-Funktion für die Passwort-Anmeldedaten-Handler
`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`	Hiermit wird festgelegt, ob die Aufforderung abgebrochen wird, wenn der Nutzer außerhalb der Aufforderung klickt.
`data-prompt_parent_id`	Die DOM-ID des Containerelements für die One-Tap-Aufforderung
`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 in der One Tap-Aufforderung
`data-moment_callback`	Der Funktionsname des Listeners für Benachrichtigungen zum UI-Status
`data-state_cookie_domain`	Wenn Sie One Tap in der übergeordneten Domain und ihren Subdomains aufrufen möchten, übergeben Sie die übergeordnete Domain an dieses Attribut, damit ein einzelnes gemeinsames Cookie verwendet wird.
`data-ux_mode`	UX-Vorgang der Schaltfläche „Über Google anmelden“
`data-allowed_parent_origin`	Die Ursprünge, die den Zwischen-iFrame einbetten dürfen. Wenn dieses Attribut vorhanden ist, wird One Tap im Zwischen-Iframe-Modus ausgeführt.
`data-intermediate_iframe_close_callback`	Überschreibt das standardmäßige Verhalten des Zwischen-iframes, wenn Nutzer One Tap manuell schließen.
`data-itp_support`	Aktiviert die verbesserte One Tap-Benutzeroberfläche in ITP-Browsern.
`data-login_hint`	Sie können die Kontoauswahl überspringen, indem Sie einen Nutzerhinweis angeben.
`data-hd`	Kontoauswahl nach Domain einschränken
`data-use_fedcm_for_prompt`	Dem Browser erlauben, Aufforderungen zur Nutzeranmeldung zu steuern und den Anmeldevorgang zwischen Ihrer Website und Google zu vermitteln
`data-enable_redirect_uri_validation`	Aktivieren Sie die Weiterleitung über eine Schaltfläche, die den Gültigkeitsregeln für Weiterleitungs-URIs entspricht.

Attributtypen

In den folgenden Abschnitten finden Sie Details zum Typ jedes Attributs und ein Beispiel.

data-client_id

Dieses Attribut ist die Client-ID Ihrer App, die in der Google Cloud Console gefunden 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

Mit diesem Attribut wird festgelegt, ob „Mit nur einem Tippen bezahlen“ angezeigt wird. Der Standardwert ist true. Google One-Tippen 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 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. Außerdem muss er unseren Regeln für die Validierung von Weiterleitungs-URIs entsprechen.

Dieses Attribut kann weggelassen werden, wenn die aktuelle Seite Ihre Anmeldeseite ist. In diesem Fall werden die Anmeldedaten standardmäßig auf dieser Seite gepostet.

Die Antwort mit den Anmeldedaten des ID-Tokens wird an Ihren Anmeldeendpunkt gesendet, wenn keine Rückruffunktion definiert ist und ein Nutzer auf die Schaltfläche „Über Google anmelden“ oder „One Tap“ klickt oder eine automatische Anmeldung erfolgt.

Weitere Informationen finden Sie in der folgenden Tabelle:

Typ	Optional	Beispiel
URL	Standardmäßig ist der URI der aktuellen Seite oder der von Ihnen angegebene Wert festgelegt. Wird ignoriert, wenn `data-ux_mode="popup"` und `data-callback` festgelegt sind.	`data-login_uri="https://www.example.com/login"`

Dein Anmeldeendpunkt muss POST-Anfragen mit einem Schlüssel credential mit einem ID-Token-Wert im Text verarbeiten.

Das folgende Beispiel zeigt eine Anfrage an deinen 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 und data-callback verwendet werden. Sie 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. Dabei wird das Attribut data-callback ignoriert.
Eines dieser beiden Attribute muss für Google One Tap und die Schaltfläche „Über Google anmelden“ popup im UX-Modus festgelegt werden. Wenn beide festgelegt sind, hat das data-callback-Attribut Vorrang.

JavaScript-Funktionen innerhalb eines Namespace werden von der HTML API nicht unterstützt. Verwenden Sie stattdessen eine globale JavaScript-Funktion ohne Namensbereich. Verwenden Sie z. B. mylibCallback statt mylib.callback.

data-native_login_uri

Dieses Attribut ist die URL des Endpunkts Ihres Passwort-Anmeldedaten-Handlers. Wenn Sie entweder das data-native_login_uri-Attribut oder das data-native_callback-Attribut festlegen, greift die JavaScript-Bibliothek bei fehlender Google-Sitzung auf den nativen Anmeldedaten-Manager zurück. Sie können 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"`

data-native_callback

Dieses Attribut ist der Name der JavaScript-Funktion, die die Anmeldedaten für das Passwort verarbeitet, die vom nativen Anmeldedaten-Manager des Browsers zurückgegeben werden. Wenn Sie entweder das data-native_login_uri-Attribut oder das data-native_callback-Attribut festlegen, greift die JavaScript-Bibliothek bei fehlender Google-Sitzung auf den nativen Anmeldedaten-Manager zurück. Sie können 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 Passwort-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 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 wird, 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 dies nicht der Fall ist, wird die Aufforderung für die One-Tap-Funktion 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

Mit diesem Attribut wird One Tap übersprungen, 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 Länge der Nonce ist auf die maximale JWT-Größe beschränkt, die von Ihrer Umgebung unterstützt wird, sowie auf die jeweiligen Browser- und Server-HTTP-Größenbeschränkungen.

data-context

Mit diesem Attribut wird der Text des Titels und der Meldungen im One-Tap-Prompt geändert. 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`	„Über Google registrieren“
`use`	„Mit Google verwenden“

data-moment_callback

Dieses Attribut ist der Funktionsname des Listeners für Benachrichtigungen zum Status der Benutzeroberfläche. Weitere Informationen finden Sie im Hilfeartikel zum 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 ihren Subdomains anzeigen möchten, geben Sie die übergeordnete Domain an dieses Attribut weiter, damit ein einzelnes Cookie mit freigegebenen 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-Flow festgelegt, der von der Schaltfläche „Über Google anmelden“ verwendet wird. Der Standardwert ist popup. Dieses Attribut hat keine Auswirkungen auf die Nutzerfreundlichkeit von One Tap. 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-Anmeldevorgang in einem Pop-up-Fenster aus.
`redirect`	Führt den UX-Anmeldevorgang durch eine vollständige Seitenweiterleitung aus.

data-allowed_parent_origin

Die Ursprünge, die den Zwischen-iFrame einbetten dürfen. Wenn dieses Attribut vorhanden ist, wird One Tap im Zwischen-iFrame-Modus ausgeführt. 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. Beispiel: "https://*.example.com" stimmt mit example.com und seinen Subdomains auf allen Ebenen überein (z. B. news.example.com, login.news.example.com). Beachten Sie bei der Verwendung von Platzhaltern Folgendes:

Musterstrings dürfen nicht nur aus einem Wildcard-Zeichen und einer Top-Level-Domain bestehen. https://*.com und https://*.co.uk sind beispielsweise ungültig. Wie oben erwähnt, entspricht "https://*.example.com" example.com und seinen Subdomains. Sie können auch eine durch Kommas getrennte Liste verwenden, um zwei unterschiedliche Domains anzugeben. Beispiel: "https://example1.com,https://*.example2.com" stimmt mit den Domains example1.com, example2.com und den Subdomains von example2.com überein.
Domains mit Platzhaltern müssen mit dem sicheren Protokoll „https://“ beginnen. Daher gilt "*.example.com" als ungültig.

data-intermediate_iframe_close_callback

Hiermit wird das standardmäßige Verhalten des Zwischen-iframes überschrieben, wenn Nutzer One Tap manuell schließen, indem sie auf die Schaltfläche „X“ in der One Tap-Benutzeroberfläche tippen. Standardmäßig wird der Zwischen-iframe sofort aus dem DOM entfernt.

Das Feld data-intermediate_iframe_close_callback wirkt sich nur im Zwischen-Iframe-Modus aus. Außerdem wirkt sich die Änderung nur auf den Zwischen-iframe aus, nicht auf den One Tap-iframe. Die One-Tap-Benutzeroberfläche wird entfernt, bevor der Rückruf aufgerufen wird.

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

data-itp_support

In 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 sein soll, kann sie Google einen Anmeldehinweis geben. Bei Erfolg wird die Kontoauswahl übersprungen. Zulässige Werte sind eine E-Mail-Adresse oder ein sub Feld für das ID-Token.

Weitere Informationen finden Sie in der OpenID Connect-Dokumentation für login_hint.

Typ	Erforderlich	Beispiel
String. Kann eine E-Mail-Adresse oder der Wert des Felds `sub` aus dem ID-Token sein.	Optional	`data-login_hint="elisa.beckett@gmail.com"`

data-hd

Wenn ein Nutzer mehrere Konten hat und sich nur mit seinem Workspace-Konto anmelden soll, verwenden Sie diesen Parameter, um Google einen Domainnamenshinweis zu geben. Wenn der Vorgang erfolgreich war, sind die Nutzerkonten, die bei der Kontoauswahl angezeigt werden, auf die angegebene Domain beschränkt. Ein Platzhalterwert: * bietet dem Nutzer nur Workspace-Konten an und schließt bei der Kontoauswahl private Konten (user@gmail.com) 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, Aufforderungen zur Nutzeranmeldung 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-enable_redirect_uri_validation

Aktivieren Sie die Weiterleitung über eine Schaltfläche, die den Gültigkeitsregeln für Weiterleitungs-URIs entspricht.

Typ	Erforderlich	Beispiel
boolean	Optional	`data-enable_redirect_uri_validation="true"`

Element mit der Klasse „g_id_signin“

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

Sie können auf derselben Seite mehrere Schaltflächen für die Anmeldung über Google rendern. Für jede Schaltfläche können eigene visuelle Einstellungen festgelegt werden. 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 Schaltflächentext. Beispiel: „Über Google anmelden“ oder „Über Google registrieren“.
`data-shape`	Die Schaltflächenform. Beispiel: rechteckig oder rund.
`data-logo_alignment`	Ausrichtung des Google-Logos: links oder zentriert
`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 diese Funktion festgelegt ist, wird sie 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 jedes Attributs und 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`	Schaltfläche mit Text oder personalisierten Informationen.
`icon`	Eine Symbolschaltfläche ohne Text.

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

Design
`outline`	Das Standard-Schaltflächendesign.
`filled_blue`	Das Design mit blauer Füllung für Schaltflächen.
`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.

data-text

Der Schaltflächentext. Der Standardwert ist signin_with. Es gibt keine visuellen Unterschiede beim Text von Symbolschaltflächen mit unterschiedlichen data-text-Attributen. Die einzige Ausnahme ist, wenn der Text für die Barrierefreiheit 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 Schaltflächentext lautet „Über Google anmelden“.
`signup_with`	Der Schaltflächentext lautet „Über Google registrieren“.
`continue_with`	Der Text der Schaltfläche lautet „Weiter mit Google“.
`signin`	Der Text der Schaltfläche lautet „Anmelden“.

data-shape

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

data-logo_alignment

Die Ausrichtung des Google-Logos. Der Standardwert ist left. Dieses Attribut gilt nur für den standard-Schaltflächentyp. 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 links ausgerichtet.
`center`	Das Google-Logo wird zentriert ausgerichtet.

data-width

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	`data-width=400`

data-locale

Optional. Der Schaltflächentext wird in der angegebenen Sprache angezeigt. Andernfalls wird der Standardtext aus dem Google-Konto oder den Browsereinstellungen des Nutzers verwendet. Fügen Sie beim Laden der Bibliothek den Parameter hl und den Sprachcode zur src-Anweisung hinzu, z. B.: gsi/client?hl=<iso-639-code>.

Wenn sie nicht festgelegt ist, wird die Standard-Sprachregion des Browsers oder die Einstellung des Google-Sitzungsnutzers verwendet. Daher sehen verschiedene Nutzer möglicherweise unterschiedliche Versionen von lokalisierten Schaltflächen, möglicherweise auch in unterschiedlichen Größen.

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 Über Google anmelden-Schaltfläche wurde angeklickt 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, kannst du jeder Schaltfläche einen eindeutigen String zuweisen. Derselbe String wird zusammen mit dem ID-Token zurückgegeben, damit 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 ID-Token-Handler-Endpunkt

Der ID-Token-Handler-Endpunkt verarbeitet das ID-Token. Je nach Status des entsprechenden Kontos kannst du den Nutzer anmelden und ihn entweder zu einer Anmeldeseite oder zu einer Seite zur Kontoverknüpfung weiterleiten, um weitere Informationen zu erhalten.

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 Handlerendpunkt ändert.
Anfrageparameter	`g_csrf_token`	Eine Zeichenfolge, die mit dem vorherigen Cookiewert `g_csrf_token` übereinstimmt.
Anfrageparameter	`credential`	Das von Google ausgestellte ID-Token.
Anfrageparameter	`select_by`	Wie die Anmeldedaten ausgewählt werden.
Anfrageparameter	`state`	Dieser Parameter wird nur definiert, wenn der Nutzer zum Anmelden auf die Schaltfläche „Über Google anmelden“ klickt und das `state`-Attribut der Schaltfläche angegeben ist.

Anmeldedaten

Nach der Dekodierung 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 zu verschiedenen Zeitpunkten mehrere E-Mail-Adressen haben kann.

Anhand der Felder email, email_verified und hd können Sie feststellen, ob Google eine E-Mail-Adresse hostet und für sie maßgebend ist. Wenn Google berechtigt ist, wird bestätigt, dass der Nutzer der rechtmäßige Kontoinhaber ist.

Fälle, in denen Google maßgebend ist:

email hat das Suffix @gmail.com. Das ist ein Gmail-Konto.
Wenn email_verified wahr ist und hd 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 fehlt, ist Google nicht maßgebend und es wird empfohlen, zur Bestätigung des Nutzers ein Passwort oder andere Bestätigungsmethoden zu verwenden. email_verified kann auch wahr sein, da Google den Nutzer ursprünglich bei der Erstellung des Google-Kontos bestätigt hat. Die Inhaberschaft des E-Mail-Kontos des Drittanbieters hat sich jedoch möglicherweise geändert.

Im Feld exp wird die Ablaufzeit angezeigt, zu der du das Token auf Serverseite bestätigen musst. Für das ID-Token, das über „Über Google anmelden“ abgerufen wird, beträgt sie eine Stunde. Sie müssen das Token vor Ablauf 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.

select_by

In der folgenden Tabelle sind die möglichen Werte für das Feld select_by aufgeführt. Der Schaltflächentyp, die Sitzung und der Einwilligungsstatus werden verwendet, um den Wert festzulegen.

Der Nutzer hat entweder die Schaltfläche „One Tap“ oder „Über Google anmelden“ gedrückt oder die berührungslose automatische Anmeldung verwendet.
Es wurde eine vorhandene Sitzung gefunden oder der Nutzer hat ein Google-Konto ausgewählt und sich damit angemeldet, um eine neue Sitzung zu starten.
Bevor der Nutzer Anmeldedaten für ID-Tokens für Ihre App freigibt, muss er
- die Schaltfläche „Bestätigen“ gedrückt hat, um seine Einwilligung zur Weitergabe von Anmeldedaten zu erteilen, oder
- Sie haben zuvor Ihre Einwilligung erteilt und über „Konto auswählen“ ein Google-Konto ausgewählt.

Der Wert dieses Felds ist auf einen der folgenden Typen festgelegt:

Wert	Beschreibung
`auto`	Automatische Anmeldung eines Nutzers mit einer bestehenden Sitzung, der zuvor seine 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 seine Einwilligung erteilt hatte, hat auf die Schaltfläche „Mit One Tap fortfahren“ geklickt, um Anmeldedaten zu teilen. Gilt nur für Browser, die FedCM nicht unterstützen.
`fedcm`	Ein Nutzer hat auf die Schaltfläche „Mit One Tap fortfahren“ geklickt, um Anmeldedaten mit FedCM zu teilen. Gilt nur für von FedCM unterstützte Browser.
`fedcm_auto`	Automatische Anmeldung eines Nutzers mit einer bestehenden Sitzung, der zuvor seine 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 bestehenden Sitzung hat auf die Schaltfläche „Mit One Tap fortfahren“ geklickt, um seine Einwilligung zu erteilen und Anmeldedaten zu teilen. Gilt nur für Chrome-Version 75 und höher.
`user_2tap`	Ein Nutzer ohne aktive Sitzung hat auf die Schaltfläche „Mit One Tap fortfahren“ gedrückt, um ein Konto auszuwählen, und dann in einem Pop-up-Fenster auf die Schaltfläche „Bestätigen“, um seine Einwilligung zu erteilen und Anmeldedaten zu teilen. Gilt für nicht auf Chromium basierende Browser.
`btn`	Ein Nutzer mit einer bestehenden Sitzung, der zuvor seine Einwilligung erteilt hat, hat auf die Schaltfläche „Über Google anmelden“ geklickt und unter „Konto auswählen“ ein Google-Konto ausgewählt, um Anmeldedaten zu teilen.
`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 seine Einwilligung zu erteilen und Anmeldedaten freizugeben.
`btn_add_session`	Ein Nutzer ohne aktive Sitzung, der zuvor seine Einwilligung erteilt hat, hat auf die Schaltfläche „Über Google anmelden“ geklickt, um ein Google-Konto auszuwählen und Anmeldedaten zu teilen.
`btn_confirm_add_session`	Ein Nutzer ohne aktive 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 erteilen und Anmeldedaten zu teilen.

Bundesstaat

Dieser Parameter wird nur definiert, wenn der Nutzer zum Anmelden auf die Schaltfläche „Über Google anmelden“ klickt und das data-state-Attribut 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 einer Seite mehrere „Über Google anmelden“-Schaltflächen gerendert werden können, können Sie jeder Schaltfläche einen eindeutigen String zuweisen. Mit diesem Parameter state können Sie also ermitteln, auf welche Schaltfläche der Nutzer geklickt hat, um sich anzumelden.

Endpunkt für den Passwort-Anmeldedaten-Handler

Der Endpunkt des Passwort-Anmeldedaten-Handlers verarbeitet Passwort-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 Handlerendpunkt ändert.
Anfrageparameter	`g_csrf_token`	Eine Zeichenfolge, die mit dem vorherigen Cookiewert `g_csrf_token` übereinstimmt.
Anfrageparameter	`email`	Dieses ID-Token wird von Google ausgestellt.
Anfrageparameter	`password`	Wie die Anmeldedaten ausgewählt werden.