Dokumentacja API Zaloguj się przez Google JavaScript

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Na tej stronie znajdziesz opis interfejsu API logowania JavaScript. Za pomocą tego interfejsu API możesz wyświetlać na swoich stronach internetowych informacje jednym kliknięciem 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. Zobacz przykładowy kod z tą metodą:

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.

  • Wywoływanie metody google.accounts.id.initialize jest konieczne tylko raz, nawet jeśli na tej samej stronie internetowej korzystasz z kilku modułów (takich jak 1 kliknięcie, spersonalizowany przycisk, unieważnienie itp.).
  • Jeśli wywołasz metodę google.accounts.id.initialize wiele razy, zostaną zapamiętane i użyte tylko konfiguracje użyte w ostatnim wywołaniu.

Konfiguracje są resetowane po każdym wywołaniu metody google.accounts.id.initialize, a wszystkie kolejne metody na tej samej stronie internetowej będą korzystać z nowych konfiguracji od razu.

Typ danych: idConfiguration

Poniższa tabela zawiera pola i opisy typów 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 w Google One Tap i przycisku Zaloguj się przez Google popup.
login_uri URL punktu końcowego logowania. Z tego atrybutu korzysta przycisk przycisku Zaloguj się przez Google redirect Tryb UX.
native_callback Funkcja JavaScript, która obsługuje dane logowania do hasła.
cancel_on_tap_outside Anuluje pytanie, jeśli użytkownik je kliknie.
prompt_parent_id Identyfikator DOM elementu kontenera One Tap
nonce Losowy ciąg tokenów tożsamości
context tytuł i słowa w wyświetlonym komunikacie jednym dotknięciem.
state_cookie_domain Jeśli chcesz wywołać One Tap w domenie nadrzędnej i jej subdomenach, przekaż domenę nadrzędną do tego pola, tak aby był używany jeden udostępniony plik cookie.
ux_mode Przycisk Zaloguj się przez Google – interfejs UX
allowed_parent_origin Źródła, które mogą umieszczać pośredni element iframe. Jeśli pole jest dostępne, jednym kliknięciem zostanie uruchomione w pośrednim trybie elementu iframe.
intermediate_iframe_close_callback Zastępuje domyślny pośredni element iframe, gdy użytkownik ręcznie zamknie 1 kliknięcie.
itp_support Włącza uaktualnioną funkcję One Tap w przeglądarkach ITP.

client_id

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

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

wybór automatyczny

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

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

wywołanie zwrotne

To pole to funkcja JavaScriptu, która obsługuje token identyfikatora zwracany przez komunikat One Tap lub wyskakujące okienko. Ten atrybut jest wymagany, jeśli jest używany tryb Google One lub przycisk Zaloguj się przez Google popup. Więcej informacji znajdziesz w tej tabeli:

Typ Wymagany Przykład
funkcja Wymagany w przypadku One Tap i trybu UX popup callback: handleResponse

login_uri

Ten atrybut to identyfikator URI punktu końcowego logowania. Może zostać pominięty, jeśli bieżąca strona jest stroną logowania. W takim przypadku dane logowania są domyślnie publikowane na tej stronie.

Odpowiedź dotycząca identyfikatora logowania tokena jest wyświetlana 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 Opcjonalna Przykład
URL Domyślnie przyjmuje identyfikator URI bieżącej strony lub określoną przez Ciebie wartość.
Używana 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

natywne_oddzwonienie

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

Typ Wymagany Przykład
funkcja Opcjonalna native_callback: handleResponse

anuluj_nadużycie

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

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

potwierdzenie_identyfikatora_nadrzędnego

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

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

liczba jednorazowa

To pole jest losowym ciągiem używanym przez token identyfikatora do zapobiegania atakom ponownego odtwarzania. Więcej informacji znajdziesz w tej tabeli:

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

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

sytuacja

W tym polu zmieni się tytuł i treść wiadomości. Więcej informacji znajdziesz w tej tabeli:

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

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

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

Jeśli w domenie nadrzędnej i jej subdomenach chcesz wyświetlić 1 kliknięcie, przekaż domenę nadrzędną do tego pola, tak aby był używany jeden plik cookie stanu udostępniania. Więcej informacji znajdziesz w tej tabeli:

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

tryb_ux

Użyj tego pola, aby 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 OneTap UX. Więcej informacji znajdziesz w tej tabeli:

Typ Wymagany Przykład
tekst Opcjonalna 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 Wykonywanie logowania w interfejsie użytkownika przez pełne przekierowanie.

dozwolone_miejsce_nadrzędne

Źródła, które mogą umieszczać pośredni element iframe. Jeśli pole jest dostępne, jednym kliknięciem wyświetli się pośredni tryb iframe. Więcej informacji znajdziesz w tej tabeli:

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

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

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

Obsługiwane są także 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 trzeba pamiętać podczas korzystania z symboli wieloznacznych:

  • Ciągi tekstowe wzorców nie mogą się składać wyłącznie z symbolu wieloznacznego i domeny najwyższego poziomu. Na przykład atrybuty https://*.com i https://*.co.uk są nieprawidłowe. Jak wspomnieliśmy wcześniej, tag "https://*.example.com" będzie zgodny z example.com i jej subdomenami. Można też użyć tablicy do reprezentowania 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 protokołu https://. "*.example.com" zostanie uznane za nieprawidłowe.

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

wywołanie pośrednie_iframe_close_callback

Zastępuje domyślne ustawienie pośredniego elementu iframe po ręcznym zamknięciu przez jednokrotne dotknięcie przycisku „X” w interfejsie One Tap. Domyślne działanie to natychmiastowe usunięcie pośredniego elementu iframe z elementu 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. Interfejs One Tap zostaje usunięty przed wywołaniem wywołania zwrotnego.

Typ Wymagany Przykład
funkcja Opcjonalna intermediate_iframe_close_callback: logBeforeClose

taka_pomoc

To pole określa, czy nowa wersja UX w ramach 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 tej tabeli:

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

Metoda: google.accounts.id.prompt

Metoda google.accounts.id.prompt wyświetla zapytanie One Tap lub natywny menedżer danych logowania w przeglądarce po wywołaniu metody initialize(). Zobacz przykładowy kod z tą metodą:

 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 poleceń One Tap może się nie wyświetlać. Aby otrzymywać powiadomienia o stanie interfejsu w różnych momentach, musisz przekazać jedną z funkcji powiadomień.

Powiadomienia są uruchamiane w tych momentach:

  • Wyświetlenie momentu: ma to miejsce po wywołaniu metody prompt(). Powiadomienie zawiera wartość logiczną określającą, czy interfejs jest wyświetlany.
  • Pominięty moment: gdy ma się zamknąć potwierdzenie jednym dotknięciem za pomocą automatycznego anulowania, ręczne anulowanie lub gdy Google nie wyda danych uwierzytelniających, np. gdy Google wyloguje się z wybranej sesji.

    W takiej sytuacji zalecamy przejście do następnego dostawcy tożsamości, jeśli taki istnieje.

  • Moment zamknięty: ma to miejsce, gdy Google pobiera dane logowania lub chce zatrzymać proces ich pobierania. Na przykład, gdy 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 One Tap i wyzwolić zamknięcie.

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

W tej tabeli podano metody i opisy typów danych PromptMomentNotification:

Metoda
isDisplayMoment() Czy to powiadomienie wyświetla się na chwilę?
isDisplayed() Czy to powiadomienie wyświetla się w czasie wyświetlania, a interfejs jest widoczny?
isNotDisplayed() Czy to powiadomienie wyświetla się w czasie, a interfejs nie jest wyświetlany?
getNotDisplayedReason()

Szczegółowy powód, dla którego interfejs użytkownika nie jest wyświetlany. 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 nie wyświetla się na chwilę?
getSkippedReason()

Szczegółowa przyczyna pominięcia momentu. Oto możliwe wartości:

  • auto_cancel
  • user_cancel
  • tap_outside
  • issuing_failed
isDismissedMoment() Czy to powiadomienie jest odrzucone?
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. Poniższa tabela zawiera pola, które znajdują się 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.

certyfikat

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

Po zdekodowaniu token JWT wygląda jak w poniższym 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 zawiera unikalny globalnie identyfikator konta Google.

Pola email, email_verified i hd pozwalają określić, czy Google hostuje dany adres e-mail i jest wiarygodny. W przypadkach, gdy firma Google jest wiarygodna, użytkownik jest obecnie znany jako uprawniony właściciel konta.

Przypadki, w których Google jest wiarygodny:

  • email ma sufiks @gmail.com. To jest konto Gmail.
  • email_verified ma wartość Prawda, a hd jest skonfigurowane. Jest to konto G Suite.

Użytkownicy mogą rejestrować konta Google bez korzystania z Gmaila ani G Suite. Jeśli email nie zawiera sufiksu @gmail.com, a hd nie jest potwierdzony, Google nie jest wiarygodne, a hasło lub inne metody weryfikacji są zalecane do zweryfikowania użytkownika. email_verfied może też mieć wartość prawda, ponieważ podczas tworzenia konta Google weryfikowano użytkownika, ale własność konta e-mail osoby trzeciej mogła ulec zmianie.

wybierz

W tabeli poniżej znajdziesz możliwe wartości pola select_by. Typ przycisku używany wraz z sesją i stanem zgody jest używany do określenia wartości.

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

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

  • Przed udostępnieniem aplikacji danych logowania tokena tożsamości użytkownika

    • kliknij przycisk Potwierdź, aby wyrazić zgodę na udostępnianie danych logowania, lub
    • wyraziła wcześniej 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 dotychczasową sesją, która wcześniej wyraziła zgodę na udostępnianie danych logowania.
user Użytkownik z dotychczasową sesją, która wcześniej wyraziła zgodę, naciskał przycisk „Dalej jako”, aby udostępnić dane logowania.
user_1tap Użytkownik, który ma już sesję, nacisnął przycisk „Kontynuuj jako”, aby wyrazić zgodę i udostępnić dane logowania. Dotyczy tylko Chrome w wersji 75 i nowszych.
user_2tap Użytkownik bez istniejącej sesji 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 innych niż Chromium.
btn Użytkownik z dotychczasową sesją, która wcześniej wyraziła zgodę, nacisnął przycisk Zaloguj się przez Google i wybierze konto Google z listy „Wybierz konto”, aby udostępnić dane logowania.
btn_confirm Użytkownik, który był już w sesji, kliknął przycisk Zaloguj się przez Google, a potem przycisk Potwierdź, aby wyrazić zgodę i udostępnić dane logowania.
btn_add_session Użytkownik bez istniejącej 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.

Zobacz przykładowy kod z tą metodą:

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

Typ danych: GsiButtonConfiguration

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

Atrybut
type Typ przycisku: ikona lub przycisk standardowy.
theme Motyw przycisku. np. filled_blue lub filled_black.
size Rozmiar przycisku. np. małe lub duże.
text Tekst przycisku. np. „Zaloguj się przez Google” lub „Zarejestruj się w 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 ustawisz tę opcję, język przycisku będzie renderowany.
click_listener Jeśli skonfigurujesz tę funkcję, będzie ona wywoływana po kliknięciu przycisku Zaloguj się przez Google.

Typy atrybutów

Poniższe sekcje zawierają szczegółowe informacje na temat typu atrybutu i przykład.

typ

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

Więcej informacji znajdziesz w tej tabeli:

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

Poniższa tabela zawiera 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 tej tabeli:

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

W poniższej tabeli znajdziesz dostępne motywy i ich opisy:

Motyw
outline Standardowy motyw przycisku:
filled_blue Motyw przycisku niebieskiego:
filled_black Motyw przycisku czarnego:

rozmiar

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

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

Tabela poniżej zawiera dostępne rozmiary przycisków i ich opisy:

Rozmiar
large Duży przycisk:
Duży przycisk standardowy Duży przycisk z ikoną Duży, spersonalizowany przycisk
medium Średni rozmiar przycisku:
Średni standardowy przyciskPrzycisk średniej ikony
small Mały przycisk:
Mały przycisk Mały przycisk

plik tekstowy,

Tekst przycisku. Wartością domyślną jest signin_with. Ikony przycisków nie różnią się wizualnie w tekście, ale mają inny atrybut text. Jedynym wyjątkiem jest odczytywanie tekstu na potrzeby ułatwień dostępu na ekranie.

Więcej informacji znajdziesz w tej tabeli:

Typ Wymagany Przykład
tekst Opcjonalna text: "signup_with"

Tabela poniżej zawiera dostępne teksty 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 tej tabeli:

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

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

Kształt
rectangular Prostokątny przycisk. W przypadku typu przycisku icon jest on taki sam jak square.
pill Przycisk w kształcie pigułki. W przypadku typu przycisku icon jest on taki sam jak circle.
circle Przycisk w kształcie okręgu. W przypadku typu przycisku standard jest on taki sam jak pill.
square Kwadratowy przycisk. W przypadku typu przycisku standard jest on taki sam 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 Opcjonalna logo_alignment: "center"

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

wyrównanie_logo
left Wyrównaj logo do lewej.
center Wyśrodkowuje logo Google.

szerokość

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

Więcej informacji znajdziesz w tej tabeli:

Typ Wymagany Przykład
tekst Opcjonalna width: 400

język

Gotowe ustawienia tekstu przycisku. Jeśli zasada nie jest skonfigurowana, używane są domyślne ustawienia przeglądarki oraz ustawienia sesji Google. Dlatego różni użytkownicy mogą widzieć różne wersje zlokalizowanych przycisków i mogą mieć inne rozmiary.

Więcej informacji znajdziesz w tej tabeli:

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

lista_odbiorców_kliknięć

Możesz zdefiniować funkcję JavaScriptu, 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 komunikat Kliknij przycisk Zaloguj się przez Google pojawi się w konsoli po kliknięciu 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 zapętleniu 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 metody store() w natywnym interfejsie API zarządzania danymi logowania w przeglądarce. Dlatego mogą być używane tylko do przechowywania danych logowania. Zobacz przykładowy kod z tą metodą:

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 anulować proces One Tap, gdy usuniesz potwierdzenie z DOMu jednostki bazowej. Operacja anulowania jest ignorowana, jeśli dane logowania są już wybrane. Zobacz przykładowy kod z tą metodą:

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 biblioteki: onGoogleLibraryLoad

Możesz zarejestrować wywołanie zwrotne onGoogleLibraryLoad. Po wczytaniu biblioteki JavaScript Zaloguj się przez Google zostanie to wysłane:

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

To wywołanie zwrotne jest tylko skrótem wywołania zwrotnego window.onload. Nie ma żadnych różnic 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 anuluje przypisanie OAuth używane do udostępniania tokena identyfikatora określonego użytkownika. Zobacz 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 to właściwość sub ładunku credential (ładunku).
callback funkcja Opcjonalny moduł obsługi RevocationResponse.

Poniższy przykładowy kod pokazuje, jak użyć metody revoke z identyfikatorem.

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

Typ danych: RevocationResponse

Po wywołaniu funkcji callback jako parametr przekazywany jest 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.

powodzenie

To pole ma wartość logiczną „true”, jeśli wywołanie metody wywołania zakończyło się powodzeniem lub „false” w przypadku niepowodzenia.

błąd

To pole jest ciągiem znaków i zawiera szczegółowy komunikat o błędzie, jeśli nie udało się wywołać metody unieważnienia, jest ono nieokreślone pod kątem powodzenia.