Dokumentacja interfejsu Zaloguj się z użyciem interfejsu Google JavaScript API

Na tej stronie opisujemy interfejs Sign-In JavaScript API. Możesz użyć tego interfejsu API aby wyświetlać na swoich stronach internetowych prośbę o dostęp jednym dotknięciem lub przycisk Zaloguj się przez Google.

Metoda: google.accounts.id.initialize

Metoda google.accounts.id.initialize inicjuje funkcję Zaloguj się przez Google klienta w oparciu o obiekt konfiguracji. Zobacz przykładowy kod :

google.accounts.id.initialize(IdConfiguration)

Ten przykładowy kod 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 klienta Zaloguj się przez Google które mogą być domyślnie używane przez wszystkie moduły na tej samej stronie internetowej.

• Metodę google.accounts.id.initialize musisz wywołać tylko raz nawet raz jeśli korzystasz z wielu modułów (takich jak jedno dotknięcie, przycisk spersonalizowany, wycofanie zgody, itp.) na tej samej stronie.
• Jeśli wywołujesz metodę google.accounts.id.initialize wiele razy, zapamiętywane i używane są tylko konfiguracje z ostatniego wywołania.

Konfiguracje są resetowane za każdym razem, gdy wywołujesz metodę google.accounts.id.initialize i wszystkie kolejne metody w ramach tego samego od razu zastosuje nowe konfiguracje.

Typ danych: IdConfiguration

W tabeli poniżej znajdziesz pola i opisy właściwości IdConfiguration typ danych:

Pole
client_id	Identyfikator klienta aplikacji
auto_select	Włącza automatyczny wybór.
callback	Funkcja JavaScript, która obsługuje tokeny identyfikatorów. Google One Tap przycisku Zaloguj się przez Google popup Tryb UX korzysta z tego ustawienia .
login_uri	Adres URL punktu końcowego logowania. Przycisk Zaloguj się przez Google Tryb UX w usłudze redirect korzysta z tego atrybutu.
native_callback	Funkcja JavaScript, która obsługuje dane logowania do hasła.
cancel_on_tap_outside	Anuluje prośbę, jeśli użytkownik kliknie poza nią.
prompt_parent_id	Identyfikator DOM elementu kontenera prompta jednym dotknięciem
nonce	Losowy ciąg znaków w tokenach identyfikatorów
context	tytuł i słowa w prompcie jednym dotknięciem.
state_cookie_domain	Jeśli chcesz wywołać jednym dotknięciem w domenie nadrzędnej i jej subdomenach, przekazują domenę nadrzędną do tego pola, tak by pojedynczy udostępniany plik cookie był .
ux_mode	Proces korzystania z przycisku Zaloguj się przez Google
allowed_parent_origin	Źródła, które mogą umieszczać pośredni element iframe. jedno dotknięcie, jest uruchamiana w trybie pośredniego elementu iframe, jeśli to pole występuje.
intermediate_iframe_close_callback	Zastępuje domyślny pośredni element iframe, gdy użytkownicy ręcznie zamknij jednym dotknięciem.
itp_support	Włącza uaktualnioną obsługę jednym dotknięciem w przeglądarkach ITP.
login_hint	Pomiń wybór konta, podając wskazówkę dla użytkownika.
hd	Ogranicz wybór konta do domeny.
use_fedcm_for_prompt	Zezwalaj przeglądarce na kontrolowanie próśb o zalogowanie się użytkowników i zapośredniczenie procesu logowania się między Twoją witryną a Google.

client_id

To pole 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
ciąg znaków	Tak	client_id: "CLIENT_ID.apps.googleusercontent.com"

auto_select

To pole określa, czy token identyfikatora jest zwracany automatycznie bez logowania użytkownika interakcji, gdy tylko jedna sesja Google zatwierdziła aplikację. wcześniej. Wartością domyślną jest false. Więcej informacji znajdziesz w tabeli poniżej informacje:

Typ	Wymagane	Przykład
wartość logiczna	Opcjonalnie	auto_select: true

wywołanie zwrotne

To pole to funkcja JavaScript, która obsługuje token identyfikatora zwrócony z przez jedno dotknięcie lub wyskakujące okienko. Ten atrybut jest wymagany, jeśli Google Używany jest tryb UX lub Zaloguj się przez Google popup. Zobacz Ta tabela zawiera dodatkowe informacje:

Typ	Wymagane	Przykład
funkcja	Wymagane w przypadku jednego dotknięcia i trybu UX w usłudze popup	callback: handleResponse

login_uri

Ten atrybut to identyfikator URI punktu końcowego logowania.

Wartość musi dokładnie odpowiadać jednemu z autoryzowanych identyfikatorów URI przekierowania protokołu OAuth 2.0 – skonfigurowany przez Ciebie klient; w konsoli Google Cloud i muszą spełniać wymagania weryfikacji identyfikatora URI przekierowania .

Ten atrybut można pominąć, jeśli bieżąca strona jest stroną logowania, na której Jeśli dane logowania zostaną domyślnie opublikowane na tej stronie.

Odpowiedź danych logowania tokena identyfikatora jest publikowana w punkcie końcowym logowania, gdy użytkownik kliknie przycisk Zaloguj się przez Google i zostanie użyty tryb UX.

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ść. Używany tylko wtedy, gdy skonfigurowana jest wartość ux_mode: "redirect".	login_uri: "https://www.example.com/login"

Twój punkt końcowy logowania musi obsługiwać żądania POST zawierające credential z kluczem Identyfikator tokena w treści.

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

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

credential=ID_TOKEN

native_callback

To pole zawiera nazwę funkcji JavaScript, która obsługuje hasło danych logowania zwracanych przez natywny menedżer danych logowania w przeglądarce. Zobacz Ta tabela zawiera dodatkowe informacje:

Typ	Wymagane	Przykład
funkcja	Opcjonalnie	native_callback: handleResponse

cancel_on_tap_outside

To pole określa, czy anulować żądanie jednym dotknięciem, gdy użytkownik kliknie poza promptem. Wartością domyślną jest true. Możesz ją wyłączyć, jeśli ustawisz wartość do funkcji false. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
wartość logiczna	Opcjonalnie	cancel_on_tap_outside: false

prompt_parent_id

Ten atrybut ustawia identyfikator DOM elementu kontenera. Jeśli nie jest skonfigurowana, Prompt jednym dotknięciem wyświetla się w prawym górnym rogu okna. Zobacz Ta tabela zawiera dodatkowe informacje:

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalnie	prompt_parent_id: 'parent_id'

liczba jednorazowa

To pole zawiera losowy ciąg znaków używany przez token identyfikatora do zapobiegania atakom typu replay. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalnie	nonce: "biaqbm70g23"

Długość jednorazowa jest ograniczona do maksymalnego rozmiaru tokena JWT obsługiwanego przez Twoje środowisko, a także ograniczenia rozmiaru poszczególnych przeglądarek i serwerów.

sytuacja

W tym polu zmienia się tytuł i tekst wiadomości wyświetlanych w prompcie jednym dotknięciem. Zobacz W poniższej tabeli znajdziesz więcej informacji:

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalnie	context: "use"

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

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

state_cookie_domain

Jeśli w domenie nadrzędnej i jej subdomenach ma być wyświetlane jedno dotknięcie, przekaż parametr z domeny nadrzędnej do tego pola, aby był używany jeden plik cookie ze stanem współdzielonym. Zobacz W poniższej tabeli znajdziesz więcej informacji:

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

ux_mode

Użyj tego pola, aby skonfigurować proces UX wykorzystywany po kliknięciu przycisku Zaloguj się przez Google. wartość domyślna to popup. Ten atrybut nie ma wpływu na wygodę korzystania z usługi OneTap. Zobacz Ta tabela zawiera dodatkowe informacje:

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalnie	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 się przez przekierowanie na całą stronę.

allowed_parent_origin

Źródła, które mogą umieszczać pośredni element iframe. Biegi jednym dotknięciem w trybie pośredniego elementu iframe, jeśli to pole jest dostępne. Zobacz poniższe informacje tabeli.

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

W tabeli poniżej znajdziesz obsługiwane typy wartości i ich opisy.

Typy wartości
string	Pojedynczy identyfikator URI domeny.	"https://example.com"
string array	Tablica identyfikatorów URI domeny.	["https://news.example.com", "https://local.example.com"]

Obsługiwane są również prefiksy symboli wieloznacznych. Na przykład: "https://*.example.com" pasuje do example.com i jego subdomen na wszystkich poziomach (np. news.example.com i login.news.example.com). O czym warto pamiętać podczas korzystania symbole wieloznaczne:

• Ciągi znaków wzorcowe nie mogą się składać tylko z symbolu wieloznacznego i najwyższego poziomu w Twojej domenie. Są nieprawidłowe na przykład https://.com i https://.co.uk . Jak wspomniano powyżej, "https://.example.com" pasuje do example.com i jej subdomen. Możesz też użyć interfejsu do reprezentowania 2 różnych domen. Przykład: ["https://example1.com", "https://.example2.com"] dopasowania domeny example1.com, example2.com oraz subdomeny example2.com
• Domeny z symbolem wieloznacznym muszą zaczynać się od bezpiecznego schematu https://, więc Adres "*.example.com" jest uznawany za nieprawidłowy.

Jeśli wartość w polu allowed_parent_origin jest nieprawidłowa, funkcja Jedno dotknięcie zainicjowanie trybu pośredniego elementu iframe zakończy się niepowodzeniem i zostanie zatrzymany.

intermediate_iframe_close_callback

Zastępuje domyślne zachowanie pośredniego elementu iframe, gdy użytkownicy ręcznie zamykają One Klikaj symbol „X”. w interfejsie One Tap. Domyślne działanie to natychmiast usuń pośredni element iframe z DOM.

Pole intermediate_iframe_close_callback ma zastosowanie tylko na poziomie średnio zaawansowanym trybu iframe. Ma on wpływ tylko na pośredni element iframe, a nie na Element iframe jednym dotknięciem. Interfejs One Tap zostaje usunięty przed wywołaniem zwrotnym.

Typ	Wymagane	Przykład
funkcja	Opcjonalnie	intermediate_iframe_close_callback: logBeforeClose

itp_support

To pole określa, czy uaktualniony interfejs One Tap powinna być włączona w przeglądarkach, które obsługują inteligentne zapobieganie śledzeniu (ITP). Wartością domyślną jest false. Więcej informacji znajdziesz w tabeli poniżej informacje:

Typ	Wymagane	Przykład
wartość logiczna	Opcjonalnie	itp_support: true

login_hint

Jeśli aplikacja wie z wyprzedzeniem, który użytkownik powinien być zalogowany, może wyświetlić 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 wartość pola sub tokena identyfikatora.

Więcej informacji znajdziesz w polu login_hint w dokumencie OpenID Connect. dokumentacji.

Typ	Wymagane	Przykład
Ciąg znaków, adres e-mail lub wartość z tokena identyfikatora sub.	Opcjonalnie	login_hint: 'elisa.beckett@gmail.com'

HD

Gdy użytkownik ma kilka kont i powinien logować się tylko na swoje konto Workspace konta, użyj go, aby podać Google wskazówkę dotyczącą nazwy domeny. Jeśli operacja się uda, użytkownik konta wyświetlane podczas wyboru konta są ograniczone do podanej domeny. Wartość symbolu wieloznacznego: * oferuje użytkownikowi tylko konta Workspace i wyklucza kont dla klientów indywidualnych (uzytkownik@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 znak *.	Opcjonalnie	hd: '*'

use_fedcm_for_prompt

Zezwalaj przeglądarce na kontrolowanie próśb o zalogowanie się użytkowników i zapośredniczenie w procesie logowania między Twoją witryną a Google. Wartość domyślna to fałsz. Zobacz Migracja do FedCM. .

Typ	Wymagane	Przykład
wartość logiczna	Opcjonalnie	use_fedcm_for_prompt: true

Metoda: google.accounts.id.prompt

Metoda google.accounts.id.prompt wyświetla komunikat jednym dotknięciem lub natywny menedżer danych logowania w przeglądarce po wywołaniu metody initialize(). Zobacz przykładowy kod metody:

 google.accounts.id.prompt(/**
 @type{(function(!PromptMomentNotification):void)=} */ momentListener)

Normalnie przy wczytywaniu strony wywoływana jest metoda prompt(). Ze względu na sesję stanu i ustawień użytkownika po stronie Google, interfejs komunikatu jednym dotknięciem wyświetlenie. Aby otrzymywać powiadomienia o stanie interfejsu dla różnych momentów, przekaż do odbierania powiadomień o stanie interfejsu.

Powiadomienia są wywoływane w tych momentach:

• Wyświetlanie momentu: ta sytuacja ma miejsce po wywołaniu metody prompt(). zawiera wartość logiczną wskazującą, czy lub nie są wyświetlane.

• Pominięty moment: następuje, gdy komunikat jednym dotknięciem zostanie automatycznie zamknięty przez anulowania, ręcznego anulowania lub gdy Google nie wyda danych logowania, np. po wylogowaniu się z Google w wybranej sesji.

  W takich przypadkach zalecamy przejście do kolejnej tożsamości dostawców usług, o ile są występujący.

• Moment odrzucenia: ten błąd występuje, gdy Google pobierze dane logowania lub użytkownik chce zatrzymać proces pobierania danych logowania. Dla: na przykład, gdy użytkownik zacznie wpisywać swoją nazwę użytkownika i hasło w okna logowania, możesz zamknąć metodę google.accounts.id.cancel() jedno dotknięcie i odrzucenie.

Ten przykładowy kod 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 tej tabeli znajdziesz metody i opisy funkcji PromptMomentNotification typ danych:

Metoda
isDisplayMoment()	Czy to powiadomienie dotyczy momentu wyświetlania? Uwaga: jeśli FedCM to . włączony, powiadomienie nie jest wywoływane. Zobacz Migracja do FedCM .
isDisplayed()	Czy to powiadomienie dotyczy momentu wyświetlenia, a interfejs wyświetlić? Uwaga: jeśli FedCM to . włączony, powiadomienie nie jest wywoływane. Zobacz Migracja do FedCM .
isNotDisplayed()	Czy to powiadomienie dotyczy momentu wyświetlenia, a interfejs nie jest wyświetlić? Uwaga: jeśli FedCM to . włączony, powiadomienie nie jest wywoływane. Zobacz Migracja do FedCM .
getNotDisplayedReason()	Szczegółowa przyczyna niewyświetlania się interfejsu. Oto możliwe wartości: browser_not_supported invalid_client missing_client_id opt_out_or_no_session secure_http_required suppressed_by_user unregistered_origin unknown_reason . Uwaga: jeśli FedCM to . włączona, ta metoda nie jest obsługiwana. Zobacz Migracja do FedCM .
isSkippedMoment()	Czy to powiadomienie dotyczy pomijanej chwili?
getSkippedReason()	Szczegółowa przyczyna pominięcia momentu. Oto możliwe wartości: auto_cancel user_cancel tap_outside issuing_failed . Uwaga: jeśli FedCM to . włączona, ta metoda nie jest obsługiwana. Zobacz Migracja do FedCM .
isDismissedMoment()	Czy to powiadomienie dotyczy chwili zamknięcia?
getDismissedReason()	szczegółowe informacje o odmowie, Oto możliwe działania: wartości: credential_returned cancel_called flow_restarted
getMomentType()	Zwraca ciąg znaków dla typu momentu. Oto możliwe działania: wartości: display skipped dismissed

Typ danych: CredentialResponse

Po wywołaniu funkcji callback obiekt CredentialResponse zostaje wywołany przekazywane jako parametr. Poniższa tabela zawiera listę pól, które zawierają w obiekcie odpowiedzi na temat danych logowania:

Pole
credential	To pole zawiera zwrócony token identyfikatora.
select_by	To pole określa sposób wyboru danych logowania.
state	To pole jest zdefiniowane tylko wtedy, gdy użytkownik kliknie Zaloguj się przez Google oraz przycisk state .

certyfikat

To pole zawiera token identyfikatora w postaci ciągu znaków tokena internetowego JSON (JWT) zakodowanego w base64.

Kiedy zdekodowane, token JWT wygląda 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 globalny, unikalny identyfikator konta Google. Tylko użyj pola sub jako identyfikatora użytkownika, ponieważ jest ono unikalne wśród wszystkich Konta nieużywane nigdy ponownie. Nie używaj adresu e-mail jako identyfikatora, ponieważ konto Google może mieć wiele adresów e-mail w różnych momentach.

Za pomocą pól email, email_verified i hd możesz sprawdzić, czy Google i jest wiarygodny dla adresu e-mail. W przypadku, gdy Google potwierdzono, że użytkownik jest legalnym właścicielem konta.

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

• To jest konto Gmail, adres email ma sufiks @gmail.com.
• email_verified ma wartość prawda i ustawiono hd, to jest Google Workspace koncie.

Użytkownicy mogą rejestrować się w Google przy użyciu kont Google bez korzystania z Gmaila lub Google Workspace. Jeśli email nie zawiera sufiksu @gmail.com, a ciąg hd nie występuje, Google nie są wiarygodne oraz wymagają hasła lub innych metod zabezpieczających logowanie, aby weryfikację użytkownika. email_verfied może też być prawdziwe, jak została wstępnie zweryfikowana przez Google użytkownika podczas tworzenia konta Google, jednak własność konto e-mail użytkownika mogło się od tego czasu zmienić.

Pole exp pokazuje okres ważności, przez który należy zweryfikować token na po stronie serwera. Trwa godzina dla tokena tożsamości uzyskanego z funkcji Zaloguj się przez Google. Musisz zweryfikować przed wygaśnięciem obecnie się znajdujesz. Nie używaj exp do zarządzania sesjami. nieważny token identyfikatora. nie oznacza, że użytkownik jest wylogowany. Twoja aplikacja jest odpowiedzialna za sesję i zarządzanie użytkownikami.

select_by

W tabeli poniżej znajdziesz możliwe wartości pola select_by. przycisku wraz ze stanem sesji i stanu zgody użytkownika są wykorzystywane do wartości,

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

• Znaleziono istniejącą sesję lub użytkownik wybrał i zalogował się w konta Google, aby rozpocząć nową sesję.

• Zanim udostępnisz aplikacji dane logowania tokena tożsamości, użytkownik albo

  • kliknęli przycisk Potwierdź, aby wyrazić zgodę na udostępnienie danych logowania, lub
  • Użytkownik wyraził wcześniej zgodę i użył opcji Wybierz konto, aby wybrać Konto Google.

Wartość w tym polu jest ustawiona na jeden z tych typów:

Wartość	Opis
auto	Automatyczne logowanie użytkownika w istniejącej sesji, w której użytkownik wyraził zgodę na udostępnianie danych logowania. Dotyczy tylko przeglądarki nieobsługujące FedCM.
user	Użytkownik w obecnej sesji, który wcześniej wyraził zgodę naciśnięto jedno dotknięcie „Kontynuuj jako” aby udostępnić dane logowania. Obowiązuje tylko w przeglądarkach, które nie obsługują FedCM.
fedcm	Użytkownik nacisnął jedno dotknięcie „Kontynuuj jako” przycisk udostępniania dane logowania w FedCM. Dotyczy tylko FedCM obsługiwane przeglądarki.
fedcm_auto	Automatyczne logowanie użytkownika w istniejącej sesji, w której użytkownik wyraził zgodę na udostępnianie danych logowania za pomocą jednego dotknięcia w FedCM. Dotyczy tylko FedCM obsługiwane przeglądarki.
user_1tap	Użytkownik, który ma już sesję, nacisnął jednym dotknięciem „Kontynuuj jako” aby udzielić zgody i udostępnić dane logowania. Dotyczy tylko Chrome w wersji 75 i nowszych.
user_2tap	Użytkownik bez żadnej sesji nacisnął jednym dotknięciem „Kontynuuj jako” aby wybrać konto, a potem naciśnij przycisk Potwierdź aby udzielić zgody i udostępnić dane logowania. Dotyczy przeglądarek innych niż Chromium.
btn	Użytkownik z taką samą sesją, która wcześniej wyraziła zgodę użytkownik naciśnie przycisk Zaloguj się przez Google i wybierzesz konto Google Wybierz konto aby udostępnić dane logowania.
btn_confirm	Użytkownik w istniejącej sesji nacisnął przycisk Zaloguj się przez Google. i nacisnęliśmy przycisk Potwierdź, aby wyrazić zgodę i udostępnić dane logowania.
btn_add_session	Użytkownik bez sesji, który wcześniej udzielił zgody użytkownik wyraził zgodę i nacisnął przycisk Zaloguj się przez Google, aby wybrać konto Google. i udostępniać dane logowania.
btn_confirm_add_session	Użytkownik bez sesji najpierw kliknął Zaloguj się przez Google aby wybrać konto Google, a następnie nacisnąć Potwierdź aby wyrazić zgodę i udostępnić dane logowania.

stan

To pole jest zdefiniowane tylko wtedy, gdy użytkownik kliknie przycisk Zaloguj się przez Google, logowania i określony jest atrybut state klikniętego przycisku. jest taka sama jak wartość określona w tagu state.

Na jednej stronie może być wyświetlanych wiele przycisków Zaloguj się przez Google, Każdy przycisk może mieć unikalny ciąg znaków. Dlatego możesz:state wskazujący, który przycisk kliknął użytkownik, aby się zalogować.

Metoda: google.accounts.id.renderButton

Metoda google.accounts.id.renderButton renderuje funkcję Zaloguj się przez Google na stronach internetowych.

Zobacz przykładowy kod metody:

google.accounts.id.renderButton(
      /** @type{!HTMLElement} */ parent,
      /** @type{!GsiButtonConfiguration} */ options
    )

Typ danych: GsiButtonConfiguration

W tabeli poniżej znajdziesz pola i opisy funkcji GsiButtonConfiguration typ danych:

Atrybut
type	Typ przycisku: ikona lub przycisk standardowy.
theme	Motyw przycisku. (na przykład wypełniony_niebieski lub wypełniony_czarny).
size	Rozmiar przycisku. np. mały lub duży.
text	Tekst przycisku. Na przykład „Zaloguj się przez Google” lub „Zarejestruj się z Google”.
shape	Kształt przycisku. np. 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 skonfigurowana, jest wywoływana podczas logowania się przez Google kliknięty przycisk.
state	Jeśli jest ustawiony, ciąg znaków zwraca się z tokenem identyfikatora.

Typy atrybutów

Poniższe sekcje zawierają szczegółowy opis typu każdego atrybutu oraz przykład.

typ

Typ przycisku. Wartością domyślną jest standard.

Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
ciąg znaków	Tak	type: "icon"

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

Typ
standard
icon

motyw

Motyw przycisku. Wartością domyślną jest outline. W poniższej tabeli znajdziesz informacje na temat więcej informacji:

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalnie	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. W poniższej tabeli znajdziesz informacje na temat więcej informacji:

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalnie	size: "small"

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

Rozmiar
large
medium
small

tekst

Tekst przycisku. Wartością domyślną jest signin_with. Brak elementów wizualnych różnią się tekstem przycisków ikon, które mają różne atrybuty text. Jedynym wyjątkiem jest sytuacja, w której tekst jest odczytywany na potrzeby ułatwień dostępu na ekranie.

Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalnie	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. Patrz tabela poniżej Więcej informacji:

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalnie	shape: "rectangular"

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

Kształt
rectangular
pill
circle
square

logo_alignment

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

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalnie	logo_alignment: "center"

W tej tabeli znajdziesz dostępne wyrównania wraz z ich opisami:

logo_alignment
left
center

szerokość

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

Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalnie	width: "400"

region

Opcjonalnie: Wyświetlaj tekst przycisku w określonym języku. W przeciwnym razie domyślnie ustawienia konta Google lub przeglądarki użytkownika. Dodaj parametr hl i kodu językowego do dyrektywy src podczas ładowania biblioteki, np. gsi/client?hl=<iso-639-code>

Jeśli nie zostanie ona skonfigurowana, będzie to domyślny język przeglądarki lub używane jest ustawienie. W związku z tym różni użytkownicy mogą zobaczyć różne wersje ale mogą też mieć różne rozmiary.

Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagane	Przykład
ciąg znaków	Opcjonalnie	locale: "zh_CN"

click_listener

Możesz zdefiniować funkcję JavaScriptu, która będzie wywoływana przy funkcji Zaloguj się przez Google. za pomocą atrybutu click_listener.

  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 wyświetlany jest komunikat Zaloguj się przez Google kliknięto przycisk... do konsoli po kliknięciu przycisku Zaloguj się przez Google.

stan

Opcjonalnie, ponieważ wiele przycisków Zaloguj się przez Google można renderować na jednym do każdego przycisku możesz przypisać 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 użytkownik przycisku kliknij, aby się zalogować.

Więcej informacji znajdziesz w tej tabeli:

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

Typ danych: dane logowania

Gdy native_callback jako parametr przekazywany jest obiekt Credential. ta tabela zawiera 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 witryny, musisz wywołać metodę google.accounts.id.disableAutoSelect, aby zarejestrować stan w plikach cookie. Ten zapobiega zapętleniu UX. Zapoznaj się z poniższym fragmentem kodu metody:

google.accounts.id.disableAutoSelect()

Ten przykładowy kod implementuje interfejs google.accounts.id.disableAutoSelect z funkcją onSignout():

<script>
  function onSignout() {
    google.accounts.id.disableAutoSelect();
  }
</script>

Metoda: google.accounts.id.storeCredential

Ta metoda stanowi kod metody store() kodu natywnego przeglądarki Credential Manager API. Dlatego można go używać tylko do przechowywania hasła danych logowania. Zobacz przykładowy kod metody:

google.accounts.id.storeCredential(Credential, callback)

Ten przykładowy kod implementuje interfejs google.accounts.id.storeCredential z funkcją onSignIn():

<script>
  function onSignIn() {
    let cred = {id: '...', password: '...'};
    google.accounts.id.storeCredential(cred);
  }
</script>

Metoda: google.accounts.id.cancel

Możesz anulować proces jednym dotknięciem, jeśli usuniesz prośbę z grupy uzależnionej. DOM. Jeśli dane logowania zostały już wybrane, operacja anulowania jest ignorowana. Zobacz ten przykładowy kod metody:

google.accounts.id.cancel()

Ten przykładowy kod implementuje metodę google.accounts.id.cancel() za pomocą funkcji onNextButtonClicked():

<script>
  function onNextButtonClicked() {
    google.accounts.id.cancel();
    showPasswordPage();
  }
</script>

Wywołanie zwrotne wczytania biblioteki: onGoogleLibraryLoad

Możesz zarejestrować wywołanie zwrotne onGoogleLibraryLoad. Powiadomienie o W polu „Z biblioteką JavaScript Google” ładowane są:

window.onGoogleLibraryLoad = () => {
    ...
};

To wywołanie zwrotne to tylko skrót do wywołania zwrotnego window.onload. Brak różnice w zachowaniu.

Ten przykładowy kod 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 uwierzytelnienie OAuth używane do udostępniania Token identyfikatora określonego użytkownika. Możesz skorzystać z podanego niżej fragmentu 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 tagu credential.
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

Po wywołaniu funkcji callback obiekt RevocationResponse zostaje wywołany przekazywane jako parametr. Poniższa tabela zawiera listę pól, które zawierają w obiekcie odpowiedzi na odwołanie:

Pole
successful	To pole zawiera wartość zwrotną wywołania metody.
error	To pole opcjonalnie zawiera szczegółowy komunikat z odpowiedzią na błąd.

udało się

To pole jest wartością logiczną ustawioną na „true”, jeśli wywołanie metody unieważnienia zakończyło się powodzeniem lub false w przypadku niepowodzenia.

błąd

To pole jest wartością ciągu i zawiera szczegółowy komunikat o błędzie, jeśli unieważnienie nie udało się wywołać metody, jest ona niezdefiniowana w przypadku sukcesu.