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

Auf dieser Referenzseite wird die Sign-In JavaScript API beschrieben. Du kannst diese API verwenden, um die One Tap-Aufforderung oder die Schaltfläche „Über Google anmelden“ auf deinen Webseiten anzuzeigen.

Methode: google.accounts.id.initial

Die Methode google.accounts.id.initialize initialisiert den „Über Google anmelden“-Client anhand des Konfigurationsobjekts. Hier ein Codebeispiel der 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>

Die Methode google.accounts.id.initialize erstellt eine „Über Google anmelden“-Clientinstanz, 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.

Die Konfigurationen werden bei jedem Aufruf der Methode google.accounts.id.initialize zurückgesetzt. Alle nachfolgenden Methoden auf derselben Webseite verwenden sofort die neuen Konfigurationen.

Datentyp: IdConfiguration

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

Field
client_id Die Client-ID Ihrer Anwendung
auto_select Aktiviert die automatische Auswahl.
callback Die JavaScript-Funktion, die ID-Tokens verarbeitet. „Google One Tap“ und die Schaltfläche „Über Google anmelden“ popup verwenden dieses Attribut.
login_uri Die URL Ihres Anmeldeendpunkts. In der Schaltfläche „Über Google anmelden“ redirect wird dieses Attribut verwendet.
native_callback Die JavaScript-Funktion, die Passwortanmeldedaten 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 der One Tap-Eingabeaufforderung
nonce Ein zufälliger String für ID-Tokens
context Titel und Wörter des One Tap-Prompts
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 einzelnes gemeinsames Cookie verwendet wird.
ux_mode UX-Vorgang für die Schaltfläche „Über Google anmelden“
allowed_parent_origin Die Ursprünge, in die der Zwischen-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 zwischenzeitliche iFrame-Verhalten, wenn Nutzer One Tap manuell schließen.
itp_support Aktiviert aktualisierte One Tap-UX in ITP-Browsern.
login_hint Überspringen Sie die Kontoauswahl, indem Sie einen Nutzerhinweis eingeben.
hd Kontoauswahl nach Domain beschränken.
use_fedcm_for_prompt Erlauben Sie dem Browser, die Anmeldeaufforderungen von Nutzern zu steuern und den Anmeldevorgang zwischen Ihrer Website und Google zu vermitteln.

client_id

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

auto_select

Dieses Feld bestimmt, ob ein ID-Token automatisch ohne Nutzerinteraktion zurückgegeben wird, wenn Ihre Anwendung zuvor nur in einer 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, mit der das von der One Tap-Aufforderung oder dem Pop-up-Fenster zurückgegebene ID-Token verarbeitet wird. Dieses Attribut ist erforderlich, wenn Google One Tap oder die Schaltfläche „Über Google anmelden“ popup als 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. Er muss unseren Validierungsregeln für Weiterleitungs-URIs entsprechen.

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

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 Weiterleitungsmodus verwendet wird.

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 nur verwendet, wenn ux_mode: "redirect" festgelegt ist.
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

native_callback

Dieses Feld ist der Name der JavaScript-Funktion, die die Passwortanmeldedaten 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 wird, wenn ein Nutzer auf eine Stelle außerhalb der Aufforderung klickt. Der Standardwert ist true. Sie können sie deaktivieren, wenn 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

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 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 von Ihrer Umgebung unterstützte JWT-Größe und die HTTP-Größenbeschränkungen der einzelnen Browser und Server begrenzt.

context

In diesem Feld werden der Text des Titels und der Nachrichten in der One Tap-Aufforderung 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 „Bei Google registrieren“
use „Mit Google verwenden“

Wenn One Tap in der übergeordneten Domain und ihren Subdomains angezeigt werden soll, übergeben Sie die übergeordnete Domain an dieses Feld, damit ein einzelnes 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

In diesem Feld kannst du den UX-Flow festlegen, 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-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.

allowed_parent_origin

Die Ursprünge, in die der Zwischen-iFrame eingebettet werden darf. One Tap wird im iFrame-Zwischenmodus 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 Folgendes, wenn Sie Platzhalter verwenden:

  • 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 dessen Subdomains überein. Sie können auch ein Array 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. 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 iFrame-Zwischenmodus fehl und wird beendet.

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 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-Benutzeroberfläche wird entfernt, bevor der Callback aufgerufen wird.

Typ Erforderlich Beispiel
Funktion Optional intermediate_iframe_close_callback: logBeforeClose

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

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 Wert im Feld sub eines ID-Tokens.

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

Typ Erforderlich Beispiel
String, eine E-Mail-Adresse oder der Wert aus dem Feld sub des ID-Tokens. Optional login_hint: 'elisa.beckett@gmail.com'

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 Dokumentation zu OpenID Connect im Feld hd.

Typ Erforderlich Beispiel
String. Einen voll qualifizierten Domainnamen oder *. Optional hd: '*'

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

Methode: google.accounts.id.prompt

Nachdem die Methode initialize() aufgerufen wurde, zeigt die Methode google.accounts.id.prompt die One Tap-Aufforderung oder den nativen Anmeldedatenmanager des Browsers an. Hier ein Codebeispiel für die Methode:

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

Normalerweise wird die Methode prompt() beim Seitenaufbau aufgerufen. Aufgrund des Sitzungsstatus und der Nutzereinstellungen auf Google-Seite wird die UI für One Tap-Aufforderungen möglicherweise nicht angezeigt. Übergeben Sie eine Funktion, um UI-Statusbenachrichtigungen zu erhalten, wenn Sie bestimmte Zeitpunkte über den UI-Status informieren möchten.

In folgenden Fällen werden Benachrichtigungen ausgelöst:

  • Anzeigezeitpunkt: Dieser tritt auf, nachdem die Methode prompt() aufgerufen wurde. Die Benachrichtigung enthält einen booleschen Wert, der angibt, ob die UI angezeigt wird.
  • Überspringen:Dieser Fall tritt auf, wenn die One Tap-Aufforderung durch einen automatischen Abbruch oder eine manuelle Stornierung geschlossen wird oder wenn Google keine Anmeldedaten ausstellt, z. B. wenn sich die ausgewählte Sitzung von Google abgemeldet hat.

    In diesen Fällen sollten Sie mit dem nächsten Identitätsanbieter fortfahren, falls vorhanden.

  • Schließen-Moment: Dieser Fall tritt auf, wenn Google Anmeldedaten erfolgreich abruft oder ein Nutzer den Abruf von Anmeldedaten beenden möchte. Wenn der Nutzer beispielsweise beginnt, seinen Nutzernamen und sein Passwort im Anmeldedialogfeld einzugeben, können Sie die Methode google.accounts.id.cancel() aufrufen, um die One Tap-Aufforderung zu schließen und einen Moment zum Schließen 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: PromptMomentBenachrichtigung

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

Methode
isDisplayMoment() Soll diese Benachrichtigung nur kurz angezeigt werden?

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 nur kurz angezeigt und wird die Benutzeroberfläche angezeigt?

Hinweis : Wenn FedCM aktiviert ist, wird diese Benachrichtigung nicht ausgelöst. Weitere Informationen finden Sie auf der Seite Zu FedCM migrieren.
isNotDisplayed() Wird diese Benachrichtigung nur kurz angezeigt 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 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() Stammt diese Benachrichtigung nur, wenn sie übersprungen wird?
getSkippedReason()

Der genaue 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() Ist diese Benachrichtigung geschlossen?
getDismissedReason()

Der genaue Grund für die Ablehnung. 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 callback-Funktion wird ein CredentialResponse-Objekt als Parameter übergeben. In der folgenden Tabelle sind die Felder aufgeführt, die im Antwortobjekt für Anmeldedaten enthalten sind:

Field
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 Attribut state der Schaltfläche angegeben ist.

anmelde daten

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

Decodiert sieht das JWT 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": "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. 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_verfied 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.
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.
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

Dieses Feld wird nur definiert, wenn der Nutzer zur Anmeldung auf die Schaltfläche „Über Google anmelden“ klickt und das Attribut state der angeklickten Schaltfläche angegeben ist. Der Wert dieses Felds ist mit dem Wert identisch, den Sie im Attribut state der Schaltfläche angegeben haben.

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-Feld festlegen, auf welche Schaltfläche der Nutzer bei der Anmeldung geklickt hat.

Methode: google.accounts.id.renderButton

Die Methode google.accounts.id.renderButton rendert eine „Über Google anmelden“-Schaltfläche auf deinen Webseiten.

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 Schaltflächendesign Beispiel: „fill_blue“ oder „filled_black“.
size Die Größe der Schaltfläche. z. B. klein oder groß.
text Der Text der Schaltfläche. Beispiel: „Über Google anmelden“ oder „Über Google anmelden“.
shape Die Form der Schaltfläche. z. B. rechteckig oder kreisförmig.
logo_alignment Ausrichtung des Google-Logos: links oder mittig.
width Die Breite der Schaltfläche in Pixeln.
locale Wenn festgelegt, wird die Schaltflächensprache gerendert.
click_listener Wenn 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

Die folgenden Abschnitte enthalten Details zum Typ der einzelnen Attribute 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 Schaltflächendesign 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 Standardschaltflächendesign.
filled_blue
Ein mit Blau gefülltes Schaltflächendesign.
filled_black
Ein Schaltflächendesign 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 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.

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 zur Barrierefreiheit 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 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 er für den Schaltflächentyp icon verwendet wird, entspricht dies square.
pill
Die pillenförmige Schaltfläche. Wenn er für den Schaltflächentyp icon verwendet wird, entspricht er der von circle.
circle
Die kreisförmige Schaltfläche. Wenn er für den Schaltflächentyp standard verwendet wird, entspricht dies pill.
square
Die quadratische Schaltfläche. Wenn er für den Schaltflächentyp standard verwendet wird, entspricht dies 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.
center
Das Google-Logo wird zentriert.

Breite

Die minimale Schaltflächenbreite 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. 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 locale: "zh_CN"

click_listener

Du kannst mit dem Attribut click_listener 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“ angeklickt... in der Konsole protokolliert, wenn auf die Schaltfläche „Über Google anmelden“ geklickt wird.

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"

Datentyp: Anmeldedaten

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

Field
id Identifiziert den Nutzer.
password Das Passwort

Methode: google.accounts.id.disableAutoSelect

Wenn sich der Nutzer von deiner Website abmeldet, musst du die Methode google.accounts.id.disableAutoSelect aufrufen, um den Status in Cookies zu erfassen. Dies verhindert eine tote UX-Schleife. 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 Anmeldedaten-Manager-API des Browsers. Daher können sie nur zum Speichern von Anmeldedaten mit Passwörtern 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, wenn Sie die Aufforderung aus dem DOM der vertrauenden Partei entfernen. Der Abbruchvorgang wird ignoriert, wenn bereits ein Berechtigungsnachweis ausgewählt ist. Hier ein Codebeispiel der 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 zum Laden der Bibliothek: onGoogleLibraryLoad

Du kannst einen onGoogleLibraryLoad-Callback registrieren. Es wird benachrichtigt, nachdem die JavaScript-Bibliothek für „Über Google anmelden“ geladen wurde:

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

Dieser Callback ist nur eine Verknüpfung für den window.onload-Callback. 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

Die Methode google.accounts.id.revoke widerruft die OAuth-Zustimmung, die zur Freigabe 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 das Attribut sub der Nutzlast Anmeldedaten.
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: RevocationResponse

Beim Aufrufen der callback-Funktion wird ein RevocationResponse-Objekt als Parameter übergeben. In der folgenden Tabelle sind die Felder aufgeführt, die im Widerrufsantwortobjekt enthalten sind:

Field
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 ist, wenn der Aufruf der Aufhebungsmethode erfolgreich war, oder „false“ bei einem Fehler.

error

Dieses Feld enthält einen Stringwert und enthält eine detaillierte Fehlermeldung, wenn der Aufruf der Widerrufsmethode fehlgeschlagen ist. Bei Erfolg ist das Feld nicht definiert.