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

Na tej stronie znajdziesz opis interfejsu Sign-In JavaScript API. Za pomocą tego interfejsu API możesz wyświetlać na swoich stronach internetowych potwierdzenie jednym dotknięciem 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. Zapoznaj się z poniższym przykładowym kodem tej metody:

google.accounts.id.initialize(IdConfiguration)

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

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

Metoda google.accounts.id.initialize tworzy wystąpienie klienta Zaloguj się przez Google, które może być domyślnie używane przez wszystkie moduły na tej samej stronie internetowej.

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

Konfiguracje są resetowane za każdym razem, gdy wywołujesz metodę google.accounts.id.initialize, a wszystkie kolejne metody na tej samej stronie internetowej od razu korzystają z nowych konfiguracji.

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

Typ danych: IdConfiguration

W tej tabeli znajdziesz pola i opisy typu danych IdConfiguration:

Zaawansowana
client_id	Identyfikator klienta Twojej aplikacji
auto_select	Włącza automatyczny wybór.
callback	Funkcja JavaScript, która obsługuje tokeny identyfikatorów. Ten atrybut jest używany w przypadku Google One Tap i przycisku Zaloguj się przez Google popup w trybie UX.
login_uri	URL punktu końcowego logowania. Ten atrybut jest używany w przypadku przycisku Zaloguj się przez Google redirect w trybie UX.
native_callback	Funkcja JavaScript, która obsługuje dane logowania związane z hasłem.
cancel_on_tap_outside	Anuluje wyświetlenie, jeśli użytkownik kliknie poza nim.
prompt_parent_id	Identyfikator DOM elementu kontenera promptu jednym dotknięciem
nonce	Losowy ciąg identyfikatorów tokenów
context	Tytuł i słowa w prompcie jednym dotknięciem
state_cookie_domain	Jeśli musisz wywoływać jednym dotknięciem w domenie nadrzędnej i jej subdomenach, przekaż domenę nadrzędną w tym polu, aby był używany pojedynczy udostępniony plik cookie.
ux_mode	Proces UX przycisku Zaloguj się przez Google
allowed_parent_origin	Źródła, które mogą umieszczać pośredni element iframe. Jeśli to pole jest obecne, działa w trybie pośredniego elementu iframe jednym dotknięciem.
intermediate_iframe_close_callback	Zastępuje domyślne zachowanie pośredniego elementu iframe, gdy użytkownik ręcznie zamknie jedno dotknięcie.
itp_support	Włącza uaktualniony interfejs One Tap w przeglądarkach ITP.
login_hint	Pomiń wybór konta, podając wskazówkę dla użytkownika.
hd	Ogranicz wybór konta do domeny.
use_fedcm_for_prompt	Zezwalaj przeglądarce na kontrolowanie próśb o zalogowanie się przez użytkowników i pośrednictwo w procesie logowania między Twoją witryną a Google.

client_id

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

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

auto_select

To pole określa, czy token identyfikatora jest automatycznie zwracany bez żadnej interakcji z użytkownikiem, jeśli tylko jedna sesja Google zatwierdziła wcześniej aplikację. Wartością domyślną jest false. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
boolean	Opcjonalnie	auto_select: true

wywołanie zwrotne

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

Typ	Wymagane	Przykład
funkcja	Wymagane w przypadku korzystania z jednego dotknięcia i trybu UX popup	callback: handleResponse

login_uri

Ten atrybut to identyfikator URI punktu końcowego logowania.

Wartość musi być dokładnie taka sama jak jeden z autoryzowanych identyfikatorów URI przekierowania klienta OAuth 2.0, które zostały skonfigurowane w konsoli Google Cloud i są zgodne z regułami weryfikacji identyfikatorów URI przekierowania.

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

Odpowiedź z danymi logowania tokenu identyfikatora jest publikowana w punkcie końcowym logowania, gdy użytkownik kliknie przycisk Zaloguj się przez Google i skorzysta z trybu UX przekierowania.

Więcej informacji znajdziesz w tej tabeli:

Typ	Opcjonalnie	Przykład
URL	Domyślnie jest to identyfikator URI bieżącej strony lub określona przez Ciebie wartość. Używane 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 klucz credential z wartością tokena identyfikatora w treści.

Oto przykładowe żądanie wysłane do punktu końcowego logowania:

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded

credential=ID_TOKEN

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

native_callback

To pole zawiera nazwę funkcji JavaScript, która obsługuje dane logowania do haseł zwracane z natywnego menedżera danych logowania przeglądarki. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
funkcja	Opcjonalnie	native_callback: handleResponse

cancel_on_tap_outside

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

Typ	Wymagane	Przykład
boolean	Opcjonalnie	cancel_on_tap_outside: false

prompt_parent_id

Ten atrybut ustawia identyfikator DOM elementu kontenera. Jeśli nie jest skonfigurowana, ta opcja wyświetla się w prawym górnym rogu okna. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
string,	Opcjonalnie	prompt_parent_id: 'parent_id'

liczba jednorazowa

Jest to losowy ciąg znaków używany przez token identyfikatora do zapobiegania atakom metodą powtórzenia. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
string,	Opcjonalnie	nonce: "biaqbm70g23"

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

sytuacja

To pole zmienia tekst tytułu i komunikatów w potwierdzeniu jednym dotknięciem. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
string,	Opcjonalnie	context: "use"

Tabela poniżej zawiera wszystkie dostępne konteksty i ich opisy:

Kontekst
signin	„Zaloguj się przez Google”
signup	„Zarejestruj się przez Google”
use	„Użyj w Google”

state_cookie_domain

Jeśli chcesz wyświetlać jedno dotknięcie w domenie nadrzędnej i jej subdomenach, przekaż w tym polu domenę nadrzędną, aby był używany pojedynczy plik cookie ze stanem współdzielonym. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
string,	Opcjonalnie	state_cookie_domain: "example.com"

ux_mode

W tym polu możesz skonfigurować proces UX związany z przyciskiem Zaloguj się przez Google. Wartość domyślna to popup. Ten atrybut nie ma wpływu na wrażenia użytkowników OneTap. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
string,	Opcjonalnie	ux_mode: "redirect"

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

Tryb UX
popup	Uruchamianie interfejsu logowania w wyskakującym okienku.
redirect	Przepływ użytkowników w logowaniu się z wykorzystaniem pełnego przekierowania strony.

allowed_parent_origin

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

Typ	Wymagane	Przykład
tablica ciągów lub ciągów znaków	Opcjonalnie	allowed_parent_origin: "https://example.com"

Tabela poniżej zawiera listę obsługiwanych typów wartości i ich opisów.

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 symboli wieloznacznych. Na przykład "https://*.example.com" dopasowuje wartość example.com i jej subdomeny na wszystkich poziomach (np.news.example.com, login.news.example.com). O czym warto pamiętać, używając symboli wieloznacznych:

• Ciągi wzorców nie mogą składać się tylko z symbolu wieloznacznego i domeny najwyższego poziomu. Na przykład https://.com i https://.co.uk są nieprawidłowe. Jak wspomniano powyżej, "https://.example.com"pasuje do domeny example.com i jej subdomen. Możesz też użyć tablicy do reprezentowania 2 różnych domen. Na przykład ["https://example1.com", "https://.example2.com"] pasuje do domen example1.com, example2.com i subdomen example2.com
• Domeny z symbolami wieloznacznymi muszą zaczynać się od bezpiecznego schematu https://, więc "*.example.com" jest uważane za nieprawidłowe.

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

Jeśli wartość pola allowed_parent_origin jest nieprawidłowa, inicjowanie jednym dotknięciem w trybie pośredniego elementu iframe zakończy się niepowodzeniem i zatrzyma się.

intermediate_iframe_close_callback

Zastępuje domyślne zachowanie pośredniego elementu iframe, gdy użytkownik ręcznie zamknie jedno dotknięcie, klikając przycisk „X” w interfejsie jednym dotknięciem. Działanie domyślne to natychmiastowe usunięcie pośredniego elementu iframe z DOM.

Pole intermediate_iframe_close_callback działa tylko w trybie pośredniego elementu iframe. Ma ona wpływ tylko na pośredni element iframe, a nie na element iframe dostępny jednym kliknięciem. Interfejs użytkownika jest usuwany przed wywołaniem wywołania zwrotnego.

Typ	Wymagane	Przykład
funkcja	Opcjonalnie	intermediate_iframe_close_callback: logBeforeClose

itp_support

To pole określa, czy uaktualniony interfejs One Tap powinien być włączony w przeglądarkach, które obsługują Inligent Tracking Prevention (ITP). Wartością domyślną jest false. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
boolean	Opcjonalnie	itp_support: true

login_hint

Jeśli aplikacja wie z wyprzedzeniem, który użytkownik powinien być zalogowany, może przekazać Google wskazówkę dotyczącą logowania. Jeśli operacja się uda, wybór konta zostanie pominięty. 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.	Opcjonalnie	login_hint: '[e-mail]'

HD

Jeśli użytkownik ma kilka kont i powinien logować się tylko na konto Workspace, skorzystaj z tego pola, aby przekazać Google wskazówkę dotyczącą nazwy domeny. Jeśli operacja się uda, konta użytkowników wyświetlane podczas wyboru konta będą ograniczone do podanej domeny. Wartość symbolu wieloznacznego: * oferuje użytkownikowi tylko konta Workspace, a podczas wyboru konta nie uwzględnia kont indywidualnych (uż[e-mail]).

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 znak *.	Opcjonalnie	hd: '*'

use_fedcm_for_prompt

Pozwól przeglądarce zarządzać prośbami o zalogowanie się użytkowników i pośredniczyć 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
boolean	Opcjonalnie	use_fedcm_for_prompt: true

Metoda: google.accounts.id.prompt

Metoda google.accounts.id.prompt wyświetla prompt jednym dotknięciem lub natywny menedżer danych logowania w przeglądarce po wywołaniu metody initialize(). Zapoznaj się z poniższym przykładowym kodem metody:

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

Normalnie metoda prompt() jest wywoływana podczas wczytywania strony. Ze względu na stan sesji i ustawienia użytkownika po stronie Google interfejs potwierdzenia jednym dotknięciem może nie być wyświetlany. Aby otrzymywać powiadomienia o stanie interfejsu w różnych momentach, przekaż funkcję odbierania powiadomień o stanie UI.

Powiadomienia są uruchamiane w następujących momentach:

• Wyświetl moment: dzieje się to po wywołaniu metody prompt(). Powiadomienie zawiera wartość logiczną wskazującą, czy interfejs użytkownika się wyświetla.

• Pominięty moment: ten komunikat pojawia się, gdy komunikat zostanie zamknięty jednym dotknięciem w wyniku automatycznego anulowania lub ręcznego anulowania albo gdy Google nie wystawi danych logowania, na przykład gdy wybrana sesja zostanie wylogowana z Google.

  W takiej sytuacji zalecamy przejście do kolejnych dostawców tożsamości, jeśli jacy są jacyś dostawcy.

• Moment zamknięcia – występuje, gdy Google 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ąć potwierdzenie jednym dotknięciem i wywołać moment zamknięcia.

  Ostrzeżenie: w momencie zamknięcia nie próbuj żadnego z następnych dostawców tożsamości.

Pominięty moment jest implementowany w tym przykładzie kodu:

<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 chronić prywatność użytkowników, po włączeniu funkcji FedCM powiadomienia o momentach wyświetlania są celowo opóźnione. Powiadomienia mogą być odbierane najpóźniej minutę po wystąpieniu zdarzenia.

Uwaga: w przypadku natywnego menedżera danych logowania nie ma powiadomień o momentach wyświetlenia, pominięcia lub odrzucenia, gdy mają miejsce poza biblioteką GIS.

Typ danych: PromptMoment Notification

W tej tabeli 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()	Czy to powiadomienie pojawia się przez chwilę? Uwaga: gdy usługa FedCM jest włączona, to powiadomienie nie jest wywoływane. Więcej informacji znajdziesz na stronie Migracja do FedCM.
isDisplayed()	Czy to powiadomienie pojawia się przez chwilę i czy wyświetla się interfejs użytkownika? Uwaga: gdy usługa FedCM jest włączona, to powiadomienie nie jest wywoływane. Więcej informacji znajdziesz na stronie Migracja do FedCM.
isNotDisplayed()	Czy to powiadomienie pojawia się przez chwilę, a interfejs nie jest wyświetlany? Uwaga: gdy usługa FedCM jest włączona, to powiadomienie nie jest wywoływane. Więcej informacji znajdziesz na stronie Migracja do FedCM.
getNotDisplayedReason()	Szczegółowy powód niewyświetlania interfejsu użytkownika. 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 usługa FedCM jest włączona, ta metoda nie jest obsługiwana. Więcej informacji znajdziesz na stronie Migracja do FedCM.
isSkippedMoment()	Czy to powiadomienie dotyczy momentu, w którym został pominięty?
getSkippedReason()	Szczegółowa przyczyna pominięcia momentu. Oto możliwe wartości: auto_cancel user_cancel tap_outside issuing_failed Uwaga: gdy usługa FedCM jest włączona, ta metoda nie jest obsługiwana. Więcej informacji znajdziesz na stronie Migracja do FedCM.
isDismissedMoment()	Czy to powiadomienie dotyczy momentu zamknięcia?
getDismissedReason()	Dokładny powód odrzucenia. Oto możliwe wartości: credential_returned cancel_called flow_restarted
getMomentType()	Zwraca ciąg znaków odpowiadający typowi momentu. Oto możliwe wartości: display skipped dismissed

Typ danych: CredentialResponse

Po wywołaniu funkcji callback jako parametr przekazywany jest obiekt CredentialResponse. Poniższa tabela zawiera listę pól zawartych w obiekcie odpowiedzi danych logowania:

Zaawansowana
credential	To pole zawiera zwrócony token identyfikatora.
select_by	To pole określa sposób wyboru danych logowania.
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.

login

To pole zawiera token identyfikatora w postaci ciągu tekstowego tokena internetowego JSON (JWT) zakodowany w standardzie base64.

Po dekodowaniu 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 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 tylko pola sub jako identyfikatora użytkownika, ponieważ jest ono unikalne wśród wszystkich kont Google i nie jest ponownie używane. Nie używaj adresu e-mail jako identyfikatora, ponieważ na koncie Google może być kilka adresów e-mail w różnych momentach.

Przy użyciu pól email, email_verified i hd możesz określić, czy Google hostuje adres e-mail i czy jest wiarygodny. Jeśli uznamy, że Google jest wiarygodnym właścicielem konta, oznacza to, że dane użytkownika są wiarygodne.

Przypadki, w których Google jest wiarygodne:

• email ma sufiks @gmail.com. To jest konto Gmail.
• Parametr email_verified ma wartość prawda, a skonfigurowano hd, to jest konto Google Workspace.

Użytkownicy mogą rejestrować konta Google bez korzystania z Gmaila ani Google Workspace. Jeśli email nie zawiera sufiksu @gmail.com, a brakuje hd, Google nie jest wiarygodne. Do weryfikacji użytkownika zalecamy użycie hasła ani innych metod zabezpieczających logowanie. email_verfied może mieć również wartość, ponieważ firma Google początkowo zweryfikowała użytkownika podczas tworzenia konta Google, ale prawo własności do konta e-mail w usłudze innej firmy mogło się od tego czasu zmienić.

Pole exp pokazuje czas ważności, po którym musisz zweryfikować token po stronie serwera. Jest to 1 godzina dla tokena identyfikatora uzyskanego za pomocą funkcji Zaloguj się przez Google. Musisz zweryfikować token przed upływem limitu czasu. Nie używaj exp do zarządzania sesją. 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. Typ przycisku oraz stan sesji i stanu zgody są używane do ustawiania wartości.

• Użytkownik nacisnął przycisk jednym dotknięciem lub przycisk Zaloguj się przez Google albo użył procesu automatycznego logowania bezdotykowego.

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

• Przed udostępnieniem danych logowania tokena tożsamości użytkownik może:

  • kliknęli przycisk Potwierdź, aby wyrazić zgodę na udostępnienie danych logowania,
  • wcześniej wyraził zgodę i kliknął przycisk Wybierz konto, by wybrać konto Google.

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

Wartość	Opis
auto	Automatyczne logowanie użytkownika w ramach istniejącej sesji, który wcześniej wyraził zgodę na udostępnianie danych logowania. Dotyczy tylko przeglądarek, które nie są obsługiwane przez FedCM.
user	Użytkownik w istniejącej sesji, który wcześniej wyraził zgodę, kliknął jednym dotknięciem przycisk „Kontynuuj jako”, aby udostępnić dane logowania. Dotyczy tylko przeglądarek, które nie są obsługiwane przez FedCM.
fedcm	Użytkownik kliknął jednym dotknięciem przycisk „Kontynuuj jako”, aby udostępnić dane logowania za pomocą FedCM. Dotyczy tylko przeglądarek obsługiwanych przez FedCM.
fedcm_auto	Automatyczne logowanie użytkownika w ramach istniejącej sesji, który wcześniej wyraził zgodę na udostępnianie danych logowania za pomocą FedCM One Tap. Dotyczy tylko przeglądarek obsługiwanych przez FedCM.
user_1tap	Użytkownik w ramach dotychczasowej sesji kliknął jednym dotknięciem przycisk „Kontynuuj jako”, 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ął jednym dotknięciem przycisk „Kontynuuj jako”, aby wybrać konto, a następnie przycisk Potwierdź w wyskakującym okienku w celu wyrażenia zgody i udostępnienia danych logowania. Dotyczy przeglądarek innych niż Chromium.
btn	Użytkownik w istniejącej sesji, który wcześniej wyraził zgodę, kliknął przycisk Zaloguj się przez Google i wybrał konto Google z sekcji „Wybierz konto”, aby udostępnić dane logowania.
btn_confirm	Użytkownik z istniejącą sesją kliknął przycisk Zaloguj się przez Google, a następnie przycisk Potwierdź, aby wyrazić zgodę i udostępnić dane logowania.
btn_add_session	Użytkownik niemający jeszcze 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 potem przycisk Potwierdź, aby wyrazić zgodę i udostępnić dane logowania.

state

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

Na tej samej stronie może być renderowanych wiele przycisków Zaloguj się przez Google, więc możesz przypisać każdemu z nich unikalny ciąg znaków. Dzięki temu możesz określić, który przycisk został kliknięty, aby się zalogować.state

Metoda: google.accounts.id.renderButton

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

Zapoznaj się z poniższym przykładowym kodem metody:

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

Typ danych: GsiButtonConfiguration

W tej tabeli znajdziesz pola i opisy typu danych GsiButtonConfiguration:

Atrybut
type	Typ przycisku: ikona lub przycisk standardowy.
theme	Motyw przycisku. np. filled_blue lub filled_black.
size	Rozmiar przycisku. Może to być 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ątne lub okrągłe.
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 jest skonfigurowana, funkcja jest wywoływana po kliknięciu przycisku Zaloguj się przez Google.
state	Jeśli jest ustawiony, ten ciąg znaków zwraca token identyfikatora.

Typy atrybutów

W sekcjach poniżej znajdziesz szczegółowe informacje o typach atrybutów oraz ich przykład.

Niestandardowy typ treści

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

Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
string,	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
string,	Opcjonalnie	theme: "filled_blue"

Tabela poniżej zawiera listę dostępnych motywów i ich opisów:

Motyw
outline	Standardowy motyw przycisku.
filled_blue	Motyw przycisku z niebieskim ekranem.
filled_black	Motyw czarnego przycisku.

rozmiar

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

Typ	Wymagane	Przykład
string,	Opcjonalnie	size: "small"

W tabeli poniżej znajdziesz dostępne rozmiary przycisków wraz z ich opisami:

Rozmiar
large	Duży przycisk.
medium	Przycisk średniego rozmiaru.
small	Mały przycisk.

plik tekstowy,

Tekst przycisku. Wartością domyślną jest signin_with. Pod względem wizualnym przycisków ikon, które mają różne atrybuty text, nie różni się od siebie pod tym względem. Jedynym wyjątkiem jest odczyt tekstu na potrzeby funkcji ułatwień dostępu ekranu.

Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
string,	Opcjonalnie	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
string,	Opcjonalnie	shape: "rectangular"

Poniższa tabela przedstawia dostępne kształty przycisków i ich opisy:

Kształt
rectangular	Prostokątny przycisk. Jeśli zostanie użyty w przypadku przycisku typu icon, będzie taki sam jak square.
pill	Przycisk w kształcie pigułki. Jeśli zostanie użyty w przypadku typu przycisku icon, będzie taki sam jak circle.
circle	Przycisk w kształcie koła. Jeśli zostanie użyty w przypadku przycisku typu standard, będzie taki sam jak pill.
square	Kwadratowy przycisk. Jeśli zostanie użyty w przypadku przycisku typu standard, będzie taki sam jak rectangular.

logo_alignment

Dopasowywanie logo Google. Wartością domyślną jest left. Dotyczy on tylko przycisku typu standard. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
string,	Opcjonalnie	logo_alignment: "center"

Poniższa tabela zawiera listę dostępnych wyrównań i ich opisów:

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

szerokość

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

Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
string,	Opcjonalnie	width: "400"

region

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

Jeśli nie jest skonfigurowana, używane jest domyślne ustawienie regionalne przeglądarki lub ustawienie użytkownika sesji Google. W związku z tym różni użytkownicy mogą zobaczyć różne wersje zlokalizowanych przycisków i możliwe, że mają one różne rozmiary.

Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
string,	Opcjonalnie	locale: "zh_CN"

click_listener

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

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

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

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

state

Opcjonalnie, ponieważ na tej samej stronie może być renderowanych wiele przycisków Zaloguj się przez Google, możesz przypisać każdemu 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 został kliknięty przez użytkownika, aby się zalogować.

Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
string,	Opcjonalnie	data-state="button 1"

Typ danych: dane logowania

Po wywołaniu funkcji native_callback jako parametr przekazywany jest obiekt Credential. Poniższa tabela zawiera listę pól zawartych w obiekcie:

Zaawansowana
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 zarejestrować stan w plikach cookie. Zapobiega to martwej pętli UX. Oto fragment kodu tej metody:

google.accounts.id.disableAutoSelect()

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

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

Metoda: google.accounts.id.storeCredential

Ta metoda stanowi opakowanie metody store() natywnego interfejsu API menedżera danych logowania przeglądarki. Dlatego można go używać tylko do przechowywania danych logowania. Zapoznaj się z poniższym przykładowym kodem metody:

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

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

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

Metoda: google.accounts.id.cancel

Możesz anulować proces jednym dotknięciem, usuwając prompt z DOM jednostki uzależnionej. Jeśli dane logowania zostały już wybrane, operacja anulowania jest ignorowana. Zapoznaj się z poniższym przykładowym kodem metody:

google.accounts.id.cancel()

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

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

Wywołanie zwrotne wczytywania biblioteki: onGoogleLibraryLoad

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

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

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

Ten przykładowy kod zawiera 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 anuluje uwierzytelnienie OAuth użyte do udostępnienia tokena identyfikatora wskazanego użytkownika. Zobacz ten fragment kodu tej metody: javascript google.accounts.id.revoke(login_hint, callback)

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

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

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

Ważne: wywołanie tej metody anuluje wszystkie zakresy OAuth 2.0 przyznane wcześniej przez bibliotekę klienta Zaloguj się przez Google.

Typ danych: RevocationResponse

Po wywołaniu funkcji callback jako parametr przekazywany jest obiekt RevocationResponse. W tabeli poniżej znajdziesz pola zawarte w obiekcie odpowiedzi na unieważnienie:

Zaawansowana
successful	To pole zawiera wartość zwrotną wywołania metody.
error	To pole opcjonalnie zawiera szczegółowy komunikat o błędzie.

udało się

To pole zawiera wartość logiczną ustawioną na „prawda”, jeśli wywołanie metody anuluje się powodzeniem lub „false” (fałsz) w przypadku niepowodzenia.

error

To pole zawiera wartość ciągu i zawiera szczegółowy komunikat o błędzie, jeśli wywołanie metody unieważnienia się nie powiodło, ten komunikat jest niezdefiniowany po powodzeniu.