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” |
domena_plików cookie
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
ihttps://*.co.uk
są nieprawidłowe. Jak wspomnieliśmy wcześniej, tag"https://*.example.com"
będzie zgodny zexample.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 domenexample1.com
,example2.com
i subdomen domenyexample2.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:
|
isSkippedMoment() |
Czy to powiadomienie nie wyświetla się na chwilę? |
getSkippedReason() |
Szczegółowa przyczyna pominięcia momentu. Oto możliwe wartości:
|
isDismissedMoment() |
Czy to powiadomienie jest odrzucone? |
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
. 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, ahd
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:
![]() ![]() ![]() |
medium |
Średni rozmiar przycisku: ![]() ![]() |
small |
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.