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

Na tej stronie znajdziesz opis interfejsu API atrybutów danych HTML Zaloguj się przez Google. Za pomocą interfejsu API możesz wyświetlać na swoich stronach internetowych potwierdzenie jednym dotknięciem lub przycisk Zaloguj się przez Google.

Element o identyfikatorze „g_id_onload”

Atrybuty danych Zaloguj się przez Google możesz umieścić w dowolnych widocznych lub niewidocznych elementach, takich jak <div> i <span>. Jedynym wymaganiem jest ustawienie identyfikatora elementu na g_id_onload. Nie umieszczaj tego identyfikatora w wielu elementach.

Atrybuty danych

Tabela poniżej zawiera listę atrybutów danych wraz z opisami:

Atrybut
data-client_id Identyfikator klienta Twojej aplikacji
data-auto_prompt Wyświetlaj kliknięcie Google One.
data-auto_select Włącza automatyczny wybór w Google One Tap.
data-login_uri URL punktu końcowego 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 hasła
data-native_callback Nazwa funkcji modułu obsługi haseł 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 prośba ma zostać anulowana, jeśli użytkownik kliknie poza promptem.
data-prompt_parent_id Identyfikator DOM elementu kontenera promptu jednym dotknięciem
data-skip_prompt_cookie Pomija jedno dotknięcie, jeśli określony plik cookie nie ma pustej wartości.
data-nonce Losowy ciąg identyfikatorów tokenów
data-context Tytuł i słowa w prompcie jednym dotknięciem
data-moment_callback Nazwa funkcji odbiornika powiadomień o stanie promptu w interfejsie
data-state_cookie_domain Jeśli musisz wywoływać jednym dotknięciem w domenie nadrzędnej i jej subdomenach, przekaż domenę nadrzędną do tego atrybutu, aby był używany pojedynczy udostępniony plik cookie.
data-ux_mode Proces UX przycisku Zaloguj się przez Google
data-allowed_parent_origin Źródła, które mogą umieszczać pośredni element iframe. Jeśli ten atrybut jest obecny, jednym dotknięciem działa w trybie pośredniego elementu iframe.
data-intermediate_iframe_close_callback Zastępuje domyślne zachowanie pośredniego elementu iframe, gdy użytkownik ręcznie zamknie jedno dotknięcie.
data-itp_support Włącza uaktualniony interfejs One Tap w przeglądarkach ITP.
data-login_hint Pomiń wybór konta, podając wskazówkę dla użytkownika.
data-hd Ogranicz wybór konta do domeny.
data-use_fedcm_for_prompt Pozwól przeglądarce zarządzać prośbami o zalogowanie się użytkowników i pośredniczyć w procesie logowania między Twoją witryną a Google.

Typy atrybutów

W kolejnych sekcjach znajdziesz szczegółowy opis typu każdego atrybutu oraz jego przykład.

identyfikator klienta danych

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

Typ Wymagane Przykład
string, Tak data-client_id="CLIENT_ID.apps.googleusercontent.com"

automatyczna_prompt_danych

Ten atrybut określa, czy wyświetlać jedno dotknięcie, czy nie. Wartością domyślną jest true. Kliknięcie Google One nie jest wyświetlane, gdy ta wartość wynosi false. Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
boolean Opcjonalnie data-auto_prompt="true"

dane-auto_select

Ten atrybut określa, czy token identyfikatora ma być zwracany automatycznie (bez interakcji z użytkownikiem), 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
boolean Opcjonalnie data-auto_select="true"

data-login_uri

Ten atrybut to identyfikator URI punktu końcowego logowania.

Wartość musi dokładnie odpowiadać jednemu z autoryzowanych identyfikatorów URI przekierowania dla klienta OAuth 2.0, które zostały skonfigurowane w konsoli interfejsów API i zgodne z regułami weryfikacji identyfikatorów URI przekierowania.

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

Odpowiedź z danymi logowania tokena jest publikowana w punkcie końcowym logowania, gdy nie jest zdefiniowana funkcja wywołania zwrotnego, a użytkownik kliknie przycisk Zaloguj się przez Google lub One Tap albo nastąpi automatyczne podpisanie.

Więcej informacji znajdziesz w tej tabeli:

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

Oto przykładowe żądanie wysłane do punktu końcowego logowania:

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

credential=ID_TOKEN

wywołanie zwrotne danych

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

Typ Wymagane Przykład
string, Wymagane, jeśli zasada data-login_uri nie jest skonfigurowana. data-callback="handleToken"

Może być użyty jeden z atrybutów data-login_uri i 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 2 atrybutów musi być ustawiony dla trybu UX popup przycisku logowania Google i Google One Tap. Jeśli obie wartości są ustawione, atrybut data-callback ma wyższy priorytet.

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

data-native_login_uri

Ten atrybut jest adresem URL punktu końcowego modułu obsługi danych logowania hasła. Jeśli ustawisz atrybut data-native_login_uri lub data-native_callback, w czasie braku sesji Google biblioteka JavaScript będzie korzystać z natywnego menedżera danych logowania. Nie możesz ustawić jednocześnie atrybutu data-native_callback i data-native_login_uri. Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
string, Opcjonalnie data-login_uri="https://www.example.com/password_login"

dane-natywne_wywołanie_odwrotne

Ten atrybut to nazwa funkcji JavaScript, która obsługuje dane logowania do haseł zwracane przez natywny menedżer danych logowania przeglądarki. Jeśli ustawisz atrybut data-native_login_uri lub data-native_callback, w czasie braku sesji Google biblioteka JavaScript będzie korzystać z natywnego menedżera danych logowania. Nie możesz ustawić jednocześnie właściwości data-native_callback i data-native_login_uri. Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
string, Opcjonalnie data-native_callback="handlePasswordCredential"

Interfejs API HTML nie obsługuje funkcji JavaScript w przestrzeni nazw. 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 do haseł do punktu końcowego modułu obsługi danych logowania, możesz określić nazwę parametru w polu 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

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

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

data-cancel_on_tap_outside

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

Typ Wymagane Przykład
boolean Opcjonalnie data-cancel_on_tap_outside="false"

data-prompt_parent_id

Ten atrybut ustawia identyfikator DOM elementu kontenera. Jeśli nie jest skonfigurowana, ta opcja wyświetla się w prawym górnym rogu okna. Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
string, Opcjonalnie data-prompt_parent_id="parent_id"

Ten atrybut pomija jedno dotknięcie, jeśli podany plik cookie nie ma pustej wartości. Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
string, Opcjonalnie data-skip_prompt_cookie="SID"

liczba jednorazowa danych

Ten atrybut to losowy ciąg znaków używany przez token identyfikatora do zapobiegania powtórzeniu ataków. Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
string, Opcjonalnie data-nonce="biaqbm70g23"

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

kontekst danych

Ten atrybut zmienia tekst tytułu i komunikatów wyświetlanych w komunikacie jednym dotknięciem. Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
string, Opcjonalnie data-context="use"

Tabela poniżej zawiera wszystkie dostępne konteksty i ich opisy:

Kontekst
signin „Zaloguj się przez Google”
signup „Zarejestruj się przez Google”
use „Użyj w Google”

data-moment_callback

Ten atrybut jest nazwą funkcji odbiornika powiadomień o stanie interfejsu wiersza poleceń. Więcej informacji znajdziesz w opisie typu danych PromptMomentNotification.

Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
string, Opcjonalnie data-moment_callback="logMomentNotification"

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

Jeśli chcesz wyświetlać jedno dotknięcie w domenie nadrzędnej i jej subdomenach, przekaż domenę nadrzędną do tego atrybutu, aby był używany pojedynczy plik cookie ze stanem współdzielonym. Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
string, Opcjonalnie data-state_cookie_domain="example.com"

data-ux_mode

Ten atrybut ustawia przepływ UX dla przycisku Zaloguj się przez Google. Wartość domyślna to popup. Ten atrybut nie ma wpływu na wrażenia użytkowników jednym dotknięciem. Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
string, Opcjonalnie data-ux_mode="redirect"

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

Tryb UX
popup Uruchamianie interfejsu logowania w wyskakującym okienku.
redirect Przepływ użytkowników w logowaniu się z wykorzystaniem pełnego przekierowania strony.

data-allowed_parent_origin

Źródła, które mogą umieszczać pośredni element iframe. Jeśli ten atrybut występuje, jedno dotknięcie działa w trybie pośredniego elementu iframe. Więcej informacji znajdziesz w tej tabeli:

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

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

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

Jeśli wartość atrybutu data-allowed_parent_origin jest nieprawidłowa, inicjowanie jednym dotknięciem w trybie pośredniego elementu iframe zakończy się niepowodzeniem i zatrzyma się.

Obsługiwane są też prefiksy symboli wieloznacznych. Na przykład "https://*.example.com" dopasowuje example.com i jej subdomeny na wszystkich poziomach (np.news.example.com, login.news.example.com). O czym warto pamiętać, używając symboli wieloznacznych:

  • Ciągi wzorców nie mogą składać się tylko z symbolu wieloznacznego i domeny najwyższego poziomu. Na przykład https://*.com i https://*.co.uk są nieprawidłowe. Jak wspomnieliśmy powyżej, wartość "https://*.example.com" pasuje do parametru example.com i jego subdomen. Możesz też użyć listy rozdzielanej przecinkami, aby reprezentować 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 zawierające symbole wieloznaczne muszą zaczynać się od bezpiecznego schematu https://, więc "*.example.com" jest uważane za nieprawidłowe.

data-intermediate_iframe_close_callback

Zastępuje domyślne zachowanie pośredniego elementu iframe, gdy użytkownik ręcznie zamknie jedno dotknięcie, klikając przycisk „X” w interfejsie jednym dotknięciem. Działanie domyślne to natychmiastowe usunięcie pośredniego elementu iframe z DOM.

Pole data-intermediate_iframe_close_callback działa tylko w trybie pośredniego elementu iframe. Ma ona wpływ tylko na pośredni element iframe, a nie na element iframe włączany jednym dotknięciem. Interfejs One Tap jest usuwany przed wywołaniem wywołania zwrotnego.

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

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

obsługa_danych-itp

To pole określa, czy uaktualniony interfejs One Tap powinien być włączony w przeglądarkach, które obsługują Inligent Tracking Prevention (ITP). Wartością domyślną jest false. Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
boolean Opcjonalnie data-itp_support="true"

data-login_hint

Jeśli aplikacja wie z wyprzedzeniem, który użytkownik powinien być zalogowany, może przekazać Google wskazówkę dotyczącą logowania. Jeśli operacja się uda, wybór konta zostanie pominięty. Akceptowane wartości to: adres e-mail lub pole sub tokena identyfikatora.

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 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, skorzystaj z tego pola, aby przekazać Google wskazówkę dotyczącą nazwy domeny. Jeśli operacja się uda, konta użytkowników wyświetlane podczas wyboru konta będą ograniczone do podanej domeny. Wartość symbolu wieloznacznego: * oferuje użytkownikowi tylko konta Workspace, a podczas wyboru konta nie uwzględnia kont indywidualnych (użytkownik@gmail.com).

Więcej informacji znajdziesz w dokumentacji OpenID Connect hd.

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

data-use_fedcm_for_prompt

Pozwól przeglądarce zarządzać prośbami o zalogowanie się użytkowników i pośredniczyć w procesie logowania między Twoją witryną a Google. Wartość domyślna to fałsz. Więcej informacji znajdziesz na stronie Migracja do FedCM.

Typ Wymagane Przykład
boolean Opcjonalnie data-use_fedcm_for_prompt="true"

Element z klasą „g_id_signin”

Jeśli dodasz g_id_signin do atrybutu class elementu, będzie on 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ą określane przez następujące atrybuty danych.

Atrybuty danych wizualnych

W tabeli poniżej znajdziesz atrybuty danych wizualnych i ich opisy:

Atrybut
data-type Typ przycisku: ikona lub przycisk standardowy.
data-theme Motyw przycisku. np. filled_blue lub filled_black.
data-size Rozmiar przycisku. Może to być 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ą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 skonfigurowana, funkcja jest wywoływana po kliknięciu przycisku Zaloguj się przez Google.
data-state Jeśli jest ustawiony, ten ciąg znaków zwraca token identyfikatora.

Typy atrybutów

W kolejnych sekcjach znajdziesz szczegółowy opis typu każdego atrybutu oraz jego przykład.

typ danych

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

Typ Wymagane Przykład
string, Tak data-type="icon"

W tej tabeli znajdziesz wszystkie dostępne typy przycisków wraz z ich opisami:

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

motyw danych

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

Typ Wymagane Przykład
string, Opcjonalnie data-theme="filled_blue"

Tabela poniżej zawiera listę dostępnych motywów i ich opisów:

Motyw
outline
Standardowy przycisk na białym tle Przycisk ikony na białym tle Spersonalizowany przycisk na białym tle
Standardowy motyw przycisku.
filled_blue
Standardowy przycisk na niebieskim tle Przycisk ikony na niebieskim tle Spersonalizowany przycisk na niebieskim tle
Motyw z niebieskim przyciskiem.
filled_black
Standardowy przycisk na czarnym tle Przycisk ikony na czarnym tle Spersonalizowany przycisk na czarnym tle
Motyw czarnego przycisku.

data-size

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

Typ Wymagane Przykład
string, 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
Średnio standardowy przycisk Średni przycisk ikony
Przycisk średniego rozmiaru.
small
Mały przycisk Mały przycisk z ikoną
Mały przycisk.

tekst-danych

Tekst przycisku. Wartością domyślną jest signin_with. Nie ma wizualnego różnicy pod względem tekstu przycisków ikon, które mają różne atrybuty data-text. Jedynym wyjątkiem jest odczyt tekstu pod kątem ułatwień dostępu ekranu.

Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
string, Opcjonalnie data-text="signup_with"

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

Tekst
signin_with
Standardowy przycisk o nazwie „Zaloguj się przez Google” Przycisk ikony bez widocznego tekstu
Tekst przycisku to „Zaloguj się przez Google”.
signup_with
Standardowy przycisk o nazwie „Zarejestruj się przez Google” Przycisk ikony bez widocznego tekstu
Tekst przycisku to „Zarejestruj się przez Google”.
continue_with
Standardowy przycisk o nazwie „Kontynuuj z Google” Przycisk ikony bez widocznego tekstu
Tekst przycisku to „Kontynuuj z Google”.
signin
Standardowy przycisk o nazwie „Zaloguj się” Przycisk ikony bez widocznego tekstu
Tekst przycisku to „Zaloguj się”.

kształt danych

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

Typ Wymagane Przykład
string, Opcjonalnie data-shape="rectangular"

Poniższa tabela przedstawia dostępne kształty przycisków i ich opisy:

Kształt
rectangular
Prostokątny standardowy przycisk Prostokątny przycisk ikony Prostokątny spersonalizowany przycisk
Prostokątny przycisk. Jeśli zostanie użyty w przypadku przycisku typu icon, będzie taki sam jak square.
pill
Standardowy przycisk w kształcie pigułki Przycisk w kształcie pigułki Spersonalizowany przycisk w kształcie pigułki
Przycisk w kształcie pigułki. Jeśli zostanie użyty w przypadku typu przycisku icon, będzie taki sam jak circle.
circle
Okrągły standardowy przycisk Okrągły przycisk z ikoną Okrągły spersonalizowany przycisk
Przycisk w kształcie koła. Jeśli zostanie użyty w przypadku przycisku typu standard, będzie taki sam jak pill.
square
Kwadratowy przycisk standardowy Kwadratowy przycisk ikony Spersonalizowany kwadratowy przycisk
Kwadratowy przycisk. Jeśli zostanie użyty w przypadku przycisku typu standard, będzie taki sam jak rectangular.

data-logo_alignment,

Dopasowywanie logo Google. Wartością domyślną jest left. Dotyczy on tylko przycisku typu standard. Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
string, Opcjonalnie data-logo_alignment="center"

Poniższa tabela zawiera listę dostępnych wyrównań i ich opisów:

logo_alignment
left
Standardowy przycisk z logo G po lewej stronie
Wyrównuje logo Google do lewej.
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 tej tabeli:

Typ Wymagane Przykład
string, Opcjonalnie data-width=400

język danych

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

Jeśli nie jest skonfigurowana, używane jest domyślne ustawienie regionalne przeglądarki lub ustawienie użytkownika sesji Google. W związku z tym różni użytkownicy mogą zobaczyć różne wersje zlokalizowanych przycisków i możliwe, że mają one różne rozmiary.

Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
string, Opcjonalnie data-locale="zh_CN"

data-click_listener,

Możesz zdefiniować funkcję JavaScript, która będzie wywoływana po kliknięciu przycisku Zaloguj się przez Google za pomocą atrybutu data-click_listener.

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

data-state

Opcjonalnie, ponieważ na tej samej stronie może być renderowanych wiele przycisków Zaloguj się przez Google, możesz przypisać każdemu 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 został kliknięty przez użytkownika, aby się zalogować.

Więcej informacji znajdziesz w tej tabeli:

Typ Wymagane Przykład
string, Opcjonalnie data-state="button 1"

Integracja po stronie serwera

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

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

Punkt końcowy modułu obsługi tokena identyfikatora przetwarza token identyfikatora. W zależności od stanu konta użytkownika możesz go zalogować i przekierować go na stronę rejestracji lub na stronę łączenia kont, na której będzie można uzyskać 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ę przy każdym żądaniu wysyłanym do punktu końcowego modułu obsługi.
Parametr żądania g_csrf_token Ciąg znaków, który jest taki sam jak poprzednia wartość pliku cookie g_csrf_token.
Parametr żądania credential Token tożsamości 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ć, a określony jest atrybut state przycisku.

login

Po dekodowaniu 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. Używaj tylko pola sub jako identyfikatora użytkownika, ponieważ jest ono unikalne wśród wszystkich kont Google i nie jest ponownie używane. Nie używaj adresu e-mail jako identyfikatora, ponieważ na koncie Google może być kilka adresów e-mail w różnych momentach.

Przy użyciu pól email, email_verified i hd możesz określić, czy Google hostuje adres e-mail i czy jest wiarygodny. Jeśli uznamy, że Google jest wiarygodnym właścicielem konta, oznacza to, że dane użytkownika są wiarygodne.

Przypadki, w których Google jest wiarygodne:

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

Użytkownicy mogą rejestrować konta Google bez korzystania z Gmaila ani Google Workspace. Jeśli email nie zawiera sufiksu @gmail.com, a brakuje hd, Google nie jest wiarygodne. Do weryfikacji użytkownika zalecamy użycie hasła ani innych metod zabezpieczających logowanie. email_verified może mieć również wartość, ponieważ firma Google początkowo zweryfikowała użytkownika podczas tworzenia konta Google, ale prawo własności do konta e-mail w usłudze innej firmy mogło się od tego czasu zmienić.

Pole exp pokazuje czas ważności, po którym musisz zweryfikować token po stronie serwera. Jest to 1 godzina dla tokena identyfikatora uzyskanego za pomocą funkcji Zaloguj się przez Google. Musisz zweryfikować token przed upływem limitu czasu. Nie używaj exp do zarządzania sesją. Wygasły token identyfikatora nie oznacza, że użytkownik jest wylogowany. Twoja aplikacja odpowiada za zarządzanie sesjami użytkowników.

select_by

W tabeli poniżej znajdziesz możliwe wartości pola select_by. Typ przycisku oraz stan sesji i stanu zgody są używane do ustawiania wartości.

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

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

  • Przed udostępnieniem danych logowania tokena tożsamości użytkownik może:

    • kliknęli przycisk Potwierdź, aby wyrazić zgodę na udostępnienie danych logowania,
    • wcześniej wyraził zgodę i kliknął przycisk Wybierz konto, by wybrać konto Google.

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

Wartość Opis
auto Automatyczne logowanie użytkownika w ramach istniejącej sesji, który wcześniej wyraził zgodę na udostępnianie danych logowania. Dotyczy tylko przeglądarek, które nie są obsługiwane przez FedCM.
user Użytkownik w istniejącej sesji, który wcześniej wyraził zgodę, kliknął jednym dotknięciem przycisk „Kontynuuj jako”, aby udostępnić dane logowania. Dotyczy tylko przeglądarek, które nie są obsługiwane przez FedCM.
fedcm Użytkownik kliknął jednym dotknięciem przycisk „Kontynuuj jako”, aby udostępnić dane logowania za pomocą FedCM. Dotyczy tylko przeglądarek obsługiwanych przez FedCM.
fedcm_auto Automatyczne logowanie użytkownika w ramach istniejącej sesji, który wcześniej wyraził zgodę na udostępnianie danych logowania za pomocą FedCM One Tap. Dotyczy tylko przeglądarek obsługiwanych przez FedCM.
user_1tap Użytkownik w ramach dotychczasowej sesji kliknął jednym dotknięciem przycisk „Kontynuuj jako”, aby wyrazić zgodę i udostępnić dane logowania. Dotyczy tylko Chrome w wersji 75 i nowszych.
user_2tap Użytkownik bez istniejącej sesji kliknął jednym dotknięciem przycisk „Kontynuuj jako”, aby wybrać konto, a następnie przycisk Potwierdź w wyskakującym okienku w celu wyrażenia zgody i udostępnienia danych logowania. Dotyczy przeglądarek innych niż Chromium.
btn Użytkownik w istniejącej sesji, który wcześniej wyraził zgodę, kliknął przycisk Zaloguj się przez Google i wybrał konto Google z sekcji „Wybierz konto”, aby udostępnić dane logowania.
btn_confirm Użytkownik z istniejącą sesją kliknął przycisk Zaloguj się przez Google, a następnie przycisk Potwierdź, aby wyrazić zgodę i udostępnić dane logowania.
btn_add_session Użytkownik niemający jeszcze sesji, który wcześniej wyraził zgodę, kliknął przycisk Zaloguj się przez Google, aby wybrać konto Google i udostępnić dane logowania.
btn_confirm_add_session Użytkownik bez istniejącej sesji najpierw kliknął przycisk Zaloguj się przez Google, aby wybrać konto Google, a potem przycisk Potwierdź, aby wyrazić zgodę i udostępnić dane logowania.

state

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

Na tej samej stronie może być renderowanych wiele przycisków Zaloguj się przez Google, więc możesz przypisać każdemu z nich unikalny ciąg znaków. Dzięki temu możesz określić, który przycisk state został kliknięty, aby się zalogować.

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

Punkt końcowy modułu obsługi danych logowania haseł przetwarza dane uwierzytelniające hasła pobierane przez natywny 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 modułu obsługi.
Parametr żądania g_csrf_token Ciąg znaków, który jest taki sam jak poprzednia wartość pliku cookie g_csrf_token.
Parametr żądania email Token identyfikatora wystawiony przez Google.
Parametr żądania password Sposób wyboru danych logowania.