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

Ta strona referencyjna zawiera informacje o interfejsie API atrybutów danych HTML logowania się przez Google. Za pomocą interfejsu API możesz wyświetlać na stronach internetowych przycisk Zaloguj się przez Google lub prompt One Tap.

Element o identyfikatorze „g_id_onload”

Atrybuty danych logowania się przez Google możesz umieszczać w dowolnych widocznych lub ukrytych elementach, takich jak <div> i <span>. Jedynym wymaganiem jest to, aby identyfikator elementu był ustawiony na g_id_onload. Nie umieszczaj tego identyfikatora na wielu elementach.

Atrybuty danych

W tabeli poniżej znajdziesz atrybuty danych wraz z ich opisami:

Atrybut
data-client_id Identyfikator klienta aplikacji
data-auto_prompt Wyświetlić Google One.
data-auto_select Włącza automatyczne wybieranie w Google One Tap.
data-login_uri Adres URL punktu logowania
data-callback Nazwa funkcji obsługi tokena identyfikatora JavaScript
data-native_login_uri Adres URL punktu końcowego modułu obsługi danych logowania do haseł
data-native_callback Nazwa funkcji JavaScripta do obsługi danych logowania do konta z hasłem
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 okno ma zostać anulowane, gdy użytkownik kliknie poza nim.
data-prompt_parent_id Identyfikator DOM elementu kontenera prompta jednym dotknię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 tokenach identyfikatorów
data-context Tytuł i słowa w powiadomieniu One Tap
data-moment_callback Nazwa funkcji detektora powiadomień o stanie interfejsu promptu
data-state_cookie_domain Jeśli chcesz wywołać funkcję One Tap w domenie nadrzędnej i jej subdomenach, prześlij domenę nadrzędną do tego atrybutu, aby używana była jedna współdzielona cookie.
data-ux_mode Przebieg procesu logowania się przez Google
data-allowed_parent_origin Źródła, które mogą umieszczać pośredni element iframe. Jeśli ten atrybut jest obecny, funkcja One Tap działa w trybie pośrednim iframe.
data-intermediate_iframe_close_callback Zastępuje domyślne działanie pośredniego elementu iframe, gdy użytkownicy ręcznie zamykają jednym dotknięciem.
data-itp_support Umożliwia ulepszenie interfejsu One Tap w przeglądarkach ITP.
data-login_hint pominąć wybór konta, podając użytkownikowi podpowiedź;
data-hd Ogranicz wybór konta według domeny.
data-use_fedcm_for_prompt Zezwalaj przeglądarce na kontrolowanie promptów logowania użytkownika i przekazywanie danych logowania między witryną a Google.
data-enable_redirect_uri_validation Umożliw przekierowanie przycisku zgodnie z regułami sprawdzania identyfikatorów URI przekierowania.

Typy atrybutów

Poniższe sekcje zawierają 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"

automatyczny_prompt dotyczący danych

Ten atrybut określa, czy wyświetlić opcję Jednym kliknięciem. Wartością domyślną jest true. Google One tap nie jest wyświetlany, gdy ta wartość ma wartość false. Więcej informacji znajdziesz w tabeli poniżej:

Typ Wymagane Przykład
wartość logiczna Opcjonalnie data-auto_prompt="true"

data-auto_select

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

Typ Wymagane Przykład
wartość logiczna Opcjonalnie data-auto_select="true"

identyfikator URI logowania do danych

Ten atrybut to identyfikator URI punktu logowania.

Wartość musi dokładnie pasować do jednego z autoryzowanych identyfikatorów URI przekierowania dla klienta OAuth 2.0, który skonfigurowałeś w konsoli interfejsu API. Musi on być zgodny z regułami weryfikacji identyfikatorów URI przekierowania.

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

Odpowiedź na token identyfikacyjny jest wysyłana do punktu logowania, gdy nie jest zdefiniowana funkcja wywołania zwrotnego, a użytkownik kliknie przycisk Zaloguj się przez Google lub Jeden dotyk albo nastąpi logowanie automatyczne.

Więcej informacji znajdziesz w tabeli poniżej:

Typ Opcjonalnie Przykład
URL Domyślnie jest to identyfikator URI bieżącej strony lub określona przez Ciebie wartość.
Zignorowana, gdy data-ux_mode="popup" i data-callback są skonfigurowane.		 data-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 sekcji treści.

Poniżej znajduje się przykład żądania wysyłanego do punktu końcowego logowania:

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

credential=ID_TOKEN

data-callback

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

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

Może być używany jeden z atrybutów data-login_uri lub data-callback. Zależy to od tych konfiguracji komponentów i trybu 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 atrybutów musi być ustawiony w przypadku Google One Tap i przycisku logowania Google popup w interfejsie użytkownika. Jeśli oba są ustawione, atrybut data-callback ma wyższy priorytet.

Interfejs HTML API nie obsługuje funkcji JavaScript w ramach przestrzeni nazw. Zamiast tego użyj globalnej funkcji JavaScriptu bez przestrzeni nazw. Na przykład użyj mylibCallback zamiast mylib.callback.

data-native_login_uri

Ten atrybut to adres URL punktu końcowego modułu obsługi danych logowania. Jeśli ustawisz atrybut data-native_login_uri lub atrybut data-native_callback, biblioteka JavaScript będzie używać domyślnie domyślnego menedżera danych logowania, gdy nie będzie sesji Google. 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 Opcjonalnie data-login_uri="https://www.example.com/password_login"

natywne_wywołanie_danych

Ten atrybut to nazwa funkcji JavaScript, która obsługuje hasła zwracane przez natywny menedżer danych logowania w przeglądarce. Jeśli ustawisz atrybut data-native_login_uri lub atrybut data-native_callback, biblioteka JavaScript użyje domyślnie domyślnego menedżera danych logowania, gdy nie będzie sesji Google. Nie możesz ustawić jednocześnie wartości data-native_callback i data-native_login_uri. Więcej informacji znajdziesz w tabeli poniżej:

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

Interfejs HTML API nie obsługuje funkcji JavaScript w ramach przestrzeni nazw. Zamiast tego użyj globalnej funkcji JavaScriptu bez przestrzeni nazw. Na przykład użyj mylibCallback zamiast mylib.callback.

data-native_id_param

Podczas przesyłania danych logowania do punktu końcowego modułu obsługi danych logowania z hasłem możesz określić nazwę parametru dla pola credential.id. Nazwa domyślna to email. Więcej informacji znajdziesz w tej tabeli:

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

data-native_password_param

Podczas przesyłania poświadczeń logowania do punktu końcowego obsługującego te poświadczenia możesz określić nazwę parametru dla wartości credential.password. Domyślna nazwa to password. Więcej informacji znajdziesz w tabeli poniżej:

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

data-cancel_on_tap_outside

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

Typ Wymagane Przykład
wartość logiczna Opcjonalnie data-cancel_on_tap_outside="false"

data-prompt_parent_id

Ten atrybut ustawia identyfikator DOM elementu kontenera. Jeśli nie jest ustawiona, w prawym górnym rogu okna pojawi się prośba o jeden klik. Więcej informacji znajdziesz w tabeli poniżej:

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

Ten atrybut pomija One Tap, jeśli określony plik cookie ma niepustą wartość. Więcej informacji znajdziesz w tabeli poniżej:

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

jednorazowa wartość danych

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

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

Długość jednorazowej jest ograniczona do maksymalnego rozmiaru tokena JWT obsługiwanego w Twoim środowisku, a także ograniczeń rozmiaru HTTP w poszczególnych przeglądarkach i serwerach.

kontekst danych

Ten atrybut zmienia tekst tytułu i komunikatów wyświetlanych w prośbie o jeden klik. Więcej informacji znajdziesz w tabeli poniżej:

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

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

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

data-moment_callback

Ten atrybut to nazwa funkcji detektora powiadomień o stanie interfejsu 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 Opcjonalnie data-moment_callback="logMomentNotification"

Interfejs HTML API nie obsługuje funkcji JavaScript w ramach przestrzeni nazw. 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, prześlij domenę nadrzędną do tego atrybutu, aby użyć jednego pliku cookie ze wspólnym stanem. Więcej informacji znajdziesz w tabeli poniżej:

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

tryb-danych-ux

Ten atrybut określa przepływ danych użytkownika używany przez przycisk Zaloguj się przez Google. Wartością domyślną jest popup. Ten atrybut nie ma wpływu na interfejs użytkownika w ramach funkcji One Tap. Więcej informacji znajdziesz w tabeli poniżej:

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

Tabela poniżej zawiera listę dostępnych trybów interfejsu użytkownika i ich opisy.

Tryb UX
popup Przeprowadza proces logowania w wyskakującym okienku.
redirect Przeprowadza proces logowania w interfejsie użytkownika przez przekierowanie całej strony.

data-allowed_parent_origin

Źródła, które mogą umieszczać pośredni element iframe. Jeśli ten atrybut jest obecny, funkcja One Tap działa w trybie pośrednim iframe. Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
łańcuch tekstowy lub tablica tekstowa Opcjonalnie data-allowed_parent_origin="https://example.com"

W tabeli poniżej znajdziesz obsługiwane typy 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. &quot;https://news.example.com,https://local.example.com&quot;

Jeśli wartość atrybutu data-allowed_parent_origin jest nieprawidłowa, inicjalizacja trybu pośredniego iframe usługi One Tap zakończy się niepowodzeniem i zostanie przerwana.

Obsługiwane są też prefiksy symboli wieloznacznych. Na przykład "https://*.example.com" pasuje do example.com i jej subdomen na wszystkich poziomach (np.news.example.com, login.news.example.com). O czym należy pamiętać podczas używania 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. Jak wspomniano powyżej, "https://*.example.com" jest zgodne z example.com i jego subdomenami. Możesz też użyć listy oddzielonej przecinkami do reprezentowania 2 różnych domen. Na przykład: "https://example1.com,https://*.example2.com" pasuje do domen example1.com, example2.com i subdomen domeny example2.com
  • Domeny z symbolem wieloznaczości muszą zaczynać się od bezpiecznego schematu https://, więc "*.example.com" jest uważana za nieprawidłową.

data-intermediate_iframe_close_callback

Zastępuje domyślne działanie pośredniego elementu iframe, gdy użytkownicy ręcznie zamykają je jednym kliknięciem, klikając przycisk „X” w interfejsie One Tap. Domyślnie iframe pośredniczący jest natychmiast usuwany z DOM.

Pole data-intermediate_iframe_close_callback ma zastosowanie tylko w trybie pośrednim iframe. Ma to wpływ tylko na pośredni iframe, a nie na iframe One Tap. Interfejs One Tap jest usuwany przed wywołaniem funkcji zwrotnej.

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

Interfejs HTML API nie obsługuje funkcji JavaScript w ramach przestrzeni nazw. 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 ulepszona wersja interfejsu One Tap ma być włączona w przeglądarkach obsługujących inteligentną ochronę przed śledzeniem (ITP). (wartością domyślną jest false); Więcej informacji znajdziesz w tabeli poniżej:

Typ Wymagane Przykład
wartość logiczna Opcjonalnie data-itp_support="true"

data-login_hint

Jeśli aplikacja wie z wyprzedzeniem, który użytkownik powinien się zalogować, może przekazać Google podpowiedź logowania. Jeśli operacja się uda, wybór konta zostanie pominięty. Akceptowane wartości to adres e-mail lub pole sub w tokenie identyfikacyjnym.

Więcej informacji znajdziesz w dokumentacji OpenID Connect na stronie login_hint.

Typ Wymagane Przykład
Ciąg tekstowy. Może to być adres e-mail lub wartość pola sub z tokena identyfikatora. Opcjonalnie 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 tego polecenia, aby podać Google podpowiedź nazwy domeny. Jeśli operacja się powiedzie, konta użytkowników wyświetlane podczas wyboru konta będą ograniczone do podanej domeny. Wartość z symbolem wieloznacznym: * oferuje użytkownikowi tylko konta Workspace i wyklucza konta użytkowników (user@gmail.com) podczas wyboru konta.

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

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

data-use_fedcm_for_prompt

Zezwól przeglądarce na kontrolowanie próśb o zalogowanie się użytkowników i zapośredniczenie w procesie logowania się 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 Opcjonalnie data-use_fedcm_for_prompt="true"

data-enable_redirect_uri_validation

Włącz przekierowanie przycisku zgodnie z regułami sprawdzania identyfikatorów URI przekierowania.

Typ Wymagane Przykład
wartość logiczna Opcjonalnie data-enable_redirect_uri_validation="true"

Element z klasą „g_id_signin”

Jeśli dodasz element g_id_signin do atrybutu class, element zostanie wyrenderowany 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 wypełnienie_niebieski lub wypełnienie_czarny.
data-size Rozmiar przycisku. Na przykład małe lub duże.
data-text Tekst przycisku. Na przykład „Zaloguj się przez Google” lub „Zarejestruj się za pomocą Google”.
data-shape Kształt przycisku. Na przykład prostokątne lub okrągłe.
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 jest ustawiona, ta funkcja jest wywoływana po kliknięciu przycisku Zaloguj się przez Google.
data-state Jeśli jest ustawiony, ten ciąg znaków jest zwracany z tokenem identyfikacyjnym.

Typy atrybutów

Poniższe sekcje zawierają 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 tabeli poniżej:

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
Ikona przycisku bez tekstu.

data-theme

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

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

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

Motyw
outline
Standardowy przycisk na białym tle Przycisk z ikoną na białym tle Spersonalizowany przycisk na białym tle
Użyj standardowego motywu przycisku.
filled_blue
Standardowy przycisk na niebieskim tle Przycisk z ikoną na niebieskim tle Przycisk z niebieskim tłem
Motyw przycisku z niebieskim wypełnieniem.
filled_black
Standardowy przycisk na czarnym tle Przycisk z ikoną na czarnym tle Spersonalizowany przycisk na czarnym tle
Motyw przycisku wypełnionego czernią.

data-size

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

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

W tabeli poniżej znajdziesz 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 przycisk standardowy Przycisk ikony o średnim rozmiarze
Średni rozmiar.
small
Mały przycisk Mały przycisk ikony
Mały przycisk.

data-text

Tekst przycisku. Wartością domyślną jest signin_with. Tekst przycisków ikon, które mają różne atrybuty data-text, nie różni się w sposób wizualny. Jedynym wyjątkiem jest odczytywanie tekstu na potrzeby ułatwień dostępu.

Więcej informacji znajdziesz w tabeli poniżej:

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

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

Tekst
signin_with
Standardowy przycisk z nazwą „Zaloguj się przez Google” Przycisk z ikoną bez widocznego tekstu
Tekst przycisku to „Zaloguj się przez Google”.
signup_with
Standardowy przycisk z nazwą „Zarejestruj się przez Google” Przycisk z ikoną bez widocznego tekstu
Tekst przycisku to „Zarejestruj się przez Google”.
continue_with
Standardowy przycisk z napisem „Kontynuuj przy użyciu Google” Przycisk ikony bez widocznego tekstu
Tekst przycisku to „Kontynuuj z Google”.
signin
Standardowy przycisk z nazwą „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 tabeli poniżej:

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

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

Kształt
rectangular
Kwadratowy przycisk standardowy Prostokątny przycisk ikony Kwadratowy przycisk z logo
Przycisk w kształcie prostokąta. Jeśli jest używany w przycisku typu icon, jest taki sam jak square.
pill
Standardowy przycisk w kształcie pigułki Przycisk w kształcie pigułki Przycisk w kształcie pigułki
Przycisk w kształcie pigułki. Jeśli zostanie użyta jako typ przycisku icon, będzie taki sam jak circle.
circle
Okrągły przycisk standardowy Okrągły przycisk ikony Okrągły przycisk z personalizacją
Przycisk okrągły. Jeśli zostanie użyta jako typ przycisku standard, będzie taki sam jak pill.
square
Standardowy kwadratowy przycisk Kwadratowy przycisk ikony Kwadratowy spersonalizowany przycisk
Przycisk kwadratowy. Jeśli jest używany w przycisku typu standard, jest taki sam jak rectangular.

wyrównanie_logo_danych

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

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

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

logo_alignment
left
Standardowy przycisk z logo G po lewej stronie
Logo Google jest wyrównane do lewej.
center
Standardowy przycisk z logo G pośrodku
Wyśrodkowuje logo Google.

szerokość danych

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 Opcjonalnie data-width=400

data-locale

Opcjonalnie: Wyświetl tekst przycisku w określonym języku. W przeciwnym razie zostanie użyty domyślny język ustawiony na koncie Google użytkownika lub w ustawieniach 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 ustawiony, używane są domyślne ustawienia języka przeglądarki lub preferencje użytkownika sesji Google. Dlatego różni użytkownicy mogą widzieć różne wersje spersonalizowanych przycisków, prawdopodobnie o różnych rozmiarach.

Więcej informacji znajdziesz w tabeli poniżej:

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

data-click_listener

Za pomocą atrybutu data-click_listener możesz zdefiniować funkcję JavaScript, która zostanie wywołana 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 jest rejestrowany komunikat Zaloguj się przez Google kliknięto przycisk....

data-state

Opcjonalnie, ponieważ na tej samej stronie może być wyświetlonych 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 identyfikacyjnym, 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 Opcjonalnie data-state="button 1"

Integracja po stronie serwera

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

Punkt końcowy modułu obsługi tokena identyfikatora

Punkt końcowy modułu obsługi tokena identyfikacyjnego przetwarza token identyfikacyjny. W zależności od stanu odpowiedniego konta możesz zalogować użytkownika, aby został przekierowany na stronę rejestracji lub na stronę łączenia kont, na której znajdzie dodatkowe informacje.

Żądanie HTTP POST zawiera te informacje:

Format Nazwa Opis
Plik cookie g_csrf_token Losowy ciąg znaków, który zmienia się z każdą prośbą wysłaną do punktu końcowego.
Parametr żądania g_csrf_token ciąg znaków o tej samej wartości co poprzedni plik cookie, g_csrf_token.
Parametr żądania credential Token identyfikacyjny wydany przez Google.
Parametr żądania select_by Sposób wyboru danych logowania.
Parametr żądania state Ten parametr jest zdefiniowany tylko wtedy, gdy użytkownik kliknie przycisk Zaloguj się przez Google, aby się zalogować, i jeśli atrybut state przycisku jest określony.

certyfikat

Po odkodowaniu token identyfikatora 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": "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 globalny, unikalny identyfikator konta Google. Tylko jako identyfikatora użytkownika używaj pola sub, ponieważ jest ono niepowtarzalne wśród wszystkich kont Google i nigdy nie jest używane ponownie. Nie używaj adresu e-mail jako identyfikatora, ponieważ konto Google może mieć w różnych momentach wiele powiązanych adresów e-mail.

Za pomocą pól email, email_verified i hd możesz określić, czy Google hostuje adres e-mail i jest autorytatywną domeną. W przypadkach, gdy Google jest wiarygodne, użytkownik jest uznawany za prawdziwego właściciela konta.

Przypadki, w których Google ma wiarygodność:

  • To jest konto Gmail, adres email ma sufiks @gmail.com.
  • Jeśli email_verified ma wartość true, a hd jest ustawione, jest to konto Google Workspace.

Użytkownicy mogą rejestrować się na konta Google bez korzystania z Gmaila lub Google Workspace. Jeśli pole email nie zawiera sufiksu @gmail.com, a brak jest znaku hd, Google nie jest wiarygodnym adresem URL, a w celu weryfikacji użytkownika zalecamy użycie hasła lub innych testów zabezpieczających. email_verified może być również prawdziwe, ponieważ Google zweryfikowało użytkownika podczas tworzenia konta Google, ale własność konta e-mail innej firmy mogła się od tego czasu zmienić.

Pole exp pokazuje czas, w którym musisz zweryfikować token po stronie serwera. W przypadku tokena identyfikacyjnego uzyskanego z Logowania przez Google wynosi on 1 godzinę. Musisz zweryfikować token przed upływem daty ważności. Nie używaj funkcji exp do zarządzania sesjami. Wygasły token identyfikacyjny 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 wraz z danymi sesji i stanu zgody jest używany do ustawienia wartości.

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

  • Znaleziono istniejącą sesję lub użytkownik wybrany i zalogowanie się na konto Google, aby rozpocząć nową sesję.

  • Zanim udostępnisz dane logowania w tokenie identyfikacyjnym aplikacji, użytkownik:

    • kliknęli przycisk Potwierdź, aby wyrazić zgodę na udostępnienie danych logowania,
    • wcześniej wyraził(-a) zgodę i wybrał(-a) konto Google za pomocą opcji „Wybierz konto”.

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, który w ramach sesji udzielił wcześniej zgody, nacisnął przycisk „Kontynuuj jako” w One Tap, aby udostępnić dane logowania. Dotyczy tylko przeglądarek, które nie obsługują FedCM.
fedcm Użytkownik nacisnął przycisk „Dalej jako” w usłudze One Tap, aby udostępnić dane logowania za pomocą FedCM. Dotyczy tylko obsługiwanych przeglądarek FedCM.
fedcm_auto automatyczne logowanie użytkownika z istniejącą sesją, który wcześniej wyraził zgodę na udostępnianie danych logowania za pomocą funkcji FedCM One Tap; Dotyczy tylko obsługiwanych przeglądarek FedCM.
user_1tap Użytkownik w istniejącej sesji kliknął jednym dotknięciem przycisk „Kontynuuj jako”, aby wyrazić zgodę i udostępnić dane logowania. Dotyczy tylko Chrome w wersji 75 lub nowszej.
user_2tap Użytkownik bez żadnej sesji nacisnął jednym dotknięciem przycisk „Kontynuuj jako”, aby wybrać konto, a następnie naciśnieł przycisk Potwierdź w wyskakującym okienku, aby wyrazić zgodę i udostępnić dane logowania. Dotyczy przeglądarek innych niż oparte na Chromium.
btn Użytkownik z dotychczasową sesją, który wcześniej wyraził zgodę, kliknął przycisk Zaloguj się przez Google i w sekcji „Wybierz konto” wybrał konto Google, aby udostępnić dane logowania.
btn_confirm Użytkownik z aktywną 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, który nie miał otwartej sesji, najpierw kliknął przycisk Zaloguj się przez Google, aby wybrać konto Google, a potem kliknął przycisk Potwierdź, 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ć, i określony jest atrybut data-state klikniętego przycisku. Wartość tego pola jest taka sama jak wartość określona w atrybucie data-state przycisku.

Na tej samej stronie może być wyświetlonych 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 statemożesz określić, który przycisk kliknął użytkownik, aby się zalogować.

Punkt końcowy modułu obsługi danych logowania do haseł

Punkt końcowy modułu obsługi danych logowania do hasła przetwarza dane logowania do hasła, które pobiera 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ę z każdą prośbą wysłaną do punktu końcowego.
Parametr żądania g_csrf_token ciąg znaków o tej samej wartości co poprzedni plik cookie, g_csrf_token.
Parametr żądania email Ten token tożsamości, który wydaje Google.
Parametr żądania password Sposób wyboru danych logowania.