Na tej stronie znajdziesz opis interfejsu JavaScript API do logowania. Za pomocą tego interfejsu API możesz wyświetlać na stronach internetowych prośbę o skorzystanie z funkcji One Tap lub przycisk Zaloguj się przez Google.
Metoda: google.accounts.id.initialize
Metoda google.accounts.id.initialize
inicjuje klienta Zaloguj się przez Google na podstawie obiektu konfiguracji. Oto przykład kodu metody:
google.accounts.id.initialize(IdConfiguration)
Poniższy przykład kodu implementuje metodę google.accounts.id.initialize
za pomocą funkcji onload
:
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse
});
google.accounts.id.prompt();
};
</script>
Metoda google.accounts.id.initialize
tworzy instancję klienta Logowania przez Google, która może być niejawnie używana przez wszystkie moduły na tej samej stronie internetowej.
- Metodę
google.accounts.id.initialize
musisz wywołać tylko raz, nawet jeśli na tej samej stronie internetowej używasz wielu modułów (np. One Tap, spersonalizowany przycisk, wycofanie zgody itp.). - Jeśli wywołasz metodę
google.accounts.id.initialize
kilka razy, zapamiętane i użyte zostaną tylko konfiguracje z ostatniego wywołania.
Konfiguracje są resetowane za każdym razem, gdy wywołasz metodę google.accounts.id.initialize
, a wszystkie kolejne metody na tej samej stronie internetowej natychmiast używają nowych konfiguracji.
Typ danych: IdConfiguration
W tabeli poniżej znajdziesz listę pól i opisów typu danych IdConfiguration
:
Pole | |
---|---|
client_id |
Identyfikator klienta aplikacji |
color_scheme |
Schemat kolorów zastosowany w prompcie One Tap. |
auto_select |
Włącza automatyczny wybór. |
callback |
Funkcja JavaScript, która obsługuje tokeny tożsamości. Tryb UX przycisku popup Zaloguj się przez Google i funkcji One Tap od Google korzysta z tego atrybutu. |
login_uri |
URL punktu końcowego logowania. Przycisk Zaloguj się przez Google
redirect tryb UX używa tego atrybutu. |
native_callback |
Funkcja JavaScript, która obsługuje dane logowania w postaci hasła. |
cancel_on_tap_outside |
Anuluje prompt, jeśli użytkownik kliknie poza nim. |
prompt_parent_id |
Identyfikator DOM elementu kontenera z prośbą o logowanie jednym kliknięciem. |
nonce |
Losowy ciąg znaków w przypadku tokenów identyfikatora |
context |
tytuł i słowa w powiadomieniu o logowaniu jednym dotknięciem; |
state_cookie_domain |
Jeśli musisz wywołać One Tap w domenie nadrzędnej i jej subdomenach, przekaż do tego pola domenę nadrzędną, aby był używany jeden wspólny plik cookie. |
ux_mode |
Proces UX przycisku Zaloguj się przez Google |
allowed_parent_origin |
Źródła, które mogą osadzać pośredni element iframe. Jeśli to pole jest obecne, One Tap jest uruchamiany w trybie pośredniego elementu iframe. |
intermediate_iframe_close_callback |
Zastępuje domyślne działanie pośredniego elementu iframe, gdy użytkownicy ręcznie zamykają One Tap. |
itp_support |
Włącza ulepszony interfejs One Tap w przeglądarkach z funkcją ITP. |
login_hint |
Pomiń wybór konta, podając wskazówkę dla użytkownika. |
hd |
Ogranicz wybór konta według domeny. |
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. |
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 . |
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ą logować się automatycznie, bez wyświetlania okna wyboru konta.Wartość domyślna to false . |
client_id
To pole zawiera 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 | client_id: "CLIENT_ID.apps.googleusercontent.com" |
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. | 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. |
auto_select
To pole określa, czy token identyfikatora jest automatycznie zwracany bez interakcji użytkownika, gdy istnieje tylko 1 sesja Google, w której Twoja aplikacja została wcześniej zatwierdzona. Wartością domyślną jest false
. Więcej informacji znajdziesz w tej tabeli:
Typ | Wymagane | Przykład |
---|---|---|
Wartość logiczna | Opcjonalny | auto_select: true |
callback
To pole zawiera funkcję JavaScript, która obsługuje token identyfikatora zwracany przez prośbę o logowanie jednym kliknięciem lub wyskakujące okienko. Ten atrybut jest wymagany, jeśli używany jest tryb UX popup
funkcji Google One Tap lub przycisku Zaloguj się przez Google. Więcej informacji znajdziesz w tabeli poniżej:
Typ | Wymagane | Przykład |
---|---|---|
funkcja | Wymagane w przypadku logowania jednym kliknięciem i trybu popup UX |
callback: handleResponse |
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 w konsoli Google Cloud 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 użytkownik kliknie przycisk Zaloguj się przez Google i używany jest tryb przekierowania UX.
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ść. Używany tylko wtedy, gdy ustawiona jest wartość ux_mode: "redirect" . |
login_uri: "https://www.example.com/login" |
Punkt końcowy logowania musi obsługiwać żądania POST zawierające w treści parametr credential
z wartością tokena identyfikatora.
native_callback
To pole zawiera nazwę funkcji JavaScript, która obsługuje dane logowania hasła zwrócone przez wbudowany w przeglądarkę menedżer danych logowania. Więcej informacji znajdziesz w tabeli poniżej:
Typ | Wymagane | Przykład |
---|---|---|
funkcja | Opcjonalny | native_callback: handleResponse |
cancel_on_tap_outside
To pole określa, czy anulować żądanie logowania jednym kliknięciem, jeśli użytkownik kliknie poza wyskakującym okienkiem. Wartością domyślną jest true
. Możesz ją wyłączyć, ustawiając wartość false
. Więcej informacji znajdziesz w tabeli poniżej:
Typ | Wymagane | Przykład |
---|---|---|
Wartość logiczna | Opcjonalny | cancel_on_tap_outside: false |
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 | prompt_parent_id: 'parent_id' |
liczba jednorazowa
To pole zawiera 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 | 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.
kontekst
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 | 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” |
state_cookie_domain
Jeśli chcesz wyświetlać One Tap w domenie nadrzędnej i jej subdomenach, przekaż do tego pola domenę nadrzędną, aby używać jednego pliku cookie ze stanem współdzielonym. Więcej informacji znajdziesz w tabeli poniżej:
Typ | Wymagane | Przykład |
---|---|---|
ciąg znaków | Opcjonalny | state_cookie_domain: "example.com" |
ux_mode
Użyj tego pola, aby ustawić przepływ UX używany 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 | 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ę. |
allowed_parent_origin
Źródła, które mogą osadzać pośredni element iframe. Jeśli to pole jest obecne, One Tap działa w trybie pośredniego elementu iframe. Więcej informacji znajdziesz w tabeli poniżej:
Typ | Wymagane | Przykład |
---|---|---|
ciąg tekstowy lub tablica ciągów tekstowych | Opcjonalny | 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 |
Tablica identyfikatorów URI domeny. | ["https://news.example.com", "https://local.example.com"] |
Obsługiwane są też prefiksy z symbolami wieloznacznymi. Na przykład "https://*.example.com"
obejmuje example.com
i jej subdomeny na wszystkich poziomach (np.news.example.com
, login.news.example.com
). Pamiętaj, że podczas korzystania z 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, ponieważ"https://.example.com"
pasuje doexample.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 domenexample1.com
,example2.com
i subdomenexample2.com
. - Domeny z wieloznacznymi symbolami muszą zaczynać się od bezpiecznego schematu https://, więc
"*.example.com"
jest uznawany za nieprawidłowy.
Jeśli wartość pola allowed_parent_origin
jest nieprawidłowa, inicjowanie trybu pośredniego ramki iframe za pomocą One Tap zakończy się niepowodzeniem i zostanie zatrzymane.
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 intermediate_iframe_close_callback
działa 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 wywołania zwrotnego.
Typ | Wymagane | Przykład |
---|---|---|
funkcja | Opcjonalny | intermediate_iframe_close_callback: logBeforeClose |
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 | itp_support: true |
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 wartość pola sub tokena identyfikatora.
Więcej informacji znajdziesz w polu login_hint w dokumentacji OpenID Connect.
Typ | Wymagane | Przykład |
---|---|---|
Ciąg znaków, adres e-mail lub wartość z pola sub tokena identyfikatora. |
Opcjonalny | login_hint: 'elisa.beckett@gmail.com' |
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 polu hd w dokumentacji OpenID Connect.
Typ | Wymagane | Przykład |
---|---|---|
Ciąg tekstowy. Pełna i jednoznaczna nazwa domeny lub *. | Opcjonalny | hd: '*' |
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 | use_fedcm_for_prompt: true |
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 | use_fedcm_for_button: true |
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 tabeli poniżej:
Typ | Wymagane | Przykład |
---|---|---|
Wartość logiczna | Opcjonalny | button_auto_select: true |
Metoda: google.accounts.id.prompt
Metoda google.accounts.id.prompt
wyświetla prośbę o logowanie jednym kliknięciem lub wbudowany w przeglądarkę menedżer danych logowania po wywołaniu metody initialize()
.
Oto przykładowy kod metody:
google.accounts.id.prompt(/**
@type{(function(!PromptMomentNotification):void)=} */ momentListener)
Zwykle metoda prompt()
jest wywoływana podczas wczytywania strony. Ze względu na stan sesji i ustawienia użytkownika po stronie Google interfejs prośby o logowanie jednym kliknięciem może się nie wyświetlać. Aby otrzymywać powiadomienia o stanie interfejsu w różnych momentach, przekaż funkcję, która będzie odbierać powiadomienia o stanie interfejsu.
Powiadomienia są wysyłane w tych momentach:
- Moment wyświetlenia: następuje po wywołaniu metody
prompt()
. Powiadomienie zawiera wartość logiczną wskazującą, czy interfejs jest wyświetlany. Pominięty moment: występuje, gdy prośba o logowanie jednym kliknięciem zostanie zamknięta przez automatyczne anulowanie, ręczne anulowanie lub gdy Google nie wyda poświadczeń, np. gdy wybrana sesja została wylogowana z Google.
W takich przypadkach zalecamy przejście do kolejnych dostawców tożsamości, jeśli tacy istnieją.
Odrzucony moment: występuje, gdy Google pomyślnie pobierze dane logowania lub użytkownik chce zatrzymać proces pobierania danych logowania. Jeśli na przykład użytkownik zacznie wpisywać nazwę użytkownika i hasło w oknie logowania, możesz wywołać metodę
google.accounts.id.cancel()
, aby zamknąć prośbę o logowanie jednym kliknięciem i wywołać moment odrzucenia.
Poniższy przykład kodu implementuje pominięty moment:
<script>
window.onload = function () {
google.accounts.id.initialize(...);
google.accounts.id.prompt((notification) => {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// continue with another identity provider.
}
});
};
</script>
Typ danych: PromptMomentNotification
W tabeli poniżej znajdziesz metody i opisy typu danych
PromptMomentNotification
:
Metoda | |
---|---|
isDisplayMoment() |
Czy to powiadomienie dotyczy momentu wyświetlenia? Uwaga: gdy FedCM jest włączony, to powiadomienie nie jest wysyłane. Więcej informacji znajdziesz na stronie Migracja do FedCM. |
isDisplayed() |
Czy to powiadomienie dotyczy momentu wyświetlenia, a interfejs jest wyświetlany? Uwaga: gdy FedCM jest włączony, to powiadomienie nie jest wysyłane. Więcej informacji znajdziesz na stronie Migracja do FedCM. |
isNotDisplayed() |
Czy to powiadomienie dotyczy momentu wyświetlenia, a interfejs nie jest wyświetlany? Uwaga: gdy FedCM jest włączony, to powiadomienie nie jest wysyłane. Więcej informacji znajdziesz na stronie Migracja do FedCM. |
getNotDisplayedReason() |
Szczegółowa przyczyna, dla której interfejs nie jest wyświetlany. Oto możliwe wartości:
|
isSkippedMoment() |
Czy to powiadomienie dotyczy pominiętego momentu? |
getSkippedReason() |
Szczegółowy powód pominięcia momentu. Oto możliwe wartości:
|
isDismissedMoment() |
Czy to powiadomienie dotyczy odrzuconego momentu? |
getDismissedReason() |
Szczegółowy powód odrzucenia. Możliwe wartości:
|
getMomentType() |
Zwraca ciąg znaków dla typu momentu. Możliwe wartości:
|
Typ danych: CredentialResponse
Gdy wywoływana jest funkcja callback
, jako parametr przekazywany jest obiekt CredentialResponse
. W tabeli znajdziesz listę pól, które znajdują się w obiekcie odpowiedzi dotyczącej danych logowania:
Pole | |
---|---|
credential |
Zakodowany token identyfikatora JWT wydany przez Google. |
select_by |
Sposób logowania się użytkownika. |
state |
To pole jest zdefiniowane tylko wtedy, gdy użytkownik kliknie przycisk Zaloguj się przez Google, aby się zalogować, a atrybut state przycisku jest określony. |
dane logowania
To pole zawiera token tożsamości w postaci zakodowanego w formacie Base64 ciągu tokena sieciowego JSON (JWT).
Po zdekodowaniu token JWT 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": "Elisa", "family_name": "Beckett", "iat": 1596474000, // Unix timestamp of the assertion's creation time "exp": 1596477600, // Unix timestamp of the assertion's expiration time "jti": "abc161803398874def" }
Pole sub
to globalnie unikalny identyfikator konta Google. Używaj 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” ihd
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_verfied
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.
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
To pole jest zdefiniowane tylko wtedy, gdy użytkownik kliknie przycisk Zaloguj się przez Google, aby się zalogować, a kliknięty przycisk ma określony atrybut state
. Wartość tego pola jest taka sama jak wartość określona w atrybucie 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 możesz użyć tego pola state
, aby określić, który przycisk kliknął użytkownik, aby się zalogować.
Metoda: google.accounts.id.renderButton
Metoda google.accounts.id.renderButton
renderuje na stronach internetowych przycisk Zaloguj się przez Google.
Oto przykładowy kod metody:
google.accounts.id.renderButton(
/** @type{!HTMLElement} */ parent,
/** @type{!GsiButtonConfiguration} */ options
)
Typ danych: GsiButtonConfiguration
W tabeli poniżej znajdziesz listę pól i opisów typu danych GsiButtonConfiguration
:
Atrybut | |
---|---|
type |
Typ przycisku: ikona lub standardowy przycisk. |
theme |
Motyw przycisku. Na przykład filled_blue lub filled_black. |
size |
Rozmiar przycisku. Na przykład mały lub duży. |
text |
Tekst przycisku. Na przykład „Zaloguj się przez Google” lub „Zarejestruj się przez Google”. |
shape |
Kształt przycisku. Na przykład prostokątny lub okrągły. |
logo_alignment |
Wyrównanie logo Google: do lewej lub do środka. |
width |
Szerokość przycisku w pikselach. |
locale |
Jeśli jest ustawiony, język przycisku jest renderowany. |
click_listener |
Jeśli ta funkcja jest ustawiona, jest wywoływana po kliknięciu przycisku Zaloguj się przez Google. |
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.
typ
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 | type: "icon" |
W tabeli poniżej znajdziesz dostępne typy przycisków i ich opisy:
Typ | |
---|---|
standard |
![]() ![]() |
icon |
![]() |
motyw
Motyw przycisku. Wartością domyślną jest outline
. Więcej informacji znajdziesz w tej tabeli:
Typ | Wymagane | Przykład |
---|---|---|
ciąg znaków | Opcjonalny | theme: "filled_blue" |
W tabeli poniżej znajdziesz dostępne motywy i ich opisy:
Motyw | |
---|---|
outline |
![]() ![]() ![]() |
filled_blue |
![]() ![]() ![]() |
filled_black |
![]() ![]() ![]() |
rozmiar
Rozmiar przycisku. Wartością domyślną jest large
. Więcej informacji znajdziesz w tej tabeli:
Typ | Wymagane | Przykład |
---|---|---|
ciąg znaków | Opcjonalny | size: "small" |
W tabeli poniżej znajdziesz dostępne rozmiary przycisków i ich opisy:
Rozmiar | |
---|---|
large |
![]() ![]() ![]() |
medium |
![]() ![]() |
small |
![]() ![]() |
tekst
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 text
.
Jedynym wyjątkiem jest sytuacja, gdy tekst jest odczytywany w celu ułatwienia dostępu.
Więcej informacji znajdziesz w tabeli poniżej:
Typ | Wymagane | Przykład |
---|---|---|
ciąg znaków | Opcjonalny | text: "signup_with" |
W tabeli poniżej znajdziesz wszystkie dostępne teksty przycisków i ich opisy:
Tekst | |
---|---|
signin_with |
![]() ![]() |
signup_with |
![]() ![]() |
continue_with |
![]() ![]() |
signin |
![]() ![]() |
kształt
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 | 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 pill .
|
square |
![]() ![]() ![]() standard , jest taki sam jak rectangular .
|
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 | logo_alignment: "center" |
W tabeli poniżej znajdziesz dostępne opcje wyrównania i ich opisy:
logo_alignment | |
---|---|
left |
![]() |
center |
![]() |
szerokość
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 | width: "400" |
region
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 | locale: "zh_CN" |
click_listener
Za pomocą atrybutu click_listener
możesz zdefiniować funkcję JavaScript, która ma być wywoływana po kliknięciu przycisku Zaloguj się przez Google.
google.accounts.id.renderButton(document.getElementById("signinDiv"), { theme: 'outline', size: 'large', click_listener: onClickHandler }); function onClickHandler(){ console.log("Sign in with Google button clicked...") }
W tym przykładzie po kliknięciu przycisku Zaloguj się przez Google w konsoli rejestrowany jest komunikat Sign in with Google button clicked....
stan
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" |
Typ danych: dane logowania
Gdy wywoływana jest funkcja native_callback
, jako parametr przekazywany jest obiekt Credential
. W tabeli poniżej znajdziesz listę pól zawartych w obiekcie:
Pole | |
---|---|
id |
Identyfikuje użytkownika. |
password |
hasło, |
Metoda: google.accounts.id.disableAutoSelect
Gdy użytkownik wyloguje się z Twojej witryny, musisz wywołać metodę
google.accounts.id.disableAutoSelect
, aby zapisać stan w plikach cookie. Zapobiega to zapętleniu interfejsu. Oto fragment kodu metody:
google.accounts.id.disableAutoSelect()
Poniższy przykład kodu implementuje metodę google.accounts.id.disableAutoSelect
za pomocą funkcji onSignout()
:
<script>
function onSignout() {
google.accounts.id.disableAutoSelect();
}
</script>
Metoda: google.accounts.id.storeCredential
Jest to otoczka metody store()
wbudowanego interfejsu API menedżera danych logowania przeglądarki. Dlatego można go używać tylko do przechowywania danych logowania z hasłem. Oto przykładowy kod metody:
google.accounts.id.storeCredential(Credential, callback)
Poniższy przykład kodu implementuje metodę google.accounts.id.storeCredential
za pomocą funkcji onSignIn()
:
<script>
function onSignIn() {
let cred = {id: '...', password: '...'};
google.accounts.id.storeCredential(cred);
}
</script>
Metoda: google.accounts.id.cancel
Możesz anulować proces logowania jednym kliknięciem, usuwając prompt z DOM witryny polegającej na tożsamości. Operacja anulowania jest ignorowana, jeśli dane logowania są już wybrane. Oto przykładowy kod metody:
google.accounts.id.cancel()
Poniższy przykład kodu implementuje metodę google.accounts.id.cancel()
za pomocą funkcji onNextButtonClicked()
:
<script>
function onNextButtonClicked() {
google.accounts.id.cancel();
showPasswordPage();
}
</script>
Wywołanie zwrotne wczytywania biblioteki: onGoogleLibraryLoad
Możesz zarejestrować wywołanie zwrotne onGoogleLibraryLoad
. Jest ono powiadamiane po wczytaniu biblioteki JavaScript Sign In With Google:
window.onGoogleLibraryLoad = () => {
...
};
To wywołanie zwrotne jest tylko skrótem do wywołania zwrotnego window.onload
. Nie ma różnic w zachowaniu.
Poniższy przykład kodu implementuje wywołanie zwrotne onGoogleLibraryLoad
:
<script>
window.onGoogleLibraryLoad = () => {
google.accounts.id.initialize({
...
});
google.accounts.id.prompt();
};
</script>
Metoda: google.accounts.id.revoke
Metoda google.accounts.id.revoke
unieważnia uprawnienia OAuth używane do udostępniania tokena identyfikatora określonego użytkownika. Zapoznaj się z poniższym fragmentem kodu metody:
javascript
google.accounts.id.revoke(login_hint, callback)
Parametr | Typ | Opis |
---|---|---|
login_hint |
ciąg znaków | Adres e-mail lub unikalny identyfikator konta Google użytkownika. Identyfikator to właściwość sub ładunku danych uwierzytelniających. |
callback |
funkcja | Opcjonalny moduł obsługi RevocationResponse. |
Poniższy przykładowy kod pokazuje, jak używać metody revoke
z identyfikatorem.
google.accounts.id.revoke('1618033988749895', done => { console.log(done.error); });
Typ danych: RevocationResponse
Gdy wywoływana jest funkcja callback
, jako parametr przekazywany jest obiekt RevocationResponse
. W tabeli poniżej znajdziesz listę pól zawartych w obiekcie odpowiedzi o unieważnieniu:
Pole | |
---|---|
successful |
To pole jest wartością zwracaną przez wywołanie metody. |
error |
To pole może zawierać szczegółowy komunikat o błędzie. |
udało się
To pole jest wartością logiczną ustawioną na „true”, jeśli wywołanie metody unieważnienia się powiodło, lub „false”, jeśli się nie powiodło.
błąd
To pole jest wartością tekstową i zawiera szczegółowy komunikat o błędzie, jeśli wywołanie metody revoke się nie powiodło. W przypadku powodzenia jest niezdefiniowane.