Dokumentacja interfejsu Zaloguj się za pomocą interfejsu Google HTML API

Na tej stronie znajdziesz opis interfejsu API atrybutów danych HTML do logowania się za pomocą Google. Za pomocą interfejsu API możesz wyświetlać na stronach internetowych prośbę o logowanie jednym kliknięciem lub przycisk Zaloguj się przez Google.

Element o identyfikatorze „g_id_onload”

Atrybuty danych Logowania przez Google możesz umieszczać w dowolnych widocznych lub niewidocznych elementach, np. <div> i <span>. Jedynym wymaganiem jest ustawienie identyfikatora elementu na g_id_onload. Nie umieszczaj tego identyfikatora w wielu elementach.

Atrybuty danych

W tabeli poniżej znajdziesz listę atrybutów danych wraz z ich opisami:

Atrybut
data-client_id Identyfikator klienta aplikacji
data-color_scheme Schemat kolorów zastosowany w prompcie One Tap.
data-auto_prompt Wyświetl dotknięcie Google One.
data-auto_select Umożliwia automatyczne wybieranie w przypadku logowania jednym kliknięciem w Google.
data-login_uri URL punktu końcowego logowania
data-callback Nazwa funkcji obsługi tokena identyfikacyjnego JavaScript
data-native_login_uri Adres URL punktu końcowego modułu obsługi danych logowania za pomocą hasła
data-native_callback Nazwa funkcji obsługi danych logowania do hasła w JavaScript
data-native_id_param Nazwa parametru dla wartości credential.id
data-native_password_param Nazwa parametru dla wartości credential.password
data-cancel_on_tap_outside Określa, czy anulować prompt, jeśli użytkownik kliknie poza nim.
data-prompt_parent_id Identyfikator DOM elementu kontenera z prośbą o logowanie jednym kliknięciem.
data-skip_prompt_cookie Pomija One Tap, jeśli określony plik cookie ma niepustą wartość.
data-nonce Losowy ciąg znaków w przypadku tokenów identyfikatora
data-context tytuł i słowa w powiadomieniu o logowaniu jednym dotknięciem;
data-moment_callback Nazwa funkcji odbiornika powiadomień o stanie interfejsu sugestii
data-state_cookie_domain Jeśli musisz wywołać One Tap w domenie nadrzędnej i jej subdomenach, przekaż do tego atrybutu domenę nadrzędną, aby używać jednego wspólnego pliku cookie.
data-ux_mode Proces UX przycisku Zaloguj się przez Google
data-allowed_parent_origin Źródła, które mogą osadzać pośredni element iframe. Jeśli ten atrybut jest obecny, One Tap działa w trybie pośredniego elementu iframe.
data-intermediate_iframe_close_callback Zastępuje domyślne działanie pośredniego elementu iframe, gdy użytkownicy ręcznie zamykają One Tap.
data-itp_support Włącza ulepszony interfejs One Tap w przeglądarkach z funkcją ITP.
data-login_hint Pomiń wybór konta, podając wskazówkę dla użytkownika.
data-hd Ogranicz wybór konta według domeny.
data-use_fedcm_for_prompt Zezwalaj przeglądarce na kontrolowanie monitów o logowanie użytkownika i pośredniczenie w procesie logowania między Twoją witryną a Google.
data-use_fedcm_for_button To pole określa, czy w Chrome (na komputerach w wersji M125 lub nowszej i na urządzeniach z Androidem w wersji M128 lub nowszej) ma być używany interfejs przycisku FedCM. Domyślnie jest ustawione na false.
data-button_auto_select Określa, czy w przypadku przepływu przycisku FedCM ma być włączona opcja automatycznego wybierania. Jeśli ta opcja jest włączona, powracający użytkownicy z aktywną sesją Google będą automatycznie logowani bez wyświetlania prośby o wybranie konta. Wartością domyślną jest false.

Typy atrybutów

W kolejnych sekcjach znajdziesz szczegółowe informacje o typie każdego atrybutu oraz przykład.

data-client_id

Ten atrybut to identyfikator klienta aplikacji, który można znaleźć i utworzyć w konsoli Google Cloud. Więcej informacji znajdziesz w tabeli poniżej:

Typ Wymagane Przykład
ciąg znaków Tak data-client_id="CLIENT_ID.apps.googleusercontent.com"

data-color_scheme

To pole określa schemat kolorów zastosowany w wyskakującym okienku One Tap. Więcej informacji znajdziesz w tabeli poniżej:

Typ Wymagane Przykład
ciąg znaków Opcjonalnie. Domyślnie używa domyślnego schematu kolorów systemu użytkownika. data-color_scheme="dark"

W tabeli poniżej znajdziesz dostępne schematy kolorów i ich opisy.

Schemat kolorów
default Stosuj domyślny schemat kolorów systemu użytkownika w zależności od tego, czy preferowany schemat użytkownika jest jasny czy ciemny.
light Zastosuj jasny schemat kolorów.
dark Zastosuj ciemny schemat kolorów.

data-auto_prompt

Ten atrybut określa, czy wyświetlać płatność jednym kliknięciem. Wartością domyślną jest true. Gdy ta wartość wynosi false, nie jest wyświetlane kliknięcie Google One. Więcej informacji znajdziesz w tabeli poniżej:

Typ Wymagane Przykład
Wartość logiczna Opcjonalny data-auto_prompt="true"

data-auto_select

Ten atrybut określa, czy token identyfikatora ma być zwracany automatycznie, bez interakcji użytkownika, jeśli tylko jedna sesja Google zatwierdziła Twoją aplikację. Wartość domyślna to false. Więcej informacji znajdziesz w tabeli poniżej:

Typ Wymagane Przykład
Wartość logiczna Opcjonalny data-auto_select="true"

data-login_uri

Ten atrybut to identyfikator URI punktu końcowego logowania.

Wartość musi dokładnie pasować do jednego z autoryzowanych identyfikatorów URI przekierowania dla klienta OAuth 2.0, który został skonfigurowany na platformie Google Auth i musi być zgodny z naszymi zasadami weryfikacji identyfikatorów URI przekierowania.

Ten atrybut można pominąć, jeśli bieżąca strona jest stroną logowania. W takim przypadku dane logowania są domyślnie przesyłane na tę stronę.

Odpowiedź z tokenem identyfikatora jest wysyłana do punktu końcowego logowania, gdy nie jest zdefiniowana żadna funkcja wywołania zwrotnego, a użytkownik kliknie przycisk Zaloguj się przez Google lub Jedno dotknięcie albo gdy nastąpi automatyczne logowanie.

Punkt końcowy logowania musi obsługiwać żądania POST zawierające w treści parametr credential z wartością tokena identyfikatora.

Więcej informacji znajdziesz w tabeli poniżej:

Typ Opcjonalny Przykład
URL Domyślnie jest to identyfikator URI bieżącej strony lub określona przez Ciebie wartość.
Ignorowane, gdy ustawione są wartości data-ux_mode="popup" i data-callback.		 data-login_uri="https://www.example.com/login"

data-callback

Ten atrybut to nazwa funkcji JavaScript, która obsługuje zwrócony token identyfikatora. Więcej informacji znajdziesz w tabeli poniżej:

Typ Wymagane Przykład
ciąg znaków Wymagany, jeśli nie jest ustawiony parametr data-login_uri. data-callback="handleToken"

Można użyć jednego z atrybutów data-login_uri i data-callback. Zależy to od tych konfiguracji komponentów i trybów UX:

  • Atrybut data-login_uri jest wymagany w przypadku trybu UX przycisku Zaloguj się przez Google redirect, który ignoruje atrybut data-callback.

  • Jeden z tych 2 atrybutów musi być ustawiony w przypadku trybu UX popup funkcji logowania się przez Google jednym dotknięciem i przycisku logowania się przez Google. Jeśli oba są ustawione, atrybut data-callback ma wyższy priorytet.

Funkcje JavaScript w przestrzeni nazw nie są obsługiwane przez interfejs HTML API. Zamiast tego użyj globalnej funkcji JavaScript bez przestrzeni nazw. Na przykład użyj mylibCallback zamiast mylib.callback.

data-native_login_uri

Ten atrybut to adres URL punktu końcowego obsługi danych logowania za pomocą hasła. Jeśli ustawisz atrybut data-native_login_uri lub atrybut data-native_callback, biblioteka JavaScript w przypadku braku sesji Google przełączy się na wbudowanego menedżera danych logowania. Nie możesz ustawić jednocześnie atrybutów data-native_callback i data-native_login_uri. Więcej informacji znajdziesz w tabeli poniżej:

Typ Wymagane Przykład
ciąg znaków Opcjonalny data-login_uri="https://www.example.com/password_login"

data-native_callback

Ten atrybut to nazwa funkcji JavaScript, która obsługuje dane logowania hasła zwracane przez wbudowany w przeglądarkę menedżer danych logowania. Jeśli ustawisz atrybut data-native_login_uri lub atrybut data-native_callback, biblioteka JavaScript w przypadku braku sesji Google przełączy się na wbudowany menedżer danych logowania. Nie możesz ustawić jednocześnie wartości data-native_callback i data-native_login_uri. Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
ciąg znaków Opcjonalny data-native_callback="handlePasswordCredential"

Funkcje JavaScript w przestrzeni nazw nie są obsługiwane przez interfejs HTML API. Zamiast tego użyj globalnej funkcji JavaScript bez przestrzeni nazw. Na przykład użyj mylibCallback zamiast mylib.callback.

data-native_id_param

Gdy przesyłasz dane logowania hasła do punktu końcowego modułu obsługi danych logowania hasła, możesz określić nazwę parametru dla pola credential.id. Domyślna nazwa to email. Więcej informacji znajdziesz w tabeli poniżej:

Typ Wymagane Przykład
URL Opcjonalny data-native_id_param="user_id"

data-native_password_param

Gdy przesyłasz dane logowania hasła do punktu końcowego modułu obsługi danych logowania hasła, możesz określić nazwę parametru dla wartości credential.password. Domyślna nazwa to password. Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
URL Opcjonalny data-native_password_param="pwd"

data-cancel_on_tap_outside

Ten atrybut określa, czy anulować żądanie One Tap, jeśli użytkownik kliknie poza prośbą. Wartością domyślną jest true. Aby ją wyłączyć, ustaw wartość false. Więcej informacji znajdziesz w tabeli poniżej:

Typ Wymagane Przykład
Wartość logiczna Opcjonalny data-cancel_on_tap_outside="false"

data-prompt_parent_id

Ten atrybut ustawia identyfikator DOM elementu kontenera. Jeśli nie jest ustawiony, w prawym górnym rogu okna wyświetli się prośba o logowanie jednym kliknięciem. Więcej informacji znajdziesz w tabeli poniżej:

Typ Wymagane Przykład
ciąg znaków Opcjonalny data-prompt_parent_id="parent_id"

Używa pliku cookie do kontrolowania wyświetlania promptu One Tap. Jeśli plik cookie określony przez ten atrybut ma niepustą wartość, prośba nie jest wyświetlana. Więcej informacji znajdziesz w tabeli poniżej:

Typ Wymagane Przykład
ciąg znaków Opcjonalny data-skip_prompt_cookie="SID"

data-nonce

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

Typ Wymagane Przykład
ciąg znaków Opcjonalny data-nonce="biaqbm70g23"

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

data-context

To pole zmienia tekst tytułu i komunikatów wyświetlanych w oknie One Tap. Nie ma wpływu na przeglądarki ITP. Domyślna wartość to signin.

Więcej informacji znajdziesz w tabeli poniżej:

Typ Wymagane Przykład
ciąg znaków Opcjonalny data-context="use"

W tabeli poniżej znajdziesz wszystkie dostępne konteksty i ich opisy:

Kontekst
signin „Zaloguj się w usłudze”
signup „Zarejestruj się w usłudze”
use „Użyj”

data-moment_callback

Ten atrybut to nazwa funkcji odbiornika powiadomień o stanie interfejsu użytkownika promptu. Więcej informacji znajdziesz w sekcji dotyczącej typu danych PromptMomentNotification.

Więcej informacji znajdziesz w tabeli poniżej:

Typ Wymagane Przykład
ciąg znaków Opcjonalny data-moment_callback="logMomentNotification"

Funkcje JavaScript w przestrzeni nazw nie są obsługiwane przez interfejs HTML API. Zamiast tego użyj globalnej funkcji JavaScript bez przestrzeni nazw. Na przykład użyj mylibCallback zamiast mylib.callback.

Jeśli chcesz wyświetlać One Tap w domenie nadrzędnej i jej subdomenach, przekaż do tego atrybutu domenę nadrzędną, aby używać jednego pliku cookie stanu współdzielonego. Więcej informacji znajdziesz w tabeli poniżej:

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

data-ux_mode

Ten atrybut określa ścieżkę UX używaną przez przycisk Zaloguj się przez Google. Wartością domyślną jest popup. Ten atrybut nie ma wpływu na interfejs One Tap. Więcej informacji znajdziesz w tabeli poniżej:

Typ Wymagane Przykład
ciąg znaków Opcjonalny data-ux_mode="redirect"

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

Tryb UX
popup Przeprowadza proces logowania w wyskakującym okienku.
redirect Przeprowadza proces logowania za pomocą przekierowania na całą stronę.

data-allowed_parent_origin

Źródła, które mogą osadzać pośredni element iframe. One Tap działa w trybie pośredniego elementu iframe, jeśli ten atrybut jest obecny. Więcej informacji znajdziesz w tabeli poniżej:

Typ Wymagane Przykład
ciąg tekstowy lub tablica ciągów tekstowych Opcjonalny data-allowed_parent_origin="https://example.com"

W tabeli poniżej znajdziesz listę obsługiwanych typów wartości i ich opisy.

Typy wartości
string Identyfikator URI pojedynczej domeny. "https://example.com"
string array Lista identyfikatorów URI domen rozdzielonych przecinkami. "https://news.example.com,https://local.example.com"

Jeśli wartość atrybutu data-allowed_parent_origin jest nieprawidłowa, inicjowanie One Tap w trybie pośredniej ramki iframe nie powiedzie się i zostanie zatrzymane.

Obsługiwane są też prefiksy z symbolami wieloznacznymi. Na przykład "https://*.example.com" obejmuje example.com i jego subdomeny na wszystkich poziomach (np.news.example.com, login.news.example.com). Pamiętaj o tych kwestiach, gdy używasz symboli wieloznacznych:

  • Ciągi wzorca nie mogą składać się tylko z symbolu wieloznacznego i domeny najwyższego poziomu. Na przykład https://.com i https://.co.uk są nieprawidłowe, ponieważ "https://.example.com" pasuje do example.com i wszystkich jego subdomen. Użyj listy rozdzielonej przecinkami, aby przedstawić 2 różne domeny. Na przykład "https://example1.com,https://.example2.com" pasuje do domen example1.com, example2.com i subdomen example2.com.
  • Domeny z wieloznacznymi symbolami muszą zaczynać się od bezpiecznego schematu https://, więc "*.example.com" jest uznawany za nieprawidłowy.

data-intermediate_iframe_close_callback

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

Pole data-intermediate_iframe_close_callback jest stosowane tylko w trybie pośredniego elementu iframe. Ma to wpływ tylko na pośredni element iframe, a nie na element iframe One Tap. Interfejs One Tap jest usuwany przed wywołaniem zwrotnym.

Typ Wymagane Przykład
funkcja Opcjonalny data-intermediate_iframe_close_callback="logBeforeClose"

Funkcje JavaScript w przestrzeni nazw nie są obsługiwane przez interfejs HTML API. Zamiast tego użyj globalnej funkcji JavaScript bez przestrzeni nazw. Na przykład użyj mylibCallback zamiast mylib.callback.

data-itp_support

To pole określa, czy w przeglądarkach obsługujących inteligentne zapobieganie śledzeniu (ITP) ma być włączony ulepszony interfejs One Tap. (wartością domyślną jest false); Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
Wartość logiczna Opcjonalny data-itp_support="true"

data-login_hint

Jeśli Twoja aplikacja z wyprzedzeniem wie, który użytkownik powinien się zalogować, może przekazać Google podpowiedź logowania. Jeśli się to uda, pomijany jest wybór konta. Akceptowane wartości to adres e-mail lub token identyfikatora w polu sub.

Więcej informacji znajdziesz w dokumentacji OpenID Connect dotyczącej login_hint.

Typ Wymagane Przykład
Ciąg tekstowy. Może to być adres e-mail lub wartość pola sub z tokena identyfikatora. Opcjonalny data-login_hint="elisa.beckett@gmail.com"

data-hd

Jeśli użytkownik ma kilka kont i powinien logować się tylko na konto Workspace, użyj tej opcji, aby podać Google wskazówkę dotyczącą nazwy domeny. Jeśli operacja się powiedzie, konta użytkowników wyświetlane podczas wyboru konta zostaną ograniczone do podanej domeny. Wartość wieloznaczna: * oferuje użytkownikowi tylko konta Workspace i wyklucza konta konsumenckie (user@gmail.com) podczas wyboru konta.

Więcej informacji znajdziesz w dokumentacji OpenID Connect dotyczącej hd.

Typ Wymagane Przykład
Ciąg tekstowy. Pełna i jednoznaczna nazwa domeny lub *. Opcjonalny data-hd="*"

data-use_fedcm_for_prompt

Zezwalaj przeglądarce na kontrolowanie monitów o logowanie użytkownika i pośredniczenie w procesie logowania między Twoją witryną a Google. Wartość domyślna to fałsz. Więcej informacji znajdziesz na stronie Migracja do FedCM.

Typ Wymagane Przykład
Wartość logiczna Opcjonalny data-use_fedcm_for_prompt="true"

data-use_fedcm_for_button

To pole określa, czy w Chrome (na komputerach w wersji M125 lub nowszej i na urządzeniach z Androidem w wersji M128 lub nowszej) ma być używany interfejs przycisku FedCM. Domyślnie jest ustawione na false. Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
Wartość logiczna Opcjonalny data-use_fedcm_for_button="true"

data-button_auto_select

To pole określa, czy w przypadku przepływu przycisku FedCM ma być włączona opcja automatycznego wyboru. Jeśli ta opcja jest włączona, powracający użytkownicy z aktywną sesją Google będą logować się automatycznie, bez wyświetlania prośby o wybranie konta. Domyślnie jest to false. Musisz wyraźnie włączyć automatyczne logowanie za pomocą przycisku podczas uruchamiania funkcji. Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
Wartość logiczna Opcjonalny data-button_auto_select="true"

Element z klasą „g_id_signin”

Jeśli dodasz g_id_signin do atrybutu class elementu, element będzie renderowany jako przycisk Zaloguj się przez Google.

Na tej samej stronie możesz renderować wiele przycisków Zaloguj się przez Google. Każdy przycisk może mieć własne ustawienia wizualne. Ustawienia są definiowane przez te atrybuty danych:

Atrybuty danych wizualnych

W tabeli poniżej znajdziesz listę atrybutów danych wizualnych i ich opisy:

Atrybut
data-type Typ przycisku: ikona lub standardowy przycisk.
data-theme Motyw przycisku. Na przykład filled_blue lub filled_black.
data-size Rozmiar przycisku. Na przykład mały lub duży.
data-text Tekst przycisku. Na przykład „Zaloguj się przez Google” lub „Zarejestruj się przez Google”.
data-shape Kształt przycisku. Na przykład prostokątny lub okrągły.
data-logo_alignment Wyrównanie logo Google: do lewej lub do środka.
data-width Szerokość przycisku w pikselach.
data-locale Tekst przycisku jest renderowany w języku ustawionym w tym atrybucie.
data-click_listener Jeśli ta funkcja jest ustawiona, jest wywoływana po kliknięciu przycisku Zaloguj się przez Google.
data-state Jeśli ten ciąg znaków jest ustawiony, jest zwracany z tokenem identyfikatora.

Typy atrybutów

W kolejnych sekcjach znajdziesz szczegółowe informacje o typie każdego atrybutu oraz przykład.

data-type

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

Typ Wymagane Przykład
ciąg znaków Tak data-type="icon"

W tabeli poniżej znajdziesz wszystkie dostępne typy przycisków i ich opisy:

Typ
standard
Przycisk z tekstem lub spersonalizowanymi informacjami.
icon
Przycisk ikony bez tekstu.

data-theme

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

Typ Wymagane Przykład
ciąg znaków Opcjonalny data-theme="filled_blue"

W tabeli poniżej znajdziesz dostępne motywy i ich opisy:

Motyw
outline
Standardowy przycisk z białym tłem Przycisk z ikoną na białym tle Spersonalizowany przycisk z białym tłem
Standardowy motyw przycisku.
filled_blue
Standardowy przycisk z niebieskim tłem Przycisk z ikoną na niebieskim tle Spersonalizowany przycisk na niebieskim tle
Motyw przycisku wypełnionego kolorem niebieskim.
filled_black
Standardowy przycisk z czarnym tłem Przycisk z ikoną na czarnym tle Spersonalizowany przycisk z czarnym tłem
Motyw przycisku wypełnionego kolorem czarnym.

data-size

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

Typ Wymagane Przykład
ciąg znaków Opcjonalny data-size="small"

W tabeli poniżej znajdziesz dostępne rozmiary przycisków i ich opisy.

Rozmiar
large
Duży przycisk standardowy Duży przycisk ikony duży, spersonalizowany przycisk;
Duży przycisk.
medium
Średni przycisk standardowy Przycisk ze średnią ikoną
Przycisk średniej wielkości.
small
mały przycisk logowania, mały przycisk z ikoną,
Mały przycisk.

data-text

Tekst przycisku. Wartością domyślną jest signin_with. Nie ma wizualnych różnic w tekście przycisków z ikonami, które mają różne atrybuty data-text. Jedynym wyjątkiem jest sytuacja, gdy tekst jest odczytywany w celu ułatwienia dostępu do ekranu.

Więcej informacji znajdziesz w tabeli poniżej:

Typ Wymagane Przykład
ciąg znaków Opcjonalny data-text="signup_with"

W tabeli poniżej znajdziesz dostępne teksty przycisków i ich opisy:

Tekst
signin_with
Standardowy przycisk z etykietą „Zaloguj się przez Google”. Przycisk z ikoną bez widocznego tekstu
Tekst przycisku to „Zaloguj się przez Google”.
signup_with
Standardowy przycisk z etykietą „Zarejestruj się w Google”. Przycisk z ikoną bez widocznego tekstu
Tekst przycisku to „Zarejestruj się przez Google”.
continue_with
Standardowy przycisk z etykietą „Kontynuuj z Google”. Przycisk z ikoną bez widocznego tekstu
Tekst przycisku to „Kontynuuj z Google”.
signin
Standardowy przycisk z etykietą „Zaloguj się” Przycisk z ikoną bez widocznego tekstu
Tekst przycisku to „Zaloguj się”.

data-shape

Kształt przycisku. Wartością domyślną jest rectangular. Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
ciąg znaków Opcjonalny data-shape="rectangular"

W tabeli poniżej znajdziesz dostępne kształty przycisków i ich opisy:

Kształt
rectangular
Prostokątny przycisk standardowy Prostokątny przycisk ikony Prostokątny spersonalizowany przycisk
Przycisk w kształcie prostokąta. Jeśli jest używany w przypadku typu przycisku icon, jest taki sam jak square.
pill
Standardowy przycisk w kształcie pigułki Przycisk ikony w kształcie pigułki Spersonalizowany przycisk w kształcie pigułki
Przycisk w kształcie pigułki. Jeśli jest używany w przypadku przycisku typu icon, jest taki sam jak circle.
circle
Okrągły przycisk standardowy okrągły przycisk z ikoną. Okrągły przycisk spersonalizowany
Przycisk w kształcie koła. Jeśli jest używany w przypadku typu przycisku standard, jest taki sam jak pill.
square
Kwadratowy przycisk standardowy Kwadratowy przycisk z ikoną Kwadratowy przycisk spersonalizowany
Przycisk w kształcie kwadratu. Jeśli jest używany w przypadku typu przycisku standard, jest taki sam jak rectangular.

data-logo_alignment

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

Typ Wymagane Przykład
ciąg znaków Opcjonalny data-logo_alignment="center"

W tabeli poniżej znajdziesz dostępne opcje wyrównania i ich opisy:

logo_alignment
left
Standardowy przycisk z logo G po lewej stronie
Wyrównuje logo Google do lewej strony.
center
Standardowy przycisk z logo G pośrodku
Wyśrodkowuje logo Google.

data-width

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

Więcej informacji znajdziesz w tabeli poniżej:

Typ Wymagane Przykład
ciąg znaków Opcjonalny data-width=400

data-locale

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

Jeśli nie jest skonfigurowany, używany jest domyślny język przeglądarki lub preferencje użytkownika sesji Google. Dlatego różni użytkownicy mogą widzieć różne wersje zlokalizowanych przycisków, które mogą mieć też różne rozmiary.

Więcej informacji znajdziesz w tabeli poniżej:

Typ Wymagane Przykład
ciąg znaków Opcjonalny data-locale="zh_CN"

data-click_listener

Za pomocą atrybutu data-click_listener możesz zdefiniować funkcję JavaScript, która ma być wywoływana po kliknięciu przycisku Zaloguj się przez Google.

  <script>
    function onClickHandler(){
      console.log("Sign in with Google button clicked...")
    }
  </script>
  .....
  <div class="g_id_signin"
      data-size="large"
      data-theme="outline"
      data-click_listener="onClickHandler">
  </div>

W tym przykładzie po kliknięciu przycisku Zaloguj się przez Google w konsoli zostanie zarejestrowany komunikat Sign in with Google button clicked....

data-state

Opcjonalnie, ponieważ na tej samej stronie można renderować wiele przycisków „Zaloguj się przez Google”, możesz przypisać do każdego z nich unikalny ciąg znaków. Ten sam ciąg znaków zostanie zwrócony wraz z tokenem identyfikatora, dzięki czemu możesz określić, który przycisk użytkownik kliknął, aby się zalogować.

Więcej informacji znajdziesz w tabeli poniżej:

Typ Wymagane Przykład
ciąg znaków Opcjonalny data-state="button 1"

Integracja po stronie serwera

Punkty końcowe po stronie serwera muszą obsługiwać te żądania HTTP POST.

Punkt końcowy obsługi tokena tożsamości

Punkt końcowy obsługi tokena identyfikatora przetwarza token identyfikatora. W zależności od stanu odpowiedniego konta możesz zalogować użytkownika i przekierować go na stronę rejestracji lub na stronę łączenia kont, aby uzyskać dodatkowe informacje.

Przykładowe żądanie do punktu końcowego logowania:

POST /login HTTP/1.1
Content-Type: application/x-www-form-urlencoded
Cookie: g_csrf_token=<RANDOM_STRING>
Host: www.example.com

credential=<JWT_ENCODED_ID_TOKEN>&g_csrf_token=<RANDOM_STRING>

Żądanie HTTP POST zawiera te informacje:

Format Nazwa Opis
Plik cookie g_csrf_token Losowy ciąg znaków, który zmienia się przy każdym żądaniu wysyłanym do punktu końcowego logowania określonego przez data-login_uri, musi być zgodny z wartością w parametrze żądania g_csrf_token.
Parametr żądania g_csrf_token Losowy ciąg znaków, który zmienia się z każdym żądaniem wysyłanym do punktu końcowego logowania określonego przez data-login_uri, musi być zgodny z wartością pliku cookie g_csrf_token.
Parametr żądania credential Zakodowany token identyfikatora JWT wydany przez Google.
Parametr żądania select_by Sposób logowania się użytkownika.
Parametr żądania state Ten parametr jest definiowany tylko wtedy, gdy użytkownik kliknie przycisk Zaloguj się przez Google, aby się zalogować, a atrybut state przycisku jest określony.

dane logowania

Po zdekodowaniu token identyfikatora wygląda jak w tym przykładzie: 

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's GSuite email address
  "email": "elisa.g.beckett@gmail.com", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "Eliza",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion's creation time
  "exp": 1596477600, // Unix timestamp of the assertion's expiration time
  "jti": "abc161803398874def"
}

Pole sub to globalnie unikalny identyfikator konta Google. Używaj pola sub jako identyfikatora użytkownika, ponieważ jest ono niepowtarzalne wśród wszystkich kont Google i nigdy nie jest używane ponownie.

Korzystając z pól email, email_verified i hd, możesz sprawdzić, czy Google hostuje adres e-mail i czy jest dla niego autorytatywny. W przypadkach, w których Google jest autorytetem, potwierdzamy, że użytkownik jest prawowitym właścicielem konta.

Przypadki, w których Google jest miarodajne:

  • email ma sufiks @gmail.com, jest to konto Gmail.
  • email_verified ma wartość „prawda” i hd jest ustawiona, jest to konto Google Workspace.

Użytkownicy mogą rejestrować konta Google bez używania Gmaila ani Google Workspace. Gdy email nie zawiera sufiksu @gmail.com, a hd nie występuje, Google nie jest autorytatywny i zaleca się stosowanie hasła lub innych metod weryfikacji użytkownika. email_verified może być też prawdziwe, ponieważ Google początkowo zweryfikowało użytkownika podczas tworzenia konta Google, ale od tego czasu własność konta e-mail innej firmy mogła się zmienić.

Pole exp pokazuje czas wygaśnięcia, w którym musisz zweryfikować token po stronie serwera. W przypadku tokena identyfikatora uzyskanego w ramach Logowania przez Google wynosi on godzinę. Musisz zweryfikować token przed upływem terminu ważności. Nie używaj exp do zarządzania sesjami. Wygasły token identyfikatora nie oznacza, że użytkownik jest wylogowany. Twoja aplikacja odpowiada za zarządzanie sesjami użytkowników.

g_csrf_token

Token stanu zapobiegający fałszerstwu. Jest to token CSRF (Cross-site request forgery) utworzony przez bibliotekę gsi/client. Losowa wartość jest uwzględniana zarówno jako plik cookie, jak i jako parametr żądania w treści ładunku żądania POST. Jeśli podczas przetwarzania żądania na serwerze te 2 wartości nie są zgodne, żądanie należy uznać za nieprawidłowe.

select_by

W tabeli poniżej znajdziesz możliwe wartości pola select_by. Rodzaj przycisku użytego wraz ze stanem sesji i zgody służy do ustawiania wartości.

  • Użytkownik kliknął przycisk Jedno dotknięcie lub Zaloguj się przez Google albo skorzystał z bezdotykowego procesu logowania automatycznego.

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

  • Zanim udostępnisz aplikacji dane logowania w postaci tokena identyfikatora, użytkownik musi

    • kliknął(-a) przycisk Potwierdź, aby wyrazić zgodę na udostępnianie danych logowania, lub
    • wcześniej wyraził(-a) zgodę i użył(-a) opcji Wybierz konto, aby wybrać konto Google.

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

Wartość Opis
auto Automatyczne logowanie użytkownika z istniejącą sesją, który wcześniej wyraził zgodę na udostępnianie danych logowania. Dotyczy tylko przeglądarek, które nie obsługują FedCM.
user Użytkownik z istniejącą sesją, który wcześniej wyraził zgodę, kliknął przycisk „Kontynuuj jako” w ramach logowania jednym kliknięciem, aby udostępnić dane logowania. Dotyczy tylko przeglądarek, które nie obsługują FedCM.
fedcm Użytkownik kliknął przycisk „Kontynuuj jako” w ramach logowania jednym kliknięciem, aby udostępnić dane logowania za pomocą FedCM. Dotyczy tylko przeglądarek obsługujących FedCM.
fedcm_auto Automatyczne logowanie użytkownika z istniejącą sesją, który wcześniej wyraził zgodę na udostępnianie danych logowania za pomocą FedCM One Tap. Dotyczy tylko przeglądarek obsługujących FedCM.
user_1tap Użytkownik z istniejącą sesją kliknął przycisk „Kontynuuj jako” w ramach logowania jednym kliknięciem, aby wyrazić zgodę i udostępnić dane logowania. Dotyczy tylko Chrome w wersji 75 i nowszych.
user_2tap Użytkownik bez istniejącej sesji kliknął przycisk „Kontynuuj jako” w ramach logowania jednym kliknięciem, aby wybrać konto, a następnie kliknął przycisk Potwierdź w wyskakującym okienku, aby wyrazić zgodę i udostępnić dane logowania. Dotyczy przeglądarek innych niż opartych na Chromium.
itp Użytkownik, który wcześniej wyraził zgodę, kliknął opcję „Jedno kliknięcie” w przeglądarkach z ITP.
itp_confirm Użytkownik, który nie wyraził zgody, kliknął przycisk „Jedno kliknięcie” w przeglądarkach ITP, a następnie kliknął przycisk „Dalej”, aby wyrazić zgodę i udostępnić dane logowania.
btn Użytkownik, który wcześniej wyraził zgodę, kliknął przycisk Zaloguj się przez Google i wybrał konto Google z listy „Wybierz konto”, aby udostępnić dane logowania.
btn_confirm Użytkownik, który nie wyraził zgody, kliknął przycisk Zaloguj się przez Google, a następnie przycisk „Dalej”, aby wyrazić zgodę i udostępnić dane logowania.

stan

Ten parametr jest zdefiniowany tylko wtedy, gdy użytkownik kliknie przycisk Zaloguj się przez Google, aby się zalogować, a kliknięty przycisk ma określony atrybut data-state. Wartość tego pola jest taka sama jak wartość określona w atrybucie data-state przycisku.

Na tej samej stronie można renderować wiele przycisków logowania się przez Google, dlatego możesz przypisać do każdego z nich unikalny ciąg znaków. Dzięki temu parametrowi state możesz określić, który przycisk użytkownik kliknął, aby się zalogować.

Punkt końcowy obsługi danych logowania za pomocą hasła

Punkt końcowy obsługi danych logowania za pomocą hasła przetwarza dane logowania za pomocą hasła, które pobiera wbudowany menedżer danych logowania.

Żądanie HTTP POST zawiera te informacje:

Format Nazwa Opis
Plik cookie g_csrf_token Losowy ciąg znaków, który zmienia się przy każdym żądaniu wysyłanym do punktu końcowego logowania określonego przez data-native_login_uri, musi być zgodny z wartością w parametrze żądania g_csrf_token.
Parametr żądania g_csrf_token Losowy ciąg znaków, który zmienia się z każdym żądaniem wysyłanym do punktu końcowego logowania określonego przez data-native_login_uri, musi być zgodny z wartością pliku cookie g_csrf_token.
Parametr żądania email Ten token tożsamości jest wydawany przez Google.
Parametr żądania password Sposób wyboru danych logowania.