Dokumentacja API Zaloguj się przez Google JavaScript

Na tej stronie znajdziesz opis interfejsu API logowania do JavaScript. Za pomocą tego interfejsu API możesz wyświetlać na swoich stronach internetowych komunikat jednym dotknięciem lub przycisk Zaloguj się przez Google.

Metoda: google.accounts.id.initiatedize

Metoda google.accounts.id.initialize inicjuje klienta funkcji Zaloguj się przez Google na podstawie obiektu konfiguracji. Oto przykładowy kod metody:

google.accounts.id.initialize(IdConfiguration)

Poniższy 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 instancję klienta Zaloguj się przez Google, której mogą używać wszystkie moduły na tej samej stronie internetowej.

• Wystarczy, że wywołasz metodę google.accounts.id.initialize tylko raz, jeśli na jednej stronie korzystasz z kilku modułów (takich jak 1 kliknięcie, spersonalizowany przycisk, unieważnienie itd.).
• Jeśli wielokrotnie wywołasz metodę google.accounts.id.initialize, zostanie zapamiętana i użyta tylko konfiguracja z ostatniego wywołania.

Konfiguracje zostały zresetowane za każdym razem, gdy wywołasz metodę google.accounts.id.initialize. Wszystkie kolejne metody na tej samej stronie będą natychmiast używać nowych konfiguracji.

Typ danych: IdConfiguration

Poniższa tabela zawiera pola i opisy typu danych IdConfiguration:

Pole
client_id	Identyfikator klienta aplikacji
auto_select	Włącza automatyczny wybór.
callback	Funkcja JavaScript, która obsługuje tokeny identyfikatorów. Użyj tego atrybutu, jeśli korzystasz z Google One Tap i przycisku Zaloguj się przez Google popup.
login_uri	URL punktu końcowego logowania. Ten atrybut korzysta z przycisku Zaloguj się przez Google redirect w trybie UX.
native_callback	Funkcja JavaScript, która obsługuje dane logowania do konta.
cancel_on_tap_outside	Anuluje pytanie, jeśli użytkownik je kliknie.
prompt_parent_id	Identyfikator DOM elementu kontenera One Touch
nonce	Losowy ciąg tokenów tożsamości
context	Tytuł i słowa w komunikacie jednym dotknięciem
state_cookie_domain	Jeśli musisz wywołać tryb jednego kliknięcia w domenie nadrzędnej i jej subdomenach, przekaż domenę nadrzędną do tego pola, aby móc używać jednego udostępnionego pliku cookie.
ux_mode	Proces logowania się za pomocą przycisku Zaloguj się przez Google
allowed_parent_origin	Źródła, które mogą umieszczać pośredni element iframe. Jeśli pole jest obecne, jedno dotknięcie zadziała w pośrednim trybie elementu iframe.
intermediate_iframe_close_callback	Zastępuje domyślne pośrednie elementy iframe, gdy użytkownik ręcznie zamyka jedno dotknięcie.
itp_support	Włącza UX One Touch w przeglądarkach ITP.

client_id

To pole zawiera identyfikator klienta Twojej aplikacji, który można znaleźć w Google Developers Console. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagany	Przykład
tekst	Tak	client_id: "CLIENT_ID.apps.googleusercontent.com"

automatyczne wybieranie

To pole określa, czy token tożsamości jest zwracany automatycznie bez interakcji użytkownika w sytuacji, gdy z aplikacji jest zatwierdzona tylko jedna sesja Google. Wartością domyślną jest false. Więcej informacji znajdziesz w tabeli poniżej:

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

wywołanie zwrotne

To pole to funkcja JavaScript, która obsługuje token identyfikatora zwrócony w wierszu poleceń lub wyskakującym okienku. Ten atrybut jest wymagany, jeśli używasz przycisku Google One lub przycisku Zaloguj się przez Google popup. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagany	Przykład
funkcja	Wymagane do korzystania z 1 dotknięcia i trybu UX popup	callback: handleResponse

login_uri

Ten atrybut to identyfikator URI punktu końcowego logowania.

Wartość musi być zgodna z jednym z autoryzowanych identyfikatorów URI przekierowania klienta OAuth 2.0, które zostały skonfigurowane w konsoli API i muszą być zgodne z naszymi regułami weryfikacji identyfikatora URI przekierowania.

Możesz go pominąć, jeśli bieżąca strona logowania jest Twoją stroną, na której w tym przypadku dane logowania są domyślnie publikowane na tej stronie.

Odpowiedź dotycząca identyfikatora tokena tokena 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 tej tabeli:

Typ	Opcjonalnie	Przykład
URL	Domyślnie odpowiada identyfikatorowi URI bieżącej strony lub określonej przez Ciebie wartości. 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 do punktu końcowego logowania:

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

credential=ID_TOKEN

natywny_wywołanie zwrotne

To pole zawiera nazwę funkcji JavaScript, która obsługuje dane logowania do hasła zwrócone przez natywny menedżer danych logowania w przeglądarce. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagany	Przykład
funkcja	Opcjonalnie	native_callback: handleResponse

anuluj na stronie

To pole określa, czy anulować żądanie One Tap, jeśli użytkownik kliknie powiadomienie poza polem. Wartością domyślną jest true. Możesz go wyłączyć, ustawiając wartość false. Więcej informacji znajdziesz w tej tabeli:

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

potwierdzenie_nadrzędnego_identyfikatora

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

Typ	Wymagany	Przykład
tekst	Opcjonalnie	prompt_parent_id: 'parent_id'

liczba jednorazowa

To pole to losowy ciąg znaków używany przez token identyfikatora do zapobiegania atakom polegającym na ponownym odtworzeniu atak. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagany	Przykład
tekst	Opcjonalnie	nonce: "biaqbm70g23"

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

sytuacja

To pole zmienia tekst tytułu i wiadomości w komunikacie One Tap. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagany	Przykład
tekst	Opcjonalnie	context: "use"

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

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

domena_plik_cookie

Jeśli musisz wyświetlić domenę jednym dotknięciem w domenie nadrzędnej i jej subdomenach, przekaż domenę nadrzędną w tym polu, aby móc używać jednego pliku cookie stanu udostępniania. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagany	Przykład
tekst	Opcjonalnie	state_cookie_domain: "example.com"

tryb_ux

W tym polu możesz skonfigurować procedurę UX używaną przez przycisk Zaloguj się przez Google. Wartością domyślną jest popup. Ten atrybut nie ma wpływu na interfejs użytkownika OneTouch. Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagany	Przykład
tekst	Opcjonalnie	ux_mode: "redirect"

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

Tryb UX
popup	Wykonuje procedurę logowania w wyskakującym okienku.
redirect	Przeprowadza proces logowania UX przez pełne przekierowanie na stronę.

allowed_parent_origin,

Źródła, które mogą umieszczać pośredni element iframe. Jeśli pole jest dostępne, jedno dotknięcie zadziała w pośrednim trybie elementu iframe. Więcej informacji znajdziesz w tabeli poniżej:

Typ	Wymagany	Przykład
Ciąg tekstowy	Opcjonalnie	allowed_parent_origin: "https://example.com"

W tabeli poniżej znajdziesz listę obsługiwanych typów wartości i ich opisów.

Typy wartości
string	Identyfikator URI pojedynczej domeny.	„https://example.com”
string array	Tablica identyfikatorów URI domen.	["https://wiadomości.example.com", "https://lokalne.example.com"]

Obsługiwane są też prefiksy z symbolami wieloznacznymi. Na przykład domena "https://*.example.com" będzie pasować do example.com i jej subdomen na wszystkich poziomach (np.news.example.com, login.news.example.com). O czym warto pamiętać, używając symboli wieloznacznych:

• Ciągi znaków wzorca nie mogą składać się tylko z symbolu wieloznacznego i domeny najwyższego poziomu. Na przykład pola https://*.com i https://*.co.uk są nieprawidłowe. Jak wspomnieliśmy wcześniej, ciąg "https://*.example.com" będzie pasować do example.com i jej subdomen. Można też użyć tablicy do 2 różnych domen. Na przykład domena ["https://example1.com", "https://*.example2.com"] będzie pasować do domen example1.com, example2.com i subdomen domeny example2.com
• Domeny zawierające symbole wieloznaczne muszą zaczynać się od bezpiecznego schematu https://. Numer "*.example.com" zostanie uznany za nieprawidłowy.

Jeśli wartość pola allowed_parent_origin jest nieprawidłowa, inicjacja pośredniego trybu elementu iframe zakończy się niepowodzeniem i zatrzyma się.

pośredni telefon_iframe_close_callback

Powoduje zastąpienie domyślnego działania pośredniego elementu iframe, gdy użytkownik ręcznie zamknie Jedno dotknięcie, klikając w interfejsie użytkownika przycisk „X”. Domyślnym zachowaniem jest natychmiastowe usunięcie pośredniego elementu iframe z DOM.

Pole intermediate_iframe_close_callback działa tylko w średnim trybie elementu iframe. Ma ona wpływ tylko na pośredni element iframe, a nie na element iframe korzystający z jednego kliknięcia. Interfejs One Tap jest usuwany przed wywołaniem wywołania zwrotnego.

Typ	Wymagany	Przykład
funkcja	Opcjonalnie	intermediate_iframe_close_callback: logBeforeClose

taka

To pole określa, czy uaktualniona wersja UX One powinna być włączona w przeglądarkach, które obsługują Intelligent Tracking Prevention (ITP). Wartością domyślną jest false. Więcej informacji znajdziesz w tej tabeli:

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

Metoda: google.accounts.id.prompt

Po wywołaniu metody initialize() metoda google.accounts.id.prompt wyświetla potwierdzenie One Tap lub natywnego menedżera danych logowania w przeglądarce. Oto przykładowy kod metody:

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

Standardowo metoda prompt() jest wywoływana podczas wczytywania strony. Ze względu na stan sesji i ustawienia użytkownika po stronie Google interfejs użytkownika One Touch może się nie wyświetlać. Aby otrzymywać powiadomienia o stanie w różnych momentach interfejsu, musisz przekazać jakąś funkcję.

Powiadomienia są uruchamiane w tych momentach:

• Wyświetl moment: dzieje się tak po wywołaniu metody prompt(). Powiadomienie zawiera wartość logiczną, która wskazuje, czy interfejs jest wyświetlany.

• Pominięcie chwili: występuje, gdy potwierdzenie jednym dotknięciem zostanie zamknięte automatycznie, ręcznie lub gdy Google nie wykaże danych logowania, np. po wylogowaniu się użytkownika z wybranej sesji w Google.

  W takiej sytuacji zalecamy przejście do następnym dostawcy tożsamości, jeśli istnieją.

• Moment odrzucany: ten błąd występuje, gdy Google pobiera dane logowania lub użytkownik chce zatrzymać ich pobieranie. Gdy na przykład użytkownik zacznie wpisywać swoją nazwę użytkownika i hasło w oknie logowania, możesz wywołać metodę google.accounts.id.cancel(), aby zamknąć powiadomienie jednym dotknięciem i wywołać odrzucenie.

Poniższy przykładowy kod implementuje pomijany 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

Poniższa tabela zawiera metody i opisy typów danych PromptMomentNotification:

Metoda
isDisplayMoment()	Czy to powiadomienie wyświetla się na ekranie?
isDisplayed()	Czy to powiadomienie wyświetla się na chwilę, a interfejs jest widoczny?
isNotDisplayed()	Czy to powiadomienie wyświetla się na chwilę, a interfejs się nie wyświetla?
getNotDisplayedReason()	Szczegółowy powód braku interfejsu użytkownika. 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 nie wyświetla się przez chwilę?
getSkippedReason()	Szczegółowa przyczyna pominięcia momentu. Możliwe wartości: auto_cancel user_cancel tap_outside issuing_failed
isDismissedMoment()	Czy to powiadomienie jest odrzucone?
getDismissedReason()	Szczegółowa przyczyna odrzucenia. Możliwe wartości: credential_returned cancel_called flow_restarted
getMomentType()	Zwraca ciąg znaków związany z typem momentu. Możliwe wartości: display skipped dismissed

Typ danych: CredentialResponse

Gdy funkcja callback jest wywoływana, parametr jest przekazywany jako obiekt CredentialResponse. Poniższa tabela zawiera pola, które są zawarte w obiekcie odpowiedzi na dane logowania:

Pole
credential	To pole jest zwracanym tokenem identyfikatora.
select_by	To pole określa sposób wyboru danych logowania.

dane logowania

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

Po zdekodowaniu tokena JWT wygląda on następująco:

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 zawiera globalnie unikalny identyfikator konta Google.

Używając pól email, email_verified i hd, możesz sprawdzić, czy host Google jest wiarygodny dla adresu e-mail. W sytuacjach, gdy Google jest wiarygodnym właścicielem, wiadomo, że użytkownik jest prawowitym właścicielem konta.

Przypadki, w których Google jest wiarygodny:

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

Użytkownicy mogą rejestrować konta Google bez korzystania z Gmaila i Google Workspace. Jeśli email nie zawiera sufiksu @gmail.com, a nie podano hd, Google nie jest wiarygodnym podmiotem, a hasła lub inne metody weryfikacji są zalecane do zweryfikowania użytkownika. email_verfied może być też prawdziwe, bo podczas tworzenia konta Google użytkownik zweryfikował początkowo konto Google, ale własność konta e-mail osoby trzeciej mogła ulec zmianie.

Pole exp pokazuje czas wygaśnięcia weryfikacji tokena po stronie serwera. Trwa 1 godzina tokena tożsamości uzyskanego z funkcji Zaloguj się przez Google. Musisz zweryfikować token przed upływem daty ważności. Do zarządzania sesją nie używaj właściwości exp. Wygasły token tożsamości nie oznacza, że użytkownik jest wylogowany. Za zarządzanie sesjami użytkowników odpowiada Twoja aplikacja.

select_by (wybierz)

Poniższa tabela zawiera możliwe wartości pola select_by. Do określenia wartości służy przycisk przycisku użyty wraz z sesją i stanem zgody użytkownika.

• Użytkownik nacisnął przycisk jednym dotknięciem lub logowanie się przez Google albo korzystał z automatycznego logowania bezdotykowego.

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

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

  • kliknij przycisk Potwierdź, aby wyrazić zgodę na udostępnianie danych logowania.
  • wyraziła wcześniej zgodę i użył konta 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 dotychczasową sesją, która wcześniej wyraziła zgodę na udostępnianie danych logowania.
user	Użytkownik, który wcześniej wyraził zgodę, nacisnął przycisk „Kontynuuj jako”, aby udostępnić dane logowania.
user_1tap	Użytkownik z istniejącą sesją nacisnął przycisk „Kontynuuj jako”, aby udzielić zgody i udostępnić dane logowania. Dotyczy tylko Chrome w wersji 75 lub nowszej.
user_2tap	Użytkownik bez istniejącej sesji nacisnął przycisk „Kontynuuj jako”, aby wybrać konto, a następnie przycisk Potwierdź w wyskakującym okienku, aby udzielić zgody i udostępnić dane logowania. Dotyczy przeglądarek niepochodzących z Chromium.
btn	Użytkownik z istniejącą sesją, która wcześniej wyraziła zgodę, nacisnął przycisk Zaloguj się przez Google, a następnie wybrał konto Google ze strony „Wybierz konto”.
btn_confirm	Użytkownik z istniejącą sesją nacisnął przycisk Zaloguj się przez Google, a następnie przycisk Potwierdź, aby udzielić zgody i udostępnić dane logowania.
btn_add_session	Użytkownik bez istniejącej sesji, który wcześniej wyraził zgodę, nacisnął 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ę na udostępnienie danych logowania i je udostępnić.

Metoda: google.accounts.id.renderButton

Metoda google.accounts.id.renderButton renderuje na Twoich 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

Poniższa tabela zawiera pola i opisy typów danych GsiButtonConfiguration:

Atrybut
type	Typ przycisku: ikona lub przycisk standardowy.
theme	Motyw przycisku. na przykład filled_blue lub filled_black.
size	Rozmiar przycisku. Na przykład małe lub duże.
text	Tekst przycisku. na przykład „Zaloguj się przez Google” lub „Zarejestruj się przez 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 skonfigurujesz tę funkcję, po kliknięciu przycisku Zaloguj się przez Google będzie ona wywoływana.

Typy atrybutów

W poniższych sekcjach znajdziesz szczegółowe informacje o typach atrybutów oraz przykłady.

typ

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

Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagany	Przykład
tekst	Tak	type: "icon"

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

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 tabeli poniżej:

Typ	Wymagany	Przykład
tekst	Opcjonalnie	theme: "filled_blue"

W tabeli znajdziesz dostępne motywy i ich opisy:

Motyw
outline	Standardowy motyw przycisku:
filled_blue	Motyw niebieskiego przycisku:
filled_black	Motyw przycisku z czarnym kolorem:

rozmiar

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

Typ	Wymagany	Przykład
tekst	Opcjonalnie	size: "small"

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

Rozmiar
large	Duży przycisk:
medium	Przycisk średniej wielkości:
small	Mały przycisk:

plik tekstowy,

Tekst przycisku. Wartością domyślną jest signin_with. Tekst przycisków z różnymi atrybutami text nie różni się wizualnie. Jedynym wyjątkiem jest sytuacja, gdy tekst jest czytany w celu ułatwienia dostępu.

Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagany	Przykład
tekst	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ę w 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 tabeli poniżej:

Typ	Wymagany	Przykład
tekst	Opcjonalnie	shape: "rectangular"

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

Kształt
rectangular	Prostokątny przycisk. Jeśli jest używany z przyciskiem icon, działa tak samo jak square.
pill	Przycisk w kształcie pigułki. Jeśli jest używany z przyciskiem icon, działa tak samo jak circle.
circle	Przycisk w kształcie okręgu. Jeśli jest używany z przyciskiem standard, działa tak samo jak pill.
square	Kwadratowy przycisk Jeśli jest używany z przyciskiem standard, działa tak samo jak rectangular.

wyrównanie_logo

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

Typ	Wymagany	Przykład
tekst	Opcjonalnie	logo_alignment: "center"

W tabeli poniżej znajdziesz dostępne wyrównania i ich opisy:

wyrównanie_logo
left	Logo Google jest wyrównane do lewej strony.
center	Wyrównuje logo Google do środka.

szerokość

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

Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagany	Przykład
tekst	Opcjonalnie	width: 400

język

Opcjonalnie. Wyświetlaj tekst przycisku w określonym języku. W przeciwnym razie domyślnie wyświetlają się ustawienia konta Google lub przeglądarki użytkownika. Dodaj parametr hl i kod języka do dyrektywy src podczas wczytywania biblioteki, na przykład gsi/client?hl=<iso-639-code>.

Jeśli zasada nie jest skonfigurowana, używane jest domyślne ustawienie przeglądarki lub sesja Google użytkownika. Różni użytkownicy mogą mieć różne wersje zlokalizowanych przycisków, a nawet ich różne rozmiary.

Więcej informacji znajdziesz w tej tabeli:

Typ	Wymagany	Przykład
tekst	Opcjonalnie	locale: "zh_CN"

kliknięcie_listy_odbiorców

Możesz zdefiniować funkcję JavaScript, która będzie wywoływana po kliknięciu przycisku 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 powyższym przykładzie po kliknięciu przycisku Zaloguj się przez Google w konsoli będzie wyświetlana informacja Kliknięcie przycisku Zaloguj się przez Google....

Typ danych: dane logowania

Po wywołaniu funkcji native_callback jako parametr przekazywany jest obiekt Credential. Poniższa tabela zawiera 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 rejestrować jej stan w plikach cookie. Zapobiegnie to niepowodzeniu pętli UX. Zobacz ten fragment kodu metody:

google.accounts.id.disableAutoSelect()

Poniższy 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

Jest to prosty kod towarzyszący store() metody natywnego interfejsu menedżera danych logowania w przeglądarce. Dlatego można go używać tylko do przechowywania danych logowania do konta. Oto przykładowy kod metody:

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

Poniższy 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 usunąć przepływ jednym dotknięciem, jeśli usuniesz monit z DOMu jednostki uzależnionej. Operacja anulowania jest ignorowana, jeśli dane logowania są już wybrane. Przeanalizuj przykładowy kod metody:

google.accounts.id.cancel()

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

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

Wywołanie zwrotne ładowania biblioteki: onGoogleLibraryLoad

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

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

To wywołanie zwrotne to tylko skrót wywołania window.onload. Nie ma różnic w działaniu.

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 anuluje przyznanie protokołu OAuth służącego do udostępniania tokena identyfikatora określonego użytkownika. Obejrzyj ten fragment kodu metody: google.accounts.id.revoke(hint, callback)

Parametr	Typ	Opis
hint	tekst	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 korzystać z metody revoke z identyfikatorem.

  google.accounts.id.revoke('1618033988749895', done => {
    console.log(done.error);
  });

Typ danych: RevocationResponse

Gdy funkcja callback jest wywoływana, parametr jest przekazywany jako obiekt RevocationResponse. Poniższa tabela zawiera pola, które znajdują się w obiekcie odpowiedzi unieważnienia:

Pole
successful	To pole to wartość zwracana 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ą „true”, jeśli wywołanie metody wywołania zakończyło się niepowodzeniem lub „false” (fałsz).

błąd

To pole jest ciągiem znaków i zawiera szczegółowy komunikat o błędzie, jeśli wywołanie metody unieważnienia nie powiodło się. Proces ten jest niezdefiniowany.