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.

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
auto_select	Włącza automatyczny wybór.
callback	Funkcja JavaScript, która obsługuje tokeny tożsamości. Tryb UX przy użyciu jednego dotknięcia Google i przycisku Zaloguj się przez Google popup 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"

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.

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 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ł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”

state_cookie_domain

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 przez przekierowanie 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://.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 identyfikatorami URI rozdzielonymi przecinkami jest nieprawidłowy w przypadku pola allowed_parent_origin. Zamiast tego użyj obiektu tablicy JavaScript.

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

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.

  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 interfejs FedCM jest włączony. Powiadomienia mogą być odbierane do minuty po wystąpieniu zdarzenia.

Uwaga: w przypadku wbudowanego menedżera danych logowania nie ma powiadomień o wyświetleniu, pominięciu ani odrzuceniu, 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 wpływają na isDisplayMoment(), isDisplayed(), isNotDisplayed(), getNotDisplayedReason() i getSkippedReason().Więcej informacji znajdziesz na stronie Migracja do FedCM.

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": "[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'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.

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 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 użytkownik udostępni Twojej aplikacji dane logowania w postaci tokena identyfikatora, 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 z istniejącą sesją, który wcześniej wyraził zgodę, kliknął One Tap w przeglądarkach ITP.
itp_confirm	Użytkownik z istniejącą sesją kliknął One Tap w przeglądarkach ITP i kliknął przycisk Potwierdź, aby wyrazić zgodę i udostępnić dane logowania.
itp_add_session	Użytkownik bez istniejącej sesji, który wcześniej wyraził zgodę, kliknął One Tap w przeglądarce ITP, aby wybrać konto Google i udostępnić dane logowania.
itp_confirm_add_session	Użytkownik bez istniejącej sesji najpierw kliknął One Tap w przeglądarkach ITP, aby wybrać konto Google, a następnie kliknął przycisk Potwierdź, aby wyrazić zgodę i udostępnić dane logowania.
btn	Użytkownik z istniejącą sesją, 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 z istniejącą sesją kliknął przycisk Zaloguj się przez Google i przycisk Potwierdź, aby wyrazić zgodę i udostępnić dane logowania.
btn_add_session	Użytkownik bez istniejącej sesji, który wcześniej wyraził zgodę, kliknął przycisk Zaloguj się przez Google, aby wybrać konto Google i udostępnić dane logowania.
btn_confirm_add_session	Użytkownik bez istniejącej sesji najpierw kliknął przycisk Zaloguj się przez Google, aby wybrać konto Google, a następnie kliknął przycisk Potwierdź, 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.
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 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);
  });

Ważne: wywołanie tej metody powoduje odwołanie wszystkich zakresów OAuth 2.0 przyznanych wcześniej przez bibliotekę klienta Zaloguj się przez Google.

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.