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

Na tej stronie znajdziesz opis interfejsu Sign-In JavaScript API. Możesz użyć tego interfejsu API, aby wyświetlić na swoich stronach internetowych prośbę o dodanie 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 tym przykładowym kodem 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 wystarczy wywołać tylko raz, nawet jeśli na tej samej stronie internetowej używasz wielu modułów (np. jednego dotknięcia, przycisku spersonalizowanego, unieważnienia itp.).
  • Jeśli wielokrotnie wywołasz metodę google.accounts.id.initialize, zapamiętane zostaną i używane tylko konfiguracje z ostatniego wywołania.

Po każdym wywołaniu metody google.accounts.id.initialize resetujesz konfiguracje, a wszystkie kolejne metody na tej samej stronie internetowej natychmiast korzystają z nowych konfiguracji.

Typ danych: IdConfiguration

W tej tabeli znajdziesz pola i opisy typu danych IdConfiguration:

Field
client_id Identyfikator klienta Twojej aplikacji
auto_select Włącza automatyczne wybieranie.
callback Funkcja JavaScript, która obsługuje tokeny tożsamości. Tego atrybutu używają Google One Tap i przycisk Zaloguj się przez Google popup Tryb UX.
login_uri URL punktu końcowego logowania. Ten atrybut jest używany w 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 prośbę, jeśli użytkownik kliknie poza nią.
prompt_parent_id Identyfikator DOM elementu kontenera promptu jednym dotknięciem
nonce Losowy ciąg tokenów tożsamości
context Tytuł i słowa w prompcie 1 kliknięciem
state_cookie_domain Jeśli musisz wywoływać jednym dotknięciem w domenie nadrzędnej i jej subdomenach, przekaż tę domenę do tego pola, aby był używany pojedynczy udostępniony plik cookie.
ux_mode Proces UX przycisku Zaloguj się przez Google
allowed_parent_origin Źródło, które może osadzać pośredni element iframe. Jeśli to pole jest obecne, włącza się je jednym dotknięciem 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 zamknąją 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 określonej domeny.
use_fedcm_for_prompt Zezwalaj przeglądarce na kontrolowanie próśb o zalogowanie się przez użytkownika i zapośredniczanie w procesie logowania między Twoją witryną a Google.

client_id

To pole zawiera identyfikator klienta Twojej aplikacji, który można znaleźć i utworzyć w Google Developers Console. 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 wcześniej tylko jedna sesja Google zatwierdziła 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 JavaScriptu, która obsługuje token identyfikatora zwrócony w komunikacie wyświetlanym jednym dotknięciem lub w wyskakującym okienku. 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 dokładnie odpowiadać jednemu z autoryzowanych identyfikatorów URI przekierowania dla klienta OAuth 2.0, które zostały skonfigurowane w konsoli interfejsów API i muszą być zgodne z regułami weryfikacji identyfikatora URI przekierowania.

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

Odpowiedź dotycząca danych logowania tokena identyfikatora jest publikowana w punkcie końcowym logowania, gdy użytkownik kliknie przycisk Zaloguj się przez Google i zostanie użyty tryb UX przekierowania.

Więcej informacji znajdziesz w tej tabeli:

Typ Opcjonalnie Przykład
URL Domyślnie jest to identyfikator URI bieżącej strony lub podana 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

native_callback

To pole zawiera nazwę funkcji JavaScriptu, 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 anulować żądanie jednym dotknięciem, jeśli użytkownik kliknie poza promptem. 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 jest nieskonfigurowana, w prawym górnym rogu okna wyświetla się prośba jednym dotknięciem. Więcej informacji znajdziesz w tej tabeli:

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

liczba jednorazowa

To pole jest losowym ciągiem znaków używanym 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 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 prompcie jednym dotknięciem. Więcej informacji znajdziesz w tej tabeli:

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

Poniższa tabela zawiera dostępne konteksty i ich opisy:

Kontekst
signin „Zaloguj się przez Google”
signup „Zarejestruj się z Google”
use „Używaj z Google”

Jeśli musisz 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 o stanie współdzielonym. Więcej informacji znajdziesz w tej tabeli:

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

ux_mode

Użyj tego pola, aby skonfigurować proces UX wykorzystywany przez przycisk 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 Uruchamia proces logowania UX w wyskakującym okienku.
redirect Przeprowadza proces logowania UX przez pełne przekierowanie strony.

allowed_parent_origin

Źródło, które może osadzać pośredni element iframe. Jeśli to pole jest obecne, jednym dotknięciem działa w trybie pośredniego elementu iframe. Więcej informacji znajdziesz w tej tabeli:

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

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

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

Obsługiwane są też prefiksy symboli wieloznacznych. Na przykład ciąg "https://*.example.com" pasuje do wyrażenia example.com i jego subdomen na wszystkich poziomach (np.news.example.com, login.news.example.com). O czym warto pamiętać podczas korzystania z symboli:

  • Ciągi wzorców nie mogą składać się tylko z symbolu wieloznacznego i domeny najwyższego poziomu. Nieprawidłowe na przykład https://.com i https://.co.uk ; jak wspomniano powyżej, "https://.example.com"pasuje do 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żany za nieprawidłowy.

Jeśli wartość w polu allowed_parent_origin jest nieprawidłowa, inicjowanie jednego kliknięcia w trybie pośredniego elementu iframe kończy się niepowodzeniem i zatrzymuje się.

intermediate_iframe_close_callback

Zastępuje domyślne działanie pośredniego elementu iframe, gdy użytkownicy ręcznie zamykają element jednym dotknięciem, klikając przycisk „X” w interfejsie jednym dotknięciem. Domyślnym działaniem jest natychmiastowe usunięcie pośredniego elementu iframe z DOM.

Pole intermediate_iframe_close_callback działa tylko w trybie pośredniego iframe. Ma wpływ tylko na pośredni element iframe, a nie na element iframe jednym dotknięciem. Interfejs użytkownika jest usuwany jednym dotknięciem 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ą inteligentne zapobieganie śledzeniu (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 zalogować się, może wyświetlić 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: 'elisa.beckett@gmail.com'

HD

Jeśli użytkownik ma kilka kont i powinien logować się tylko na swoje konto Workspace, skorzystaj z tego adresu, 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 nie uwzględnia kont indywidualnych (użytkownik@gmail.com).

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

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

use_fedcm_for_prompt

Zezwalaj przeglądarce na kontrolowanie próśb o zalogowanie się użytkownika i zapośredniczanie 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 monit jednym dotknięciem lub natywny menedżer danych logowania w przeglądarce po wywołaniu metody initialize(). Zapoznaj się z przykładowym kodem tej metody:

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

Standardowo 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 interfejsu.

Powiadomienia są wysyłane 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 ma miejsce, gdy prośba zostanie zamknięta jednym dotknięciem w wyniku automatycznego anulowania, ręcznie lub gdy Google nie wyda danych logowania, na przykład gdy w wybranej sesji nastąpi wylogowanie z Google.

    W takiej sytuacji zalecamy przejście do kolejnych dostawców tożsamości (o ile są oni obecni).

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

Pominięty moment został zaimplementowany w tym przykładowym kodzie:

<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: PromptMomentchy

W tej tabeli znajdziesz metody i opisy typu danych PromptMomentNotification:

Metoda
isDisplayMoment() Czy to powiadomienie pojawia się tylko przez chwilę?

Uwaga: gdy usługa FedCM jest włączona, to powiadomienie nie jest wysyłane. Więcej informacji znajdziesz na stronie Migracja do FedCM.
isDisplayed() Czy to powiadomienie pojawia się przez chwilę, a interfejs się wyświetla?

Uwaga: gdy usługa FedCM jest włączona, to powiadomienie nie jest wysyłane. Więcej informacji znajdziesz na stronie Migracja do FedCM.
isNotDisplayed() Czy to powiadomienie pojawia się przez chwilę, a interfejs się nie wyświetla?

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

Szczegółowa przyczyna 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 FedCM jest włączony, 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 FedCM jest włączony, ta metoda nie jest obsługiwana. Więcej informacji znajdziesz na stronie Migracja do FedCM.
isDismissedMoment() Czy to powiadomienie dotyczy momentu odrzucenia?
getDismissedReason()

Szczegółowa przyczyna odrzucenia. Oto możliwe wartości:

  • credential_returned
  • cancel_called
  • flow_restarted
getMomentType()

Zwraca ciąg znaków dla danego typu 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:

Field
credential To pole zawiera zwrócony token identyfikatora.
select_by To pole określa sposób wybierania danych logowania.

login

To pole zawiera token identyfikatora w postaci ciągu tekstowego tokena sieciowego JSON (JWT) zakodowanego w base64.

Po zdekodowaniu token JWT wygląda tak:

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's 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. Tylko: używaj pola sub jako identyfikatora użytkownika, ponieważ jest on unikalny wśród wszystkich kont Google i nigdy nie jest ponownie używany. Nie używaj adresu e-mail jako identyfikatora, ponieważ konto Google może mieć wiele adresów e-mail w różnych momentach.

Za pomocą pól email, email_verified i hd możesz określić, czy Google hostuje adresy e-mail i czy jest wiarygodny. W sytuacjach, gdy Google uzna za wiarygodną, potwierdza się, że użytkownik jest prawowitym właścicielem konta.

Przypadki, w których firma Google jest wiarygodna:

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

Użytkownicy mogą zarejestrować się za pomocą kont Google bez korzystania z Gmaila lub Google Workspace. Jeśli email nie zawiera sufiksu @gmail.com i nie ma atrybutu hd, Google nie jest wiarygodne, a weryfikacja użytkownika przy użyciu hasła ani innych metod weryfikacji nie jest zalecana. Wartość email_verfied może też być prawdziwa, ponieważ firma Google początkowo zweryfikowała użytkownika podczas tworzenia konta Google, ale później mogło dojść do zmiany własności konta e-mail w usłudze innej firmy.

Pole exp pokazuje czas ważności, po którym musisz zweryfikować token po stronie serwera. Od tokenu identyfikatora uzyskanego za pomocą funkcji Zaloguj się przez Google wynosi 1 godzina. Musisz zweryfikować token przed upływem czasu ważności. Nie używaj usługi exp do zarządzania sesją. Wygasły token tożsamości nie oznacza, że użytkownik zostanie 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. Do ustawiania wartości używana jest typ przycisku wraz z stanem sesji i zgody na przetwarzanie danych.

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

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

  • Przed udostępnieniem aplikacji danych logowania tokena tożsamości użytkownik

    • kliknęli przycisk Potwierdź, aby wyrazić zgodę na udostępnianie danych logowania,
    • wyraził wcześniej zgodę i użył opcji „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.
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.
user_1tap Użytkownik, który ma już sesję, 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 wybrał jednym dotknięciem „Kontynuuj jako”, aby wybrać konto, a następnie w wyskakującym okienku wybrał przycisk Potwierdź, aby udzielić zgody i udostępnić dane logowania. Dotyczy przeglądarek innych niż Chromium.
btn Użytkownik w istniejącej sesji, który udzielił wcześniej zgody, kliknął przycisk Zaloguj się przez Google i wybrał konto Google w sekcji „Wybierz konto”, aby udostępnić dane logowania.
btn_confirm Użytkownik, który ma już 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 bez 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.

Metoda: google.accounts.id.renderButton

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

Zapoznaj się z przykładowym kodem tej 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. na przykład wypełnione_niebieski lub czarny_wypełniany.
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 jest skonfigurowana, funkcja jest wywoływana po kliknięciu przycisku Zaloguj się przez Google.

Typy atrybutów

Poniższe sekcje zawierają szczegółowe informacje o typie każdego atrybutu oraz jego przykład.

typ

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

Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
string, Tak type: "icon"

Poniższa tabela zawiera 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"

Poniższa tabela zawiera dostępne motywy i ich opisy:

Motyw
outline
Standardowy motyw przycisku.
filled_blue
Niebieski motyw przycisku.
filled_black
Czarny motyw 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"

Poniższa tabela zawiera dostępne rozmiary przycisków i ich opisy:

Rozmiar
large
Duży standardowy przycisk Duży przycisk ikony Duży, spersonalizowany przycisk
Duży przycisk.
medium
Średni standardowy przycisk Średni przycisk ikony
Średni rozmiar przycisku.
small
Mały przycisk Mały przycisk ikony
Mały przycisk.

plik tekstowy,

Tekst przycisku. Wartością domyślną jest signin_with. Tekst przycisków ikon o różnych atrybutach text nie różni się wizualnie. Jedynym wyjątkiem jest odczyt tekstu na potrzeby ułatwień dostępu na ekranie.

Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
string, Opcjonalnie text: "signup_with"

Poniższa tabela zawiera 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 zawiera dostępne kształty przycisków i ich opisy:

Kształt
rectangular
Prostokątny przycisk. Jeśli używasz tego przycisku w przypadku typu przycisku icon, jest on taki sam jak square.
pill
Przycisk w kształcie pigułki. Jeśli zostanie użyta w przypadku przycisku typu icon, ma taką samą wartość jak circle.
circle
Przycisk w kształcie koła. Jeśli używasz tego przycisku w przypadku typu przycisku standard, jest on taki sam jak pill.
square
Kwadratowy przycisk. Jeśli używasz tego przycisku w przypadku typu przycisku standard, jest on taki sam jak rectangular.

logo_alignment

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

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

Poniższa tabela zawiera dostępne opcje wyrównania i ich opisy:

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

szerokość

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

Więcej informacji znajdziesz w tej tabeli:

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

region

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

Jeśli nie jest skonfigurowana, używane jest domyślne ustawienia 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 prawdopodobnie o różnych rozmiarach.

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 logowany komunikat Przycisk Zaloguj się przez Google....

Typ danych: dane logowania

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

Field
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 procesów 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 jest otoką 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 przykładowym kodem tej 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

Proces jednym dotknięciem możesz anulować, jeśli usuniesz prompt z DOM. Jeśli dane logowania zostały już wybrane, operacja anulowania jest ignorowana. Poniżej znajdziesz przykładowy kod tej 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. Jest to powiadomienie po wczytaniu biblioteki JavaScript Zaloguj się przez Google:

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

To połączenie to tylko skrót do połączenia zwrotnego window.onload. Nie ma żadnych różnic w sposobie działania.

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 określonemu użytkownikowi. Zapoznaj się z tym fragmentem 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 to właściwość 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);
  });

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 prośbę o unieważnienie:

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

udało się

To pole zawiera wartość logiczną ustawianą na „prawda”, jeśli wywołanie metody anulowania zakończyło się powodzeniem lub „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 udało, jest on niezdefiniowany w przypadku powodzenia.