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.
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
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
ihttps://*.co.uk
są nieprawidłowe. Jak już wspomnieliśmy, ciąg"https://*.example.com"
pasuje doexample.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 domenexample1.com
,example2.com
i subdomenexample2.com
- Domeny z symbolem wieloznacznym muszą zaczynać się od bezpiecznego schematu https://, dlatego
"*.example.com"
jest uważany za nieprawidłowy.
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: 'elisa.beckett@gmail.com' |
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żytkownik@gmail.com).
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.
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>
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:
|
isSkippedMoment() |
Czy to powiadomienie pojawia się w momencie pominięcia? |
getSkippedReason() |
Szczegółowa przyczyna pominięcia momentu. Oto możliwe wartości:
|
isDismissedMoment() |
Czy to powiadomienie dotyczy momentu odrzucenia? |
getDismissedReason() |
Szczegółowa przyczyna odrzucenia. Oto możliwe wartości:
|
getMomentType() |
Zwraca ciąg znaków odpowiadający typowi momentu. Oto możliwe wartości:
|
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": "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.
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, ahd
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 |
![]() ![]() |
icon |
![]() |
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 |
![]() ![]() ![]() |
filled_blue |
![]() ![]() ![]() |
filled_black |
![]() ![]() ![]() |
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 |
![]() ![]() ![]() |
medium |
![]() ![]() |
small |
![]() ![]() |
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 |
![]() ![]() |
signup_with |
![]() ![]() |
continue_with |
![]() ![]() |
signin |
![]() ![]() |
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 |
![]() ![]() ![]() icon , jest taki sam jak square .
|
pill |
![]() ![]() ![]() icon , jest taki sam jak circle .
|
circle |
![]() ![]() ![]() standard , jest taki sam jak pill .
|
square |
![]() ![]() ![]() standard , jest taki sam jak rectangular .
|
logo_alignment
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 |
![]() |
center |
![]() |
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); });
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.