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.

Typ danych: IdConfiguration

W tej tabeli znajdziesz pola i opisy typu danych IdConfiguration:

Pole
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

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

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.

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: 'elisa.beckett@gmail.com'

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ż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 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.

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>

Typ danych: PromptMoment Notification

W tej tabeli znajdziesz metody i opisy typu danych PromptMomentNotification:

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:

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

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": "elisa.g.beckett@gmail.com", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "Elisa",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion's creation time
  "exp": 1596477600, // Unix timestamp of the assertion's expiration time
  "jti": "abc161803398874def"
}

Pole sub to globalnie unikalny identyfikator konta Google. Używaj 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.
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 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.

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.

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 standardowy przycisk Duży przycisk ikony Duży, spersonalizowany przycisk
Duży przycisk.
medium
Średnio standardowy przycisk Średni przycisk ikony
Przycisk średniego rozmiaru.
small
Mały przycisk Mały przycisk z ikoną
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....

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:

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 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);
  });

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:

Pole
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.