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

Auf dieser Referenzseite wird die Sign-In JavaScript API beschrieben. Mit dieser API können Sie die Aufforderung zum schnellen Anmelden oder die Schaltfläche „Über Google anmelden“ auf Ihren Webseiten anzeigen lassen.

Methode: google.accounts.id.initial

Die Methode google.accounts.id.initialize initialisiert den „Über Google anmelden“-Client basierend auf dem Konfigurationsobjekt. 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 Clientinstanz von „Über Google anmelden“ erstellt, die implizit von allen Modulen auf derselben Webseite verwendet werden kann.

  • Sie müssen die Methode google.accounts.id.initialize 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.

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

Datentyp: IdConfiguration

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

Feld
client_id Client-ID Ihrer Anwendung
auto_select Aktiviert die automatische Auswahl.
callback Die JavaScript-Funktion, die ID-Tokens verarbeitet. Dieses Attribut wird für Google One Tap und die Schaltfläche „Über Google anmelden“ im UX-Modus popup verwendet.
login_uri Die URL Ihres Anmeldeendpunkts. Die Schaltfläche „Über Google anmelden“ für den redirect UX-Modus verwendet dieses Attribut.
native_callback Die JavaScript-Funktion, die Passwort-Anmeldedaten verarbeitet.
cancel_on_tap_outside Bricht die Aufforderung ab, wenn der Nutzer auf eine Stelle außerhalb der Aufforderung klickt.
prompt_parent_id Die DOM-ID des Containerelements für die One-Tap-Aufforderung
nonce Ein zufälliger String für ID-Tokens
context Titel und Wörter in der One Tap-Aufforderung
state_cookie_domain Wenn Sie One Tap in der übergeordneten Domain und ihren Subdomains aufrufen möchten, geben Sie die übergeordnete Domain in dieses Feld ein, damit ein einzelnes freigegebenes Cookie verwendet wird.
ux_mode Der UX-Vorgang der Schaltfläche „Über Google anmelden“
allowed_parent_origin Die Ursprünge, in denen der dazwischenliegende iFrame eingebettet werden darf. One Tap wird im iFrame-Zwischenmodus ausgeführt, wenn dieses Feld vorhanden ist.
intermediate_iframe_close_callback Überschreibt das standardmäßige iFrame-Zwischenverhalten, wenn Nutzer One Tap manuell schließen.
itp_support Aktiviert die verbesserte One Tap-Benutzeroberfläche in ITP-Browsern.
login_hint Mit einem Nutzerhinweis kannst du die Kontoauswahl überspringen.
hd Kontoauswahl nach Domain einschränken
use_fedcm_for_prompt Dem Browser erlauben, Aufforderungen zur Nutzeranmeldung zu steuern und den Anmeldevorgang zwischen Ihrer Website und Google zu vermitteln
enable_redirect_uri_validation Aktivieren Sie die Weiterleitung über eine Schaltfläche, die den Gültigkeitsregeln für Weiterleitungs-URIs entspricht.

client_id

Dieses Feld enthält 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 client_id: "CLIENT_ID.apps.googleusercontent.com"

auto_select

Mit diesem Feld wird festgelegt, ob ein ID-Token automatisch ohne Nutzerinteraktion zurückgegeben wird, wenn Ihre App zuvor nur durch eine Google-Sitzung 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 ist die JavaScript-Funktion, die das ID-Token verarbeitet, das von der One Tap-Aufforderung oder dem Pop-up-Fenster zurückgegeben wird. Dieses Attribut ist erforderlich, wenn Google One Tap oder die Schaltfläche „Über Google anmelden“ popup im UX-Modus 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. Außerdem muss er 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 auf die Anmeldedaten des ID-Tokens wird an deinen Anmeldeendpunkt gesendet, wenn ein Nutzer auf die Schaltfläche „Über Google anmelden“ klickt und der UX-Weiterleitungsmodus verwendet wird.

Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Optional Beispiel
URL Standardmäßig ist der URI der aktuellen Seite oder der von Ihnen angegebene Wert festgelegt.
Wird nur verwendet, wenn ux_mode: "redirect" festgelegt ist.
login_uri: "https://www.example.com/login"

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

Hier sehen Sie eine Beispielanfrage an Ihren Anmeldeendpunkt:

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

credential=ID_TOKEN

native_callback

Dieses Feld ist der Name der JavaScript-Funktion, die die Anmeldedaten für das Passwort verarbeitet, die vom nativen Anmeldedaten-Manager des Browsers zurückgegeben werden. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
Funktion Optional native_callback: handleResponse

cancel_on_tap_outside

In 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 festlegen. 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 dies nicht der Fall ist, wird die Aufforderung für die One-Tap-Funktion rechts oben 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 von Ihrer Umgebung unterstützte maximale JWT-Größe und die HTTP-Größenbeschränkungen für Browser und Server begrenzt.

context

Mit diesem Feld wird der Text des Titels und der Nachrichten im Prompt für die One-Tap-Funktion geändert. 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 „Über Google anmelden“
signup „Über Google registrieren“
use „Mit Google verwenden“

Wenn Sie One Tap in der übergeordneten Domain und ihren Subdomains anzeigen möchten, geben Sie die übergeordnete Domain in dieses Feld ein, damit ein einzelnes Cookie mit freigegebenen 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 legen Sie den UX-Vorgang fest, der von der Schaltfläche „Über Google anmelden“ verwendet wird. Der Standardwert ist popup. Dieses Attribut hat keine Auswirkungen auf die OneTap-UX. 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-Anmeldevorgang in einem Pop-up-Fenster aus.
redirect Führt den UX-Anmeldevorgang durch eine vollständige Seitenweiterleitung aus.

allowed_parent_origin

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

Typ Erforderlich Beispiel
String oder String-Array Optional 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. Wie oben erwähnt, stimmt "https://.example.com" mit example.com und den zugehörigen Subdomains überein. Sie können auch ein Array verwenden, um zwei verschiedene Domains darzustellen. Beispiel: ["https://example1.com", "https://.example2.com"] stimmt mit den Domains example1.com, example2.com und den Subdomains von example2.com überein.
  • Domains mit Platzhaltern müssen mit dem sicheren Protokoll „https://“ beginnen. Daher gilt "*.example.com" als ungültig.

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

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

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

Typ Erforderlich Beispiel
Funktion Optional intermediate_iframe_close_callback: logBeforeClose

itp_support

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

Typ Erforderlich Beispiel
boolean Optional itp_support: true

login_hint

Wenn Ihre Anwendung im Voraus weiß, welcher Nutzer angemeldet sein soll, kann sie Google einen Anmeldehinweis geben. Wenn der Vorgang erfolgreich war, wird die Kontoauswahl übersprungen. Zulässige Werte sind eine E-Mail-Adresse oder der Wert des Felds sub eines ID-Tokens.

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

Typ Erforderlich Beispiel
String, E-Mail-Adresse oder Wert aus einem ID-Token-sub-Feld. Optional login_hint: 'elisa.beckett@gmail.com'

HD

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

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

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

use_fedcm_for_prompt

Dem Browser erlauben, Aufforderungen zur Nutzeranmeldung zu steuern und den Anmeldevorgang zwischen Ihrer Website und Google zu vermitteln Die Standardeinstellung ist "false". Weitere Informationen finden Sie auf der Seite Zu FedCM migrieren.

Typ Erforderlich Beispiel
boolean Optional use_fedcm_for_prompt: true

enable_redirect_uri_validation

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

Typ Erforderlich Beispiel
boolean Optional enable_redirect_uri_validation: true

Methode: google.accounts.id.prompt

Die Methode google.accounts.id.prompt ruft die Aufforderung für die One-Tap-Authentifizierung oder den nativen Anmeldedaten-Manager des Browsers auf, nachdem die Methode initialize() aufgerufen wurde. Hier ein Codebeispiel für die Methode:

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

Normalerweise wird die prompt()-Methode beim Laden der Seite aufgerufen. Aufgrund des Sitzungsstatus und der Nutzereinstellungen auf Google-Seite wird die One Tap-Aufforderung möglicherweise nicht angezeigt. Wenn Sie zu verschiedenen Zeitpunkten über den UI-Status benachrichtigt werden möchten, übergeben Sie eine Funktion, um Benachrichtigungen zum UI-Status zu erhalten.

Benachrichtigungen werden in den folgenden Momenten ausgelöst:

  • Anzeigenmoment:Dieser tritt auf, nachdem die Methode prompt() aufgerufen wurde. Die Benachrichtigung enthält einen booleschen Wert, der angibt, ob die Benutzeroberfläche angezeigt wird oder nicht.
  • Übersprungener Moment:Dieser Moment tritt auf, wenn die One Tap-Aufforderung durch einen automatischen oder manuellen Abbruch geschlossen wird oder wenn Google keine Anmeldedaten ausgibt, z. B. wenn sich die ausgewählte Sitzung von Google abgemeldet hat.

    In diesen Fällen empfehlen wir Ihnen, mit dem nächsten Identitätsanbieter fortzufahren, falls vorhanden.

  • Abgelehnt:Dieser Status wird angezeigt, wenn Google Anmeldedaten erfolgreich abgerufen hat oder ein Nutzer den Abrufvorgang abbrechen möchte. Wenn der Nutzer beispielsweise beginnt, seinen Nutzernamen und sein Passwort in Ihrem Anmeldedialogfeld einzugeben, können Sie die Methode google.accounts.id.cancel() aufrufen, um die Aufforderung zum schnellen Anmelden zu schließen und einen Moment der Ablehnung auszulösen.

Im folgenden Codebeispiel wird der übersprungene Moment implementiert:

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

Datentyp: PromptMomentNotification

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

Methode
isDisplayMoment() Bezieht sich diese Benachrichtigung auf einen Displaymoment?

Hinweis : Wenn FedCM aktiviert ist, wird diese Benachrichtigung nicht ausgelöst. Weitere Informationen finden Sie auf der Seite Zu FedCM migrieren.
isDisplayed() Ist diese Benachrichtigung für einen Displaymoment und wird die Benutzeroberfläche angezeigt?

Hinweis : Wenn FedCM aktiviert ist, wird diese Benachrichtigung nicht gesendet. Weitere Informationen finden Sie auf der Seite Zu FedCM migrieren.
isNotDisplayed() Handelt es sich bei dieser Benachrichtigung um einen Anzeigemoment und die UI wird 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 detaillierte 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() Ist diese Benachrichtigung ein übersprungener Moment?
getSkippedReason()

Der detaillierte Grund für das Überspringen des Moments. 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 geschlossenen Moment?
getDismissedReason()

Den detaillierten 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

Beim Aufrufen der Funktion callback wird ein CredentialResponse-Objekt als Parameter übergeben. In der folgenden Tabelle sind die Felder aufgeführt, die im Antwortobjekt für Anmeldedaten enthalten sind:

Feld
credential Dieses Feld ist das zurückgegebene ID-Token.
select_by In diesem Feld wird festgelegt, wie die Anmeldedaten ausgewählt werden.
state Dieses Feld wird nur definiert, wenn der Nutzer zur Anmeldung auf die Schaltfläche „Über Google anmelden“ klickt und das state-Attribut der Schaltfläche angegeben ist.

Anmeldedaten

Dieses Feld ist das ID-Token als base64-codierter JSON Web Token-String (JWT).

Nach der Dekodierung 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": "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": "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. Nur das Feld sub als Kennung für den Nutzer verwenden, da es unter allen Google-Konten eindeutig ist und nie wiederverwendet wird. Verwenden Sie keine E-Mail-Adresse als Kennung, da ein Google-Konto zu verschiedenen Zeitpunkten mehrere E-Mail-Adressen haben kann.

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

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

  • email hat das Suffix @gmail.com. Das ist ein Gmail-Konto.
  • Wenn email_verified wahr ist und hd festgelegt ist, handelt es sich um ein Google Workspace-Konto.

Nutzer können sich für Google-Konten registrieren, ohne Gmail oder Google Workspace zu verwenden. Wenn email kein @gmail.com-Suffix enthält und hd nicht vorhanden ist, ist Google nicht autoritativ. Es werden dann Passwort- oder andere Methoden zur Identitätsbestätigung empfohlen, um den Nutzer zu bestätigen. email_verfied kann auch „true“ sein, da Google den Nutzer ursprünglich bestätigt hat, als das Google-Konto erstellt wurde. Die Inhaberschaft des E-Mail-Kontos des Drittanbieters hat sich jedoch inzwischen geändert.

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

select_by

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

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

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

  • Vor der Freigabe von ID-Token-Anmeldedaten für Ihre App muss der Nutzer entweder

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

Der Wert dieses Feldes ist auf einen dieser Typen festgelegt,

Wert Beschreibung
auto Automatische Anmeldung eines Nutzers mit einer bestehenden Sitzung, der zuvor seine Einwilligung zur Weitergabe von Anmeldedaten erteilt hat. Gilt nur für Browser, die FedCM nicht unterstützen.
user Ein Nutzer mit einer bestehenden Sitzung, der zuvor seine Einwilligung erteilt hatte, hat auf die Schaltfläche „Mit One Tap fortfahren“ geklickt, um Anmeldedaten zu teilen. Gilt nur für Browser, die FedCM nicht unterstützen.
fedcm Ein Nutzer hat auf die Schaltfläche „Mit One Tap fortfahren“ geklickt, um Anmeldedaten mit FedCM zu teilen. Gilt nur für von FedCM unterstützte Browser.
fedcm_auto Automatische Anmeldung eines Nutzers mit einer bestehenden Sitzung, der zuvor seine Einwilligung zur Weitergabe von Anmeldedaten über FedCM One Tap erteilt hat. Gilt nur für von FedCM unterstützte Browser.
user_1tap Ein Nutzer mit einer bestehenden Sitzung hat auf die Schaltfläche „Mit One Tap fortfahren“ geklickt, um seine Einwilligung zu erteilen und Anmeldedaten zu teilen. Gilt nur für Chrome 75 und höher.
user_2tap Ein Nutzer ohne aktive Sitzung hat auf die Schaltfläche „Mit One Tap fortfahren“ gedrückt, um ein Konto auszuwählen, und dann in einem Pop-up-Fenster auf die Schaltfläche „Bestätigen“, um seine Einwilligung zu erteilen und Anmeldedaten zu teilen. Gilt für nicht auf Chromium basierende Browser.
itp Ein Nutzer mit einer bestehenden Sitzung, der zuvor seine Einwilligung erteilt hat, hat in einem ITP auf „Mit nur einmal tippen“ geklickt.
itp_confirm Ein Nutzer mit einer bestehenden Sitzung hat in ITP-Browsern auf „One Tap“ und dann auf die Schaltfläche „Bestätigen“ gedrückt, um seine Einwilligung zu erteilen und Anmeldedaten freizugeben.
itp_add_session Ein Nutzer ohne aktive Sitzung, der zuvor seine Einwilligung erteilt hat, hat in einem ITP auf „One Tap“ gedrückt, um ein Google-Konto auszuwählen und Anmeldedaten freizugeben.
itp_confirm_add_session Ein Nutzer ohne aktive Sitzung hat zuerst die One-Tap-Funktion in ITP-Browsern verwendet, um ein Google-Konto auszuwählen, und dann die Schaltfläche „Bestätigen“ gedrückt, um seine Einwilligung zu erteilen und Anmeldedaten zu teilen.
btn Ein Nutzer mit einer bestehenden Sitzung, der zuvor seine Einwilligung erteilt hat, hat auf die Schaltfläche „Über Google anmelden“ geklickt und unter „Konto auswählen“ ein Google-Konto zum Teilen der Anmeldedaten ausgewählt.
btn_confirm Ein Nutzer mit einer bestehenden Sitzung hat auf die Schaltfläche „Über Google anmelden“ und dann auf die Schaltfläche „Bestätigen“ geklickt, um seine Einwilligung zu erteilen und Anmeldedaten freizugeben.
btn_add_session Ein Nutzer ohne aktive Sitzung, der zuvor seine Einwilligung erteilt hat, hat auf die Schaltfläche „Über Google anmelden“ geklickt, um ein Google-Konto auszuwählen und Anmeldedaten zu teilen.
btn_confirm_add_session Ein Nutzer ohne aktive Sitzung hat zuerst auf die Schaltfläche „Über Google anmelden“ geklickt, um ein Google-Konto auszuwählen, und dann auf die Schaltfläche „Bestätigen“, um seine Einwilligung zu erteilen und Anmeldedaten zu teilen.

Bundesstaat

Dieses Feld wird nur definiert, wenn der Nutzer zur Anmeldung auf eine „Über Google anmelden“-Schaltfläche klickt und das Attribut state der angeklickten Schaltfläche angegeben ist. Der Wert dieses Felds entspricht dem Wert, den du im Attribut 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. Anhand dieses Felds state können Sie also 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 die 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 Schaltflächentext. Beispiel: „Über Google anmelden“ oder „Über Google registrieren“.
shape Die Form der Schaltfläche. Beispiel: rechteckig oder rund.
logo_alignment Ausrichtung des Google-Logos: links oder mittig
width Die Breite der Schaltfläche in Pixeln.
locale Wenn festgelegt, wird die Sprache der Schaltfläche gerendert.
click_listener Wenn diese Funktion festgelegt ist, wird sie 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 jedes Attributs und 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 Themen und ihre Beschreibungen aufgeführt:

Design
outline
Ein Standard-Schaltflächendesign.
filled_blue
Ein blaues Schaltflächendesign.
filled_black
Ein schwarzes Schaltflächendesign.

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 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 mittlere Symbolschaltfläche
Eine mittelgroße Schaltfläche.
small
Eine kleine Taste Eine kleine Symbolschaltfläche
Eine kleine Schaltfläche.

Text

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

shape

Die Schaltflächenform. 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 ovale 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 standard-Schaltflächentyp. 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 links ausgerichtet.
center
Das Google-Logo wird zentriert ausgerichtet.

Breite

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

Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String Optional width: "400"

locale

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

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

Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String Optional 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 Über Google anmelden-Schaltfläche angeklickt… in der Konsole protokolliert, wenn auf die Schaltfläche „Über Google anmelden“ geklickt wird.

Bundesstaat

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 wird zusammen mit dem ID-Token zurückgegeben, damit Sie erkennen können, auf welche Schaltfläche der Nutzer geklickt hat, um sich anzumelden.

Weitere Informationen finden Sie in der folgenden Tabelle:

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

Datentyp: Anmeldedaten

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

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. So wird ein UX-Deadloop 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 nativen Credential Manager API des Browsers. Daher kann es nur zum Speichern von Passwort-Anmeldedaten 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-Vorgang abbrechen, indem Sie die Aufforderung aus dem DOM der vertrauenden Partei entfernen. Der Abbruchvorgang 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>

Rückruf beim Laden der Bibliothek: onGoogleLibraryLoad

Du kannst einen onGoogleLibraryLoad-Callback registrieren. Die Benachrichtigung wird angezeigt, nachdem die JavaScript-Bibliothek „Über Google anmelden“ geladen wurde:

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

Dieser Rückruf ist nur eine Verknüpfung für den window.onload-Rückruf. Es gibt keine Unterschiede beim Verhalten.

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-Berechtigung widerrufen, die zum Freigeben des ID-Tokens für den angegebenen Nutzer verwendet wurde. Hier ein Code-Snippet der Methode: 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-Eigenschaft der Anmeldedaten-Nutzlast.
callback Funktion Optionaler RevocationResponse-Handler.

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

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

Datentyp: Widerrufsantwort

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

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

erfolgreich

Dieses Feld ist ein boolescher Wert, der auf „true“ gesetzt wird, wenn der Widerrufsmethodaufruf erfolgreich war, oder auf „false“, wenn er fehlgeschlagen ist.

Fehler

Dieses Feld ist ein Stringwert und enthält eine detaillierte Fehlermeldung, wenn der Widerruf fehlgeschlagen ist. Bei Erfolg ist der Wert nicht definiert.