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

Auf dieser Referenzseite wird die Sign-In JavaScript API beschrieben. Mit dieser API können Sie den One Tap-Hinweis oder die Schaltfläche „Über Google anmelden“ auf Ihren Webseiten anzeigen.

Methode: google.accounts.id.initialize

Mit der Methode google.accounts.id.initialize wird der Client für „Über Google anmelden“ basierend auf dem Konfigurationsobjekt initialisiert. Hier ein Codebeispiel für die Methode:

google.accounts.id.initialize(IdConfiguration)

Im folgenden Codebeispiel wird die Methode google.accounts.id.initialize mit einer onload-Funktion implementiert:

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt();
  };
</script>

Mit der Methode google.accounts.id.initialize wird eine Client-Instanz für „Über Google anmelden“ erstellt, die implizit von allen Modulen auf derselben Webseite verwendet werden kann.

• Sie müssen die google.accounts.id.initialize-Methode nur einmal aufrufen, auch wenn Sie mehrere Module (z. B. One Tap, personalisierte Schaltfläche, Widerruf usw.) auf derselben Webseite verwenden.
• Wenn Sie die Methode google.accounts.id.initialize mehrmals aufrufen, werden nur die Konfigurationen im letzten Aufruf gespeichert und verwendet.

Die Konfigurationen werden jedes Mal zurückgesetzt, wenn Sie die Methode google.accounts.id.initialize aufrufen. Alle nachfolgenden Methoden auf derselben Webseite verwenden sofort die neuen Konfigurationen.

Warnung :Die Methode google.accounts.id.initialize sollte nur einmal aufgerufen werden, auch wenn Sie sowohl One Tap als auch eine Schaltfläche auf derselben Webseite verwenden.

Datentyp: IdConfiguration

In der folgenden Tabelle sind die Felder und Beschreibungen des Datentyps IdConfiguration aufgeführt:

Feld
client_id	Die Client-ID Ihrer Anwendung
color_scheme	Das auf den One Tap-Prompt angewendete Farbschema.
auto_select	Aktiviert die automatische Auswahl.
callback	Die JavaScript-Funktion, die ID-Tokens verarbeitet. Google One Tap und die Schaltfläche „Über Google anmelden“ im popup-UX-Modus verwenden dieses Attribut.
login_uri	Die URL Ihres Anmeldeendpunkts. Für die Schaltfläche „Über Google anmelden“ im redirect-UX-Modus wird dieses Attribut verwendet.
native_callback	Die JavaScript-Funktion, die Anmeldedaten für das Passwort verarbeitet.
cancel_on_tap_outside	Bricht die Aufforderung ab, wenn der Nutzer außerhalb der Aufforderung klickt.
prompt_parent_id	Die DOM-ID des Container-Elements für die Aufforderung zur Einmalanmeldung
nonce	Ein zufälliger String für ID-Tokens
context	Der Titel und die Wörter in der One Tap-Aufforderung
state_cookie_domain	Wenn Sie One Tap in der übergeordneten Domain und ihren Subdomains aufrufen müssen, übergeben Sie die übergeordnete Domain an dieses Feld, damit ein gemeinsames Cookie verwendet wird.
ux_mode	Nutzererfahrung für die Schaltfläche „Über Google anmelden“
allowed_parent_origin	Die Ursprünge, die den Zwischen-iFrame einbetten dürfen. One Tap wird im Zwischen-iFrame-Modus ausgeführt, wenn dieses Feld vorhanden ist.
intermediate_iframe_close_callback	Überschreibt das Standardverhalten des Zwischen-iFrames, wenn Nutzer One Tap manuell schließen.
itp_support	Aktiviert die aktualisierte One Tap-Benutzeroberfläche in ITP-Browsern.
login_hint	Die Kontoauswahl überspringen, indem Sie einen Nutzerhinweis angeben.
hd	Kontenauswahl nach Domain einschränken
use_fedcm_for_prompt	Dem Browser erlauben, Anmeldeaufforderungen für Nutzer zu steuern und den Anmeldevorgang zwischen Ihrer Website und Google zu vermitteln.
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.
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.

client_id

Dieses Feld enthält die Client-ID Ihrer Anwendung, 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	client_id: "CLIENT_ID.apps.googleusercontent.com"

color_scheme

Dieses Feld enthält das Farbschema, das auf den One Tap-Prompt angewendet wird. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ	Erforderlich	Beispiel
String	Optional. Standardmäßig wird das Standardfarbschema des Systems des Nutzers verwendet.	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 Nutzereinstellung ist das Schema entweder hell oder dunkel.
light	Helles Farbschema anwenden
dark	Ein dunkles Farbschema verwenden

auto_select

Dieses Feld bestimmt, ob ein ID-Token automatisch zurückgegeben wird, ohne dass der Nutzer interagieren muss, wenn es nur eine Google-Sitzung gibt, in der Ihre App zuvor genehmigt wurde. Der Standardwert ist false. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ	Erforderlich	Beispiel
boolean	Optional	auto_select: true

callback

Dieses Feld enthält die JavaScript-Funktion, die das ID-Token verarbeitet, das vom One Tap-Prompt oder vom Pop-up-Fenster zurückgegeben wird. Dieses Attribut ist erforderlich, wenn der UX-Modus popup für Google One Tap oder die Schaltfläche „Über Google anmelden“ verwendet wird. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ	Erforderlich	Beispiel
Funktion	Erforderlich für One Tap und den UX-Modus popup	callback: handleResponse

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 Cloud Console konfiguriert haben, und muss unseren Regeln für die Validierung von Weiterleitungs-URIs entsprechen.

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

Die Antwort mit den ID-Token-Anmeldedaten wird an Ihren Anmeldeendpunkt gesendet, wenn ein Nutzer auf die Schaltfläche „Mit Google anmelden“ klickt und der UX-Modus „Weiterleitung“ verwendet wird.

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 nur verwendet, wenn ux_mode: "redirect" festgelegt ist.	login_uri: "https://www.example.com/login"

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

Hinweis :Mit der JavaScript API kann die Antwort von Google One Tap und dem UX-Modus popup der Schaltfläche „Mit Google anmelden“ nur an die JavaScript-Funktion callback zurückgegeben werden. Verwenden Sie die HTML-API, wenn die Antwort automatisch an login_uri gesendet werden muss.

native_callback

Dieses Feld enthält den Namen der JavaScript-Funktion, die das vom integrierten Credential Manager des Browsers zurückgegebene Passwort-Credential verarbeitet. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ	Erforderlich	Beispiel
Funktion	Optional	native_callback: handleResponse

cancel_on_tap_outside

Mit diesem Feld wird festgelegt, ob die One Tap-Anfrage abgebrochen werden soll, wenn ein Nutzer außerhalb der Aufforderung klickt. Der Standardwert ist true. Sie können sie deaktivieren, indem Sie den Wert auf false setzen. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ	Erforderlich	Beispiel
boolean	Optional	cancel_on_tap_outside: false

prompt_parent_id

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

Typ	Erforderlich	Beispiel
String	Optional	prompt_parent_id: 'parent_id'

Nonce

Dieses Feld 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	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.

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	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“

state_cookie_domain

Wenn Sie One Tap in der übergeordneten Domain und ihren Subdomains anzeigen müssen, übergeben Sie die übergeordnete Domain an dieses Feld, damit ein einzelner Cookie mit gemeinsamem Status verwendet wird. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ	Erforderlich	Beispiel
String	Optional	state_cookie_domain: "example.com"

ux_mode

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

Typ	Erforderlich	Beispiel
String	Optional	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.

allowed_parent_origin

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

Typ	Erforderlich	Beispiel
String oder String-Array	Optional	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	Ein Array von Domain-URIs.	["https://news.example.com", "https://local.example.com"]

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

• Musterstrings dürfen nicht nur aus einem 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.

Hinweis :Im Gegensatz zur HTML API ist ein String mit kommagetrennten URIs für das Feld allowed_parent_origin ungültig. Verwenden Sie stattdessen ein JavaScript-Array-Objekt.

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

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 intermediate_iframe_close_callback wird nur im Zwischen-Iframe-Modus berücksichtigt. Die Änderung wirkt sich nur auf das Zwischen-Iframe aus, nicht auf das One Tap-Iframe. Die One Tap-Benutzeroberfläche wird entfernt, bevor der Callback aufgerufen wird.

Typ	Erforderlich	Beispiel
Funktion	Optional	intermediate_iframe_close_callback: logBeforeClose

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	itp_support: true

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 ein ID-Token-Feldwert sub.

Weitere Informationen finden Sie im Feld login_hint in der OpenID Connect-Dokumentation.

Typ	Erforderlich	Beispiel
String, eine E-Mail-Adresse oder der Wert aus dem Feld sub eines ID-Tokens.	Optional	login_hint: '[e-mail]'

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 ([e-mail]) bei der Kontoauswahl aus.

Weitere Informationen finden Sie in der OpenID Connect-Dokumentation im Feld hd.

Typ	Erforderlich	Beispiel
String. Ein voll qualifizierter Domainname oder *.	Optional	hd: '*'

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	use_fedcm_for_prompt: true

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	use_fedcm_for_button: true

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	button_auto_select: true

Methode: google.accounts.id.prompt

Die Methode google.accounts.id.prompt zeigt nach dem Aufrufen der Methode initialize() die Aufforderung für die Einmalanmeldung oder den im Browser integrierten Anmeldedatenmanager an. Hier ein Codebeispiel für die Methode:

 google.accounts.id.prompt(/**
 @type{(function(!PromptMomentNotification):void)=} */ momentListener)

Normalerweise wird die Methode prompt() beim Laden der Seite aufgerufen. Aufgrund des Sitzungsstatus und der Nutzereinstellungen auf Google-Seite wird die UI für die Aufforderung zur Einmalanmeldung möglicherweise nicht angezeigt. Wenn Sie über den UI-Status für verschiedene Momente benachrichtigt werden möchten, übergeben Sie eine Funktion, die UI-Statusbenachrichtigungen empfängt.

Benachrichtigungen werden in den folgenden Fällen ausgelöst:

• Anzeigemoment:Dieser tritt nach dem Aufruf der Methode prompt() ein. Die Benachrichtigung enthält einen booleschen Wert, der angibt, ob die Benutzeroberfläche angezeigt wird oder nicht.

• Übersprungener Moment:Dies tritt auf, wenn die Aufforderung zur Einmalanmeldung durch eine automatische oder manuelle Abbrechen-Aktion geschlossen wird oder wenn Google keine Anmeldedaten ausstellen kann, z. B. wenn die ausgewählte Sitzung von Google abgemeldet wurde.

  In diesen Fällen empfehlen wir, mit den nächsten Identitätsanbietern fortzufahren, sofern vorhanden.

• Moment wurde geschlossen:Dies geschieht, wenn Google Anmeldedaten erfolgreich abruft oder ein Nutzer den Abrufvorgang für Anmeldedaten beenden möchte. Wenn der Nutzer beispielsweise beginnt, seinen Nutzernamen und sein Passwort in Ihr Anmeldedialogfeld einzugeben, können Sie die Methode google.accounts.id.cancel() aufrufen, um die Aufforderung zur Einmalanmeldung zu schließen und einen Moment des Typs „dismissed“ auszulösen.

  Warnung :Wenn Sie sich in einem verworfenen Moment befinden, versuchen Sie es nicht mit den nächsten Identitätsanbietern.

Das folgende Codebeispiel implementiert den übersprungenen Moment:

<script>
  window.onload = function () {
    google.accounts.id.initialize(...);
    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        // continue with another identity provider.
      }
    });
  };
</script>

Hinweis :Um den Datenschutz für Nutzer zu verbessern, werden Benachrichtigungen für den Anmeldemoment absichtlich verzögert, wenn FedCM aktiviert ist. Benachrichtigungen können bis zu einer Minute nach dem tatsächlichen Ereignis empfangen werden.

Hinweis :Für den integrierten Anmeldedatenmanager gibt es keine Benachrichtigung für Momente, die angezeigt, übersprungen oder geschlossen wurden, da diese außerhalb der GIS-Bibliothek auftreten.

Datentyp: PromptMomentNotification

In der folgenden Tabelle sind Methoden und Beschreibungen des Datentyps PromptMomentNotification aufgeführt:

Achtung :FedCM-Änderungen wirken sich auf isDisplayMoment(), isDisplayed(), isNotDisplayed(), getNotDisplayedReason() und getSkippedReason() aus.Weitere Informationen finden Sie auf der Seite Zu FedCM migrieren.

Methode
isDisplayMoment()	Bezieht sich diese Benachrichtigung auf einen Anzeigemoment? Hinweis : Wenn FedCM aktiviert ist, wird diese Benachrichtigung nicht ausgelöst. Weitere Informationen finden Sie auf der Seite Zu FedCM migrieren.
isDisplayed()	Wird diese Benachrichtigung für einen Display-Moment angezeigt und wird die Benutzeroberfläche eingeblendet? Hinweis : Wenn FedCM aktiviert ist, wird diese Benachrichtigung nicht ausgelöst. Weitere Informationen finden Sie auf der Seite Zu FedCM migrieren.
isNotDisplayed()	Bezieht sich diese Benachrichtigung auf einen Anzeigemoment und wird die Benutzeroberfläche nicht angezeigt? Hinweis : Wenn FedCM aktiviert ist, wird diese Benachrichtigung nicht ausgelöst. Weitere Informationen finden Sie auf der Seite Zu FedCM migrieren.
getNotDisplayedReason()	Der genaue Grund, warum die Benutzeroberfläche nicht angezeigt wird. Folgende Werte sind möglich: browser_not_supported invalid_client missing_client_id opt_out_or_no_session secure_http_required suppressed_by_user unregistered_origin unknown_reason Hinweis : Wenn FedCM aktiviert ist, wird diese Methode nicht unterstützt. Weitere Informationen finden Sie auf der Seite Zu FedCM migrieren.
isSkippedMoment()	Bezieht sich diese Benachrichtigung auf einen übersprungenen Moment?
getSkippedReason()	Der detaillierte Grund für den übersprungenen Moment. Folgende Werte sind möglich: auto_cancel user_cancel tap_outside issuing_failed Hinweis : Wenn FedCM aktiviert ist, wird diese Methode nicht unterstützt. Weitere Informationen finden Sie auf der Seite Zu FedCM migrieren.
isDismissedMoment()	Bezieht sich diese Benachrichtigung auf einen verworfenen Moment?
getDismissedReason()	Der genaue Grund für die Kündigung. Folgende Werte sind möglich: credential_returned cancel_called flow_restarted
getMomentType()	Gibt einen String für den Momenttyp zurück. Folgende Werte sind möglich: display skipped dismissed

Datentyp: CredentialResponse

Wenn Ihre callback-Funktion aufgerufen wird, wird ein CredentialResponse-Objekt als Parameter übergeben. In der folgenden Tabelle sind die Felder aufgeführt, die im Anmeldedaten-Antwortobjekt enthalten sind:

Feld
credential	Das codierte JWT-ID-Token, das von Google ausgestellt wird.
select_by	Wie sich der Nutzer angemeldet hat.
state	Dieses Feld 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

Dieses Feld enthält das ID-Token als base64-codierten JSON Web Token-String (JWT).

Decodiert sieht das JWT 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": "[e-mail]", // 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": "Elisa",
  "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.

Warnung :Verwenden Sie die E-Mail-Adresse nicht als Kennzeichnung, da ein Google-Konto zu verschiedenen Zeitpunkten mehrere E-Mail-Adressen haben kann. Verwenden Sie immer das Feld sub als Kennung für den Nutzer.

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_verfied 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. exp nicht für die Sitzungsverwaltung verwenden: Ein abgelaufenes ID-Token bedeutet nicht, dass der Nutzer abgemeldet ist. Ihre App ist für die Sitzungsverwaltung Ihrer Nutzer verantwortlich.

select_by

In der folgenden Tabelle sind die möglichen Werte für das Feld select_by aufgeführt. Der 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.
itp	Ein Nutzer, der zuvor die Einwilligung erteilt hatte, hat in ITP-Browsern auf „Einmal tippen“ geklickt.
itp_confirm	Ein Nutzer, der keine Einwilligung erteilt hat, hat in ITP-Browsern auf „Einmal tippen“ getippt und dann auf die Schaltfläche „Weiter“ getippt, um die Einwilligung zu erteilen und Anmeldedaten freizugeben.
btn	Ein Nutzer, der zuvor die Einwilligung erteilt hat, hat auf die Schaltfläche „Über Google anmelden“ geklickt und in „Konto auswählen“ ein Google-Konto ausgewählt, um Anmeldedaten freizugeben.
btn_confirm	Ein Nutzer, der keine Einwilligung erteilt hat, hat auf die Schaltfläche „Mit Google anmelden“ und dann auf „Weiter“ geklickt, um die Einwilligung zu erteilen und Anmeldedaten freizugeben.

Bundesstaat

Dieses Feld wird nur definiert, wenn ein Nutzer auf die Schaltfläche „Über Google anmelden“ klickt, um sich anzumelden, und das Attribut state der angeklickten Schaltfläche angegeben ist. Der Wert dieses Felds entspricht dem Wert, den Sie im Attribut 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. Daher können Sie dieses state-Feld verwenden, um zu ermitteln, auf welche Schaltfläche der Nutzer geklickt hat, um sich anzumelden.

Methode: google.accounts.id.renderButton

Mit der Methode google.accounts.id.renderButton wird auf Ihren Webseiten eine Schaltfläche „Über Google anmelden“ gerendert.

Hier ein Codebeispiel für die Methode:

google.accounts.id.renderButton(
      /** @type{!HTMLElement} */ parent,
      /** @type{!GsiButtonConfiguration} */ options
    )

Datentyp: GsiButtonConfiguration

In der folgenden Tabelle sind die Felder und Beschreibungen des Datentyps GsiButtonConfiguration aufgeführt:

Attribut
type	Der Schaltflächentyp: Symbol oder Standardschaltfläche.
theme	Das Design der Schaltfläche. Beispiel: filled_blue oder filled_black.
size	Die Größe der Schaltfläche. Beispiel: klein oder groß.
text	Der Text der Schaltfläche. Beispiele: „Über Google anmelden“ oder „Mit Google registrieren“.
shape	Die Form der Schaltfläche. Beispiel: rechteckig oder kreisförmig.
logo_alignment	Die Ausrichtung des Google-Logos: links oder zentriert.
width	Die Breite der Schaltfläche in Pixeln.
locale	Wenn festgelegt, wird die Sprache der Schaltfläche gerendert.
click_listener	Falls festgelegt, wird diese Funktion aufgerufen, wenn auf die Schaltfläche „Über Google anmelden“ geklickt wird.
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.

Typ

Der Schaltflächentyp. Der Standardwert ist standard.

Weitere Informationen finden Sie in der folgenden Tabelle:

Typ	Erforderlich	Beispiel
String	Ja	type: "icon"

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

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

Design

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

Typ	Erforderlich	Beispiel
String	Optional	theme: "filled_blue"

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

Design
outline	Ein Standard-Schaltflächen-Theme.
filled_blue	Ein Design mit blauen Schaltflächen.
filled_black	Ein Schaltflächen-Design mit schwarzer Füllung.

Größe

Die Größe der Schaltfläche. Der Standardwert ist large. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ	Erforderlich	Beispiel
String	Optional	size: "small"

In der folgenden Tabelle sind die verfügbaren Schaltflächengrößen und ihre Beschreibungen aufgeführt:

Größe
large	Eine große Schaltfläche.
medium	Eine mittelgroße Schaltfläche.
small	Eine kleine Schaltfläche.

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 text-Attributen. Die einzige Ausnahme ist, wenn der Text für die Barrierefreiheit des Bildschirms gelesen wird.

Weitere Informationen finden Sie in der folgenden Tabelle:

Typ	Erforderlich	Beispiel
String	Optional	text: "signup_with"

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

Text
signin_with	Der Schaltflächentext lautet „Über Google anmelden“.
signup_with	Der Schaltflächentext lautet „Mit Google registrieren“.
continue_with	Der Schaltflächentext lautet „Weiter mit Google“.
signin	Der Schaltflächentext lautet „Anmelden“.

shape

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

Typ	Erforderlich	Beispiel
String	Optional	shape: "rectangular"

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

Form
rectangular	Die rechteckige Schaltfläche. Wenn sie für den Schaltflächentyp icon verwendet wird, entspricht sie square.
pill	Die pillenförmige Schaltfläche. Wenn sie für den Schaltflächentyp icon verwendet wird, entspricht sie circle.
circle	Die kreisförmige Schaltfläche. Wenn sie für den Schaltflächentyp standard verwendet wird, entspricht sie pill.
square	Die quadratische Schaltfläche. Wenn sie für den Schaltflächentyp standard verwendet wird, entspricht sie rectangular.

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	logo_alignment: "center"

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

logo_alignment
left	Das Google-Logo wird linksbündig ausgerichtet.
center	Zentriert das Google-Logo.

Breite

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	width: "400"

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	locale: "zh_CN"

click_listener

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

  google.accounts.id.renderButton(document.getElementById("signinDiv"), {
      theme: 'outline',
      size: 'large',
      click_listener: onClickHandler
    });

  
  function onClickHandler(){
    console.log("Sign in with Google button clicked...")
  }
  

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

Bundesstaat

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"

Datentyp: Anmeldedaten

Wenn Ihre native_callback-Funktion aufgerufen wird, wird ein Credential-Objekt als Parameter übergeben. In der folgenden Tabelle sind die Felder aufgeführt, die das Objekt enthält:

Feld
id	Identifiziert den Nutzer.
password	Das Passwort

Methode: google.accounts.id.disableAutoSelect

Wenn sich der Nutzer von Ihrer Website abmeldet, müssen Sie die Methode google.accounts.id.disableAutoSelect aufrufen, um den Status in Cookies zu erfassen. Dadurch wird eine UX-Endlosschleife verhindert. Hier ein Code-Snippet der Methode:

google.accounts.id.disableAutoSelect()

Im folgenden Codebeispiel wird die Methode google.accounts.id.disableAutoSelect mit einer onSignout()-Funktion implementiert:

<script>
  function onSignout() {
    google.accounts.id.disableAutoSelect();
  }
</script>

Methode: google.accounts.id.storeCredential

Diese Methode ist ein Wrapper für die Methode store() der integrierten Credential Manager API des Browsers. Daher kann sie nur zum Speichern von Anmeldedaten für Passwörter verwendet werden. Hier ein Codebeispiel für die Methode:

google.accounts.id.storeCredential(Credential, callback)

Im folgenden Codebeispiel wird die Methode google.accounts.id.storeCredential mit einer onSignIn()-Funktion implementiert:

<script>
  function onSignIn() {
    let cred = {id: '...', password: '...'};
    google.accounts.id.storeCredential(cred);
  }
</script>

Methode: google.accounts.id.cancel

Sie können den One Tap-Ablauf abbrechen, indem Sie den Prompt aus dem DOM der vertrauenden Partei entfernen. Der Abbrechen-Vorgang wird ignoriert, wenn bereits Anmeldedaten ausgewählt sind. Hier ein Codebeispiel für die Methode:

google.accounts.id.cancel()

Im folgenden Codebeispiel wird die Methode google.accounts.id.cancel() mit einer onNextButtonClicked()-Funktion implementiert:

<script>
  function onNextButtonClicked() {
    google.accounts.id.cancel();
    showPasswordPage();
  }
</script>

Callback für das Laden der Bibliothek: onGoogleLibraryLoad

Sie können einen onGoogleLibraryLoad-Callback registrieren. Sie wird nach dem Laden der Sign-in with Google-JavaScript-Bibliothek benachrichtigt:

window.onGoogleLibraryLoad = () => {
    ...
};

Dieser Callback ist nur eine Abkürzung für den window.onload-Callback. Es gibt keine Verhaltensunterschiede.

Im folgenden Codebeispiel wird ein onGoogleLibraryLoad-Callback implementiert:

<script>
  window.onGoogleLibraryLoad = () => {
   google.accounts.id.initialize({
     ...
   });
   google.accounts.id.prompt();
  };
</script>

Methode: google.accounts.id.revoke

Mit der Methode google.accounts.id.revoke wird die OAuth-Gewährung widerrufen, die zum Teilen des ID-Tokens für den angegebenen Nutzer verwendet wurde. Hier ein Code-Snippet zur Veranschaulichung:javascript google.accounts.id.revoke(login_hint, callback)

Parameter	Typ	Beschreibung
login_hint	String	Die E-Mail-Adresse oder eindeutige ID des Google-Kontos des Nutzers. Die ID ist die sub-Property der credential-Nutzlast.
callback	Funktion	Optionaler Handler für RevocationResponse.

Das folgende Codebeispiel zeigt, wie die Methode revoke mit einer ID verwendet wird.

  google.accounts.id.revoke('1618033988749895', done => {
    console.log(done.error);
  });

Wichtiger Hinweis :Durch Aufrufen dieser Methode werden alle OAuth 2.0-Bereiche widerrufen, die zuvor von der „Mit Google anmelden“-Clientbibliothek gewährt wurden.

Datentyp: RevocationResponse

Wenn Ihre callback-Funktion aufgerufen wird, wird ein RevocationResponse-Objekt als Parameter übergeben. In der folgenden Tabelle sind die Felder aufgeführt, die im Objekt der Widerrufsantwort enthalten sind:

Feld
successful	Dieses Feld ist der Rückgabewert des Methodenaufrufs.
error	Dieses Feld enthält optional eine detaillierte Fehlermeldung.

erfolgreich

Dieses Feld ist ein boolescher Wert, der auf „true“ gesetzt wird, wenn der Aufruf der Methode „revoke“ erfolgreich war, und auf „false“, wenn er fehlgeschlagen ist.

Fehler

Dieses Feld ist ein Stringwert und enthält eine detaillierte Fehlermeldung, wenn der revoke-Methodenaufruf fehlgeschlagen ist. Bei Erfolg ist es nicht definiert.