Dokumentacja interfejsu Zaloguj się z użyciem interfejsu Google JavaScript API

Na tej stronie znajdziesz opis interfejsu JavaScript API do logowania. Za pomocą tego interfejsu API możesz wyświetlać na stronach internetowych prośbę o skorzystanie z funkcji One Tap lub przycisk Zaloguj się przez Google.

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 Logowania 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. One Tap, 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.

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 prompcie One Tap.
auto_select Włącza automatyczny wybór.
callback Funkcja JavaScript, która obsługuje tokeny tożsamości. Tryb UX przycisku popup Zaloguj się przez Google i funkcji One Tap od Google korzysta z tego atrybutu.
login_uri URL punktu końcowego logowania. Przycisk Zaloguj się przez Google redirect tryb 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 z prośbą o logowanie jednym kliknięciem.
nonce Losowy ciąg znaków w przypadku tokenów identyfikatora
context tytuł i słowa w powiadomieniu o logowaniu jednym dotknięciem;
state_cookie_domain Jeśli musisz wywołać One Tap 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 UX przycisku Zaloguj się przez Google
allowed_parent_origin Źródła, które mogą osadzać pośredni element iframe. Jeśli to pole jest obecne, One Tap jest uruchamiany w trybie pośredniego elementu iframe.
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 One Tap w przeglądarkach z funkcją 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 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 wybierania. Jeśli ta opcja 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 One Tap. 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 Stosuj domyślny schemat kolorów systemu użytkownika w zależności od tego, czy preferowany schemat użytkownika 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 1 sesja Google, w której Twoja aplikacja została wcześniej zatwierdzona. 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 prośbę o logowanie jednym kliknięciem lub wyskakujące okienko. 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 logowania jednym kliknięciem i trybu popup 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 UX.

Więcej informacji znajdziesz w tabeli poniżej:

Typ Opcjonalny Przykład
URL Domyślnie jest to identyfikator URI bieżącej strony lub określona przez Ciebie wartość.
Używany tylko wtedy, gdy ustawiona jest wartość 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.

wypróbuj interfejs HTML API.

native_callback

To pole zawiera nazwę funkcji JavaScript, która obsługuje dane logowania hasła 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 metodą powtórzenia. Więcej informacji znajdziesz w tabeli poniżej:

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

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

kontekst

To pole zmienia tekst tytułu i komunikatów wyświetlanych w oknie One Tap. 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”

Jeśli chcesz wyświetlać One Tap 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 tabeli poniżej:

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

ux_mode

Użyj tego pola, aby ustawić przepływ UX używany przez przycisk Zaloguj się przez Google. Wartością domyślną jest popup. Ten atrybut nie ma wpływu na interfejs 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, One Tap 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 listę obsługiwanych typów 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" obejmuje example.com i jej subdomeny na wszystkich poziomach (np.news.example.com, login.news.example.com). Pamiętaj, że podczas korzystania z symboli wieloznacznych:

  • Ciągi wzorca nie mogą składać się tylko z symbolu wieloznacznego i domeny najwyższego poziomu. Na przykład https://.comhttps://.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.

Jeśli wartość pola allowed_parent_origin jest nieprawidłowa, inicjowanie trybu pośredniego ramki iframe za pomocą One Tap zakończy się niepowodzeniem i zostanie zatrzymane.

intermediate_iframe_close_callback

Zastępuje domyślne zachowanie pośredniego elementu iframe, gdy użytkownicy ręcznie zamykają One Tap, klikając przycisk „X” w interfejsie One Tap. Domyślnie pośredni element iframe jest natychmiast usuwany z modelu DOM.

Pole intermediate_iframe_close_callback działa tylko w trybie pośredniego elementu iframe. Ma to wpływ tylko na pośredni element iframe, a nie na element iframe One Tap. Interfejs One Tap 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 One Tap. (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 Twoja aplikacja z wyprzedzeniem wie, który użytkownik powinien się zalogować, może przekazać Google podpowiedź logowania. Jeśli się to uda, 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: 'elisa.beckett@gmail.com'

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żytkowników wyświetlane podczas wyboru konta zostaną ograniczone do podanej domeny. Wartość wieloznaczna: * oferuje użytkownikowi tylko konta Workspace i wyklucza konta konsumenckie (user@gmail.com) 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

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 Opcjonalny 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 jest ustawione na 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 ma być włączona opcja automatycznego wyboru. Jeśli ta opcja jest włączona, powracający użytkownicy z aktywną sesją Google będą logować się automatycznie, bez wyświetlania prośby o wybranie konta. Domyślnie jest to false. Musisz wyraźnie włączyć automatyczne logowanie za pomocą przycisku podczas uruchamiania funkcji. Więcej informacji znajdziesz w tabeli poniżej:

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: nastę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.

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>

Typ danych: PromptMomentNotification

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

Metoda
isDisplayMoment() Czy to powiadomienie dotyczy momentu wyświetlenia?

Uwaga: gdy FedCM jest włączony, to powiadomienie nie jest wysyłane. Więcej informacji znajdziesz na stronie Migracja do FedCM.
isDisplayed() Czy to powiadomienie dotyczy momentu wyświetlenia, a interfejs jest wyświetlany?

Uwaga: gdy FedCM jest włączony, to powiadomienie nie jest wysyłane. Więcej informacji znajdziesz na stronie Migracja do FedCM.
isNotDisplayed() Czy to powiadomienie dotyczy momentu wyświetlenia, a interfejs nie jest wyświetlany?

Uwaga: gdy FedCM jest włączony, to powiadomienie nie jest wysyłane. Więcej informacji znajdziesz na stronie Migracja do FedCM.
getNotDisplayedReason()

Szczegółowa przyczyna, dla której interfejs nie jest wyświetlany. Oto 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 jest włączona funkcja FedCM, ta metoda nie jest obsługiwana. Więcej informacji znajdziesz na stronie Migracja do FedCM.
isSkippedMoment() Czy to powiadomienie dotyczy pominiętego momentu?
getSkippedReason()

Szczegółowy powód pominięcia momentu. Oto możliwe wartości:

  • auto_cancel
  • user_cancel
  • tap_outside
  • issuing_failed
Uwaga: gdy jest włączona funkcja FedCM, ta metoda nie jest obsługiwana. Więcej informacji znajdziesz na stronie Migracja do FedCM.
isDismissedMoment() Czy to powiadomienie dotyczy odrzuconego momentu?
getDismissedReason()

Szczegółowy powód odrzucenia. Możliwe wartości:

  • credential_returned
  • cancel_called
  • flow_restarted
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 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 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 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"
}

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.

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 przypadkach, w których Google jest autorytetem, potwierdzamy, że użytkownik jest prawowitym właścicielem konta.

Przypadki, w których Google jest miarodajne:

  • email ma sufiks @gmail.com, jest to konto Gmail.
  • email_verified ma wartość „prawda” i 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ę stosowanie hasła lub innych metod weryfikacji 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 się zmienić.

Pole exp pokazuje czas wygaśnięcia, w którym musisz zweryfikować token po stronie serwera. W przypadku tokena identyfikatora uzyskanego w ramach Logowania 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. Twoja aplikacja odpowiada za zarządzanie sesjami użytkowników.

select_by

W tabeli poniżej znajdziesz możliwe wartości pola select_by. Rodzaj przycisku użytego wraz ze stanem sesji i zgody służy 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 zalogował się na nie, 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, lub
    • 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 Automatyczne logowanie 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 Automatyczne logowanie użytkownika z istniejącą sesją, który wcześniej wyraził zgodę na udostępnianie danych logowania za pomocą 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 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ż opartych na Chromium.
itp Użytkownik, który wcześniej wyraził zgodę, kliknął opcję „Jedno kliknięcie” w przeglądarkach z ITP.
itp_confirm Użytkownik, który nie wyraził zgody, kliknął przycisk „Jedno kliknięcie” 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 logowania się przez Google, dlatego możesz przypisać do każdego z nich unikalny ciąg znaków. Dzięki temu 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 na stronach internetowych przycisk Zaloguj się przez Google.

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 typie każdego 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 ikony 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 czarnym kolorem.

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 standardowy Duży przycisk ikony duży, spersonalizowany przycisk;
Duży przycisk.
medium
Średni przycisk standardowy Przycisk ze średnią ikoną
Przycisk średniej wielkości.
small
mały przycisk logowania, mały przycisk logowania,
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 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
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
Wyrównuje logo Google do lewej strony.
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"

region

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

Jeśli nie jest skonfigurowany, 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 rejestrowany jest 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 użytkownik kliknął, aby się zalogować.

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 zapętleniu interfejsu. Oto 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

Jest to otoczka metody store() wbudowanego interfejsu API menedżera danych logowania przeglądarki. Dlatego można go używać tylko do przechowywania danych logowania z hasłem. Oto przykładowy kod 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 polegającej na tożsamości. 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. Jest ono powiadamiane po wczytaniu biblioteki JavaScript Sign In With 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ł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 uprawnienia OAuth używane do udostępniania tokena identyfikatora 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 ciąg znaków Adres e-mail lub unikalny identyfikator konta Google użytkownika. Identyfikator to właściwość sub ładunku danych uwierzytelniających.
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);
  });

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 o unieważnieniu:

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ą tekstową i zawiera szczegółowy komunikat o błędzie, jeśli wywołanie metody revoke się nie powiodło. W przypadku powodzenia jest niezdefiniowane.