Dokumentacja interfejsu Sign in with Google JavaScript API

Na tej stronie znajdziesz opis interfejsu Sign in with Google JavaScript API, który służy do wyświetlania przycisku Zaloguj się przez Google lub monitu jedno dotknięcie na stronach internetowych.

Metoda: google.accounts.id.initialize

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

google.accounts.id.initialize(IdConfiguration)

Poniższy przykład kodu implementuje metodę google.accounts.id.initialize za pomocą funkcji 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 Zaloguj się przez Google, która może być niejawnie 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. jedno dotknięcie, spersonalizowany przycisk, wycofanie zgody itp.).
• Jeśli wywołasz metodę google.accounts.id.initialize kilka razy, zapamiętane i użyte zostaną tylko konfiguracje z ostatniego wywołania.

Konfiguracje są resetowane za każdym razem, gdy wywołasz metodę google.accounts.id.initialize, a wszystkie kolejne metody na tej samej stronie internetowej natychmiast używają nowych konfiguracji.

Ostrzeżenie: metoda google.accounts.id.initialize powinna być wywoływana tylko raz, nawet jeśli na tej samej stronie internetowej używasz zarówno logowania jednym kliknięciem, jak i przycisku.

Typ danych: IdConfiguration

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

Pole
client_id	Identyfikator klienta aplikacji
color_scheme	Schemat kolorów zastosowany w oknie logowania jednym kliknięciem.
auto_select	Włącza automatyczny wybór.
callback	Funkcja JavaScript, która obsługuje tokeny identyfikatora. Tryb UX przycisku popup Zaloguj się przez Google i jednego dotknięcia Google korzysta z tego atrybutu.
login_uri	Adres URL punktu końcowego logowania. Przycisk Zaloguj się przez Google w redirect trybie UX używa tego atrybutu.
native_callback	Funkcja JavaScript, która obsługuje dane logowania w postaci hasła.
cancel_on_tap_outside	Anuluje prompt, jeśli użytkownik kliknie poza nim.
prompt_parent_id	Identyfikator DOM elementu kontenera promptu jedno dotknięcie
nonce	Losowy ciąg znaków w przypadku tokenów identyfikatora
essential_claims	Dodatkowe roszczenia, które mają być uwzględnione w tokenie tożsamości zwracanym przez Google.
context	tytuł i słowa w powiadomieniu o logowaniu jednym dotknięciem;
state_cookie_domain	Jeśli musisz wywołać funkcję jednego dotknięcia w domenie nadrzędnej i jej subdomenach, przekaż do tego pola domenę nadrzędną, aby był używany jeden wspólny plik cookie.
ux_mode	Proces logowania za pomocą przycisku Zaloguj się przez Google
allowed_parent_origin	Źródła, które mogą osadzać pośredni element iframe. Jedno dotknięcie działa w trybie pośredniego elementu iframe, jeśli to pole jest obecne.
intermediate_iframe_close_callback	Zastępuje domyślne działanie pośredniego elementu iframe, gdy użytkownicy ręcznie zamykają One Tap.
itp_support	Włącza ulepszony interfejs jedno dotknięcie w przeglądarkach ITP.
login_hint	Pomiń wybór konta, podając wskazówkę dla 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. Zezwalaj przeglądarce na kontrolowanie monitów o logowanie 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 (na komputerach w wersji M125 lub nowszej i na urządzeniach z Androidem w wersji M128 lub nowszej) ma być używany interfejs przycisku FedCM. Domyślnie jest ustawione na false.
button_auto_select	Określa, czy w przypadku przepływu przycisku FedCM ma być włączona opcja automatycznego wyboru. Jeśli jest włączona, powracający użytkownicy z aktywną sesją Google będą logować się automatycznie, bez wyświetlania okna wyboru 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 tabeli poniżej:

Typ	Wymagane	Przykład
ciąg znaków	Tak	client_id: "CLIENT_ID.apps.googleusercontent.com"

color_scheme

To pole określa schemat kolorów zastosowany w wyskakującym okienku jedno dotknięcie. Więcej informacji znajdziesz w tabeli poniżej:

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalnie. Domyślnie używa domyślnego schematu kolorów systemu 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 tego, czy preferowany przez użytkownika schemat jest jasny czy 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 zawiera funkcję JavaScript, która obsługuje token identyfikatora zwracany przez prompta jedno dotknięcie lub wyskakujące okienko. Ten atrybut jest wymagany, jeśli używany jest tryb UX popup funkcji Google jedno dotknięcie lub przycisku Zaloguj się przez Google. Więcej informacji znajdziesz w tabeli poniżej:

Typ	Wymagane	Przykład
funkcja	Wymagane w przypadku logowania jednym kliknięciem i popup trybu UX	callback: handleResponse

login_uri

Ten atrybut to identyfikator URI punktu końcowego logowania.

Wartość musi dokładnie pasować do jednego z autoryzowanych identyfikatorów URI przekierowania dla klienta OAuth 2.0, który został skonfigurowany w konsoli Google Cloud i musi być zgodny z naszymi zasadami weryfikacji 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 przesyłane na tę stronę.

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

Więcej informacji znajdziesz w tabeli poniżej:

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

Punkt końcowy logowania musi obsługiwać żądania POST zawierające w treści parametr credential z wartością tokena identyfikatora.

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

wypróbuj interfejs HTML API.

native_callback

To pole zawiera nazwę funkcji JavaScript, która obsługuje hasło kredytowe zwrócone przez wbudowany w przeglądarkę menedżer danych logowania. 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ć żądanie logowania jednym kliknięciem, jeśli użytkownik kliknie poza wyskakującym okienkiem. Wartością domyślną jest true. Możesz ją wyłączyć, ustawiając wartość false. Więcej informacji znajdziesz w tabeli poniżej:

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, w prawym górnym rogu okna wyświetli się prośba o logowanie jednym kliknięciem. Więcej informacji znajdziesz w tabeli poniżej:

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalny	prompt_parent_id: 'parent_id'

liczba jednorazowa

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

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalny	nonce: "biaqbm70g23"

Długość jednorazowego kodu jest ograniczona do maksymalnego rozmiaru tokena JWT obsługiwanego przez Twoje środowisko oraz do ograniczeń rozmiaru HTTP poszczególnych przeglądarek i serwerów.

essential_claims

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

Więcej informacji znajdziesz w tabeli poniżej:

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalny	essential_claims: "auth_time, amr"

kontekst

To pole zmienia tekst tytułu i komunikatów wyświetlanych w wyskakującym okienku jedno dotknięcie. Nie ma wpływu na przeglądarki ITP. Domyślna wartość to signin.

Więcej informacji znajdziesz w tabeli poniżej:

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalny	context: "use"

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

Kontekst
signin	„Zaloguj się w usłudze”
signup	„Zarejestruj się w usłudze”
use	„Użyj”

state_cookie_domain

Jeśli chcesz wyświetlać logowanie jednym kliknięciem w domenie nadrzędnej i jej subdomenach, przekaż do tego pola domenę nadrzędną, aby używać jednego pliku cookie ze stanem współdzielonym. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalny	state_cookie_domain: "example.com"

ux_mode

Użyj tego pola, aby ustawić ścieżkę UX używaną przez przycisk Zaloguj się przez Google. Wartość domyślna to popup. Ten atrybut nie ma wpływu na UX One Tap. Więcej informacji znajdziesz w tabeli poniżej:

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalny	ux_mode: "redirect"

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

Tryb UX
popup	Przeprowadza proces logowania w wyskakującym okienku.
redirect	Przeprowadza proces logowania za pomocą przekierowania na całą stronę.

allowed_parent_origin

Źródła, które mogą osadzać pośredni element iframe. Jeśli to pole jest obecne, jedno dotknięcie działa w trybie pośredniego elementu iframe. Więcej informacji znajdziesz w tabeli poniżej:

Typ	Wymagane	Przykład
ciąg tekstowy lub tablica ciągów tekstowych	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 domeny.	["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). Pamiętaj o tych kwestiach, gdy używasz symboli wieloznacznych:

• Ciągi wzorca 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 jego subdomen. Użyj listy rozdzielonej przecinkami, aby przedstawić 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 wieloznacznymi symbolami muszą zaczynać się od bezpiecznego schematu https://, więc "*.example.com" jest uznawany za nieprawidłowy.

Uwaga: w przeciwieństwie do interfejsu HTML API ciąg z rozdzielonymi przecinkami adresami URI jest nieprawidłowy w przypadku pola allowed_parent_origin. Zamiast niego użyj obiektu JavaScript Array.

Jeśli wartość pola allowed_parent_origin jest nieprawidłowa, inicjowanie jedno dotknięcie w trybie pośredniego elementu iframe nie powiedzie się i zostanie zatrzymane.

intermediate_iframe_close_callback

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

Pole intermediate_iframe_close_callback ma zastosowanie tylko w trybie pośredniego elementu iframe i dotyczy tylko tego elementu, a nie elementu iframe jedno dotknięcie. Interfejs jedno dotknięcie jest usuwany przed wywołaniem wywołania zwrotnego.

Typ	Wymagane	Przykład
funkcja	Opcjonalny	intermediate_iframe_close_callback: logBeforeClose

itp_support

To pole określa, czy w przeglądarkach obsługujących inteligentne zapobieganie śledzeniu (ITP) ma być włączony ulepszony interfejs jedno dotknięcie. (wartością domyślną jest false); Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
Wartość logiczna	Opcjonalny	itp_support: true

login_hint

Jeśli aplikacja z wyprzedzeniem wie, który użytkownik powinien się zalogować, może przekazać Google wskazówkę dotyczącą logowania. Jeśli operacja się powiedzie, pomijany jest wybór konta. Akceptowane wartości to adres e-mail lub wartość pola sub tokena identyfikatora.

Więcej informacji znajdziesz w polu login_hint w dokumentacji OpenID Connect.

Typ	Wymagane	Przykład
Ciąg znaków, adres e-mail lub wartość z pola sub tokena identyfikatora.	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 operacja się powiedzie, konta użytkownika 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 polu 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 monitów o logowanie 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 (na komputerach w wersji M125 lub nowszej i na urządzeniach z Androidem w wersji M128 lub nowszej) ma być używany interfejs przycisku FedCM. Domyślnie ma wartość 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 przepływu przycisku FedCM włączyć opcję automatycznego wyboru. Jeśli ta opcja jest włączona, powracający użytkownicy z aktywną sesją Google będą automatycznie logować się w usłudze, pomijając prośbę o wybranie konta. Domyślnie jest ustawiona wartość false. Podczas uruchamiania opcji rezygnacji 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 prośbę o logowanie jednym kliknięciem lub wbudowany w przeglądarkę menedżer danych logowania 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 prośby o logowanie jednym kliknięciem może się nie wyświetlać. Aby otrzymywać powiadomienia o stanie interfejsu w różnych momentach, przekaż funkcję, która będzie odbierać powiadomienia o stanie interfejsu.

Powiadomienia są wysyłane w tych momentach:

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

• Pominięty moment: występuje, gdy prośba o logowanie jednym kliknięciem zostanie zamknięta przez automatyczne anulowanie, ręczne anulowanie lub gdy Google nie wyda poświadczeń, 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 istnieją.

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

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

Poniższy przykład kodu 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 włączona jest usługa FedCM. Powiadomienia mogą być odbierane nawet minutę po wystąpieniu rzeczywistego zdarzenia.

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

Typ danych: PromptMomentNotification

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

Uwaga: zmiany w 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 logowanie jednym kliknięciem. Uwaga: gdy FedCM jest włączony, to powiadomienie nie jest obsługiwane. Więcej informacji znajdziesz na stronie Migracja do FedCM.
isDisplayed()	Zwraca wartość true, jeśli typ momentu to PromptMoment.DISPLAY, a wyświetlany jest komunikat One Tap. Uwaga: gdy włączona jest usługa FedCM, to powiadomienie nie jest obsługiwane. Więcej informacji znajdziesz na stronie Migracja do FedCM.
isNotDisplayed()	Zwraca wartość true, jeśli typ momentu to PromptMoment.DISPLAY, a prośba o potwierdzenie jednym kliknięciem nie jest wyświetlana. Uwaga: gdy FedCM jest włączony, to powiadomienie nie jest obsługiwane. Więcej informacji znajdziesz na stronie Migracja do FedCM.
getNotDisplayedReason()	Szczegółowa przyczyna, dla której 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 FedCM jest włączony, 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 jest włączona usługa FedCM, ta metoda jest częściowo obsługiwana. W szczególności nie obsługuje powodu pominięcia user_cancel. Więcej informacji znajdziesz na stronie Migracja do FedCM.
getSkippedReason()	Szczegółowa przyczyna 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 powodu pominięcia user_cancel. Więcej informacji znajdziesz na stronie Migracja do FedCM.
isDismissedMoment()	Zwraca wartość true, jeśli typ momentu to PromptMoment.DISMISSED. Uwaga: gdy 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 FedCM jest włączona, ta metoda jest w pełni obsługiwana. Więcej informacji znajdziesz na stronie Migracja do FedCM.
getMomentType()	Zwraca 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 listę pól, które znajdują się w obiekcie odpowiedzi dotyczącej danych logowania:

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

dane logowania

To pole zawiera token tożsamości w postaci zakodowanego w formacie Base64 ciągu tokena sieciowego JSON (JWT).

Po zdekodowaniu token JWT wygląda tak:

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. Używaj pola sub jako identyfikatora użytkownika, ponieważ jest ono niepowtarzalne wśród 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.

Korzystając z pól email, email_verified i hd, możesz sprawdzić, czy Google hostuje adres e-mail i czy jest dla niego autorytatywny. W przypadku, gdy Google jest autorytatywny, użytkownik jest potwierdzony jako prawowity właściciel konta.

Przypadki, w których Google jest miarodajne:

• email ma sufiks @gmail.com, jest to konto Gmail.
• email_verified ma wartość „prawda”, a hd jest ustawiona, jest to konto Google Workspace.

Użytkownicy mogą rejestrować konta Google bez używania Gmaila ani Google Workspace. Gdy email nie zawiera sufiksu @gmail.com, a hd nie występuje, Google nie jest autorytatywny i zaleca się użycie hasła lub innych metod weryfikacji, aby potwierdzić tożsamość użytkownika. email_verfied może być też prawdziwe, ponieważ Google początkowo zweryfikowało użytkownika podczas tworzenia konta Google, ale od tego czasu własność konta e-mail innej firmy mogła ulec zmianie.

Pole exp pokazuje czas wygaśnięcia, w którym musisz zweryfikować token po stronie serwera. W przypadku tokena identyfikatora uzyskanego w ramach Zaloguj się przez Google wynosi on godzinę. Musisz zweryfikować token przed upływem terminu ważności. Nie używaj exp do zarządzania sesjami. Wygasły token identyfikatora nie oznacza, że użytkownik jest wylogowany. Aplikacja odpowiada za zarządzanie sesjami użytkowników.

select_by

W tabeli poniżej znajdziesz możliwe wartości pola select_by. Typ użytego przycisku wraz ze stanem sesji i stanem zgody użytkownika służą do ustawiania wartości.

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

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

• Zanim udostępnisz aplikacji dane logowania w postaci tokena identyfikatora, użytkownik musi

  • kliknął(-a) przycisk Potwierdź, aby wyrazić zgodę na udostępnianie danych logowania,
  • wcześniej wyraził(-a) zgodę i użył(-a) opcji Wybierz konto, aby wybrać konto Google.

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 ramach logowania jednym kliknięciem, aby udostępnić dane logowania. Dotyczy tylko przeglądarek, które nie obsługują FedCM.
fedcm	Użytkownik kliknął przycisk „Kontynuuj jako” w ramach logowania jednym kliknięciem, 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ą FedCM jedno dotknięcie. Dotyczy tylko przeglądarek obsługujących FedCM.
user_1tap	Użytkownik z istniejącą sesją kliknął przycisk „Kontynuuj jako” w ramach logowania jednym kliknię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 ramach logowania jednym kliknięciem, aby wybrać konto, a następnie kliknął przycisk „Potwierdź” w wyskakującym okienku, aby wyrazić zgodę i udostępnić dane logowania. Dotyczy przeglądarek innych niż Chromium.
itp	Użytkownik, który wcześniej wyraził zgodę, kliknął opcję „Jedno kliknięcie” w przeglądarkach ITP.
itp_confirm	Użytkownik, który nie wyraził zgody, kliknął przycisk „Logowanie jednym kliknięciem” w przeglądarkach ITP, a następnie 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 z listy „Wybierz konto”, aby udostępnić dane logowania.
btn_confirm	Użytkownik, który nie wyraził zgody, kliknął 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ć, a kliknięty przycisk ma określony atrybut state. Wartość tego pola jest taka sama jak wartość określona w atrybucie state przycisku.

Na tej samej stronie można renderować wiele przycisków Zaloguj się przez Google, więc możesz przypisać do każdego z nich unikalny ciąg znaków. Dlatego możesz użyć tego 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 standardowy przycisk.
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, język przycisku jest renderowany.
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 znaków jest ustawiony, jest zwracany z tokenem identyfikatora.

Typy atrybutów

W kolejnych sekcjach znajdziesz szczegółowe informacje o każdym typie atrybutu oraz przykład.

typ

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

Więcej informacji znajdziesz w tabeli poniżej:

Typ	Wymagane	Przykład
ciąg znaków	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 z ikoną bez tekstu.

motyw

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

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalny	theme: "filled_blue"

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

Motyw
outline	Standardowy motyw przycisku.
filled_blue	Motyw przycisku wypełnionego kolorem niebieskim.
filled_black	Motyw przycisku wypełnionego kolorem czarnym.

rozmiar

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

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalny	size: "small"

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

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

tekst

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

Więcej informacji znajdziesz w tabeli poniżej:

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalny	text: "signup_with"

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

Tekst
signin_with	Tekst przycisku to „Zaloguj się przez Google”.
signup_with	Tekst przycisku to „Zarejestruj się przez Google”.
continue_with	Tekst przycisku to „Kontynuuj z Google”.
signin	Tekst 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
ciąg znaków	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 typu przycisku icon, jest taki sam jak square.
pill	Przycisk w kształcie pigułki. Jeśli jest używany w przypadku przycisku typu icon, jest taki sam jak circle.
circle	Przycisk w kształcie koła. Jeśli jest używany w przypadku typu przycisku standard, jest taki sam jak pill.
square	Przycisk w kształcie kwadratu. Jeśli jest używany w przypadku typu przycisku 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
ciąg znaków	Opcjonalny	logo_alignment: "center"

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

logo_alignment
left	Wyśrodkowuje logo Google po lewej stronie.
center	Wyśrodkowuje logo Google.

szerokość

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

Więcej informacji znajdziesz w tabeli poniżej:

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalny	width: "400"

język

Opcjonalnie. Wyświetla tekst przycisku w określonym języku. W przeciwnym razie używa domyślnych ustawień 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 ustawiony, używany jest domyślny język 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ć też różne rozmiary.

Więcej informacji znajdziesz w tabeli poniżej:

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalny	locale: "zh_CN"

click_listener

Za pomocą atrybutu click_listener możesz zdefiniować funkcję JavaScript, która ma być wywoływana po kliknięciu przycisku Zaloguj się przez Google.

  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 zostanie zarejestrowany komunikat Sign in with Google button clicked....

stan

Opcjonalnie, ponieważ na tej samej stronie można renderować wiele przycisków „Zaloguj się przez Google”, możesz przypisać do każdego z nich unikalny ciąg znaków. Ten sam ciąg znaków zostanie zwrócony wraz z tokenem identyfikatora, dzięki czemu możesz określić, który przycisk kliknął użytkownik podczas logowania.

Więcej informacji znajdziesz w tabeli poniżej:

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalny	data-state: "button 1"

Typ danych: dane logowania

Gdy wywoływana jest funkcja native_callback, jako parametr przekazywany jest obiekt Credential. W tabeli poniżej znajdziesz listę pól zawartych w obiekcie:

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 bez wyjścia w interfejsie. Obejrzyj poniższy fragment kodu metody:

google.accounts.id.disableAutoSelect()

Poniższy przykład kodu implementuje metodę google.accounts.id.disableAutoSelect za pomocą funkcji onSignout():

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

Metoda: google.accounts.id.storeCredential

Ta metoda jest otoczką metody store() wbudowanego w przeglądarkę interfejsu Credential Manager API. Można jej więc używać tylko do przechowywania danych logowania w postaci hasła. Poniżej znajdziesz przykład kodu tej metody:

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

Poniższy przykład kodu implementuje metodę google.accounts.id.storeCredential za pomocą funkcji 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 kliknięciem, usuwając prompt z DOM witryny. Operacja anulowania jest ignorowana, jeśli dane logowania są już wybrane. Oto przykładowy kod metody:

google.accounts.id.cancel()

Poniższy przykład kodu implementuje metodę google.accounts.id.cancel() za pomocą funkcji onNextButtonClicked():

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

Wywołanie zwrotne wczytywania biblioteki: onGoogleLibraryLoad

Możesz zarejestrować wywołanie zwrotne onGoogleLibraryLoad. Powiadomienie jest wysyłane po wczytaniu biblioteki JavaScript Logowanie przez Google:

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

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

Poniższy przykład kodu 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 identyfikatora określonego użytkownika. Oto fragment kodu metody:javascript google.accounts.id.revoke(login_hint, callback)

Parametr	Typ	Opis
login_hint	ciąg znaków	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żna informacja: cofnięcie uprawnień usuwa wszystkie zakresy OAuth 2.0 przyznane wcześniej projektowi, unieważniając wszystkie wydane tokeny dostępu i 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 listę pól zawartych w obiekcie odpowiedzi dotyczącej unieważnienia:

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 zakończyło się powodzeniem, lub „false”, jeśli zakończyło się niepowodzeniem.

błąd

To pole jest wartością tekstową i zawiera szczegółowy komunikat o błędzie, jeśli wywołanie metody revoke się nie powiodło. W przypadku powodzenia jest niezdefiniowane.