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

Auf dieser Referenzseite wird die API für HTML-Datenattribute für „Mit Google anmelden“ beschrieben. Mit der API können Sie die Aufforderung zur Ein-Klick-Anmeldung oder die Schaltfläche „Über Google anmelden“ auf Ihren Webseiten anzeigen.

Element mit der ID „g_id_onload“

Sie können Datenattribute für „Mit Google anmelden“ in beliebige sichtbare oder unsichtbare Elemente wie <div> und <span> einfügen. Die einzige Voraussetzung ist, dass die Element-ID auf g_id_onload festgelegt ist. Verwenden Sie diese ID nicht für mehrere Elemente.

Datenattribute

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

Attribut
data-client_id Die Client-ID Ihrer Anwendung
data-auto_prompt Google One-Tipp anzeigen
data-auto_select Ermöglicht die automatische Auswahl bei Google One Tap.
data-login_uri Die URL Ihres Anmeldeendpunkts
data-callback Der Name der JavaScript-Handler-Funktion für das ID-Token
data-native_login_uri Die URL Ihres Endpunkts für die Verarbeitung von Anmeldedaten für Passwörter
data-native_callback Der Name der JavaScript-Handler-Funktion für Passwortanmeldedaten
data-native_id_param Der Parametername für den credential.id-Wert
data-native_password_param Der Parametername für den credential.password-Wert
data-cancel_on_tap_outside Legt fest, ob die Aufforderung abgebrochen werden soll, wenn der Nutzer außerhalb der Aufforderung klickt.
data-prompt_parent_id Die DOM-ID des Container-Elements für die Aufforderung zur Einmalanmeldung
data-skip_prompt_cookie Überspringt One Tap, wenn das angegebene Cookie einen nicht leeren Wert hat.
data-nonce Ein zufälliger String für ID-Tokens
data-context Der Titel und die Wörter in der One Tap-Aufforderung
data-moment_callback Der Funktionsname des Listeners für Benachrichtigungen zum Status der Aufforderungs-UI
data-state_cookie_domain Wenn Sie One Tap in der übergeordneten Domain und ihren Subdomains aufrufen müssen, übergeben Sie die übergeordnete Domain an dieses Attribut, damit ein gemeinsames Cookie verwendet wird.
data-ux_mode Nutzererfahrung für die Schaltfläche „Über Google anmelden“
data-allowed_parent_origin Die Ursprünge, die den Zwischen-iFrame einbetten dürfen. One Tap wird im Zwischen-iFrame-Modus ausgeführt, wenn dieses Attribut vorhanden ist.
data-intermediate_iframe_close_callback Überschreibt das Standardverhalten des Zwischen-iFrames, wenn Nutzer One Tap manuell schließen.
data-itp_support Aktiviert die aktualisierte One Tap-Benutzeroberfläche in ITP-Browsern.
data-login_hint Die Kontoauswahl überspringen, indem Sie einen Nutzerhinweis angeben.
data-hd Kontenauswahl nach Domain einschränken
data-use_fedcm_for_prompt Dem Browser erlauben, Anmeldeaufforderungen für Nutzer zu steuern und den Anmeldevorgang zwischen Ihrer Website und Google zu vermitteln.
data-use_fedcm_for_button In diesem Feld wird festgelegt, ob die FedCM-Schaltflächen-Benutzeroberfläche in Chrome verwendet werden soll (Desktop M125+ und Android M128+). Der Standardwert ist false.
data-button_auto_select Gibt an, ob die Option Automatische Auswahl für den FedCM-Schaltflächenablauf aktiviert werden soll. Wenn diese Option aktiviert ist, werden wiederkehrende Nutzer mit einer aktiven Google-Sitzung automatisch angemeldet. Die Aufforderung zur Kontoauswahl wird dann umgangen. Der Standardwert ist false.

Attributtypen

In den folgenden Abschnitten finden Sie Details zum Typ der einzelnen Attribute sowie ein Beispiel.

data-client_id

Dieses Attribut ist die Client-ID Ihrer App, die in der Google Cloud Console zu finden und zu erstellen ist. Weitere Informationen finden Sie in der folgenden Tabelle:

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

data-auto_prompt

Mit diesem Attribut wird festgelegt, ob die Funktion „Mit Google Pay bezahlen“ angezeigt werden soll. Der Standardwert ist true. Google One Tap wird nicht angezeigt, wenn dieser Wert false ist. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
boolean Optional data-auto_prompt="true"

data-auto_select

Mit diesem Attribut wird festgelegt, ob ein ID-Token automatisch zurückgegeben werden soll, ohne dass der Nutzer interagieren muss, wenn nur eine Google-Sitzung Ihre App genehmigt hat. Der Standardwert ist false. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
boolean Optional data-auto_select="true"

data-login_uri

Dieses Attribut ist der URI Ihres Anmeldeendpunkts.

Der Wert muss genau mit einem der autorisierten Weiterleitungs-URIs für den OAuth 2.0-Client übereinstimmen, den Sie in der Google Auth Platform konfiguriert haben, und unseren Validierungsregeln für Weiterleitungs-URIs entsprechen.

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

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

Ihr Anmeldeendpunkt muss POST-Anfragen mit einem credential-Parameter mit einem ID-Token-Wert im Text verarbeiten.

Weitere Informationen finden Sie in der folgenden Tabelle:

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

data-callback

Dieses Attribut ist der Name der JavaScript-Funktion, die das zurückgegebene ID-Token verarbeitet. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String Erforderlich, wenn data-login_uri nicht festgelegt ist. data-callback="handleToken"

Eines der Attribute data-login_uri und data-callback kann verwendet werden. Das hängt von den folgenden Komponenten- und UX-Modus-Konfigurationen ab:

  • Das Attribut data-login_uri ist für den UX-Modus der Schaltfläche „Über Google anmelden“ redirect erforderlich. Das Attribut data-callback wird in diesem Modus ignoriert.

  • Eines dieser beiden Attribute muss für den UX-Modus „Google One Tap“ und die Schaltfläche „Über Google anmelden“ popup festgelegt werden. Wenn beide festgelegt sind, hat das 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 z. B. mylibCallback statt mylib.callback.

data-native_login_uri

Dieses Attribut ist die URL Ihres Endpunkts für die Verarbeitung von Anmeldedaten für Passwörter. Wenn Sie entweder das Attribut data-native_login_uri oder das Attribut data-native_callback festlegen, greift die JavaScript-Bibliothek auf den integrierten Credential Manager zurück, wenn keine Google-Sitzung vorhanden ist. Sie dürfen nicht sowohl das Attribut data-native_callback als auch das Attribut data-native_login_uri festlegen. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String Optional data-login_uri="https://www.example.com/password_login"

data-native_callback

Dieses Attribut ist der Name der JavaScript-Funktion, die das vom integrierten Credential Manager des Browsers zurückgegebene Passwort-Credential verarbeitet. Wenn Sie entweder das Attribut data-native_login_uri oder das Attribut data-native_callback festlegen, greift die JavaScript-Bibliothek auf den integrierten Anmeldedatenmanager zurück, wenn keine Google-Sitzung vorhanden ist. Sie dürfen nicht sowohl data-native_callback als auch data-native_login_uri festlegen. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String Optional data-native_callback="handlePasswordCredential"

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

data-native_id_param

Wenn Sie die Passwortanmeldedaten an den Endpunkt des Passwortanmeldedaten-Handlers senden, können Sie den Parameternamen für das Feld credential.id angeben. Der Standardname ist email. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
URL Optional data-native_id_param="user_id"

data-native_password_param

Wenn Sie die Anmeldedaten für das Passwort an den Endpunkt des Passwort-Anmeldedaten-Handlers senden, können Sie den Parameternamen für den credential.password-Wert angeben. Der Standardname ist password. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
URL Optional data-native_password_param="pwd"

data-cancel_on_tap_outside

Mit diesem Attribut wird festgelegt, ob die One Tap-Anfrage abgebrochen werden soll, wenn der Nutzer außerhalb der Aufforderung klickt. Der Standardwert ist true. Wenn Sie die Funktion deaktivieren möchten, setzen Sie den Wert auf false. Weitere Informationen finden Sie in der folgenden Tabelle:

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

data-prompt_parent_id

Mit diesem Attribut wird die DOM-ID des Containerelements festgelegt. Wenn sie nicht festgelegt ist, wird die Aufforderung für die Ein-Klick-Anmeldung oben rechts im Fenster angezeigt. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String Optional data-prompt_parent_id="parent_id"

Verwendet ein Cookie, um die Anzeige des One Tap-Prompts zu steuern. Wenn das durch dieses Attribut angegebene Cookie einen nicht leeren Wert hat, wird die Aufforderung nicht angezeigt. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String Optional data-skip_prompt_cookie="SID"

data-nonce

Dieses Attribut ist ein zufälliger String, der vom ID-Token verwendet wird, um Replay-Angriffe zu verhindern. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String Optional data-nonce="biaqbm70g23"

Die Nonce-Länge ist auf die maximale JWT-Größe begrenzt, die von Ihrer Umgebung unterstützt wird, sowie auf die HTTP-Größenbeschränkungen für einzelne Browser und Server.

data-context

Mit diesem Feld wird der Text des Titels und der Meldungen im One Tap-Prompt geändert. Es hat keine Auswirkungen auf ITP-Browser. Die Standardeinstellung ist signin.

Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String Optional data-context="use"

In der folgenden Tabelle sind alle verfügbaren Kontexte und ihre Beschreibungen aufgeführt:

Kontext
signin „Bei“ anmelden
signup „Registrieren für“
use „Verwenden“

data-moment_callback

Dieses Attribut ist der Funktionsname des Listeners für Benachrichtigungen zum Status der Aufforderungs-UI. Weitere Informationen finden Sie unter dem Datentyp PromptMomentNotification.

Weitere Informationen finden Sie in der folgenden Tabelle:

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

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

Wenn Sie „Mit Google anmelden“ in einer übergeordneten Domain und ihren Subdomains anzeigen müssen, übergeben Sie die übergeordnete Domain an dieses Attribut, damit ein einzelner Cookie mit gemeinsamem Status verwendet wird. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String Optional data-state_cookie_domain="example.com"

data-ux_mode

Mit diesem Attribut wird der UX-Ablauf festgelegt, der von der Schaltfläche „Über Google anmelden“ verwendet wird. Der Standardwert ist popup. Dieses Attribut hat keine Auswirkungen auf die One Tap-Benutzeroberfläche. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String Optional data-ux_mode="redirect"

In der folgenden Tabelle sind die verfügbaren UX-Modi und ihre Beschreibungen aufgeführt.

UX-Modus
popup Führt den UX-Ablauf für die Anmeldung in einem Pop-up-Fenster aus.
redirect Führt den Anmelde-UX-Ablauf durch eine Weiterleitung der gesamten Seite aus.

data-allowed_parent_origin

Die Ursprünge, die den Zwischen-iFrame einbetten dürfen. One Tap wird im Zwischen-iFrame-Modus ausgeführt, wenn dieses Attribut vorhanden ist. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String oder String-Array Optional data-allowed_parent_origin="https://example.com"

In der folgenden Tabelle sind die unterstützten Werttypen und ihre Beschreibungen aufgeführt.

Werttypen
string Ein einzelner Domain-URI. „https://beispiel.de“
string array Eine Liste von durch Kommas getrennten Domain-URIs. "https://news.example.com,https://local.example.com"

Wenn der Wert des Attributs data-allowed_parent_origin ungültig ist, schlägt die One Tap-Initialisierung des Zwischen-iFrame-Modus fehl und wird beendet.

Platzhalterpräfixe werden ebenfalls unterstützt. "https://*.example.com" entspricht beispielsweise example.com und den zugehörigen Subdomains auf allen Ebenen (z. B. news.example.com, login.news.example.com). Beachten Sie bei der Verwendung von Platzhaltern Folgendes:

  • Musterstrings dürfen nicht nur aus einem Platzhalter und einer Top-Level-Domain bestehen. https://.com und https://.co.uk sind beispielsweise 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 und example2.com sowie den Subdomains von example2.com überein.
  • Domains mit Platzhaltern müssen mit dem sicheren Schema „https://“ beginnen. "*.example.com" ist also ungültig.

data-intermediate_iframe_close_callback

Überschreibt das Standardverhalten des Zwischen-iFrames, wenn Nutzer One Tap manuell schließen, indem sie in der One Tap-Benutzeroberfläche auf die Schaltfläche „X“ tippen. Standardmäßig wird das Zwischen-iFrame sofort aus dem DOM entfernt.

Das Feld data-intermediate_iframe_close_callback ist nur im Zwischen-iFrame-Modus wirksam. Die Änderung wirkt sich nur auf das Zwischen-Iframe und nicht auf das One Tap-Iframe aus. Die One Tap-Benutzeroberfläche wird entfernt, bevor der Callback aufgerufen wird.

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

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

data-itp_support

Mit diesem Feld wird festgelegt, ob die aktualisierte One Tap-Benutzeroberfläche in Browsern aktiviert werden soll, die Intelligent Tracking Prevention (ITP) unterstützen. Der Standardwert ist false. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
boolean Optional data-itp_support="true"

data-login_hint

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

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

Typ Erforderlich Beispiel
String. Kann eine E‑Mail-Adresse oder der Feldwert sub aus dem ID-Token sein. Optional data-login_hint="[email protected]"

data-hd

Wenn ein Nutzer mehrere Konten hat und sich nur mit seinem Workspace-Konto anmelden soll, können Sie Google mit diesem Parameter einen Domainnamen-Hinweis geben. Bei Erfolg werden bei der Kontoauswahl nur Nutzerkonten der angegebenen Domain angezeigt. Ein Platzhalterwert: * bietet dem Nutzer nur Workspace-Konten an und schließt Privatkonten ([email protected]) bei der Kontoauswahl aus.

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

Typ Erforderlich Beispiel
String. Ein voll qualifizierter Domainname oder *. Optional data-hd="*"

data-use_fedcm_for_prompt

Dem Browser erlauben, Anmeldeaufforderungen für Nutzer zu steuern und den Anmeldevorgang zwischen Ihrer Website und Google zu vermitteln. Die Standardeinstellung ist "false". Weitere Informationen finden Sie auf der Seite Zu FedCM migrieren.

Typ Erforderlich Beispiel
boolean Optional data-use_fedcm_for_prompt="true"

data-use_fedcm_for_button

Dieses Feld bestimmt, ob die FedCM-Schaltflächen-Benutzeroberfläche in Chrome (Desktop M125+ und Android M128+) verwendet werden soll. Der Standardwert ist false. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
boolean Optional data-use_fedcm_for_button="true"

data-button_auto_select

In diesem Feld wird festgelegt, ob die Option Automatische Auswahl für den FedCM-Schaltflächenablauf aktiviert werden soll. Wenn diese Option aktiviert ist, werden wiederkehrende Nutzer mit einer aktiven Google-Sitzung automatisch angemeldet. Die Aufforderung zur Kontoauswahl wird dann übersprungen. Die Standardeinstellung ist false. Sie müssen die automatische Anmeldung über Schaltflächen während der Einführung der Aktivierung explizit aktivieren. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
boolean Optional data-button_auto_select="true"

Element mit der Klasse „g_id_signin“

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

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

Attribute für visuelle Daten

In der folgenden Tabelle sind die Attribute für visuelle Daten und ihre Beschreibungen aufgeführt:

Attribut
data-type Der Schaltflächentyp: Symbol oder Standardschaltfläche.
data-theme Das Design der Schaltfläche. Beispiel: filled_blue oder filled_black.
data-size Die Größe der Schaltfläche. Beispiel: klein oder groß.
data-text Der Text der Schaltfläche. Beispiele: „Über Google anmelden“ oder „Mit Google registrieren“.
data-shape Die Form der Schaltfläche. Beispiel: rechteckig oder kreisförmig.
data-logo_alignment Die Ausrichtung des Google-Logos: links oder zentriert.
data-width Die Breite der Schaltfläche in Pixeln.
data-locale Der Schaltflächentext wird in der Sprache gerendert, die in diesem Attribut festgelegt ist.
data-click_listener Falls festgelegt, wird diese Funktion aufgerufen, wenn auf die Schaltfläche „Über Google anmelden“ geklickt wird.
data-state Wenn festgelegt, wird dieser String mit dem ID-Token zurückgegeben.

Attributtypen

In den folgenden Abschnitten finden Sie Details zum Typ der einzelnen Attribute sowie ein Beispiel.

data-type

Der Schaltflächentyp. Der Standardwert ist standard. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String Ja data-type="icon"

In der folgenden Tabelle sind alle verfügbaren Schaltflächentypen und ihre Beschreibungen aufgeführt:

Typ
standard
Eine 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 Designs und ihre Beschreibungen aufgeführt:

Design
outline
Eine Standardschaltfläche mit weißem Hintergrund Eine Schaltfläche mit Symbol und weißem Hintergrund Eine personalisierte Schaltfläche mit weißem Hintergrund
Das Standarddesign für Schaltflächen.
filled_blue
Eine Standardschaltfläche mit blauem Hintergrund Eine Symbolschaltfläche mit blauem Hintergrund Eine personalisierte Schaltfläche mit blauem Hintergrund
Das Design mit blauen Schaltflächen.
filled_black
Eine Standardschaltfläche mit schwarzem Hintergrund Eine Schaltfläche mit Symbol und schwarzem Hintergrund Eine personalisierte Schaltfläche mit schwarzem Hintergrund
Das Design für Schaltflächen 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 Standardschaltfläche Eine große Symbolschaltfläche Eine große, personalisierte Schaltfläche
Eine große Schaltfläche.
medium
Eine mittelgroße Standardschaltfläche Eine Schaltfläche mit mittelgroßem Symbol
Eine mittelgroße Schaltfläche.
small
Eine kleine Schaltfläche zum Anmelden Eine kleine Symbolschaltfläche
Eine kleine Schaltfläche.

data-text

Der Text der Schaltfläche. Der Standardwert ist signin_with. Es gibt keine visuellen Unterschiede für den Text von Symbolschaltflächen mit unterschiedlichen data-text-Attributen. Die einzige Ausnahme ist, wenn der Text für die Barrierefreiheit auf dem Bildschirm vorgelesen wird.

Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String Optional data-text="signup_with"

In der folgenden Tabelle sind die verfügbaren Schaltflächentexte und ihre Beschreibungen aufgeführt:

Text
signin_with
Eine Standardschaltfläche mit der Aufschrift „Über Google anmelden“ Eine Symbolschaltfläche ohne sichtbaren Text
Der Schaltflächentext lautet „Über Google anmelden“.
signup_with
Eine Standardschaltfläche mit der Aufschrift „Mit Google registrieren“ Eine Symbolschaltfläche ohne sichtbaren Text
Der Schaltflächentext lautet „Mit Google registrieren“.
continue_with
Eine Standardschaltfläche mit der Aufschrift „Mit Google fortfahren“ Eine Symbolschaltfläche ohne sichtbaren Text
Der Schaltflächentext lautet „Weiter mit Google“.
signin
Eine Standardschaltfläche mit der Beschriftung „Anmelden“ Eine Symbolschaltfläche ohne sichtbaren Text
Der Schaltflächentext lautet „Anmelden“.

data-shape

Die Form der Schaltfläche. Der Standardwert ist rectangular. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String Optional data-shape="rectangular"

In der folgenden Tabelle sind die verfügbaren Schaltflächenformen und ihre Beschreibungen aufgeführt:

Form
rectangular
Eine rechteckige Standardschaltfläche Rechteckige Schaltfläche mit Symbol Eine rechteckige personalisierte Schaltfläche
Die rechteckige Schaltfläche. Wenn sie für den Schaltflächentyp icon verwendet wird, entspricht sie square.
pill
Eine pillenförmige Standardschaltfläche Eine pillenförmige Symbolschaltfläche Eine pillenförmige personalisierte Schaltfläche
Die pillenförmige Schaltfläche. Wenn sie für den Schaltflächentyp icon verwendet wird, entspricht sie circle.
circle
Eine runde Standardschaltfläche Eine kreisförmige Symbolschaltfläche Eine runde personalisierte Schaltfläche
Die kreisförmige Schaltfläche. Wenn sie für den Schaltflächentyp standard verwendet wird, entspricht sie pill.
square
Eine quadratische Standardschaltfläche Quadratische Symbolschaltfläche Eine quadratische personalisierte Schaltfläche
Die quadratische Schaltfläche. Wenn sie für den Schaltflächentyp standard verwendet wird, entspricht sie rectangular.

data-logo_alignment

Die Ausrichtung des Google-Logos. Der Standardwert ist left. Dieses Attribut gilt nur für den Schaltflächentyp standard. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String Optional data-logo_alignment="center"

In der folgenden Tabelle sind die verfügbaren Ausrichtungen und ihre Beschreibungen aufgeführt:

logo_alignment
left
Eine Standard-Schaltfläche mit dem G‑Logo auf der linken Seite
Das Google-Logo wird linksbündig ausgerichtet.
center
Eine Standardschaltfläche mit dem G-Logo in der Mitte
Zentriert das Google-Logo.

data-width

Die Mindestbreite der Schaltfläche in Pixeln. Die maximale Breite beträgt 400 Pixel.

Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String Optional data-width=400

data-locale

Optional. Schaltflächentext in der angegebenen Sprache anzeigen. Andernfalls wird die Sprache verwendet, die in den Google-Konto- oder Browsereinstellungen des Nutzers festgelegt ist. Fügen Sie beim Laden der Bibliothek den Parameter hl und den Sprachcode in die src-Anweisung ein, z. B.: gsi/client?hl=<iso-639-code>.

Wenn sie nicht festgelegt ist, wird die Standardsprache des Browsers oder die bevorzugte Sprache des Nutzers der Google-Sitzung verwendet. Daher sehen verschiedene Nutzer möglicherweise unterschiedliche Versionen lokalisierter Schaltflächen, die auch unterschiedlich groß sein können.

Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String Optional data-locale="zh_CN"

data-click_listener

Mit dem Attribut data-click_listener können Sie eine JavaScript-Funktion definieren, die aufgerufen wird, wenn auf die Schaltfläche „Über Google anmelden“ geklickt wird.

  <script>
    function onClickHandler(){
      console.log("Sign in with Google button clicked...")
    }
  </script>
  .....
  <div class="g_id_signin"
      data-size="large"
      data-theme="outline"
      data-click_listener="onClickHandler">
  </div>

In diesem Beispiel wird die Meldung Sign in with Google button clicked... (Schaltfläche „Über Google anmelden“ wurde geklickt) in der Konsole protokolliert, wenn auf die Schaltfläche „Über Google anmelden“ geklickt wird.

data-state

Optional: Da auf derselben Seite mehrere „Über Google anmelden“-Schaltflächen gerendert werden können, können Sie jeder Schaltfläche einen eindeutigen String zuweisen. Derselbe String wird zusammen mit dem ID-Token zurückgegeben, sodass Sie erkennen können, auf welche Schaltfläche der Nutzer geklickt hat, um sich anzumelden.

Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String Optional data-state="button 1"

Serverseitige Integration

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

Der Endpunkt des ID-Token-Handlers

Der ID-Token-Handler-Endpunkt verarbeitet das ID-Token. Je nach Status des entsprechenden Kontos können Sie den Nutzer anmelden und ihn entweder auf eine Registrierungsseite oder auf eine Seite zur Kontoverknüpfung weiterleiten, um zusätzliche Informationen zu erhalten.

Beispielanfrage an Ihren Anmeldeendpunkt:

POST /login HTTP/1.1
Content-Type: application/x-www-form-urlencoded
Cookie: g_csrf_token=<RANDOM_STRING>
Host: www.example.com

credential=<JWT_ENCODED_ID_TOKEN>&g_csrf_token=<RANDOM_STRING>

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

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

Anmeldedaten

Dekodiert sieht das ID-Token so aus:

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's GSuite email address
  "email": "[email protected]", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "Eliza",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion's creation time
  "exp": 1596477600, // Unix timestamp of the assertion's expiration time
  "jti": "abc161803398874def"
}

Das Feld „sub“ ist eine global eindeutige Kennung für das Google-Konto. Verwenden Sie nur das Feld sub als Kennung für den Nutzer, da es für alle Google-Konten eindeutig ist und nie wiederverwendet wird.

Mithilfe der Felder email, email_verified und hd können Sie ermitteln, ob Google eine E-Mail-Adresse hostet und autoritativ für sie ist. In Fällen, in denen Google maßgeblich ist, wird bestätigt, dass der Nutzer der rechtmäßige Kontoinhaber ist.

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

  • Wenn die E‑Mail-Adresse von email mit @gmail.com endet, handelt es sich um ein Gmail-Konto.
  • Wenn email_verified auf „true“ gesetzt 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 nicht vorhanden ist, ist Google nicht autoritativ und es wird empfohlen, das Passwort oder andere Challenge-Methoden zur Bestätigung des Nutzers zu verwenden. email_verified kann auch zutreffen, da Google den Nutzer bei der Erstellung des Google-Kontos ursprünglich bestätigt hat. Die Inhaberschaft des E-Mail-Kontos des Drittanbieters kann sich jedoch inzwischen geändert haben.

Im Feld exp sehen Sie die Ablaufzeit, innerhalb derer Sie das Token serverseitig bestätigen müssen. Für das ID-Token, das über „Mit Google anmelden“ abgerufen wird, beträgt die Gültigkeitsdauer eine Stunde. Sie müssen das Token vor dem Ablaufdatum bestätigen. Verwenden Sie exp nicht für die Sitzungsverwaltung. Ein abgelaufenes ID-Token bedeutet nicht, dass der Nutzer abgemeldet ist. Ihre App ist für die Sitzungsverwaltung Ihrer Nutzer verantwortlich.

g_csrf_token

Ein Token für den Anti-Fälschungsstatus. Dies ist ein CSRF-Token (Cross-Site Request Forgery), das von der gsi/client-Bibliothek erstellt wurde. Ein zufälliger Wert ist sowohl als Cookie als auch als Anfrageparameter im POST-Payload-Text enthalten. Wenn diese beiden Werte bei der Verarbeitung der Anfrage auf Ihrem Server nicht übereinstimmen, sollte die Anfrage als ungültig betrachtet werden.

select_by

In der folgenden Tabelle sind die möglichen Werte für das Feld select_by aufgeführt. Der Typ der Schaltfläche, die zusammen mit dem Sitzungs- und Einwilligungsstatus verwendet wird, wird zum Festlegen des Werts verwendet.

  • Der Nutzer hat entweder auf die Schaltfläche „One Tap“ oder „Über Google anmelden“ geklickt oder die berührungslose automatische Anmeldung verwendet.

  • Es wurde eine bestehende Sitzung gefunden oder der Nutzer hat ein Google-Konto ausgewählt und sich darin angemeldet, um eine neue Sitzung zu starten.

  • Bevor die ID-Token-Anmeldedaten für Ihre App freigegeben werden, muss der Nutzer

    • auf die Schaltfläche „Bestätigen“ geklickt haben, um ihre Einwilligung zur Weitergabe von Anmeldedaten zu erteilen, oder
    • zuvor die Einwilligung erteilt und ein Google-Konto über „Konto auswählen“ ausgewählt haben.

Der Wert dieses Felds ist auf einen dieser Typen festgelegt:

Wert Beschreibung
auto Automatische Anmeldung eines Nutzers mit einer bestehenden Sitzung, der zuvor die Einwilligung zur Weitergabe von Anmeldedaten erteilt hat. Gilt nur für Browser, die FedCM nicht unterstützen.
user Ein Nutzer mit einer bestehenden Sitzung, der zuvor die Einwilligung erteilt hatte, hat auf die Schaltfläche „Weiter als“ von One Tap geklickt, um Anmeldedaten freizugeben. Gilt nur für Browser, die FedCM nicht unterstützen.
fedcm Ein Nutzer hat die Schaltfläche „Weiter als“ für die Einmalanmeldung gedrückt, um Anmeldedaten über FedCM freizugeben. Gilt nur für Browser, die FedCM unterstützen.
fedcm_auto Automatische Anmeldung eines Nutzers mit einer bestehenden Sitzung, der zuvor die Einwilligung zur Weitergabe von Anmeldedaten über FedCM One Tap erteilt hat. Gilt nur für Browser, die FedCM unterstützen.
user_1tap Ein Nutzer mit einer bestehenden Sitzung hat auf die Schaltfläche „Weiter als“ von One Tap geklickt, um die Einwilligung zu erteilen und Anmeldedaten freizugeben. Gilt nur für Chrome 75 und höher.
user_2tap Ein Nutzer ohne bestehende Sitzung hat auf die Schaltfläche „Weiter als“ von One Tap geklickt, um ein Konto auszuwählen, und dann in einem Pop-up-Fenster auf die Schaltfläche „Bestätigen“ geklickt, um die Einwilligung zu erteilen und Anmeldedaten freizugeben. Gilt für Browser, die nicht auf Chromium basieren.
btn Ein Nutzer mit einer bestehenden Sitzung, der zuvor die Einwilligung erteilt hat, hat auf die Schaltfläche „Über Google anmelden“ geklickt und ein Google-Konto aus „Konto auswählen“ ausgewählt, um Anmeldedaten freizugeben.
btn_confirm Ein Nutzer mit einer bestehenden Sitzung hat auf die Schaltfläche „Über Google anmelden“ und dann auf die Schaltfläche „Bestätigen“ geklickt, um die Einwilligung zu erteilen und Anmeldedaten freizugeben.
btn_add_session Ein Nutzer ohne bestehende Sitzung, der zuvor die Einwilligung erteilt hat, hat auf die Schaltfläche „Mit Google anmelden“ geklickt, um ein Google-Konto auszuwählen und Anmeldedaten freizugeben.
btn_confirm_add_session Ein Nutzer ohne bestehende Sitzung hat zuerst auf die Schaltfläche „Mit Google anmelden“ getippt, um ein Google-Konto auszuwählen, und dann auf die Schaltfläche „Bestätigen“, um der Weitergabe von Anmeldedaten zuzustimmen.

Bundesstaat

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

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

Endpunkt für die Verarbeitung von Passwortanmeldedaten

Der Endpunkt des Passwort-Anmeldedaten-Handlers verarbeitet Passwort-Anmeldedaten, die vom integrierten Anmeldedaten-Manager abgerufen werden.

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

Format Name Beschreibung
Cookie g_csrf_token Ein zufälliger String, der sich mit jeder Anfrage an den vom data-native_login_uri-Endpunkt angegebenen Anmelde-Endpunkt ändert, muss mit dem Wert im g_csrf_token-Anfrageparameter übereinstimmen.
Anfrageparameter g_csrf_token Ein zufälliger String, der sich mit jeder Anfrage an den vom data-native_login_uri angegebenen Anmelde-Endpunkt ändert, muss mit dem Wert des g_csrf_token-Cookies übereinstimmen.
Anfrageparameter email Dieses ID-Token wird von Google ausgestellt.
Anfrageparameter password Wie die Anmeldedaten ausgewählt werden.