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

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

Element mit der ID „g_id_onload“

Du kannst „Über Google anmelden“-Datenattribute in alle sichtbaren oder unsichtbaren Elemente wie <div> und <span> einfügen. Die einzige Anforderung ist, dass die Element-ID auf g_id_onload festgelegt ist. Verwenden Sie diese ID nicht für mehrere Elemente.

Datenattribute

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

Attribut
data-client_id Die Client-ID Ihrer Anwendung
data-auto_prompt Display mit Google One Tap.
data-auto_select Aktiviert die automatische Auswahl bei Google One Tap.
data-login_uri URL Ihres Anmeldeendpunkts
data-callback Name der Funktion des JavaScript-ID-Token-Handlers
data-native_login_uri Die URL Ihres Endpunkts des Handlers für Passwort-Anmeldedaten
data-native_callback Der Funktionsname des Handlers für den Anmeldedaten-Handler für JavaScript-Passwörter
data-native_id_param Der Parametername für den Wert credential.id
data-native_password_param Der Parametername für den Wert credential.password
data-cancel_on_tap_outside Steuert, ob die Aufforderung abgebrochen wird, wenn der Nutzer auf eine Stelle außerhalb der Aufforderung klickt.
data-prompt_parent_id Die DOM-ID des Containerelements der One Tap-Eingabeaufforderung
data-skip_prompt_cookie Überspringt One Tap, wenn das angegebene Cookie einen nicht leeren Wert hat.
data-nonce Ein zufälliger String für ID-Tokens
data-context Titel und Wörter des One Tap-Prompts
data-moment_callback Der Funktionsname des Benachrichtigungs-Listeners der Benutzeroberfläche für die Eingabeaufforderung
data-state_cookie_domain Wenn Sie One Tap in der übergeordneten Domain und ihren Subdomains aufrufen müssen, übergeben Sie die übergeordnete Domain an dieses Attribut, damit ein einzelnes gemeinsames Cookie verwendet wird.
data-ux_mode UX-Vorgang für die Schaltfläche „Über Google anmelden“
data-allowed_parent_origin Die Ursprünge, in die der Zwischen-iFrame eingebettet werden darf. One Tap wird im iFrame-Zwischenmodus ausgeführt, wenn dieses Attribut vorhanden ist.
data-intermediate_iframe_close_callback Überschreibt das standardmäßige zwischenzeitliche iFrame-Verhalten, wenn Nutzer One Tap manuell schließen.
data-itp_support Aktiviert aktualisierte One Tap-UX in ITP-Browsern.
data-login_hint Überspringen Sie die Kontoauswahl, indem Sie einen Nutzerhinweis eingeben.
data-hd Kontoauswahl nach Domain beschränken.
data-use_fedcm_for_prompt Erlauben Sie dem Browser, die Anmeldeaufforderungen von Nutzern zu steuern und den Anmeldevorgang zwischen Ihrer Website und Google zu vermitteln.

Attributtypen

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

Daten-Client-ID

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

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

data-auto_prompt

Dieses Attribut bestimmt, ob „One Tap“ angezeigt wird oder nicht. Der Standardwert ist true. Google One Tap wird nicht angezeigt, wenn dieser Wert false ist. Weitere Informationen finden Sie in der folgenden Tabelle:

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

data-auto_select

Dieses Attribut bestimmt, ob ein ID-Token automatisch und ohne Nutzerinteraktion zurückgegeben wird, wenn Ihre App nur von einer Google-Sitzung genehmigt wurde. Der Standardwert ist false. Weitere Informationen finden Sie in der folgenden Tabelle:

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

data-login_uri

Dieses Attribut ist der URI Ihres Anmeldeendpunkts.

Der Wert muss genau mit einem der autorisierten Weiterleitungs-URIs für den OAuth 2.0-Client übereinstimmen, den Sie in der API Console konfiguriert haben. Er muss außerdem unseren Validierungsregeln für Weiterleitungs-URIs entsprechen.

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

Die Antwort für die Anmeldedaten des ID-Tokens wird an deinen Anmeldeendpunkt gesendet, wenn keine Callback-Funktion definiert ist und ein Nutzer auf die Schaltfläche „Über Google anmelden“ oder „One Tap“ klickt oder die automatische Signierung stattfindet.

Weitere Informationen finden Sie in der folgenden Tabelle:

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

Der Anmeldeendpunkt muss POST-Anfragen verarbeiten, die einen credential-Schlüssel mit einem ID-Tokenwert im Text enthalten.

Hier ist eine Beispielanfrage an Ihren Anmeldeendpunkt:

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded

credential=ID_TOKEN

data-callback

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

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

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

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

  • Für den UX-Modus von Google One Tap und der Schaltfläche „Google Log-in“ popup muss eines dieser beiden Attribute festgelegt werden. Wenn beide festgelegt sind, hat das Attribut data-callback eine höhere Priorität.

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

data-native_login_uri

Dieses Attribut ist die URL Ihres Endpunkts des Handlers für Anmeldedaten für Passwörter. Wenn du entweder das Attribut data-native_login_uri oder das Attribut data-native_callback festlegst, greift die JavaScript-Bibliothek auf den nativen Anmeldedaten-Manager zurück, wenn keine Google-Sitzung vorhanden ist. Sie dürfen nicht gleichzeitig die Attribute data-native_callback und data-native_login_uri festlegen. Weitere Informationen finden Sie in der folgenden Tabelle:

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

datennativer_Callback

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

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

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

data-native_id_param

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

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

data-native_password_param

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

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

data-cancel_on_tap_outside

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

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

data-prompt_parent_id

Dieses Attribut legt die DOM-ID des Containerelements fest. Ist die Richtlinie nicht konfiguriert, wird die One Tap-Aufforderung rechts oben im Fenster angezeigt. Weitere Informationen finden Sie in der folgenden Tabelle:

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

Dieses Attribut überspringt One Tap, wenn das angegebene Cookie einen nicht leeren Wert hat. Weitere Informationen finden Sie in der folgenden Tabelle:

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

Data-Nonce

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

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

Die Nonce-Länge ist auf die maximale von Ihrer Umgebung unterstützte JWT-Größe und die HTTP-Größenbeschränkungen der einzelnen Browser und Server begrenzt.

Datenkontext

Dieses Attribut ändert den Text des Titels und der Nachrichten, die in der One Tap-Eingabeaufforderung angezeigt werden. Weitere Informationen finden Sie in der folgenden Tabelle:

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

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

Kontext
signin „Über Google anmelden“
signup „Bei Google registrieren“
use „Mit Google verwenden“

data-moment_callback

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

Weitere Informationen finden Sie in der folgenden Tabelle:

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

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

Wenn Sie One Tap in einer übergeordneten Domain und deren Subdomains anzeigen möchten, übergeben Sie die übergeordnete Domain an dieses Attribut, damit ein einzelnes Cookie mit gemeinsamem Status verwendet wird. Weitere Informationen finden Sie in der folgenden Tabelle:

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

data-ux_mode

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

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

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

UX-Modus
popup Führt den UX-Vorgang für die Anmeldung in einem Pop-up-Fenster durch.
redirect Führt bei der Anmeldung einen UX-Vorgang für eine vollständige Seitenweiterleitung durch.

data-allowed_parent_origin

Die Ursprünge, in die der Zwischen-iFrame eingebettet werden darf. One Tap wird im iFrame-Zwischenmodus ausgeführt, wenn dieses Attribut vorhanden ist. Weitere Informationen finden Sie in der folgenden Tabelle:

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

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

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

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

Platzhalterpräfixe werden ebenfalls unterstützt. Beispiel: "https://*.example.com" stimmt mit example.com und seinen Subdomains auf allen Ebenen überein (z. B. news.example.com, login.news.example.com). Beachten Sie Folgendes bei der Verwendung von Platzhaltern:

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

data-intermediate_iframe_close_callback

Überschreibt das standardmäßige zwischenzeitliche iFrame-Verhalten, wenn Nutzer One Tap manuell schließen, indem sie auf der One Tap-Benutzeroberfläche auf die Schaltfläche „X“ tippen. Standardmäßig wird der dazwischenliegende iFrame sofort aus dem DOM entfernt.

Das Feld data-intermediate_iframe_close_callback wird nur im iFrame-Zwischenmodus wirksam. Außerdem wirkt sie sich nur auf den dazwischenliegenden iFrame aus, nicht auf den One Tap-iFrame. Die One Tap-UI wird entfernt, bevor der Callback aufgerufen wird.

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

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

Data-itp-Support

Dieses Feld gibt an, ob die aktualisierte One Tap UX in Browsern aktiviert werden soll, die Intelligent Tracking Prevention (ITP) unterstützen. Der Standardwert ist false. Weitere Informationen finden Sie in der folgenden Tabelle:

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

data-login_hint

Wenn für Ihre Anwendung im Voraus bekannt ist, welcher Nutzer angemeldet werden soll, kann Google einen Anmeldehinweis bereitstellen. Wenn der Vorgang erfolgreich abgeschlossen wurde, wird die Kontoauswahl übersprungen. Zulässige Werte sind: eine E-Mail-Adresse oder ein untergeordnetes Feld eines ID-Tokens.

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

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

Daten-HD

Wenn ein Nutzer mehrere Konten hat und sich nur mit seinem Workspace-Konto anmelden soll, verwende dies, um Google einen Hinweis zu einem Domainnamen zu senden. Ist der Vorgang erfolgreich, sind die Nutzerkonten, die während der Kontoauswahl angezeigt werden, auf die angegebene Domain beschränkt. Einen Platzhalterwert: * bietet dem Nutzer nur Workspace-Konten und schließt Privatnutzerkonten (nutzer@gmail.com) bei der Kontoauswahl aus.

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

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

data-use_fedcm_for_prompt

Erlauben Sie dem Browser, die Anmeldeaufforderungen von Nutzern zu steuern und den Anmeldevorgang zwischen Ihrer Website und Google zu vermitteln. Die Standardeinstellung ist "false". Weitere Informationen finden Sie auf der Seite Migration zu FedCM.

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

Element mit der Klasse „g_id_signin“

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

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

Visuelle Datenattribute

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

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

Attributtypen

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

Datentyp

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

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

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

Typ
standard
Eine Schaltfläche mit Text oder personalisierten Informationen.
icon
Eine Symbolschaltfläche ohne Text.

data-theme

Das Schaltflächendesign Der Standardwert ist outline. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String Optional data-theme="filled_blue"

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

Design
outline
Eine Standardschaltfläche mit weißem Hintergrund Eine Symbolschaltfläche mit weißem Hintergrund Eine personalisierte Schaltfläche vor weißem Hintergrund
Das Standarddesign der Schaltfläche.
filled_blue
Eine Standardschaltfläche mit blauem Hintergrund Eine Symbolschaltfläche mit blauem Hintergrund Eine personalisierte Schaltfläche mit blauem Hintergrund
Das Schaltflächendesign mit blauer Füllung.
filled_black
Eine Standardschaltfläche mit schwarzem Hintergrund Eine Symbolschaltfläche mit schwarzem Hintergrund Eine personalisierte Schaltfläche mit schwarzem Hintergrund
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 Standardschaltfläche Eine große Symbolschaltfläche Eine große, personalisierte Schaltfläche
Eine große Schaltfläche.
medium
Eine mittlere Standardschaltfläche Eine mittlere Symbolschaltfläche
Eine mittelgroße Schaltfläche.
small
Eine kleine Taste Eine kleine Symbolschaltfläche
Eine kleine Schaltfläche.

Datentext

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

Weitere Informationen finden Sie in der folgenden Tabelle:

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

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

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

Datenform

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

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

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

Form
rectangular
Eine rechteckige Standardschaltfläche Eine rechteckige Symbolschaltfläche Eine rechteckige personalisierte Schaltfläche
Die rechteckige Schaltfläche. Wenn er für den Schaltflächentyp icon verwendet wird, entspricht er der Option square.
pill
Eine pillenförmige Standardtaste Eine pillenförmige Symbolschaltfläche Eine pillenförmige personalisierte Schaltfläche
Die pillenförmige Schaltfläche. Wenn er für den Schaltflächentyp icon verwendet wird, entspricht er der von circle.
circle
Eine runde Standardschaltfläche Eine kreisförmige Symbolschaltfläche Eine kreisförmige personalisierte Schaltfläche
Die kreisförmige Schaltfläche. Wenn er für den Schaltflächentyp standard verwendet wird, entspricht dies pill.
square
Eine quadratische Standardschaltfläche Eine Schaltfläche mit einem quadratischen Symbol Eine quadratische personalisierte Schaltfläche
Die quadratische Schaltfläche. Wenn er für den Schaltflächentyp standard verwendet wird, entspricht dies rectangular.

Datenlogo_alignment

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

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

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

logo_alignment
left
Eine Standardschaltfläche mit dem G-Logo auf der linken Seite
Das Google-Logo wird linksbündig.
center
Eine Standardschaltfläche mit dem G-Logo in der Mitte
Das Google-Logo wird zentriert.

Datenbreite

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

Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String Optional data-width=400

Datensprache

Optional. Zeigt den Schaltflächentext in der angegebenen Sprache an. Andernfalls werden standardmäßig die Google-Konto- oder Browsereinstellungen des Nutzers verwendet. Fügen Sie der „src“-Anweisung den Parameter hl und den Sprachcode hinzu, wenn Sie die Bibliothek laden. Beispiel: gsi/client?hl=<iso-639-code>.

Wenn die Richtlinie nicht konfiguriert ist, wird die Standardsprache des Browsers oder die Einstellung des Nutzers der Google-Sitzung verwendet. Daher sehen unterschiedliche Nutzer möglicherweise unterschiedliche Versionen lokalisierter Schaltflächen, die eventuell auch unterschiedliche Größen haben.

Weitere Informationen finden Sie in der folgenden Tabelle:

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

Data-Click-Listener

Du kannst mit dem Attribut data-click_listener eine JavaScript-Funktion definieren, die aufgerufen wird, wenn auf die Schaltfläche „Über Google anmelden“ geklickt wird.

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

In diesem Beispiel wird die Nachricht „Über Google anmelden“ angeklickt... in der Konsole protokolliert, wenn auf die Schaltfläche „Über Google anmelden“ geklickt wird.

data-state

Optional, da mehrere „Über Google anmelden“-Schaltflächen auf derselben Seite gerendert werden können, kannst du jeder Schaltfläche einen eindeutigen String zuweisen. Derselbe String würde zusammen mit dem ID-Token zurückgegeben werden, sodass Sie feststellen können, auf welche Schaltfläche der Nutzer zum Anmelden geklickt hat.

Weitere Informationen finden Sie in der folgenden Tabelle:

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

Serverseitige Integration

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

Endpunkt des ID-Token-Handlers

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

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

Format Name Beschreibung
Cookie g_csrf_token Ein zufälliger String, der sich mit jeder Anfrage an den Handler-Endpunkt ändert.
Anfrageparameter g_csrf_token Ein String, der mit dem vorherigen Cookie-Wert g_csrf_token übereinstimmt.
Anfrageparameter credential Das von Google ausgestellte ID-Token.
Anfrageparameter select_by Die Art und Weise, wie die Anmeldedaten ausgewählt werden.
Anfrageparameter state Dieser Parameter wird nur definiert, wenn der Nutzer zur Anmeldung auf die Schaltfläche „Über Google anmelden“ klickt und das Attribut state der Schaltfläche angegeben ist.

anmelde daten

Nach der Decodierung sieht das ID-Token in etwa so aus:

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

Das Feld sub ist eine global eindeutige Kennung für das Google-Konto. Verwenden Sie nur das Feld sub als Kennung für den Nutzer, da es für alle Google-Konten eindeutig ist und nie wiederverwendet wird. Verwenden Sie keine E-Mail-Adresse als Kennung, da ein Google-Konto mehrere E-Mail-Adressen zu verschiedenen Zeitpunkten haben kann.

Mit den Feldern email, email_verified und hd können Sie feststellen, ob Google eine E-Mail-Adresse hostet und für diese autoritativ ist. In Fällen, in denen Google maßgeblich ist, wird bestätigt, dass der Nutzer der legitime Kontoinhaber ist.

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

  • email hat das Suffix @gmail.com. Dies ist ein Gmail-Konto.
  • email_verified ist „true“ und hd ist festgelegt. Das ist ein Google Workspace-Konto.

Nutzer können sich für Google-Konten registrieren, ohne Gmail oder Google Workspace zu verwenden. Wenn email kein @gmail.com-Suffix enthält und hd nicht vorhanden ist, ist Google nicht autoritativ und es wird empfohlen, den Nutzer mit einem Passwort oder anderen Methoden zu bestätigen. email_verified kann auch "true" sein, da Google den Nutzer ursprünglich bei der Erstellung des Google-Kontos bestätigt hat. Die Inhaberschaft des E-Mail-Kontos des Drittanbieters kann sich jedoch inzwischen geändert haben.

Im Feld exp wird die Ablaufzeit angezeigt, in der Sie das Token auf Ihrer Serverseite überprüfen müssen. Für das ID-Token von „Über Google anmelden“ dauert es eine Stunde. Sie müssen das Token vor Ablauf der Ablaufzeit überprüfen. Verwenden Sie exp nicht für die Sitzungsverwaltung. Ein abgelaufenes ID-Token bedeutet nicht, dass der Nutzer abgemeldet ist. Ihre App ist für die Sitzungsverwaltung der Nutzer verantwortlich.

select_by

In der folgenden Tabelle sind die möglichen Werte für das Feld select_by aufgeführt. Die Art der Schaltfläche, die zusammen mit dem Sitzungs- und Einwilligungsstatus verwendet wird, wird verwendet, um den Wert festzulegen.

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

  • Es wurde eine vorhandene Sitzung gefunden oder der Nutzer hat sich ausgewählt und in einem Google-Konto angemeldet, um eine neue Sitzung einzurichten.

  • Vor der Weitergabe von ID-Token-Anmeldedaten für Ihre App hat der Nutzer entweder

    • die Schaltfläche „Bestätigen“ gedrückt haben, um der Weitergabe der Anmeldedaten zuzustimmen, oder
    • zuvor eingewilligt hatten und über „Konto auswählen“ ein Google-Konto ausgewählt haben.

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

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

state

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

Da mehrere „Über Google anmelden“-Schaltflächen auf derselben Seite gerendert werden können, kannst du jeder Schaltfläche einen eindeutigen String zuweisen. Daher können Sie mit diesem state-Parameter angeben, auf welche Schaltfläche der Nutzer bei der Anmeldung geklickt hat.

Endpunkt des Handlers für Passwort-Anmeldedaten

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

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

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