Dokumentacja API Zaloguj się przez Google JavaScript

Na tej stronie znajdziesz opis interfejsu Sign-In JavaScript API. Za pomocą tego interfejsu API możesz wyświetlać na swoich stronach internetowych komunikat „Jedno dotknięcie” 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. Zapoznaj się z poniższym przykładowym kodem metody:

google.accounts.id.initialize(IdConfiguration)

Ten przykładowy kod implementuje metodę google.accounts.id.initialize z funkcją 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 wystąpienie klienta Zaloguj się przez Google, które może być niejawnie używane przez wszystkie moduły na tej samej stronie internetowej.

• Metodę google.accounts.id.initialize wystarczy wywołać tylko raz, nawet jeśli na tej samej stronie internetowej używasz kilku modułów (np. jednego kliknięcia, spersonalizowanego przycisku, unieważnienia itp.).
• Jeśli wywołasz metodę google.accounts.id.initialize wiele razy, zapamiętane i użyte zostaną tylko konfiguracje z ostatniego wywołania.

W rzeczywistości resetujesz konfiguracje za każdym razem, gdy wywołujesz metodę google.accounts.id.initialize, a wszystkie kolejne metody na tej samej stronie internetowej natychmiast korzystają z nowych konfiguracji.

Ostrzeżenie: metodę google.accounts.id.initialize należy wywołać tylko raz, nawet jeśli używasz zarówno jednego dotknięcia, jak i przycisku na tej samej stronie internetowej.

Typ danych: IdConfiguration

W tej tabeli znajdziesz pola i opisy typu danych IdConfiguration:

Pole
client_id	Identyfikator klienta Twojej aplikacji
auto_select	Włącza automatyczny wybór.
callback	Funkcja JavaScript, która obsługuje tokeny identyfikacyjne. Tego atrybutu używają Google One Tap i przycisk Zaloguj się przez Google popup Tryb UX.
login_uri	URL punktu końcowego logowania. Ten atrybut jest używany w przycisku Zaloguj się przez Google w trybie UX redirect.
native_callback	Funkcja JavaScript, która obsługuje dane logowania związane z hasłem.
cancel_on_tap_outside	Anuluje prośbę, jeśli użytkownik kliknie poza nią.
prompt_parent_id	Identyfikator DOM elementu kontenera promptu jedno dotknięciem
nonce	Losowy ciąg tokenów tożsamości
context	Tytuł i słowa w prośbie jednym dotknięciem
state_cookie_domain	Jeśli chcesz wywołać jedno dotknięcie w domenie nadrzędnej i jej subdomenach, przekaż domenę nadrzędną do tego pola, aby był używany jeden udostępniony 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, aplikacja One Tap jest uruchamiana w trybie pośredniego elementu iframe.
intermediate_iframe_close_callback	Zastępuje domyślne zachowanie pośredniego elementu iframe, gdy użytkownik ręcznie zamknie jedno dotknięcie.
itp_support	Włącza uaktualniony interfejs One Tap 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	Zezwól przeglądarce na kontrolowanie próśb o zalogowanie się użytkownika i zapośredniczaj przepływ logowania między Twoją witryną a Google.

client_id

To pole zawiera identyfikator klienta Twojej aplikacji. Można go znaleźć i utworzyć w Google Developers Console. Więcej informacji znajdziesz w tabeli poniżej:

Typ	Wymagany	Przykład
ciąg znaków	Tak	client_id: "CLIENT_ID.apps.googleusercontent.com"

wybór automatyczny

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

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

wywołanie zwrotne

To pole jest funkcją JavaScriptu, która obsługuje token identyfikatora zwracany po kliknięciu promptu jednego dotknięcia lub wyskakującego okienka. Ten atrybut jest wymagany, jeśli używasz Google One Tap lub przycisku Zaloguj się przez Google popup trybu UX. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagany	Przykład
funkcja	Wymagany w przypadku korzystania z jednego dotknięcia i trybu UX popup	callback: handleResponse

login_uri

Ten atrybut to identyfikator URI punktu końcowego logowania.

Wartość musi być dokładnie taka sama jak jeden z autoryzowanych identyfikatorów URI przekierowania klienta OAuth 2.0 skonfigurowanych w konsoli API i zgodnych z regułami weryfikacji identyfikatora URI przekierowania.

Ten atrybut może zostać pominięty, jeśli bieżąca strona jest stroną logowania. Dane logowania są wtedy domyślnie opublikowane na tej stronie.

Odpowiedź dotycząca 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 przekierowania.

Więcej informacji znajdziesz w tabeli poniżej:

Typ	Opcjonalnie	Przykład
URL	Domyślnie jest to identyfikator URI bieżącej strony lub określona przez Ciebie wartość. Używane 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 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

Uwaga: dzięki JavaScript API odpowiedź w przypadku Google One Tap i przycisku Zaloguj się przez Google popup w trybie UX można przywrócić tylko do funkcji callback JavaScriptu. Wypróbuj interfejs API HTML, jeśli odpowiedź musi być przesyłana automatycznie do login_uri.

natywne wywołanie zwrotne

To pole jest nazwą funkcji JavaScript, która obsługuje dane logowania do haseł zwracane z natywnego menedżera danych logowania przeglądarki. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagany	Przykład
funkcja	Opcjonalnie	native_callback: handleResponse

Anuluj_po_dotknięciu_na_stronach

To pole określa, czy żądanie jednego dotknięcia ma być anulowane, gdy użytkownik kliknie poza promptem. Wartością domyślną jest true. Możesz ją wyłączyć, ustawiając wartość false. Więcej informacji znajdziesz w tabeli poniżej:

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

identyfikator prompt_nadrzędny

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

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

liczba jednorazowa

Jest to losowy ciąg znaków używany przez token identyfikatora do zapobiegania atakom metodą ponownego odtwarzania. Więcej informacji znajdziesz w tabeli poniżej:

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

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

sytuacja

To pole zmienia tytuł i komunikaty wyświetlane w powiadomieniu jednym dotknięciem. Więcej informacji znajdziesz w tej tabeli:

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

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

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

stan_cookie_domain

Jeśli musisz wyświetlać jedno dotknięcie w domenie nadrzędnej i jej subdomenach, przekaż w tym polu domenę nadrzędną, aby był używany pojedynczy plik cookie stanu współużytkowanego. Więcej informacji znajdziesz w tej tabeli:

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

tryb ux

Użyj tego pola, aby skonfigurować procedurę UX używaną przez przycisk Zaloguj się przez Google. Wartość domyślna to popup. Ten atrybut nie ma wpływu na wrażenia użytkownika OneTap. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagany	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	Przebiega procesu logowania w wyskakującym okienku.
redirect	Wykonuje przepływ logowania w interfejsie użytkownika przy użyciu pełnego przekierowania strony.

dozwolone_źródło_nadrzędnej_domeny

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

Typ	Wymagany	Przykład
tablica ciągów lub ciągów 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ą też prefiksy symboli wieloznacznych. Na przykład "https://*.example.com" pasuje do elementu example.com i jego subdomen na wszystkich poziomach (np.news.example.com, login.news.example.com). Podczas korzystania z symboli wieloznacznych należy pamiętać o tych kwestiach:

• 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 już wspomnieliśmy, ciąg "https://*.example.com" pasuje do example.com i jego subdomen. Możesz też użyć tablicy do reprezentowania 2 różnych domen. Na przykład ["https://example1.com", "https://*.example2.com"] pasuje do domen example1.com, example2.com i subdomen example2.com
• Domeny z symbolem wieloznacznym muszą zaczynać się od bezpiecznego schematu https://, dlatego "*.example.com" jest uważany za nieprawidłowy.

Uwaga: w przeciwieństwie do interfejsu HTML API ciąg tekstowy z identyfikatorami URI rozdzielonymi przecinkami nie jest prawidłowy w polu allowed_parent_origin. Użyj obiektu tablicy JavaScript.

Jeśli wartość w polu allowed_parent_origin jest nieprawidłowa, inicjowanie jednym kliknięciem w średnim trybie iframe kończy się niepowodzeniem i zatrzymuje się.

pośredni_iframe_close_callback

Zastępuje domyślne działanie pośredniego elementu iframe, gdy użytkownik ręcznie zamknie jedno dotknięcie przez kliknięcie przycisku „X” w interfejsie jednym dotknięciem. Domyślnym zachowaniem jest natychmiastowe usunięcie pośredniego elementu iframe z DOM.

Pole intermediate_iframe_close_callback działa tylko w trybie pośrednim iframe. Ma wpływ tylko na pośredni element iframe, a nie na element iframe obsługiwany tylko jednym kliknięciem. Interfejs One Tap jest usuwany przed wywołaniem wywołania zwrotnego.

Typ	Wymagany	Przykład
funkcja	Opcjonalnie	intermediate_iframe_close_callback: logBeforeClose

taka_pomoc

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

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

podpowiedzi_logowania

Jeśli aplikacja wie z wyprzedzeniem, który użytkownik powinien się zalogować, 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 wartość pola sub tokenu identyfikatora.

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

Typ	Wymagany	Przykład
Ciąg znaków, adres e-mail lub wartość z pola sub tokena identyfikatora.	Opcjonalnie	login_hint: '[e-mail]'

HD

Jeśli użytkownik ma kilka kont i powinien logować się tylko na konto Workspace, skorzystaj z tych opcji, 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 wyklucza konta indywidualne (uż[e-mail]).

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

Typ	Wymagany	Przykład
Ciąg tekstowy. Pełna i jednoznaczna nazwa domeny lub znak *.	Opcjonalnie	hd: '*'

użyj_fedcm_for_prompt

Pozwól przeglądarce kontrolować prośby o zalogowanie się użytkownika i pośredniczyć w procesie logowania między Twoją witryną a Google. Wartość domyślna to fałsz.

Typ	Wymagany	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(). Zapoznaj się z przykładowym kodem tej metody:

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

Normalnie metoda prompt() jest wywoływana podczas wczytywania strony. Ze względu na stan sesji i ustawienia użytkownika po stronie Google interfejs potwierdzenia za pomocą jednego dotknięcia może nie być wyświetlany. Aby otrzymywać powiadomienia o stanie interfejsu użytkownika w różnych momentach, przekaż funkcję w celu otrzymywania powiadomień o stanie UI.

Powiadomienia są wysyłane w tych momentach:

• Wyświetl moment: dzieje się to po wywołaniu metody prompt(). Powiadomienie zawiera wartość logiczną wskazującą, czy interfejs użytkownika się wyświetla.

• Pominięty moment: ten komunikat pojawia się, gdy prośba jednym dotknięciem zostanie zamknięta przez automatyczne anulowanie, ręczną anulowanie lub gdy Google nie wystawi danych logowania, na przykład gdy wybrana sesja zostanie wylogowana z Google.

  W takiej sytuacji zalecamy przejście do kolejnych dostawców tożsamości (jeśli są).

• Moment zamknięcia: ten błąd występuje, gdy Google pobierze dane logowania lub użytkownik chce zatrzymać proces pobierania danych logowania. Gdy na przykład użytkownik zacznie wpisywać w oknie logowania swoją nazwę użytkownika i hasło, możesz wywołać metodę google.accounts.id.cancel(), aby zamknąć okno jednym dotknięciem i wywołać moment zamknięcia.

  Ostrzeżenie: w przypadku odrzucenia nie próbuj korzystać z żadnego następnego dostawcy tożsamości.

Pominięty moment jest implementowany w poniższym przykładzie kodu:

<script>
  window.onload = function () {
    google.accounts.id.initialize(...);
    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        // continue with another identity provider.
      }
    });
  };
</script>

Uwaga: aby chronić prywatność użytkowników, powiadomienia o momentach wyświetlania są celowo opóźnione po włączeniu FedCM. Powiadomienia mogą być odbierane najpóźniej 1 minutę po wystąpieniu zdarzenia.

Uwaga: w przypadku natywnego menedżera danych logowania nie ma powiadomień o momentach wyświetlenia, pominięć ani odrzucenia, które występują poza biblioteką GIS.

Typ danych: PromptMomentnotifications

W tej tabeli znajdziesz metody i opisy typu danych PromptMomentNotification:

Metoda
isDisplayMoment()	Czy to powiadomienie dotyczy momentu wyświetlania?
isDisplayed()	Czy to powiadomienie dotyczy momentu wyświetlania i wyświetla się interfejs użytkownika?
isNotDisplayed()	Czy to powiadomienie pojawia się przez chwilę, a interfejs się nie wyświetla?
getNotDisplayedReason()	Szczegółowa przyczyna niewyświetlania interfejsu użytkownika. 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
isSkippedMoment()	Czy to powiadomienie pojawia się w momencie pominięcia?
getSkippedReason()	Szczegółowa przyczyna pominięcia momentu. Oto możliwe wartości: auto_cancel user_cancel tap_outside issuing_failed
isDismissedMoment()	Czy to powiadomienie dotyczy momentu odrzucenia?
getDismissedReason()	Szczegółowa przyczyna odrzucenia. Oto możliwe wartości: credential_returned cancel_called flow_restarted
getMomentType()	Zwraca ciąg znaków odpowiadający typowi momentu. Oto możliwe wartości: display skipped dismissed

Typ danych: CredentialResponse

Po wywołaniu funkcji callback jako parametr przekazywany jest obiekt CredentialResponse. W poniższej tabeli wymieniono pola zawarte w obiekcie odpowiedzi danych logowania:

Pole
credential	To pole zawiera zwrócony token identyfikatora.
select_by	To pole określa sposób wyboru danych logowania.

login

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

Po zdekodowaniu token JWT 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": "[e-mail]", // 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 zawiera globalnie unikalny identyfikator konta Google.

Za pomocą pól email, email_verified i hd możesz określić, czy Google hostuje adres e-mail i czy jest wiarygodny. W sytuacjach, gdy Google potwierdza, że użytkownik jest prawowitym właścicielem konta.

Przypadki, w których Google jest wiarygodne:

• email ma sufiks @gmail.com, to jest konto Gmail.
• Parametr email_verified ma wartość prawda, a hd jest ustawiony, 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 nie brakuje hd, Google nie jest wiarygodne. Do weryfikacji użytkownika zalecamy użycie hasła lub innych testów zabezpieczających. email_verfied może być również prawdą, 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 możesz zweryfikować token po stronie serwera. Czas potrzebny na token identyfikatora uzyskany za pomocą funkcji Zaloguj się przez Google to 1 godzina. Musisz zweryfikować token przed upływem czasu jego wygaśnięcia. Nie używaj exp do zarządzania sesjami. Wygasły token tożsamości nie oznacza, że użytkownik jest wylogowany. Twoja aplikacja odpowiada za zarządzanie sesjami użytkowników.

wybierz_według

W tabeli poniżej znajdziesz możliwe wartości pola select_by. Do ustawiania wartości używany jest typ używanego przycisku wraz z informacją o sesji i stanie zgody,

• 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 nim, by utworzyć nową sesję.

• Przed udostępnieniem aplikacji danych uwierzytelniających token tożsamości użytkownik:

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

Wartość tego pola jest ustawiona na jeden z podanych niżej typów,

Wartość	Opis
auto	Automatyczne logowanie użytkownika w istniejącej sesji, który wcześniej wyraził zgodę na udostępnianie danych logowania.
user	Użytkownik w istniejącej sesji, który wcześniej udzielił zgody, kliknął przycisk „Kontynuuj jako” jednym dotknięciem, aby udostępnić dane logowania.
user_1tap	Użytkownik w istniejącej sesji kliknął przycisk „Kontynuuj jako” jednym dotknię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ął jednym dotknięciem przycisk „Kontynuuj jako”, aby wybrać konto, a następnie w wyskakującym okienku wybrał przycisk Potwierdź, aby wyrazić zgodę i udostępnić dane logowania. Dotyczy przeglądarek innych niż Chromium.
btn	Użytkownik z istniejącą sesją, który wcześniej wyraził zgodę, kliknął przycisk Zaloguj się przez Google i wybrał konto Google w 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 bez sesji, który wcześniej wyraził zgodę, kliknął przycisk Zaloguj się przez Google, aby wybrać konto Google i udostępnić dane logowania.
btn_confirm_add_session	Użytkownik bez istniejącej sesji najpierw kliknął przycisk Zaloguj się przez Google, aby wybrać konto Google, a następnie przycisk Potwierdź, aby wyrazić zgodę i udostępnić dane logowania.

Metoda: google.accounts.id.renderButton

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

Zapoznaj się z przykładowym kodem tej metody:

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

Typ danych: GsiButtonConfiguration

W tej tabeli podano pola i opisy typu danych GsiButtonConfiguration:

Atrybut
type	Typ przycisku: ikona lub przycisk standardowy.
theme	Motyw przycisku. np. wypełnione_niebieskie lub wypełnione_czarnym.
size	Rozmiar przycisku. np. mały lub duży.
text	Tekst przycisku. np. „Zaloguj się przez Google” lub „Zarejestruj się przez Google”.
shape	Kształt przycisku. Na przykład prostokątne lub okrągłe.
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 jest ustawiony, funkcja jest wywoływana po kliknięciu przycisku Zaloguj się przez Google.

Typy atrybutów

Poniższe sekcje zawierają szczegółowe informacje o typach atrybutów oraz przykłady.

typ

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

Więcej informacji znajdziesz w tabeli poniżej:

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

Poniższa tabela zawiera listę dostępnych typów przycisków i ich opisów:

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

motyw

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

Typ	Wymagany	Przykład
ciąg znaków	Opcjonalnie	theme: "filled_blue"

Dostępne motywy i ich opisy znajdziesz w tabeli poniżej:

Motyw
outline	Standardowy motyw przycisku.
filled_blue	Motyw przycisku z niebieskim motywem.
filled_black	Czarny motyw przycisku.

rozmiar

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

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

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

Rozmiar
large	Duży przycisk.
medium	Średni rozmiar przycisku.
small	Mały przycisk.

plik tekstowy,

Tekst przycisku. Wartością domyślną jest signin_with. Tekst przycisków ikon, które mają różne atrybuty text, nie różni się od siebie pod względem wizualnym. Jedynym wyjątkiem jest odczyt tekstu na potrzeby ułatwień dostępu na ekranie.

Więcej informacji znajdziesz w tabeli poniżej:

Typ	Wymagany	Przykład
ciąg znaków	Opcjonalnie	text: "signup_with"

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

Tekst
signin_with	Tekst przycisku to „Zaloguj się przez Google”.
signup_with	Tekst przycisku to „Zarejestruj się przez Google”.
continue_with	Tekst przycisku to „Kontynuuj z Google”.
signin	Tekst przycisku to „Zaloguj się”.

kształt

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

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

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

Kształt
rectangular	Prostokątny przycisk. Jeśli zostanie użyty w przypadku przycisku typu icon, jest taki sam jak square.
pill	Przycisk w kształcie pigułki. Jeśli zostanie użyty w przypadku przycisku typu icon, jest taki sam jak circle.
circle	Przycisk w kształcie koła. Jeśli zostanie użyty w przypadku przycisku typu standard, jest taki sam jak pill.
square	Kwadratowy przycisk. Jeśli zostanie użyty w przypadku przycisku typu standard, jest taki sam jak rectangular.

logo_alignment

Dopasowanie logo Google Wartością domyślną jest left. Ten atrybut dotyczy tylko przycisku typu standard. Więcej informacji znajdziesz w tej tabeli:

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

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

logo_alignment
left	Wyrównuje logo Google do lewej.
center	Wyśrodkowuje logo Google.

szerokość

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

Więcej informacji znajdziesz w tabeli poniżej:

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

język

Opcjonalnie. Wyświetlaj tekst przycisku w określonym języku. W przeciwnym razie domyślnie użyj ustawień konta Google lub przeglądarki użytkownika. 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. Różni użytkownicy mogą zobaczyć różne wersje zlokalizowanych przycisków i prawdopodobnie w różnych rozmiarach.

Więcej informacji znajdziesz w tabeli poniżej:

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

odbiornik_kliknięć

Za pomocą atrybutu click_listener możesz zdefiniować funkcję JavaScript, która będzie 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 jest logowany komunikat Zaloguj się przez Google....

Typ danych: dane logowania

Po wywołaniu funkcji native_callback jako parametr przekazywany jest obiekt Credential. W tabeli poniżej znajdziesz pola zawarte 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 zarejestrować stan w plikach cookie. Zapobiega to zapętleniu procesów UX. Możesz skorzystać z tego fragmentu kodu:

google.accounts.id.disableAutoSelect()

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

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

Metoda: google.accounts.id.storeCredential

Ta metoda jest kodem towarzyszącym metodzie store() natywnego interfejsu API menedżera danych logowania w przeglądarce. Dlatego można go używać tylko do przechowywania danych logowania. Zapoznaj się z przykładowym kodem tej metody:

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

Ten przykładowy kod implementuje metodę 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ć przepływ jednym dotknięciem, jeśli usuniesz prompt z DOM jednostki uzależnionej. Jeśli dane logowania są już wybrane, operacja anulowania jest ignorowana. Zapoznaj się z tym przykładowym kodem metody:

google.accounts.id.cancel()

Ten przykładowy kod implementuje metodę google.accounts.id.cancel() z funkcją onNextButtonClicked():

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

Wywołanie zwrotne wczytywania biblioteki: onGoogleLibraryLoad

Możesz zarejestrować wywołanie zwrotne onGoogleLibraryLoad. Powiadomienie pojawia się po wczytaniu biblioteki JavaScript funkcji Zaloguj się przez Google:

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

To połączenie zwrotne to tylko skrót do połączenia zwrotnego window.onload. Nie ma żadnych różnic w sposobie działania.

W tym przykładowym kodzie zaimplementowano 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 anuluje uwierzytelnianie przez OAuth użyte do udostępnienia tokena identyfikatora określonego użytkownika. Możesz skorzystać z tego 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 jest właściwością sub ładunku 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);
  });

Ważne: wywołanie tej metody anuluje wszystkie zakresy OAuth 2.0 przyznane wcześniej przez bibliotekę klienta Zaloguj się przez Google.

Typ danych: RevocationResponse

Po wywołaniu funkcji callback jako parametr przekazywany jest obiekt RevocationResponse. W tabeli poniżej znajdziesz pola, które znajdują się w obiekcie odpowiedzi na prośbę o unieważnienie:

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

udane

To pole zawiera wartość logiczną ustawioną na „true” (prawda), jeśli wywołanie metody odwołania zakończyło się powodzeniem lub „false” (fałsz) w przypadku niepowodzenia.

error

To pole zawiera wartość ciągu i zawiera szczegółowy komunikat o błędzie, jeśli wywołanie metody unieważnienia się nie powiodło, jest niezdefiniowany po powodzeniu.