Die Einstellung von Drittanbieter-Cookies in Chrome beginnt im 1. Quartal 2024. Folgen Sie der Migrationsanleitung, um potenzielle Änderungen zu prüfen und negative Auswirkungen auf die Nutzeranmeldung auf Ihrer Website zu vermeiden.

Diese Seite wurde von der Cloud Translation API übersetzt.

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

Auf dieser Referenzseite wird die Log-in JavaScript API beschrieben. Sie können diese API verwenden, um die One Tap-Aufforderung oder die Schaltfläche „Über Google anmelden“ auf Ihren Webseiten anzuzeigen.

Methode: google.accounts.id.initial

Die Methode google.accounts.id.initialize initialisiert „Über Google anmelden“ basierend auf dem Konfigurationsobjekt. Im folgenden Codebeispiel finden Sie :

google.accounts.id.initialize(IdConfiguration)

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

<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 ein „Über Google anmelden“-Client erstellt -Instanz, die implizit von allen Modulen auf derselben Webseite verwendet werden kann.

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

Sie setzen die Konfigurationen bei jedem Aufruf der google.accounts.id.initialize-Methode und alle nachfolgenden Methoden in derselben sofort die neuen Konfigurationen verwenden.

Datentyp: IdConfiguration

In der folgenden Tabelle sind die Felder und Beschreibungen von IdConfiguration aufgeführt. Datentyp:

Feld
`client_id`	Client-ID Ihrer Anwendung
`auto_select`	Aktiviert die automatische Auswahl.
`callback`	Die JavaScript-Funktion, die ID-Tokens verarbeitet. Google One Tap und Schaltfläche „Über Google anmelden“ `popup` im UX-Modus verwenden .
`login_uri`	Die URL Ihres Anmeldeendpunkts. Die Schaltfläche „Über Google anmelden“ `redirect` Im UX-Modus wird dieses Attribut verwendet.
`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 One Tap-Aufforderungs-Containerelements
`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 den zugehörigen Subdomains aufrufen möchten, die übergeordnete Domain an dieses Feld übergeben, sodass ein einzelnes freigegebenes Cookie verwendet.
`ux_mode`	UX-Ablauf der Schaltfläche „Über Google anmelden“
`allowed_parent_origin`	Die Ursprünge, in denen der dazwischenliegende iFrame eingebettet werden darf. Einmal tippen wird im iFrame-Zwischenmodus ausgeführt, wenn dieses Feld vorhanden ist.
`intermediate_iframe_close_callback`	Überschreibt das Standardverhalten zwischen iFrames, wenn Nutzer manuell schließen Sie One Tap.
`itp_support`	Aktiviert das aktualisierte One Tap-UX in ITP-Browsern.
`login_hint`	Mit einem Nutzerhinweis kannst du die Kontoauswahl überspringen.
`hd`	Beschränken Sie die Kontoauswahl nach Domain.
`use_fedcm_for_prompt`	Dem Browser erlauben, Aufforderungen zur Anmeldung von Nutzern zu steuern und die Anmeldevorgang zwischen Ihrer Website und Google.

client_id

Dieses Feld enthält die Client-ID Ihrer Anwendung, die im Google Cloud Console 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 Nutzer zurückgegeben wird Interaktion, wenn Ihre App nur durch eine Google-Sitzung genehmigt wurde vorher. Der Standardwert ist false. Weitere Informationen finden Sie in der Informationen:

Typ	Erforderlich	Beispiel
boolean	Optional	`auto_select: true`

callback

Dieses Feld ist die JavaScript-Funktion, die das von die One Tap-Aufforderung oder das Pop-up-Fenster öffnen. Dieses Attribut ist erforderlich, wenn Google Durch einmaliges Tippen oder die Schaltfläche „Über Google anmelden“ popup wird der UX-Modus verwendet. Weitere Informationen finden Sie in der folgende Tabelle mit weiteren Informationen:

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 das OAuth übereinstimmen. 2.0-Client, den Sie konfiguriert haben in der Google Cloud Console und muss unserer Weiterleitungs-URI-Validierung entsprechen Regeln.

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

Die Antwort auf die Anmeldedaten des ID-Tokens wird an Ihren Anmeldeendpunkt gesendet, wenn ein Nutzer auf die Schaltfläche „Über Google anmelden“ klickt und der UX-Modus „Weiterleitung“ 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"`

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

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 enthält den Namen der JavaScript-Funktion, die das Passwort verarbeitet Anmeldedaten, die vom nativen Anmeldeinformations-Manager des Browsers zurückgegeben werden. Weitere Informationen finden Sie in der folgende Tabelle mit weiteren Informationen:

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 auf außerhalb des Prompts. Der Standardwert ist true. Sie können sie deaktivieren, wenn Sie den Wert in false. 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. Ist dies nicht festgelegt, Die One Tap-Aufforderung wird rechts oben im Fenster angezeigt. Weitere Informationen finden Sie in der folgende Tabelle mit weiteren Informationen:

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 begrenzt. und HTTP-Größenbeschränkungen für Browser und Server.

context

In diesem Feld ändern Sie den Text des Titels und der Nachrichten in der One Tap-Aufforderung. Weitere Informationen finden Sie unter in der folgenden Tabelle finden Sie weitere Informationen:

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`	„Mit Google registrieren“
`use`	Mit Google verwenden

state_cookie_domain

Wenn One Tap in der übergeordneten Domain und deren Subdomains angezeigt werden soll, übergeben Sie den Parameter übergeordneten Domain in dieses Feld, sodass ein einzelnes Cookie mit gemeinsam genutztem Status verwendet wird. Weitere Informationen finden Sie unter in der folgenden Tabelle finden Sie weitere Informationen:

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

ux_mode

In diesem Feld können Sie den UX-Ablauf festlegen, der für die 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 folgende Tabelle mit weiteren Informationen:

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 ganzseitige Weiterleitung durch.

allowed_parent_origin

Die Ursprünge, in denen der dazwischenliegende iFrame eingebettet werden darf. One Tap-Ausführungen in den iFrame-Zwischenmodus versetzt, wenn dieses Feld vorhanden ist. Weitere Informationen: finden Sie weitere Informationen:

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). Hinweise zur Verwendung von Platzhalter:

Musterstrings dürfen nicht nur aus einem Platzhalter und einer übergeordneten Ebene bestehen. . Beispiel: https://.com und https://.co.uk sind ungültig. Wie oben erwähnt, "https://.example.com" entspricht example.com und den zugehörigen Subdomains. Sie können auch ein Array zur Darstellung von zwei verschiedenen Domains. Beispiel: ["https://example1.com", "https://.example2.com"] Übereinstimmungen die Domains example1.com, example2.com und Subdomains von example2.com
Platzhalterdomains müssen mit einem sicheren https://-Schema beginnen. "*.example.com" gilt als ungültig.

Wenn der Wert im Feld allowed_parent_origin ungültig ist, wird über One Tap würde die Initialisierung des iFrame-Zwischenmodus fehlschlagen und beendet werden.

intermediate_iframe_close_callback

Überschreibt das Standardverhalten zwischen iFrame-Zwischeneinstellungen, wenn Nutzer One manuell schließen. Tippe auf das „X“. in der One Tap-Benutzeroberfläche. Das Standardverhalten ist den dazwischen liegenden iFrame sofort aus dem DOM zu entfernen.

Das Feld intermediate_iframe_close_callback tritt nur in der mittleren Phase in Kraft. iFrame-Modus. Und es wirkt sich nur auf den zwischengeschalteten 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

Mit diesem Feld wird festgelegt, ob der aktualisierte One Tap-UX sollten in Browsern aktiviert sein, die Intelligent Tracking Prevention unterstützen (ITP). Der Standardwert ist false. Weitere Informationen finden Sie in der Informationen:

Typ	Erforderlich	Beispiel
boolean	Optional	`itp_support: true`

login_hint

Wenn Ihrer Anwendung im Voraus bekannt ist, welcher Nutzer angemeldet sein muss, kann sie Anmeldehinweis für Google bereitstellen. Wenn der Vorgang erfolgreich war, wird die Kontoauswahl übersprungen. Zulässige Werte sind: eine E-Mail-Adresse oder der Wert eines sub-Felds für das ID-Token.

Weitere Informationen finden Sie im Feld login_hint von OpenID Connect Dokumentation.

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

HD

Wenn ein Nutzer mehrere Konten hat und sich nur mit seinem Workspace-Konto anmelden soll verwendet, um Google einen Hinweis zum Domainnamen bereitzustellen. Wenn der Vorgang erfolgreich war, Konten, die während der Kontoauswahl angezeigt werden, sind auf die angegebene Domain beschränkt. Platzhalterwert: * bietet dem Nutzer nur Workspace-Konten an und schließt Folgendes aus: Privatnutzerkonten (nutzer@gmail.com) hinzugefügt werden.

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

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

use_fedcm_for_prompt

Dem Browser erlauben, Aufforderungen zur Anmeldung von Nutzern zu steuern und den Anmeldevorgang zu vermitteln zwischen Ihrer Website und Google. Die Standardeinstellung ist "false". Siehe Migration zu FedCM finden Sie weitere Informationen.

Typ	Erforderlich	Beispiel
boolean	Optional	`use_fedcm_for_prompt: true`

Methode: google.accounts.id.prompt

Mit der Methode google.accounts.id.prompt wird die One Tap-Aufforderung oder die nach dem Aufrufen der Methode initialize(). 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 der Sitzung Status und Nutzereinstellungen gibt, ist die Benutzeroberfläche für One Tap-Aufforderungen möglicherweise nicht angezeigt. Übergeben Sie eine Benachrichtigung über den UI-Status um UI-Statusbenachrichtigungen zu erhalten.

Benachrichtigungen werden in den folgenden Momenten ausgelöst:

Anzeigemoment: Findet nach dem Aufruf der Methode prompt() statt. Die Die Benachrichtigung enthält einen booleschen Wert, der angibt, ob die Benutzeroberfläche oder nicht angezeigt wird.
Übersprungen:Dieser Fall tritt ein, wenn die One Tap-Aufforderung durch eine automatische oder wenn Google keine Anmeldedaten ausstellt, z. B. Die ausgewählte Sitzung wurde von Google abgemeldet.

In diesen Fällen sollten Sie mit der nächsten Anbietern, falls vorhanden.
Geschlossener-Moment:Dieser Fall tritt ein, wenn Google erfolgreich eine oder ein Nutzer möchte den Abruf von Anmeldedaten beenden. Für wenn Nutzer damit beginnen, ihren Nutzernamen und ihr Passwort in Ihr Anmeldedialogfeld nicht unterstützt, können Sie die Methode google.accounts.id.cancel() aufrufen, um die One Tap-Aufforderung und lösen einen Schließvorgang aus.

Warnung :Nutze in dem Moment, in dem geschlossen wurde, keine der nächsten Identitäten. Anbieter.

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 der Datentyp PromptMomentNotification:

Methode
`isDisplayMoment()`	Ist diese Benachrichtigung nur eine Anzeige? Hinweis : Wenn FedCM aktiviert, wird diese Benachrichtigung nicht ausgelöst. Weitere Informationen finden Sie unter Zu FedCM migrieren finden Sie weitere Informationen.
`isDisplayed()`	Ist dies eine Anzeige und die Benutzeroberfläche ist angezeigt? Hinweis : Wenn FedCM aktiviert, wird diese Benachrichtigung nicht ausgelöst. Weitere Informationen finden Sie unter Zu FedCM migrieren finden Sie weitere Informationen.
`isNotDisplayed()`	Ist dies eine Anzeige, aber die Benutzeroberfläche wird nicht angezeigt, angezeigt? Hinweis : Wenn FedCM aktiviert, wird diese Benachrichtigung nicht ausgelöst. Weitere Informationen finden Sie unter Zu FedCM migrieren finden Sie weitere Informationen.
`getNotDisplayedReason()`	Der detaillierte Grund, warum die Benutzeroberfläche nicht angezeigt wird. Im Folgenden finden Sie mögliche Werte: `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 unter Zu FedCM migrieren finden Sie weitere Informationen.
`isSkippedMoment()`	Ist diese Benachrichtigung ein übersprungener Moment?
`getSkippedReason()`	Der detaillierte Grund für den übersprungenen Moment. Im Folgenden finden Sie mögliche Werte: `auto_cancel` `user_cancel` `tap_outside` `issuing_failed` Hinweis : Wenn FedCM aktiviert ist, wird diese Methode nicht unterstützt. Weitere Informationen finden Sie unter Zu FedCM migrieren finden Sie weitere Informationen.
`isDismissedMoment()`	Handelt es sich bei dieser Benachrichtigung um einen geschlossenen Moment?
`getDismissedReason()`	Der detaillierte Grund für die Ablehnung. Folgende Möglichkeiten sind möglich: Werte: `credential_returned` `cancel_called` `flow_restarted`
`getMomentType()`	Gibt einen String für den Momenttyp zurück. Folgende Möglichkeiten sind möglich: Werte: `display` `skipped` `dismissed`

Datentyp: CredentialResponse

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

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 auf eine „Über Google anmelden“-Schaltfläche klickt Schaltfläche zum Anmelden und der `state` der Schaltfläche angegeben ist.

Anmeldedaten

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

Wann? 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": "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 Verwenden Sie das Feld sub als Kennung für den Nutzer, da es unter allen Google-Diensten eindeutig ist. Konten und werden nicht wiederverwendet. Verwenden Sie nicht eine E-Mail-Adresse als Kennung, Ein Google-Konto kann mehrere E-Mail-Adressen zu verschiedenen Zeitpunkten haben.

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

Fälle, in denen Google als vertrauenswürdig eingestuft wird:

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 ein Google-Konto registrieren, ohne Gmail oder Google Workspace zu verwenden. Wenn email kein @gmail.com-Suffix enthält und hd nicht vorhanden ist, wird Google nicht autoritativ sind, werden Passwörter oder andere Methoden zur Identitätsbestätigung empfohlen, den Nutzer zu verifizieren. email_verfied kann auch „true“ sein, wenn Google ursprünglich überprüft hat Nutzer beim Erstellen des Google-Kontos, aber die Inhaberschaft des dritten hat sich in der Zwischenzeit möglicherweise geändert.

Das Feld exp zeigt die Ablaufzeit an, zu der Sie das Token auf Ihrem serverseitig. Es ist eine Stunde. für das ID-Token, das Sie von „Über Google anmelden“ erhalten haben. Sie müssen die Token vor dem Ablaufdatum . Verwenden Sie exp nicht für die Sitzungsverwaltung. Ein abgelaufenes ID-Token bedeutet das nicht, dass der Nutzer abgemeldet ist. Ihre App ist für die die Verwaltung Ihrer Nutzer.

select_by

In der folgenden Tabelle sind die möglichen Werte für das Feld select_by aufgeführt. Die Der Schaltflächentyp, der in Verbindung mit der Sitzung und dem Einwilligungsstatus verwendet wird, werden verwendet, um Wert,

Der Nutzer hat entweder auf die Schaltfläche „One Tap“ oder „Über Google anmelden“ geklickt oder die berührungslose automatische Anmeldung.
Es wurde eine bestehende Sitzung gefunden oder der Nutzer hat eine Sitzung ausgewählt und sich in einem angemeldet. Google-Konto, um eine neue Sitzung zu erstellen.
Vor der Freigabe von ID-Token-Anmeldedaten für Ihre App muss der Nutzer entweder
- die Schaltfläche „Bestätigen“ gedrückt haben, um der Weitergabe von Anmeldedaten zuzustimmen, oder
- dem Nutzer zuvor seine Einwilligung erteilt und mit „Konto auswählen“ eine Google-Konto.

Der Wert dieses Feldes ist auf einen dieser Typen festgelegt,

Wert	Beschreibung
`auto`	Automatische Anmeldung eines Nutzers mit einer bestehenden Sitzung, der bereits zuvor ihre Einwilligung zur Freigabe von Anmeldedaten erteilt hat. Gilt nur für nicht von FedCM unterstützten Browser.
`user`	Nutzer in einer bestehenden Sitzung, die zuvor ihre Einwilligung erteilt haben auf „Weiter als“ um die Anmeldedaten zu teilen. Gilt nur in nicht von FedCM unterstützten Browsern.
`fedcm`	Ein Nutzer hat auf „Weiter als“ geklickt Schaltfläche zum Teilen mithilfe von FedCM. Gilt nur für FedCM unterstützt Browser.
`fedcm_auto`	Automatische Anmeldung eines Nutzers mit einer bestehenden Sitzung, der hat zuvor die Einwilligung zum Teilen von Anmeldedaten über FedCM One Tap erteilt. Gilt nur für FedCM unterstützt Browser.
`user_1tap`	Ein Nutzer mit einer bestehenden Sitzung hat auf „Weiter als“ über One Tap geklickt um Ihre Einwilligung zu erteilen und die Anmeldedaten zu teilen. Gilt nur für Chrome v75 und höher.
`user_2tap`	Ein Nutzer ohne bestehende Sitzung hat auf „Weiter als“ über One Tap geklickt um ein Konto auszuwählen, und drücken dann in einer um Ihre Einwilligung zu erteilen und die Anmeldedaten zu teilen. Gilt für Browser, die nicht auf Chromium basieren.
`btn`	Nutzer in einer bestehenden Sitzung, die ihre Einwilligung zuvor erteilt haben auf „Über Google anmelden“ geklickt und ein Google-Konto ausgewählt „Konto auswählen“ Anmeldedaten zu teilen.
`btn_confirm`	Ein Nutzer mit einer bestehenden Sitzung hat die Schaltfläche „Über Google anmelden“ angeklickt und auf „Bestätigen“ geklickt, um die Einwilligung zu erteilen und die Anmeldedaten zu teilen.
`btn_add_session`	Ein Nutzer ohne bestehende Sitzung, der zuvor eine Berechtigung erteilt hat Einwilligung hat die Schaltfläche „Über Google anmelden“ gedrückt, um ein Google-Konto auszuwählen und Anmeldedaten teilen.
`btn_confirm_add_session`	Ein Nutzer ohne bestehende Sitzung hat zuerst auf „Über Google anmelden“ geklickt um ein Google-Konto auszuwählen, und dann auf „Bestätigen“ um Ihre Einwilligung zu erteilen und Anmeldedaten zu teilen.

Bundesstaat

Dieses Feld wird nur definiert, wenn der Nutzer auf die Schaltfläche „Über Google anmelden“ klickt, angemeldet sind und das Attribut state der angeklickten Schaltfläche angegeben ist. Die Wert dieses Felds mit dem Wert übereinstimmt, den Sie in den state-Attribut.

Da mehrere „Über Google anmelden“-Schaltflächen auf derselben Seite gerendert werden können, kann jeder Schaltfläche einen eindeutigen String zuweisen. Daher können Sie dieses state-Feld um zu ermitteln, auf welche Schaltfläche der Nutzer zur Anmeldung geklickt hat.

Methode: google.accounts.id.renderButton

Die Methode google.accounts.id.renderButton rendert „Über Google anmelden“ auf Ihren 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 der Datentyp GsiButtonConfiguration:

Attribut
`type`	Der Schaltflächentyp: Symbol oder Standardschaltfläche.
`theme`	Das Schaltflächendesign. Beispiel: gefülltes_blau oder gefülltes_schwarz.
`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. 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 festgelegt, wird diese Funktion aufgerufen, wenn die Schaltfläche „Über Google anmelden“ wenn auf die Schaltfläche 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 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 Textzeilen:

Typ
`standard`	<ph type="x-smartling-placeholder"> </ph> Schaltfläche mit Text oder personalisierten Informationen.
`icon`	<ph type="x-smartling-placeholder"> </ph> <ph type="x-smartling-placeholder"> </ph> Eine Symbolschaltfläche ohne Text.

Thema

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

Typ	Erforderlich	Beispiel
String	Optional	`theme: "filled_blue"`

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

Design
`outline`	<ph type="x-smartling-placeholder"> </ph> Ein standardmäßiges Schaltflächendesign.
`filled_blue`	<ph type="x-smartling-placeholder"> </ph> Ein blaues Schaltflächendesign.
`filled_black`	<ph type="x-smartling-placeholder"> </ph> Ein schwarzes Schaltflächendesign.

Größe

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

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`	<ph type="x-smartling-placeholder"> </ph> Eine große Schaltfläche.
`medium`	<ph type="x-smartling-placeholder"> </ph> Eine mittelgroße Schaltfläche.
`small`	<ph type="x-smartling-placeholder"> </ph> Eine kleine Taste.

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 Textzeilen:

Text
`signin_with`	<ph type="x-smartling-placeholder"> </ph> Der Schaltflächentext lautet „Über Google anmelden“.
`signup_with`	<ph type="x-smartling-placeholder"> </ph> Der Schaltflächentext lautet „Über Google anmelden“.
`continue_with`	<ph type="x-smartling-placeholder"> </ph> Der Schaltflächentext lautet „Weiter mit Google“.
`signin`	<ph type="x-smartling-placeholder"> </ph> Der Schaltflächentext lautet „Anmelden“.

shape

Die Form der Schaltfläche. Der Standardwert ist rectangular. Siehe folgende Tabelle , um weitere Informationen zu erhalten:

Typ	Erforderlich	Beispiel
String	Optional	`shape: "rectangular"`

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

Form
`rectangular`	<ph type="x-smartling-placeholder"> </ph> Die rechteckige Schaltfläche. Bei Verwendung für `icon` entspricht dies `square`.
`pill`	<ph type="x-smartling-placeholder"> </ph> Die pillenförmige Taste. Bei Verwendung für die Schaltfläche „`icon`“ ist dies der gleiche wie `circle`.
`circle`	<ph type="x-smartling-placeholder"> </ph> Die kreisförmige Schaltfläche. Bei Verwendung für `standard` entspricht dies `pill`.
`square`	<ph type="x-smartling-placeholder"> </ph> Die quadratische Taste. Bei Verwendung für `standard` 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 Informationen:

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`	<ph type="x-smartling-placeholder"> </ph> <ph type="x-smartling-placeholder"> </ph> Das Google-Logo wird linksbündig ausgerichtet.
`center`	<ph type="x-smartling-placeholder"> </ph> <ph type="x-smartling-placeholder"> </ph> 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. Schaltflächentext in der angegebenen Sprache anzeigen, andernfalls Standard auf Google-Konto- oder Browsereinstellungen des Nutzers ändern. Fügen Sie den Parameter hl und Sprachcode an die Anweisung src beim Laden der Bibliothek. Beispiel: gsi/client?hl=<iso-639-code>.

Wenn sie nicht konfiguriert ist, wird die Standardsprache des Browsers oder die des Nutzers der Google-Sitzung verwendet verwendet wird. Daher sehen unterschiedliche Nutzer unterschiedliche Versionen lokalisierten Schaltflächen und möglicherweise mit unterschiedlichen Größen.

Weitere Informationen finden Sie in der folgenden Tabelle:

Typ	Erforderlich	Beispiel
String	Optional	`locale: "zh_CN"`

click_listener

Sie können eine JavaScript-Funktion definieren, die aufgerufen wird, wenn die Funktion „Über Google anmelden“ wird mit dem Attribut click_listener angeklickt.

  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... protokolliert. wenn auf die Schaltfläche „Über Google anmelden“ geklickt wird.

Bundesstaat

Optional, da mehrere „Über Google anmelden“-Schaltflächen auf demselben Bildschirm können Sie jeder Schaltfläche eine eindeutige Zeichenfolge zuweisen. Derselbe String zusammen mit dem ID-Token zurückgegeben, damit Sie erkennen können, welcher Schaltflächennutzer zum Anmelden geklickt.

Weitere Informationen finden Sie in der folgenden Tabelle:

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

Datentyp: Anmeldedaten

Wenn Ihre native_callback aufgerufen wird, wird ein Credential-Objekt als Parameter übergeben. Die 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 aufrufen, google.accounts.id.disableAutoSelect, um den Status in Cookies aufzuzeichnen. Dieses verhindert eine leere UX-Schleife. Hier ein Code-Snippet der Methode:

google.accounts.id.disableAutoSelect()

Mit dem folgenden Codebeispiel wird google.accounts.id.disableAutoSelect implementiert mit einer onSignout()-Funktion:

<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 Browseroberfläche Credential Manager API. Daher kann es nur zum Speichern eines Passworts verwendet werden. Anmeldedaten Hier ein Codebeispiel für die Methode:

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

Mit dem folgenden Codebeispiel wird google.accounts.id.storeCredential implementiert mit einer onSignIn()-Funktion:

<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 den Prompt von der vertrauenden Partei entfernen DOM. Der Abbruchvorgang wird ignoriert, wenn bereits Anmeldedaten ausgewählt sind. Weitere Informationen finden Sie unter das folgende Codebeispiel der Methode:

google.accounts.id.cancel()

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

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

Callback beim Laden der Bibliothek: onGoogleLibraryLoad

Du kannst einen onGoogleLibraryLoad-Callback registrieren. Er wird nach dem Schild Die JavaScript-Bibliothek "In With Google" wird geladen:

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

Dieser Callback ist nur eine Kurzform für den window.onload-Callback. Es sind keine Verhaltensunterschiede.

Mit dem 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-Token für den angegebenen Nutzer. 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` des Nutzlast der 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

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

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

erfolgreich

Dieses Feld enthält einen booleschen Wert, der auf „true“ gesetzt ist, wenn der Aufruf der Widerrufsmethode erfolgreich war oder "false" bei einem Fehler.

Fehler

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