Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

Sign in with Google HTML API-Referenz

Auf dieser Referenzseite wird die HTML-Datenattribut-API für „Über Google anmelden“ beschrieben, mit der der Button „Über Google anmelden“ oder die One Tap-Aufforderung auf Webseiten angezeigt wird.

Element mit der ID „g_id_onload“

Sie können Datenattribute für „Über Google anmelden“ in beliebige sichtbare oder unsichtbare Elemente einfügen, z. B. <div> und <span>. 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-color_scheme`	Das Farbschema, das auf die One Tap-Aufforderung angewendet wird.
`data-auto_prompt`	Google One Tap 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-Handler-Funktion
`data-native_login_uri`	Die URL des Endpunkts für die Verarbeitung von Passwort-Anmeldedaten
`data-native_callback`	Der Name der JavaScript-Handler-Funktion für Passwort-Anmeldedaten
`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`	Legt fest, 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-essential_claims`	Zusätzliche Anforderungen, die in das von Google zurückgegebene ID-Token aufgenommen werden sollen.
`data-context`	Titel und Wörter in der One Tap-Aufforderung
`data-moment_callback`	Der Funktionsname des Listeners für die Statusbenachrichtigung 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 einzelnes freigegebenes Cookie verwendet wird.
`data-ux_mode`	Nutzererfahrung beim Button „Über Google anmelden“
`data-allowed_parent_origin`	Die Ursprünge, die den Zwischen-iFrame einbetten dürfen. Die One-Tap-Anmeldung 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-UX in ITP-Browsern.
`data-login_hint`	Überspringen Sie die Kontoauswahl, indem Sie einen Nutzerhinweis angeben.
`data-hd`	Die Kontoauswahl nach Domain einschränken.
`data-use_fedcm_for_prompt`	Eingestellt: Dieses Attribut wird nicht mehr unterstützt und wird ignoriert, wenn es verwendet wird. Dem Browser erlauben, die Aufforderungen zur Anmeldung zu steuern und den Anmeldevorgang zwischen Ihrer Website und Google zu vermitteln.
`data-use_fedcm_for_button`	Dieses Feld bestimmt, ob die FedCM-Schaltflächen-UX in Chrome (Desktop M125+ und Android M128+) verwendet werden soll. Der Standardwert ist `false`.
`data-button_auto_select`	Gibt an, ob die Option Automatische Auswahl für den FedCM-Button-Flow aktiviert werden soll. Wenn diese Option aktiviert ist, werden wiederkehrende Nutzer mit einer aktiven Google-Sitzung automatisch angemeldet, ohne dass die Kontoauswahl angezeigt wird. Der Standardwert ist `false`.

Attributtypen

Die folgenden Abschnitte enthalten Details zu den einzelnen Attributtypen und ein Beispiel.

data-client_id

Dieses Attribut ist die Client-ID Ihrer Anwendung, die in der Google Cloud Console erstellt und gefunden wird. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ	Erforderlich	Beispiel
String	Ja	`data-client_id="CLIENT_ID.apps.googleusercontent.com"`

data-color_scheme

Dieses Feld ist das Farbschema, das auf die One Tap-Aufforderung angewendet wird. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ	Erforderlich	Beispiel
String	Optional. Standardmäßig wird das Standardfarbschema des Nutzersystems verwendet.	`data-color_scheme="dark"`

In der folgenden Tabelle sind die verfügbaren Farbschemas und ihre Beschreibungen aufgeführt.

Farbschema
`default`	Das Standardfarbschema des Systems des Nutzers wird angewendet. Je nach Einstellung des Nutzers ist das Farbschema entweder hell oder dunkel.
`light`	Wende ein helles Farbschema an.
`dark`	Wende ein dunkles Farbschema an.

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

Mit diesem Attribut wird festgelegt, ob ein ID-Token automatisch ohne Nutzerinteraktion zurückgegeben werden soll, 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 muss unseren Validierungsregeln für Weiterleitungs-URIs entsprechen.

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

Die ID-Token-Anmeldedatenantwort 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 eine automatische Anmeldung erfolgt.

Ihr Anmeldeendpunkt muss POST-Anfragen verarbeiten, die im Text einen credential-Parameter mit einem ID-Tokenwert enthalten.

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

Es 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 redirect der Schaltfläche „Über Google anmelden“ erforderlich. Das Attribut data-callback wird ignoriert.
Eines dieser beiden Attribute muss für Google One Tap und den UX-Modus popup des Google-Anmeldebuttons festgelegt werden. Wenn beide festgelegt sind, hat das Attribut data-callback eine höhere Priorität.

JavaScript-Funktionen innerhalb eines 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.

An die Callback-Funktion wird ein CredentialResponse-Objekt als Parameter übergeben. Details zu den möglichen Antwortwerten finden Sie unter CredentialResponse.

data-native_login_uri

Dieses Attribut ist die URL des Endpunkts für die Verarbeitung von Passwort-Anmeldedaten. 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 beide 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 Passwort-Anmeldedaten verarbeitet, die vom integrierten Credential 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 integrierten Credential Manager zurück, wenn keine Google-Sitzung vorhanden ist. 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 Passwort-Anmeldedaten 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 Passwort-Anmeldedaten an den Endpunkt des Passwort-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

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 sie 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 One Tap-Aufforderung 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 der One Tap-Aufforderung 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, die von Ihrer Umgebung unterstützt wird, und auf die HTTP-Größenbeschränkungen der einzelnen Browser und Server beschränkt.

data-essential_claims

Dieses Attribut ist ein String, mit dem zusätzliche Anforderungen angefordert werden, die in das von Google zurückgegebene ID-Token aufgenommen werden sollen. Eine vollständige Liste der von Google akzeptierten Anforderungen finden Sie unter Unterstützte Anforderungen.

Weitere Informationen finden Sie in der folgenden Tabelle:

Typ	Erforderlich	Beispiel
String	Optional	`data-essential_claims="auth_time, amr"`

data-context

In diesem Feld wird der Text des Titels und der Nachrichten geändert, die in der One Tap-Aufforderung angezeigt werden. Dies 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`	„Anmelden bei“
`signup`	„Registrieren für“
`use`	„Verwenden“

data-moment_callback

Dieses Attribut ist der Funktionsname des Listeners für die Statusbenachrichtigung der Aufforderungs-UI. 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 ihren Subdomains anzeigen müssen, ü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

Mit diesem Attribut wird der UX-Ablauf für den Button „Über Google anmelden“ festgelegt. 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-Anmeldevorgang in einem Pop-up-Fenster aus.
`redirect`	Führt den UX-Anmeldeablauf über eine Weiterleitung auf eine vollständige 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://example.com"
`string array`	Eine Liste mit kommagetrennten 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" entspricht 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. Beispiel: https://.com und https://.co.uk sind ungültig, da "https://.example.com" mit example.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 Domains example1.com, example2.com und den Subdomains von example2.com überein.
Platzhalterdomains müssen mit einem sicheren https://-Schema beginnen. "*.example.com" gilt daher als 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 der Zwischen-Iframe sofort aus dem DOM entfernt.

Das Feld data-intermediate_iframe_close_callback wird nur im Zwischen-iFrame-Modus wirksam. Und sie wirkt sich nur auf den Zwischen-Iframe aus, nicht auf den One Tap-Iframe. Die One Tap-Benutzeroberfläche wird entfernt, bevor der Callback aufgerufen wird.

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

data-itp_support

In diesem Feld wird festgelegt, 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="false"`

data-login_hint

Wenn Ihre Anwendung im Voraus weiß, welcher Nutzer angemeldet werden soll, kann sie Google einen Anmeldehinweis geben. Wenn dies erfolgreich ist, wird die Kontoauswahl übersprungen. Zulässige Werte sind: eine E-Mail-Adresse oder ein ID-Token-Feld sub.

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

data-hd

Wenn ein Nutzer mehrere Konten hat und sich nur mit seinem Workspace-Konto anmelden soll, können Sie Google damit einen Hinweis auf den Domainnamen geben. Wenn der Vorgang erfolgreich war, sind die bei der Kontoauswahl angezeigten Nutzerkonten auf die angegebene Domain beschränkt. Ein Platzhalterwert: * bietet dem Nutzer nur Workspace-Konten an und schließt Privatkonten (user@gmail.com) 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, die Aufforderungen zur Anmeldung 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	Verworfen	`data-use_fedcm_for_prompt="true"`

data-use_fedcm_for_button

In diesem Feld wird festgelegt, ob die FedCM-Schaltflächen-UX in Chrome (Desktop M125+ und Android M128+) verwendet werden soll. Standardmäßig 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 Automatisch auswählen für den FedCM-Button-Flow aktiviert werden soll. Wenn diese Option aktiviert ist, werden wiederkehrende Nutzer mit einer aktiven Google-Sitzung automatisch angemeldet, ohne dass die Kontoauswahl angezeigt wird. Die Standardeinstellung ist false. Sie müssen die automatische Anmeldung per Schaltfläche während der Opt-in-Einführung 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 g_id_signin dem Attribut class eines Elements hinzufügen, wird das Element als „Über Google anmelden“-Button gerendert.

Sie können mehrere „Über Google anmelden“-Buttons auf derselben Seite rendern. Jede Schaltfläche kann eigene visuelle Einstellungen haben. Die Einstellungen werden durch die folgenden Datenattribute definiert.

Visuelle Datenattribute

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 Button-Design. Beispiel: filled_blue oder filled_black.
`data-size`	Die Größe des Buttons. Beispiel: klein oder groß.
`data-text`	Der Text des Buttons. Beispiel: „Über Google anmelden“ oder „Bei 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 Buttontext wird in der Sprache angezeigt, die in diesem Attribut festgelegt ist.
`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

Die folgenden Abschnitte enthalten Details zum Typ der einzelnen Attribute 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`	Eine Schaltfläche mit Text oder personalisierten Informationen.
`icon`	Eine Symbolschaltfläche ohne Text.

data-theme

Das Button-Design. 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	Beispiele	Spezifikationen
`outline`	Ein Standard-Button-Design.	Füllung: #FFFFFF Strich: #747775 \| 1 px \| innen Schriftart: #1F1F1F \| Roboto Medium \| 14/20 Personalisiert: #1F1F1F \| Roboto \| Medium 12/14 \| Regular 11/13
`filled_blue`	Ein blaues Design für die Schaltfläche.	Füllung: #0B57D0 Strich: #OB57D0 \| 1 px \| innen Schriftart: #FFFFFF \| Google Sans Medium \| 14/20 Personalisiert: #FFFFFF \| Roboto \| Medium 12/14 \| Regular 11/13
`filled_black`	Ein schwarzes Button-Design mit kontrastierendem Logo.	Füllung: #202124 Strich: #OB57D0 \| 1 px \| innen Schriftart: #FFFFFF \| Google Sans Medium \| 14/20 Personalisiert: #FFFFFF \| Roboto \| Medium 12/14 \| Regular 11/13
`outline_dark`	Ein Design mit schwarz gefüllten Schaltflächen.	Füllung: #131314 Strich: #8E918F \| 1 px \| innen Schriftart: #FFFFFF \| Google Sans Medium \| 14/20 Personalisiert: #FFFFFF \| Roboto \| Medium 12/14 \| Regular 11/13

data-size

Die Größe des Buttons. 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`	Ein mittelgroßer Button.
`small`	Eine kleine Taste.

data-text

Der Text des Buttons. 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 gelesen 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 auf der Schaltfläche lautet „Über Google anmelden“.
`signup_with`	Der Text auf der Schaltfläche lautet „Mit Google registrieren“.
`continue_with`	Der Text auf der Schaltfläche lautet „Weiter mit Google“.
`signin`	Der Text auf der Schaltfläche 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`	Der rechteckige Button. Bei Verwendung für den Schaltflächentyp `icon` entspricht dies `square`.
`pill`	Die pillenförmige Schaltfläche. Wenn er für den Schaltflächentyp `icon` verwendet wird, entspricht er `circle`.
`circle`	Der kreisförmige Button. Wenn er für den Schaltflächentyp `standard` verwendet wird, entspricht er `pill`.
`square`	Die quadratische Taste. 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 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`	Richtet das Google-Logo linksbündig aus.
`center`	Zentriert das Google-Logo.

data-width

Die Mindestbreite der Schaltfläche 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`

data-locale

Optional. Der Text der Schaltfläche wird in der angegebenen Sprache angezeigt. Andernfalls werden die Standardeinstellungen des Google-Kontos oder die 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 Standardsprache des Browsers oder die Einstellung des Google-Sitzungsnutzers verwendet. Daher sehen verschiedene Nutzer möglicherweise unterschiedliche Versionen lokalisierter Schaltflächen, eventuell 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 Button „Über Google anmelden“ angeklickt… in der Konsole protokolliert, wenn der Button „Über Google anmelden“ angeklickt wird.

Datenstatus

Optional: Da mehrere „Über Google anmelden“-Buttons auf derselben Seite gerendert werden können, können Sie jedem Button einen eindeutigen String zuweisen. Der gleiche 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 kannst du den Nutzer anmelden und ihn entweder auf eine Registrierungsseite oder auf eine Seite zur Kontoverknüpfung weiterleiten, um weitere Informationen zu erhalten. Clients MÜSSEN nicht erkannte Antwortparameter ignorieren.

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-POST-Anfrage enthält die folgenden Informationen:

Format	Name	Beschreibung
Cookie	`g_csrf_token`	Ein zufälliger String, der sich bei jeder Anfrage an den von `data-login_uri` angegebenen Anmeldeendpunkt ändert. Er muss mit dem Wert im Anfrageparameter `g_csrf_token` übereinstimmen.
Anfrageparameter	`g_csrf_token`	Ein zufälliger String, der sich bei jeder Anfrage an den von `data-login_uri` angegebenen Anmeldeendpunkt ändert und mit dem Wert des `g_csrf_token`-Cookies übereinstimmen muss.
Anfrageparameter	`credential`	Das codierte JWT-ID-Token, das von Google ausgestellt wird.
Anfrageparameter	`state`	Dieser Parameter wird nur definiert, wenn der Nutzer auf den Button „Über Google anmelden“ klickt, um sich anzumelden, und das Attribut `state` des Buttons angegeben ist.

Anmeldedaten

Decodiert 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 Google Workspace email address
  "auth_time": 1748875426,
  "amr": ["mfa", "pwd", "tel"],
  "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 creation time
  "exp": 1596477600, // Unix timestamp of the assertion expiration time
  "jti": "abc161803398874def"
}

Clients MÜSSEN nicht erkannte JWT-Ansprüche ignorieren.

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.

Anhand der Felder email, email_verified und hd können Sie feststellen, ob Google eine E-Mail-Adresse hostet und dafür autoritativ ist. In Fällen, in denen Google die maßgebliche Instanz ist, wird der Nutzer als rechtmäßiger Kontoinhaber bestätigt.

Fälle, in denen Google die maßgebliche Quelle ist:

email hat das Suffix @gmail.com. Es handelt sich um ein Gmail-Konto.
email_verified ist „true“ und hd ist festgelegt. Dies ist ein Google Workspace-Konto.

Nutzer können sich für Google-Konten registrieren, ohne Gmail oder Google Workspace zu verwenden. Wenn email kein Suffix @gmail.com enthält und hd nicht vorhanden ist, ist Google nicht autoritativ und es werden Passwort- oder andere Bestätigungsmethoden empfohlen, um den Nutzer zu verifizieren. email_verified kann auch zutreffen, da Google den Nutzer bei der Erstellung des Google-Kontos verifiziert hat, sich die Inhaberschaft des Drittanbieter-E-Mail-Kontos jedoch seitdem geändert haben kann.

Im Feld exp wird die Ablaufzeit für die Überprüfung des Tokens auf der Serverseite angezeigt. Für das ID-Token, das über „Über Google anmelden“ abgerufen wird, beträgt sie eine Stunde. Sie müssen das Token vor Ablauf der Gültigkeit verifizieren. Verwenden Sie exp nicht für die Sitzungsverwaltung. Ein abgelaufenes ID-Token bedeutet nicht, dass der Nutzer abgemeldet ist. Ihre Anwendung ist für die Sitzungsverwaltung Ihrer Nutzer verantwortlich.

g_csrf_token

Ein Anti-Fälschungs-Statustoken. Dies ist ein Token für websiteübergreifende Anfragen (CSRF), das von der gsi/client-Bibliothek erstellt wurde. Ein zufälliger Wert wird sowohl als Cookie als auch als Anfrageparameter in den POST-Nutzlasttext eingefügt. Wenn diese beiden Werte bei der Verarbeitung der Anfrage auf Ihrem Server nicht übereinstimmen, sollte die Anfrage als ungültig betrachtet werden.

Bundesstaat

Dieser Parameter wird nur definiert, wenn der Nutzer auf den Button „Über Google anmelden“ klickt, um sich anzumelden, und das Attribut data-state des angeklickten Buttons angegeben ist. Der Wert dieses Felds ist derselbe Wert, den Sie im Attribut data-state der Schaltfläche angegeben haben.

Da auf derselben Seite mehrere „Über Google anmelden“-Buttons gerendert werden können, können Sie jedem Button einen eindeutigen String zuweisen. Daher können Sie mit diesem state-Parameter ermitteln, auf welche Schaltfläche der Nutzer geklickt hat, um sich anzumelden.

Endpunkt für die Verarbeitung von Passwort-Anmeldedaten

Der Endpunkt des Passwort-Anmeldedaten-Handlers verarbeitet Passwort-Anmeldedaten, die vom integrierten Credential 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 bei jeder Anfrage an den von `data-native_login_uri` angegebenen Anmeldeendpunkt ändert. Er muss mit dem Wert im Anfrageparameter `g_csrf_token` übereinstimmen.
Anfrageparameter	`g_csrf_token`	Ein zufälliger String, der sich bei jeder Anfrage an den von `data-native_login_uri` angegebenen Anmeldeendpunkt ändert und mit dem Wert des `g_csrf_token`-Cookies übereinstimmen muss.
Anfrageparameter	`email`	Dieses ID-Token wird von Google ausgestellt.
Anfrageparameter	`password`	Wie der Berechtigungsnachweis ausgewählt wird.

Sign in with Google HTML API-Referenz Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Element mit der ID „g_id_onload“

Datenattribute

Attributtypen

data-client_id

data-color_scheme

data-auto_prompt

data-auto_select

data-login_uri

data-callback

data-native_login_uri

data-native_callback

data-native_id_param

data-native_password_param

data-cancel_on_tap_outside

data-prompt_parent_id

data-skip_prompt_cookie

data-nonce

data-essential_claims

data-context

data-moment_callback

data-state_cookie_domain

data-ux_mode

data-allowed_parent_origin

data-intermediate_iframe_close_callback

data-itp_support

data-login_hint

data-hd

data-use_fedcm_for_prompt

data-use_fedcm_for_button

data-button_auto_select

Element mit der Klasse „g_id_signin“

Visuelle Datenattribute

Attributtypen

data-type

data-theme

data-size

data-text

Datenform

data-logo_alignment

data-width

data-locale

data-click_listener

Datenstatus

Serverseitige Integration

Der Endpunkt des ID-Token-Handlers

Anmeldedaten

g_csrf_token

Bundesstaat

Endpunkt für die Verarbeitung von Passwort-Anmeldedaten

Sign in with Google HTML API-Referenz