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 prompt One Tap lub przycisk Zaloguj się przez Google.
Element o identyfikatorze „g_id_onload”
Atrybuty danych Logowanie z Google możesz umieszczać w dowolnych widocznych lub ukrytych elementach, np. <div>
i <span>
. Jedynym wymaganiem jest to, aby identyfikator elementu miał wartość g_id_onload
. Nie przypisuj tego identyfikatora do wielu elementów.
Atrybuty danych
W tabeli poniżej znajdziesz atrybuty danych wraz z ich opisami:
Atrybut | |
---|---|
data-client_id |
Identyfikator klienta aplikacji |
data-auto_prompt |
Wyświetlanie Google One |
data-auto_select |
Umożliwia automatyczny wybór w Google One Tap. |
data-login_uri |
URL punktu końcowego logowania |
data-callback |
Nazwa funkcji obsługi tokena ID w JavaScript |
data-native_login_uri |
Adres URL punktu końcowego modułu obsługi danych logowania z hasłem |
data-native_callback |
Nazwa funkcji JavaScript do obsługi danych logowania 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, jeśli użytkownik kliknie poza nim. |
data-prompt_parent_id |
Identyfikator DOM elementu kontenera promptu One Tap |
data-skip_prompt_cookie |
Pomija One Tap, jeśli określony plik cookie ma niepustą wartość. |
data-nonce |
losowy ciąg znaków dla tokenów identyfikatora; |
data-context |
Tytuł i słowa w powiadomieniu One Tap |
data-moment_callback |
Nazwa funkcji odbiornika powiadomienia o stanie promptu w interfejsie użytkownika |
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 |
Proces 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 zachowanie iframe pośredniego, gdy użytkownicy ręcznie zamkną One Tap. |
data-itp_support |
Umożliwia ulepszenie interfejsu One Tap w przeglądarkach ITP. |
data-login_hint |
Pomiń wybór konta, podając podpowiedź dla użytkownika. |
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. |
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-auto_prompt
Ten atrybut określa, czy wyświetlić opcję Jednym kliknięciem. Wartość domyślna to true
. Google One tap nie jest wyświetlany, gdy ta wartość wynosi false
. 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 zwracać automatycznie token identyfikacyjny (bez udziału użytkownika) w przypadku, gdy 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 logowania.
Wartość musi dokładnie odpowiadać jednemu z autoryzowanych identyfikatorów URI przekierowania dla klienta OAuth 2.0, który skonfigurowałeś w Konsoli interfejsu API. Musi on być zgodny z naszymi regułami weryfikacji identyfikatorów URI przekierowania.
Ten atrybut może zostać pominięty, jeśli bieżąca strona to strona logowania, na której dane logowania są domyślnie publikowane.
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 | Opcjonalny | Przykład |
---|---|---|
URL | Domyślnie jest to identyfikator URI bieżącej strony lub wartość określona przez Ciebie. Zignorowana, gdy data-ux_mode="popup" i data-callback są ustawione. |
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.
Oto przykład żądania 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 parametr data-login_uri nie jest ustawiony. |
data-callback="handleToken" |
Może być używany jeden z atrybutów data-login_uri
lub data-callback
. Zależy ona od tych konfiguracji komponentu i trybu UX:
Atrybut
data-login_uri
jest wymagany w przypadku trybu UX przycisku Zaloguj się przez Googleredirect
, który ignoruje atrybutdata-callback
.Jeden z tych 2 atrybutów musi być ustawiony w przypadku Google One Tap i przycisku Zaloguj się przez Google
popup
w trybie UX. Jeśli oba są ustawione, atrybutdata-callback
ma wyższy priorytet.
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-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ć 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 hasło i dane logowania zwrócone przez domyślnego menedżera danych logowania przeglądarki. Jeśli ustawisz atrybut data-native_login_uri
lub atrybut data-native_callback
, biblioteka JavaScript będzie używać 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 | Opcjonalny | data-native_callback="handlePasswordCredential" |
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-native_id_param
Podczas przesyłania danych logowania do hasła do punktu końcowego obsługującego dane logowania do hasła możesz określić nazwę parametru dla pola credential.id
. Nazwa domyślna 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 poświadczenie logowania do punktu końcowego obsługującego poświadczenie logowania, 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 | 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 go wyłączyć, ustaw wartość na 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 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 | Opcjonalny | data-prompt_parent_id="parent_id" |
data-skip_prompt_cookie
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 | Opcjonalny | data-skip_prompt_cookie="SID" |
data-nonce
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 tabeli poniżej:
Typ | Wymagane | Przykład |
---|---|---|
ciąg znaków | Opcjonalny | data-nonce="biaqbm70g23" |
Długość identyfikatora Nonce jest ograniczona do maksymalnego rozmiaru tokena JWT obsługiwanego przez Twoje środowisko oraz ograniczeń rozmiaru w przypadku poszczególnych przeglądarek i serwerów HTTP.
data-context
Ten atrybut zmienia tekst tytułu i wiadomości wyświetlane w prośbie o jeden klik. 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ę przez Google” |
signup |
„Zarejestruj się przez Google” |
use |
„Użyj z Google” |
data-moment_callback
Ten atrybut to nazwa funkcji listenera powiadomienia 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 | Opcjonalny | 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
.
data-state_cookie_domain
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 | Opcjonalny | data-state_cookie_domain="example.com" |
data-ux_mode
Ten atrybut określa proces UX 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 | Opcjonalny | data-ux_mode="redirect" |
W tabeli poniżej znajdziesz dostępne tryby interfejsu użytkownika 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ą 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 tabeli poniżej:
Typ | Wymagane | Przykład |
---|---|---|
string lub tablica string | Opcjonalny | 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. | "https://news.example.com,https://local.example.com" |
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 zatrzymana.
Obsługiwane są też prefiksy z symbolami wieloznacznymi. Na przykład "https://*.example.com"
pasuje do example.com
i jej subdomen na wszystkich poziomach (np.news.example.com
, login.news.example.com
). Co należy wziąć pod uwagę 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
ihttps://*.co.uk
są nieprawidłowe. Jak wspomniano powyżej,"https://*.example.com"
jest zgodne zexample.com
i jego subdomenami. Możesz też użyć listy oddzielonej przecinkami, aby reprezentować 2 różne domeny. Na przykład:"https://example1.com,https://*.example2.com"
pasuje do domenexample1.com
,example2.com
i subdomen domenyexample2.com
- Domeny z symbolem wieloznaczeniowym 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 zachowanie iframe pośredniego, gdy użytkownicy ręcznie zamykają One Tap, 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 | Opcjonalny | 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 powinna 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 | Opcjonalny | 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 się powiedzie, pominiesz wybór konta. Akceptowane wartości to adres e-mail lub pole sub w tokenie identyfikacyjnym.
Więcej informacji znajdziesz w dokumentacji OpenID Connect:
login_hint
.
Typ | Wymagane | Przykład |
---|---|---|
Ciąg tekstowy. Może to być adres e-mail lub wartość pola sub z tokenu ID. |
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 tego polecenia, aby podać Google podpowiedź nazwy domeny. Jeśli się uda, 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 *. | Opcjonalny | data-hd="*" |
data-use_fedcm_for_prompt
Zezwalaj przeglądarce na kontrolowanie promptów logowania użytkownika i na 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" |
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 jednej stronie możesz renderować wiele przycisków logowania 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ły lub duży. |
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
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 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 |
![]() ![]() |
icon |
![]() |
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 | Opcjonalny | data-theme="filled_blue" |
W tabeli poniżej znajdziesz dostępne motywy i ich opisy:
Motyw | |
---|---|
outline |
![]() ![]() ![]() |
filled_blue |
![]() ![]() ![]() |
filled_black |
![]() ![]() ![]() |
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 | Opcjonalny | data-size="small" |
W tabeli poniżej znajdziesz dostępne rozmiary przycisków i ich opisy.
Rozmiar | |
---|---|
large |
![]() ![]() ![]() |
medium |
![]() ![]() |
small |
![]() ![]() |
data-text
Tekst przycisku. Wartością domyślną jest signin_with
. Tekst przycisków z różnymi atrybutami data-text
nie różni się wizualnie. 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 | Opcjonalny | data-text="signup_with" |
W tabeli poniżej znajdziesz dostępne teksty przycisków i ich opisy:
Tekst | |
---|---|
signin_with |
![]() ![]() |
signup_with |
![]() ![]() |
continue_with |
![]() ![]() |
signin |
![]() ![]() |
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 | Opcjonalny | data-shape="rectangular" |
W tabeli poniżej znajdziesz dostępne kształty przycisków i ich opisy:
Kształt | |
---|---|
rectangular |
![]() ![]() ![]() icon , jest taki sam jak square .
|
pill |
![]() ![]() ![]() icon , jest taki sam jak circle .
|
circle |
![]() ![]() ![]() standard , jest taki sam jak element pill .
|
square |
![]() ![]() ![]() standard , jest taki sam jak element 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 tabeli poniżej:
Typ | Wymagane | Przykład |
---|---|---|
ciąg znaków | Opcjonalny | data-logo_alignment="center" |
W tabeli poniżej znajdziesz dostępne wyrównania i ich opisy:
logo_alignment | |
---|---|
left |
![]() |
center |
![]() |
data-width
Minimalna szerokość przycisku (w pikselach). Maksymalna 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świetlać tekst przycisku w określonym języku, w przeciwnym razie użyć domyślnych ustawień konta Google 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 ona ustawiona, używana jest domyślna lokalizacja przeglądarki lub ustawienie 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 | Opcjonalny | 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 pojawia się komunikat Kliknięto przycisk Zaloguj się przez Google.
data-state
Opcjonalnie, ponieważ na tej samej stronie może być wyświetlonych kilka przycisków „Zaloguj się przez Google”, możesz przypisać do każdego z nich unikalny ciąg znaków. Ten sam ciąg zwracany jest razem 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 | 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 modułu obsługijącego token identyfikacyjny
Punkt końcowy modułu 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 stronę łączenia kont, aby uzyskać więcej informacji.
Żą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żdym żądaniem wysyłanym do punktu końcowego. |
Parametr żądania | g_csrf_token |
ciąg znaków taki sam jak poprzednia wartość pliku 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 globalnie unikalny identyfikator konta Google. Tylko pole sub
należy używać jako identyfikator użytkownika, ponieważ jest on niepowtarzalny wśród wszystkich kont Google i nigdy nie jest używany ponownie.
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 autorytatywnym źródłem informacji, potwierdzamy, że użytkownik jest prawowitym właścicielem konta.
Przypadki, w których Google jest wiarygodnym źródłem informacji:
email
ma sufiks@gmail.com
, co oznacza, że jest to konto Gmail.- Jeśli
email_verified
ma wartość true, ahd
jest ustawiona, jest to konto Google Workspace.
Użytkownicy mogą rejestrować się na konta Google bez korzystania z Gmaila lub Google Workspace.
Jeśli email
nie zawiera sufiksu @gmail.com
, a hd
jest nieobecne, Google nie jest wiarygodne i do weryfikacji użytkownika zaleca się użycie hasła lub innej metody weryfikacji. 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
zawiera czas, w którym musisz zweryfikować token po stronie serwera. Czas ważności tokena identyfikacyjnego uzyskanego z Logowania przez Google wynosi 1 godzinę. Musisz zweryfikować token przed upływem terminu 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
. Wartość jest określana na podstawie typu przycisku oraz stanu sesji i zgody użytkownika.
Użytkownik nacisnął przycisk „Jedno dotknięcie” lub „Zaloguj się przez Google” albo użył procesu automatycznego logowania bez dotykania ekranu.
znaleziono istniejące konto, albo użytkownik wybrał i zalogował się na konto Google, aby utworzyć nową sesję.
Zanim udostępnisz aplikacji dane logowania do tokena identyfikacyjnego, użytkownik:
- nacisnął przycisk „Potwierdź”, aby wyrazić zgodę na udostępnienie danych logowania, lub
- 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 wyraził wcześniej zgodę na udostępnianie danych logowania; Dotyczy tylko przeglądarek, które nie obsługują FedCM. |
user |
Użytkownik, który w ramach trwającej sesji wcześniej wyraził zgodę, 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 przeglądarek obsługiwanych przez FedCM. |
fedcm_auto |
Logowanie automatyczne użytkownika z istniejącą sesją, który wyraził wcześniej zgodę na udostępnianie danych logowania za pomocą funkcji FedCM One Tap. Dotyczy tylko przeglądarek obsługiwanych przez FedCM. |
user_1tap |
Użytkownik, który ma otwartą sesję, naciska przycisk „Dalej jako” w One Tap, aby wyrazić zgodę i udostępnić dane logowania. Dotyczy tylko Chrome w wersji 75 lub nowszej. |
user_2tap |
Użytkownik, który nie miał otwartej sesji, kliknął przycisk „Dalej jako” w One Tap, aby wybrać konto, a potem w wyskakującym okienku kliknął przycisk „Potwierdź”, aby wyrazić zgodę i udostępnić dane logowania. Dotyczy przeglądarek, które nie są oparte na Chromium. |
btn |
Użytkownik, który ma aktywną sesję i wcześniej wyraził zgodę, naciska przycisk Zaloguj się przez Google i wybiera konto Google w sekcji „Wybierz konto”, aby udostępnić dane logowania. |
btn_confirm |
Użytkownik, który ma otwartą sesję, naciska przycisk Zaloguj się przez Google i naciska przycisk Potwierdź, aby wyrazić zgodę i udostępnić dane logowania. |
btn_add_session |
Użytkownik, który nie miał sesji i wcześniej wyraził zgodę, nacisnął przycisk Zaloguj się przez Google, aby wybrać konto Google i udostępnić dane uwierzytelniające. |
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ć, a atrybut data-state
tego przycisku jest określony. 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 state
możesz określić, który przycisk kliknął użytkownik, aby się zalogować.
Punkt końcowy modułu obsługi danych logowania z hasłem
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żdym żądaniem wysyłanym do punktu końcowego. |
Parametr żądania | g_csrf_token |
ciąg znaków taki sam jak poprzednia wartość 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. |