Dokumentacja interfejsu Sign in with Google JavaScript API

Na tej stronie referencyjnej opisano interfejs JavaScript API funkcji Zaloguj się przez Google, który służy do wyświetlania przycisku Zaloguj się przez Google lub promptu One Tap na stronach internetowych.

Metoda: google.accounts.id.initialize

Metoda google.accounts.id.initialize inicjuje klienta funkcji Zaloguj się przez Google na podstawie obiektu konfiguracji. Oto przykładowy kod metody:

google.accounts.id.initialize(IdConfiguration)

Poniższy przykładowy kod implementuje metodę google.accounts.id.initialize z funkcją onload:

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

Metoda google.accounts.id.initialize tworzy instancję klienta funkcji Zaloguj się przez Google, która może być używana przez wszystkie moduły na tej samej stronie internetowej.

• Metodę google.accounts.id.initialize musisz wywołać tylko raz, nawet jeśli na tej samej stronie internetowej używasz wielu modułów (np. logowania jednym dotknięciem, spersonalizowanego przycisku, unieważnienia itp.).
• Jeśli wywołasz metodę google.accounts.id.initialize wielokrotnie, zapamiętane i użyte zostaną tylko konfiguracje z ostatniego wywołania.

Konfiguracje są resetowane przy każdym wywołaniu metody google.accounts.id.initialize, a wszystkie kolejne metody na tej samej stronie internetowej natychmiast używają nowych konfiguracji.

Ostrzeżenie: metodę google.accounts.id.initialize należy wywołać tylko raz, nawet jeśli na tej samej stronie internetowej używasz zarówno funkcji One Tap, jak i przycisku.

Typ danych: IdConfiguration

W tabeli poniżej znajdziesz pola i opisy typu danych IdConfiguration:

Pole
client_id	Identyfikator klienta aplikacji
color_scheme	Schemat kolorów zastosowany do promptu One Tap.
auto_select	Włącza automatyczny wybór.
callback	Funkcja JavaScriptu, która obsługuje tokeny identyfikacji. Z tego atrybutu korzysta funkcja jednego dotknięcia Google i przycisk Zaloguj się przez Google w trybie UX popup.
login_uri	Adres URL punktu końcowego logowania. Ten atrybut jest używany przez przycisk Zaloguj się przez Google w trybie UX redirect.
native_callback	Funkcja JavaScriptu, która obsługuje dane logowania.
cancel_on_tap_outside	Anuluje prośbę, jeśli użytkownik kliknie poza nią.
prompt_parent_id	Identyfikator DOM elementu kontenera promptu One Tap.
nonce	Losowy ciąg znaków dla tokenów identyfikacji
essential_claims	Dodatkowe oświadczenia, które mają zostać uwzględnione w tokenie identyfikacji zwracanym przez Google.
context	tytuł i słowa w promptu One Tap,
state_cookie_domain	Jeśli musisz wywołać funkcję One Tap w domenie nadrzędnej i jej subdomenach, przekaż domenę nadrzędną do tego pola, aby używany był jeden udostępniony plik cookie.
ux_mode	proces UX przycisku Zaloguj się przez Google,
allowed_parent_origin	Źródła, które mogą umieszczać pośredni element iframe. Jeśli to pole jest obecne, funkcja One Tap jest uruchamiana w trybie pośredniego elementu iframe.
intermediate_iframe_close_callback	Zastępuje domyślne działanie pośredniej ramki iframe, gdy użytkownicy ręcznie zamykają funkcję One Tap.
itp_support	Włącza ulepszoną funkcję One Tap w przeglądarkach z ITP.
login_hint	Pomiń wybór konta, podając wskazówkę dotyczącą użytkownika.
hd	Ogranicz wybór konta według domeny.
use_fedcm_for_prompt	Wycofany: ten atrybut został wycofany i będzie ignorowany, jeśli zostanie użyty. Zezwól przeglądarce na kontrolowanie próśb o zalogowanie się użytkownika i pośredniczenie w procesie logowania między Twoją witryną a Google.
use_fedcm_for_button	To pole określa, czy w Chrome (wersja M125 lub nowsza na komputerach i M128 lub nowsza na Androidzie) ma być używany interfejs przycisku FedCM. Wartość domyślna to false.
button_auto_select	Określa, czy włączyć opcję automatycznego wyboru w przepływie przycisku FedCM. Jeśli ta opcja jest włączona, powracający użytkownicy z aktywną sesją Google będą logowani automatycznie, bez wyświetlania prośby o wybór konta.Wartość domyślna to false.

client_id

To pole zawiera identyfikator klienta aplikacji, który można znaleźć i utworzyć w konsoli Google Cloud. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
tekst	Tak	client_id: "CLIENT_ID.apps.googleusercontent.com"

color_scheme

To pole zawiera schemat kolorów zastosowany do promptu One Tap. Więcej informacji znajdziesz w tabeli poniżej:

Typ	Wymagane	Przykład
tekst	Opcjonalnie. Domyślnie jest to ustawienie domyślne systemu schematu kolorów użytkownika.	color_scheme: "dark"

W tabeli poniżej znajdziesz dostępne schematy kolorów i ich opisy.

Schemat kolorów
default	Zastosuj domyślny schemat kolorów systemu użytkownika. W zależności od preferencji użytkownika schemat jest jasny lub ciemny.
light	Zastosuj jasny schemat kolorów.
dark	Zastosuj ciemny schemat kolorów.

auto_select

To pole określa, czy token identyfikatora jest automatycznie zwracany bez interakcji użytkownika, gdy istnieje tylko jedna sesja Google, która wcześniej zatwierdziła Twoją aplikację. Wartością domyślną jest false. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
wartość logiczna	Opcjonalny	auto_select: true

callback

To pole to funkcja JavaScript, która obsługuje token identyfikatora zwrócony z prompta One Tap lub wyskakującego okienka. Ten atrybut jest wymagany, jeśli używany jest tryb UX popup funkcji Google One Tap lub przycisku Zaloguj się przez Google. Więcej informacji znajdziesz w tabeli poniżej:

Typ	Wymagane	Przykład
funkcja	Wymagane w przypadku funkcji One Tap i trybu UX popup	callback: handleResponse

login_uri

Ten atrybut to identyfikator URI punktu końcowego logowania.

Wartość musi dokładnie odpowiadać jednemu z autoryzowanych identyfikatorów URI przekierowania klienta OAuth 2.0, które zostały skonfigurowane w konsoli Google Cloud, i musi być zgodna z naszymi regułami sprawdzania poprawności identyfikatorów URI przekierowania.

Ten atrybut można pominąć, jeśli bieżąca strona jest stroną logowania. W takim przypadku dane logowania są domyślnie publikowane na tej stronie.

Odpowiedź z danymi logowania tokena identyfikatora jest wysyłana do punktu końcowego logowania, gdy użytkownik kliknie przycisk Zaloguj się przez Google i używany jest tryb UX przekierowania.

Więcej informacji znajdziesz w tej tabeli:

Typ	Opcjonalny	Przykład
URL	Domyślnie jest to identyfikator URI bieżącej strony lub podana przez Ciebie wartość. Używane tylko wtedy, gdy ustawiono ux_mode: "redirect".	login_uri: "https://www.example.com/login"

Twój punkt końcowy logowania musi obsługiwać żądania POST zawierające parametr credential z wartością tokena identyfikacji w treści. Parametr select_by nie jest uwzględniany w żądaniach HTTP POST do login_uri ani data-login_uri i jest zwracany tylko w obiekcie CredentialResponse przekazywanym do funkcji JavaScriptu callback.

Uwaga: w przypadku interfejsu JavaScript API odpowiedź funkcji Google One Tap i przycisku Zaloguj się przez Google w trybie UX popup może zostać zwrócona tylko do funkcji JavaScript callback. Jeśli odpowiedź musi być automatycznie przesyłana do login_uri, wypróbuj interfejs HTML API.

native_callback

To pole zawiera nazwę funkcji JavaScript, która obsługuje dane logowania (hasło) zwrócone przez wbudowanego menedżera danych logowania przeglądarki. Więcej informacji znajdziesz w tabeli poniżej:

Typ	Wymagane	Przykład
funkcja	Opcjonalny	native_callback: handleResponse

cancel_on_tap_outside

To pole określa, czy anulować prośbę o logowanie jednym dotknięciem, jeśli użytkownik kliknie poza oknem. Wartością domyślną jest true. Możesz ją wyłączyć, ustawiając wartość na false. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
wartość logiczna	Opcjonalny	cancel_on_tap_outside: false

prompt_parent_id

Ten atrybut ustawia identyfikator DOM elementu kontenera. Jeśli nie jest ustawiony, okno logowania jednym dotknięciem wyświetla się w prawym górnym rogu okna. Więcej informacji znajdziesz w tabeli poniżej:

Typ	Wymagane	Przykład
tekst	Opcjonalny	prompt_parent_id: 'parent_id'

liczba jednorazowa

To pole zawiera losowy ciąg znaków używany przez token identyfikacji do zapobiegania atakom typu replay. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
tekst	Opcjonalny	nonce: "biaqbm70g23"

Długość liczby jednorazowej jest ograniczona do maksymalnego rozmiaru JWT obsługiwanego przez Twoje środowisko oraz do indywidualnych ograniczeń rozmiaru HTTP przeglądarki i serwera.

essential_claims

To pole jest ciągiem znaków używanym do żądania dodatkowych deklaracji, które mają być uwzględnione w tokenie identyfikacji zwracanym przez Google. Pełną listę deklaracji akceptowanych przez Google znajdziesz w artykule o obsługiwanych deklaracjach.

Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
tekst	Opcjonalny	essential_claims: "auth_time, amr"

kontekst

To pole zmienia tekst tytułu i wiadomości wyświetlanych w oknie logowania jednym dotknięciem. Nie ma wpływu na przeglądarki z funkcją ITP. Domyślna wartość to signin.

Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
tekst	Opcjonalny	context: "use"

W tabeli poniżej znajdziesz wszystkie dostępne konteksty i ich opisy:

Kontekst
signin	„Zaloguj się w”
signup	„Zarejestruj się, aby”
use	„Użyj”

state_cookie_domain

Jeśli chcesz wyświetlać funkcję One Tap w domenie nadrzędnej i jej subdomenach, przekaż domenę nadrzędną do tego pola, aby używać jednego udostępnionego pliku cookie stanu. Więcej informacji znajdziesz w tabeli poniżej:

Typ	Wymagane	Przykład
tekst	Opcjonalny	state_cookie_domain: "example.com"

ux_mode

To pole służy do ustawiania procesu UX używanego przez przycisk Zaloguj się przez Google. Wartością domyślną jest popup. Ten atrybut nie ma wpływu na interfejs OneTap. Więcej informacji znajdziesz w tabeli poniżej:

Typ	Wymagane	Przykład
tekst	Opcjonalny	ux_mode: "redirect"

W tabeli poniżej znajdziesz dostępne tryby UX i ich opisy.

Tryb UX
popup	Wykonuje proces logowania w wyskakującym okienku.
redirect	Przeprowadza proces logowania UX za pomocą przekierowania do pełnej strony.

allowed_parent_origin

Źródła, które mogą umieszczać pośredni element iframe. Jeśli to pole jest obecne, funkcja One Tap działa w trybie pośredniego elementu iframe. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
ciąg tekstowy lub tablica tekstowa	Opcjonalny	allowed_parent_origin: "https://example.com"

W tabeli poniżej znajdziesz obsługiwane typy wartości i ich opisy.

Typy wartości
string	Identyfikator URI pojedynczej domeny.	"https://example.com"
string array	Tablica identyfikatorów URI domen.	["https://news.example.com", "https://local.example.com"]

Obsługiwane są też prefiksy z symbolami wieloznacznymi. Na przykład "https://*.example.com" pasuje do example.com i jej subdomen na wszystkich poziomach (np. news.example.com, login.news.example.com). O czym należy pamiętać, używając symboli wieloznacznych:

• Ciągi wzorców nie mogą składać się tylko z symbolu wieloznacznego i domeny najwyższego poziomu. Na przykład https://.com i https://.co.uk są nieprawidłowe, ponieważ "https://.example.com" pasuje do example.com i wszystkich jej subdomen. Użyj listy rozdzielonej przecinkami, aby reprezentować 2 różne domeny. Na przykład "https://example1.com,https://.example2.com" pasuje do domen example1.com, example2.com i subdomen example2.com.
• Domeny z symbolem wieloznacznym muszą zaczynać się od bezpiecznego schematu https://, więc domena "*.example.com" jest uznawana za nieprawidłową.

Uwaga: w przeciwieństwie do interfejsu HTML API ciąg znaków z identyfikatorami URI rozdzielonymi przecinkami jest nieprawidłowy w polu allowed_parent_origin. Zamiast tego użyj obiektu tablicy w JavaScripcie.

Jeśli wartość pola allowed_parent_origin jest nieprawidłowa, inicjowanie trybu pośredniego elementu iframe przez One Tap nie powiedzie się i zostanie zatrzymane.

intermediate_iframe_close_callback

Zastępuje domyślne działanie pośredniego elementu iframe, gdy użytkownicy ręcznie zamykają logowanie jednym dotknięciem, klikając przycisk „X” w interfejsie logowania jednym dotknięciem. Działanie domyślne polega na natychmiastowym usunięciu pośredniego elementu iframe z DOM.

Pole intermediate_iframe_close_callback działa tylko w trybie pośrednim elementu iframe. Ma to wpływ tylko na pośredni element iframe, a nie na element iframe One Tap. Interfejs logowania jednym dotknięciem jest usuwany przed wywołaniem funkcji oddzwaniania.

Typ	Wymagane	Przykład
funkcja	Opcjonalny	intermediate_iframe_close_callback: logBeforeClose

itp_support

To pole określa, czy ulepszona funkcja One Tap UX powinna być włączona w przeglądarkach obsługujących Intelligent Tracking Prevention (ITP). (wartością domyślną jest false); Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
wartość logiczna	Opcjonalny	itp_support: false

login_hint

Jeśli Twoja aplikacja wie z wyprzedzeniem, który użytkownik powinien się zalogować, może przekazać Google podpowiedź logowania. Jeśli się powiedzie, wybór konta zostanie pominięty. Akceptowane wartości to adres e-mail lub wartość pola sub tokena identyfikacji.

Więcej informacji znajdziesz w opisie pola login_hint w dokumentacji OpenID Connect.

Typ	Wymagane	Przykład
Ciąg znaków, adres e-mail lub wartość z pola sub tokena identyfikacji.	Opcjonalny	login_hint: '[e-mail]'

HD

Jeśli użytkownik ma kilka kont i powinien logować się tylko na konto Workspace, użyj tej opcji, aby podać Google wskazówkę dotyczącą nazwy domeny. Jeśli się powiedzie, konta użytkowników wyświetlane podczas wyboru konta będą ograniczone do podanej domeny. Wartość wieloznaczna: * oferuje użytkownikowi tylko konta Workspace i wyklucza konta konsumenckie (uż[e-mail]) podczas wyboru konta.

Więcej informacji znajdziesz w opisie pola hd w dokumentacji OpenID Connect.

Typ	Wymagane	Przykład
Ciąg tekstowy. Pełna i jednoznaczna nazwa domeny lub *.	Opcjonalny	hd: '*'

use_fedcm_for_prompt

Wycofany: ten atrybut został wycofany i będzie ignorowany, jeśli zostanie użyty.

Zezwalaj przeglądarce na kontrolowanie próśb o zalogowanie się użytkownika i pośredniczenie w procesie logowania między Twoją witryną a Google. Wartość domyślna to fałsz. Więcej informacji znajdziesz na stronie Migracja do FedCM.

Typ	Wymagane	Przykład
wartość logiczna	Wycofano	use_fedcm_for_prompt: true

use_fedcm_for_button

To pole określa, czy w Chrome (wersja M125 lub nowsza na komputerach i M128 lub nowsza na Androidzie) ma być używany interfejs przycisku FedCM. Wartość domyślna to false. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
wartość logiczna	Opcjonalny	use_fedcm_for_button: true

button_auto_select

To pole określa, czy w przypadku procesu przycisku FedCM ma być włączona opcja automatycznego wyboru. Jeśli ta opcja jest włączona, powracający użytkownicy z aktywną sesją Google będą logowani automatycznie, bez wyświetlania prośby o wybranie konta. Wartość domyślna to false. Podczas uruchamiania akceptacji musisz wyraźnie włączyć automatyczne logowanie za pomocą przycisku. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
wartość logiczna	Opcjonalny	button_auto_select: true

Metoda: google.accounts.id.prompt

Metoda google.accounts.id.prompt wyświetla prompt One Tap lub wbudowany w przeglądarkę Credential Manager po wywołaniu metody initialize(). Oto przykładowy kod metody:

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

Zwykle metoda prompt() jest wywoływana podczas wczytywania strony. Ze względu na stan sesji i ustawienia użytkownika po stronie Google interfejs logowania jednym dotknięciem może się nie wyświetlać. Aby otrzymywać powiadomienia o stanie interfejsu w różnych momentach, przekaż funkcję, która będzie je odbierać.

Powiadomienia są wysyłane w tych momentach:

• Moment wyświetlenia: następuje po wywołaniu metody prompt(). Powiadomienie zawiera wartość logiczną wskazującą, czy interfejs jest wyświetlany.

• Pominięty moment: ma miejsce, gdy prośba o logowanie jednym dotknięciem zostanie zamknięta przez automatyczne lub ręczne anulowanie albo gdy Google nie może wydać danych logowania, np. gdy wybrana sesja została wylogowana z Google.

  W takich przypadkach zalecamy przejście do kolejnych dostawców tożsamości, jeśli tacy są.

• Odrzucony moment: występuje, gdy Google pomyślnie pobierze dane logowania lub gdy użytkownik chce zatrzymać proces pobierania danych logowania. Na przykład gdy użytkownik zacznie wpisywać swoją nazwę użytkownika i hasło w oknie logowania, możesz wywołać metodę google.accounts.id.cancel(), aby zamknąć okno logowania jednym dotknięciem i wywołać moment odrzucenia.

  Ostrzeżenie: gdy moment zostanie odrzucony, nie próbuj używać żadnego z następnych dostawców tożsamości.

Poniższy przykładowy kod implementuje pominięty moment:

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

Uwaga: aby zwiększyć prywatność użytkowników, powiadomienia o momencie wyświetlenia są celowo opóźniane, gdy interfejs FedCM jest włączony. Powiadomienia mogą być odbierane do 1 minuty po wystąpieniu zdarzenia.

Uwaga: w przypadku wbudowanego menedżera danych logowania nie ma powiadomień o momentach wyświetlenia, pominięcia ani odrzucenia, ponieważ występują one poza biblioteką GIS.

Typ danych: PromptMomentNotification

W tabeli poniżej znajdziesz metody i opisy typu danych PromptMomentNotification:

Uwaga: zmiany FedCM mają wpływ na isDisplayMoment(), isDisplayed(), isNotDisplayed(), getNotDisplayedReason() i getSkippedReason().Więcej informacji znajdziesz na stronie Migracja do FedCM.

Metoda
isDisplayMoment()	Zwraca wartość true, jeśli wyświetla się prośba o zalogowanie jednym dotknięciem. Uwaga: gdy funkcja FedCM jest włączona, to powiadomienie nie jest obsługiwane. Więcej informacji znajdziesz na stronie Migracja do FedCM.
isDisplayed()	Zwraca true, jeśli typ momentu to PromptMoment.DISPLAY i wyświetla się prośba o zalogowanie jednym dotknięciem. Uwaga: gdy funkcja FedCM jest włączona, to powiadomienie nie jest obsługiwane. Więcej informacji znajdziesz na stronie Migracja do FedCM.
isNotDisplayed()	Zwraca true, jeśli typ momentu to PromptMoment.DISPLAY, a prośba o logowanie jednym dotknięciem nie jest wyświetlana. Uwaga: gdy interfejs FedCM jest włączony, to powiadomienie nie jest obsługiwane. Więcej informacji znajdziesz na stronie Migracja do FedCM.
getNotDisplayedReason()	Szczegółowy powód, dla którego interfejs nie jest wyświetlany. Możliwe wartości: browser_not_supported invalid_client missing_client_id opt_out_or_no_session secure_http_required suppressed_by_user unregistered_origin unknown_reason Uwaga: gdy włączona jest funkcja FedCM, to powiadomienie nie jest obsługiwane. Więcej informacji znajdziesz na stronie Migracja do FedCM.
isSkippedMoment()	Zwraca true, jeśli typ momentu to PromptMoment.SKIPPED Uwaga: gdy funkcja FedCM jest włączona, ta metoda jest częściowo obsługiwana. W szczególności nie obsługuje przyczyny pominięcia user_cancel. Więcej informacji znajdziesz na stronie Migracja do FedCM.
getSkippedReason()	Szczegółowy powód pominięcia momentu. Możliwe wartości: auto_cancel user_cancel tap_outside issuing_failed Uwaga: gdy FedCM jest włączony, ta metoda jest częściowo obsługiwana. W szczególności nie obsługuje przyczyny pominięcia user_cancel. Więcej informacji znajdziesz na stronie Migracja do FedCM.
isDismissedMoment()	Zwraca true, jeśli typ momentu to PromptMoment.DISMISSED. Uwaga: gdy interfejs FedCM jest włączony, ta metoda jest w pełni obsługiwana. Więcej informacji znajdziesz na stronie Migracja do FedCM.
getDismissedReason()	Szczegółowy powód odrzucenia. Możliwe wartości: credential_returned cancel_called flow_restarted Uwaga: gdy interfejs FedCM jest włączony, ta metoda jest w pełni obsługiwana. Więcej informacji znajdziesz na stronie Migracja do FedCM.
getMomentType()	Zwróć ciąg znaków dla typu momentu. Możliwe wartości: display skipped dismissed

Typ danych: CredentialResponse

Gdy wywoływana jest funkcja callback, jako parametr przekazywany jest obiekt CredentialResponse. W tabeli poniżej znajdziesz pola zawarte w obiekcie odpowiedzi z danymi logowania:

Pole
credential	Zakodowany token identyfikacji JWT wydany przez Google.
select_by	Sposób zalogowania się użytkownika.
state	To pole jest zdefiniowane tylko wtedy, gdy użytkownik kliknie przycisk Zaloguj się przez Google, aby się zalogować, i określony jest atrybut state przycisku.

dane logowania

To pole zawiera token identyfikacji jako ciąg znaków tokena internetowego JSON (JWT) zakodowany w formacie base64.

Po zdekodowaniu token JWT wygląda jak w tym przykładzie:

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 Google Workspace email address
  "auth_time": 1748875426,
  "amr": ["mfa", "pwd", "tel"],
  "email": "[e-mail]", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "Elisa",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion creation time
  "exp": 1596477600, // Unix timestamp of the assertion expiration time
  "jti": "abc161803398874def"
}

Pole sub to globalnie unikalny identyfikator konta Google. Tylko pole sub może być używane jako identyfikator użytkownika, ponieważ jest unikalne dla wszystkich kont Google i nigdy nie jest używane ponownie.

Ostrzeżenie: nie używaj adresu e-mail jako identyfikatora, ponieważ konto Google może mieć wiele adresów e-mail w różnych momentach. Zawsze używaj pola sub jako identyfikatora użytkownika.

Za pomocą pól email, email_verified i hd możesz określić, czy Google hostuje adres e-mail i czy jest on autorytatywny. W przypadkach, gdy Google jest organem nadrzędnym, użytkownik jest potwierdzany jako prawowity właściciel konta.

Przypadki, w których Google jest źródłem informacji:

• email ma sufiks @gmail.com, jest to konto Gmail.
• Jeśli email_verified ma wartość true i ustawiono hd, jest to konto Google Workspace.

Użytkownicy mogą rejestrować konta Google bez korzystania z Gmaila lub Google Workspace. Gdy email nie zawiera sufiksu @gmail.com i nie ma hd, Google nie jest urzędem certyfikacji i do weryfikacji użytkownika zalecane jest użycie hasła lub innych metod weryfikacji. Wartość email_verfied może być też prawdziwa, jeśli Google zweryfikowało użytkownika podczas tworzenia konta Google, ale od tego czasu mogła nastąpić zmiana właściciela konta e-mail innej firmy.

Pole exp pokazuje czas, po którym wygasa możliwość zweryfikowania tokena po stronie serwera. W przypadku tokena identyfikacji uzyskanego z funkcji Zaloguj się przez Google jest to 1 godzina. Musisz zweryfikować token przed upływem czasu ważności. Nie używaj exp do zarządzania sesjami. Wygasły token identyfikacji nie oznacza, że użytkownik został wylogowany. Aplikacja odpowiada za zarządzanie sesjami użytkowników.

select_by

Uwaga: select_by jest zwracany tylko w obiekcie CredentialResponse przekazywanym do funkcji JavaScriptu callback i nie jest uwzględniany w żądaniach HTTP POST wysyłanych do login_uri ani data-login_uri.

W tabeli poniżej znajdziesz możliwe wartości pola select_by. Typ przycisku używanego wraz z sesją i stanem zgody użytkownika służy do ustawiania wartości,

• Użytkownik nacisnął przycisk Jedno dotknięcie lub Zaloguj się przez Google albo skorzystał z procesu logowania automatycznego bez dotykania.

• Znaleziono istniejącą sesję lub użytkownik wybrał konto Google i zalogował się na nie, aby utworzyć nową sesję.

• Zanim użytkownik udostępni Twojej aplikacji dane logowania z tokena identyfikacji, musi:

  • nacisnął przycisk Potwierdź, aby wyrazić zgodę na udostępnienie danych logowania, lub
  • użytkownik wcześniej wyraził zgodę i wybrał konto Google za pomocą funkcji Wybierz konto.

Wartość tego pola jest ustawiona na jeden z tych typów:

Wartość	Opis
auto	Logowanie automatyczne użytkownika z istniejącą sesją, który wcześniej wyraził zgodę na udostępnianie danych logowania. Dotyczy tylko przeglądarek, które nie obsługują FedCM.
user	Użytkownik z istniejącą sesją, który wcześniej wyraził zgodę, kliknął przycisk „Kontynuuj jako” w funkcji One Tap, aby udostępnić dane logowania. Dotyczy tylko przeglądarek, które nie obsługują FedCM.
fedcm	Użytkownik kliknął przycisk „Kontynuuj jako” w ramach funkcji One Tap, aby udostępnić dane logowania za pomocą FedCM. Dotyczy tylko przeglądarek obsługujących FedCM.
fedcm_auto	Logowanie automatyczne użytkownika z istniejącą sesją, który wcześniej wyraził zgodę na udostępnianie danych logowania za pomocą funkcji FedCM One Tap. Dotyczy tylko przeglądarek obsługujących FedCM.
user_1tap	Użytkownik z istniejącą sesją kliknął przycisk „Kontynuuj jako” w ramach logowania jednym dotknięciem, aby wyrazić zgodę i udostępnić dane logowania. Dotyczy tylko Chrome w wersji 75 i nowszych.
user_2tap	Użytkownik bez istniejącej sesji kliknął przycisk „Kontynuuj jako” w funkcji One Tap, aby wybrać konto, a następnie kliknął przycisk Potwierdź w wyskakującym okienku, aby wyrazić zgodę i udostępnić dane logowania. Dotyczy przeglądarek nieopartych na Chromium.
itp	Użytkownik, który wcześniej wyraził zgodę, kliknął One Tap w przeglądarkach ITP.
itp_confirm	Użytkownik, który nie wyraził zgody, kliknął One Tap w przeglądarkach ITP i kliknął przycisk „Dalej”, aby wyrazić zgodę i udostępnić dane logowania.
btn	Użytkownik, który wcześniej wyraził zgodę, kliknął przycisk Zaloguj się przez Google i wybrał konto Google w sekcji „Wybierz konto”, aby udostępnić dane logowania.
btn_confirm	Użytkownik, który nie wyraził zgody, nacisnął przycisk Zaloguj się przez Google, a następnie przycisk „Dalej”, aby wyrazić zgodę i udostępnić dane logowania.

stan

To pole jest zdefiniowane tylko wtedy, gdy użytkownik kliknie przycisk Zaloguj się przez Google, aby się zalogować, i określony jest atrybut state klikniętego przycisku. Wartość tego pola jest taka sama jak wartość określona w atrybucie state przycisku.

Na tej samej stronie można wyrenderować wiele przycisków Zaloguj się przez Google, dlatego każdemu z nich możesz przypisać unikalny ciąg znaków. Dlatego możesz użyć pola state, aby określić, który przycisk kliknął użytkownik, aby się zalogować.

Metoda: google.accounts.id.renderButton

Metoda google.accounts.id.renderButton renderuje przycisk Zaloguj się przez Google na stronach internetowych.

Oto przykładowy kod metody:

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

Typ danych: GsiButtonConfiguration

W tabeli poniżej znajdziesz listę pól i opisów typu danych GsiButtonConfiguration:

Atrybut
type	Typ przycisku: ikona lub przycisk standardowy.
theme	Motyw przycisku. Na przykład filled_blue lub filled_black.
size	Rozmiar przycisku. Na przykład mały lub duży.
text	Tekst przycisku. Na przykład „Zaloguj się przez Google” lub „Zarejestruj się przez Google”.
shape	Kształt przycisku. Na przykład prostokątny lub okrągły.
logo_alignment	Wyrównanie logo Google: do lewej lub do środka.
width	Szerokość przycisku w pikselach.
locale	Jeśli jest ustawiony, renderowany jest język przycisku.
click_listener	Jeśli ta funkcja jest ustawiona, jest wywoływana po kliknięciu przycisku Zaloguj się przez Google.
state	Jeśli ten ciąg jest ustawiony, jest zwracany z tokenem identyfikacji.

Typy atrybutów

W poniższych sekcjach znajdziesz szczegółowe informacje o poszczególnych typach atrybutów oraz przykłady.

typ

Typ przycisku. Wartością domyślną jest standard.

Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
tekst	Tak	type: "icon"

W tabeli poniżej znajdziesz dostępne typy przycisków i ich opisy:

Typ
standard	Przycisk z tekstem lub spersonalizowanymi informacjami.
icon	Przycisk ikony bez tekstu.

motyw

Motyw przycisku. Wartością domyślną jest outline. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
tekst	Opcjonalny	theme: "filled_blue"

W tabeli poniżej znajdziesz dostępne motywy i ich opisy:

Motyw	Przykłady	Specyfikacja
outline	Standardowy motyw przycisku.	Wypełnienie: #FFFFFF Obrys: #747775 | 1 px | wewnątrz Czcionka: #1F1F1F | Roboto Medium | 14/20 Spersonalizowana: #1F1F1F | Roboto | Medium 12/14 | Regular 11/13
filled_blue	Niebieski motyw przycisku.	Wypełnienie: #0B57D0 Obrys: #OB57D0 | 1 px | wewnątrz Czcionka: #FFFFFF | Google Sans Medium | 14/20 Spersonalizowana: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13
filled_black	Czarny przycisk z kontrastującym logo.	Fill: #202124 Stroke: #OB57D0 | 1px | inside Font: #FFFFFF | Google Sans Medium | 14/20 Personalized: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13
outline_dark	Motyw przycisku z czarnym wypełnieniem.	Wypełnienie: #131314 Obrys: #8E918F | 1 px | wewnątrz Czcionka: #FFFFFF | Google Sans Medium | 14/20 Spersonalizowana: #FFFFFF | Roboto | Medium 12/14 | Zwykła 11/13

rozmiar

Rozmiar przycisku. Wartością domyślną jest large. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
tekst	Opcjonalny	size: "small"

W tabeli poniżej znajdziesz dostępne rozmiary przycisków i ich opisy:

Rozmiar
large	Duży przycisk.
medium	Przycisk średniej wielkości.
small	Mały przycisk.

tekst

Tekst przycisku. Wartością domyślną jest signin_with. Nie ma wizualnych różnic w tekście przycisków ikon, które mają różne atrybuty text. Jedynym wyjątkiem jest sytuacja, gdy tekst jest odczytywany w celu ułatwienia dostępu do ekranu.

Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
tekst	Opcjonalny	text: "signup_with"

W tabeli poniżej znajdziesz wszystkie dostępne teksty przycisków i ich opisy:

Tekst
signin_with	Tekst na przycisku to „Zaloguj się przez Google”.
signup_with	Tekst na przycisku to „Zarejestruj się przez Google”.
continue_with	Tekst na przycisku to „Kontynuuj z Google”.
signin	Tekst na przycisku to „Zaloguj się”.

kształt

Kształt przycisku. Wartością domyślną jest rectangular. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
tekst	Opcjonalny	shape: "rectangular"

W tabeli poniżej znajdziesz dostępne kształty przycisków i ich opisy:

Kształt
rectangular	Przycisk w kształcie prostokąta. Jeśli jest używany w przypadku przycisku typu icon, jest taki sam jak square.
pill	Przycisk w kształcie pigułki. Jeśli jest używany w przypadku przycisku typu icon, działa tak samo jak circle.
circle	Przycisk w kształcie kółka. Jeśli jest używany w przypadku przycisku typu standard, jest taki sam jak pill.
square	Przycisk w kształcie kwadratu. Jeśli jest używany w przypadku przycisku typu standard, jest taki sam jak rectangular.

logo_alignment

Wyrównanie logo Google. Wartością domyślną jest left. Ten atrybut dotyczy tylko typu przycisku standard. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
tekst	Opcjonalny	logo_alignment: "center"

W tabeli poniżej znajdziesz dostępne wyrównania i ich opisy:

logo_alignment
left	Wyrównuje logo Google do lewej.
center	Wyśrodkowuje logo Google.

szerokość

Minimalna szerokość przycisku w pikselach. Maksymalna szerokość to 400 pikseli.

Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
tekst	Opcjonalny	width: "400"

język

Opcjonalnie. Wyświetlaj tekst przycisku w określonym języku. W przeciwnym razie użyj domyślnego języka konta Google lub ustawień przeglądarki użytkownika. Podczas wczytywania biblioteki dodaj do dyrektywy src parametr hl i kod języka, np. gsi/client?hl=<iso-639-code>.

Jeśli nie jest ustawiona, używane są domyślne ustawienia regionalne przeglądarki lub preferencje użytkownika sesji Google. Dlatego różni użytkownicy mogą widzieć różne wersje zlokalizowanych przycisków, które mogą mieć różne rozmiary.

Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
tekst	Opcjonalny	locale: "zh_CN"

click_listener

Możesz zdefiniować funkcję JavaScript, która będzie wywoływana po kliknięciu przycisku Zaloguj się przez Google, używając atrybutu click_listener.

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

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

W tym przykładzie po kliknięciu przycisku Zaloguj się przez Google w konsoli jest rejestrowany komunikat Kliknięto przycisk Zaloguj się przez Google….

stan

Opcjonalnie, ponieważ na tej samej stronie można renderować wiele przycisków Zaloguj się przez Google, możesz przypisać do każdego przycisku unikalny ciąg znaków. Ten sam ciąg znaków zostanie zwrócony wraz z tokenem identyfikacji, dzięki czemu możesz określić, który przycisk został kliknięty przez użytkownika, aby się zalogować.

Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
tekst	Opcjonalny	data-state: "button 1"

Typ danych: dane logowania

Gdy wywoływana jest funkcja native_callback, jako parametr przekazywany jest obiekt Credential. Tabela poniżej zawiera listę pól obiektu:

Pole
id	Identyfikuje użytkownika.
password	hasło,

Metoda: google.accounts.id.disableAutoSelect

Gdy użytkownik wyloguje się z Twojej witryny, musisz wywołać metodę google.accounts.id.disableAutoSelect, aby zapisać stan w plikach cookie. Zapobiega to pętli UX. Zapoznaj się z tym fragmentem kodu metody:

google.accounts.id.disableAutoSelect()

Poniższy przykładowy kod implementuje metodę google.accounts.id.disableAutoSelect z funkcją onSignout():

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

Metoda: google.accounts.id.storeCredential

Ta metoda jest kodem otaczającym metodę store() wbudowanego w przeglądarkę interfejsu API Menedżera danych logowania. Dlatego można go używać tylko do przechowywania danych logowania za pomocą hasła. Oto przykładowy kod metody:

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

Poniższy przykładowy kod implementuje metodę google.accounts.id.storeCredential z funkcją onSignIn():

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

Metoda: google.accounts.id.cancel

Możesz anulować proces logowania jednym dotknięciem, jeśli usuniesz prompt z DOM strony uzależnionej. Jeśli dane logowania zostały już wybrane, operacja anulowania zostanie zignorowana. Oto przykładowy kod metody:

google.accounts.id.cancel()

Poniższy przykładowy kod implementuje metodę google.accounts.id.cancel() z funkcją onNextButtonClicked():

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

Wywołanie zwrotne wczytywania biblioteki: onGoogleLibraryLoad

Możesz zarejestrować wywołanie zwrotne onGoogleLibraryLoad. Otrzymuje powiadomienie po wczytaniu biblioteki JavaScript funkcji Zaloguj się przez Google:

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

To wywołanie zwrotne jest tylko skrótem do wywołania zwrotnego window.onload. Nie ma różnic w zachowaniu.

Poniższy przykładowy kod implementuje wywołanie zwrotne onGoogleLibraryLoad:

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

Metoda: google.accounts.id.revoke

Metoda google.accounts.id.revoke unieważnia uwierzytelnienie przez OAuth używane do udostępniania tokena identyfikacji określonego użytkownika. Zapoznaj się z poniższym fragmentem kodu metody: javascript google.accounts.id.revoke(login_hint, callback)

Parametr	Typ	Opis
login_hint	tekst	Adres e-mail lub unikalny identyfikator konta Google użytkownika. Identyfikator to właściwość sub ładunku credential.
callback	funkcja	Opcjonalny moduł obsługi RevocationResponse.

Poniższy przykładowy kod pokazuje, jak używać metody revoke z identyfikatorem.

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

Ważne: Unieważnienie powoduje usunięcie wszystkich zakresów protokołu OAuth 2.0 przyznanych wcześniej projektowi, co unieważnia wszystkie wydane tokeny dostępu lub tokeny odświeżania dla wszystkich klientów zarejestrowanych w tym projekcie.

Typ danych: RevocationResponse

Gdy wywoływana jest funkcja callback, jako parametr przekazywany jest obiekt RevocationResponse. W tabeli poniżej znajdziesz pola, które zawiera obiekt odpowiedzi na unieważnienie:

Pole
successful	To pole jest wartością zwracaną przez wywołanie metody.
error	To pole może zawierać szczegółowy komunikat o błędzie.

udało się

To pole jest wartością logiczną ustawioną na „true”, jeśli wywołanie metody unieważnienia się powiodło, lub „false”, jeśli się nie powiodło.

błąd

To pole jest wartością ciągu znaków i zawiera szczegółowy komunikat o błędzie, jeśli wywołanie metody unieważnienia się nie powiedzie. W przypadku powodzenia jest niezdefiniowane.