Dodaj do swojej witryny prompt „Zarejestruj się jednym kliknięciem”, aby umożliwić użytkownikom rejestrowanie się lub logowanie w aplikacji internetowej. Aby renderować i dostosowywać prompt, użyj kodu HTML i JavaScript.
Wymagania wstępne
Aby skonfigurować ekran zgody OAuth, uzyskać identyfikator klienta i wczytać bibliotekę klienta, wykonaj czynności opisane w sekcji Konfiguracja.
Dodaj przycisk Zaloguj się przez Google na stronie logowania.
Renderowanie promptu
Umieść fragment kodu na wszystkich stronach, na których chcesz wyświetlać funkcję One Tap.
HTML
Wyświetlić prompt One Tap, zwracając dane logowania JWT do punktu końcowego logowania.
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-your_own_param_1_to_login="any_value"
data-your_own_param_2_to_login="any_value">
</div>
Atrybut data-login_uri
to identyfikator URI punktu logowania w aplikacji internetowej. Możesz dodawać niestandardowe atrybuty danych, które są wysyłane do punktu logowania wraz z tokenem identyfikacyjnym wydanym przez Google.
Użyj atrybutu data-context
, aby zmienić tekst użyty w tytule prompta.
Na przykład data-context: "signup"
zmienia „Zaloguj się w” na „Zarejestruj się w”.
Pełną listę obsługiwanych atrybutów znajdziesz w sekcji g_id_onload
dokumentacji.
JavaScript
Wyświetlić prompt One Tap, zwracając dane logowania JWT do modułu obsługi wywołania zwrotnego JavaScriptu w przeglądarce.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt();
}
</script>
Aby skonfigurować prompt One Tap w JavaScript, musisz najpierw wywołać metodę initialize()
. Następnie wywołaj metodę prompt()
, aby wyświetlić prompt interfejsu użytkownika.
Aby zmienić tekst używany w tytule prompta, użyj pola context
.
Na przykład context: 'signup'
zmienia „Zaloguj się w” na „Zarejestruj się w”.
Pełną listę opcji danych znajdziesz w opisie idConfiguration
.
Stan promptu
Aby odbierać powiadomienia o stanie promptu w interfejsie, użyj funkcji wywołania zwrotnego w JavaScript.
Powiadomienia są wysyłane w tych momentach:
Moment wyświetlania: następuje po wywołaniu metody
prompt()
. Powiadomienie zawiera wartość logiczną wskazującą, czy interfejs użytkownika jest wyświetlany.Pominięcie momentu: występuje, gdy prośba o jeden klik jest zamknięta przez automatyczne anulowanie, ręczne anulowanie lub gdy Google nie może wydać danych logowania, na przykład gdy wybrana sesja jest wylogowana z Google.
W takim przypadku zalecamy przejście do następnego dostawcy tożsamości, jeśli taki istnieje.
Moment odrzucenia: występuje, gdy Google pomyślnie odzyska dane logowania lub użytkownik chce przerwać proces ich pobierania. Gdy na przykład użytkownik zacznie wpisywać nazwę użytkownika i hasło w oknie logowania, możesz wywołać metodę
google.accounts.id.cancel()
, aby zamknąć prompt „Jedno kliknięcie” i wywołać moment odrzucenia.
HTML
Aby określić funkcję wywołania zwrotnego JavaScript, użyj atrybutu data-moment_callback
. Aby otrzymywać powiadomienia, musisz użyć wywołania zwrotnego.
<html>
<head>
<script>
function continueWithNextIdp(notification) {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try Next provider if One Tap is not displayed or skipped
}
}
</script>
</head>
<body>
...
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-moment_callback="continueWithNextIdp"
</div>
...
</body>
</html>
Aby ułatwić użytkownikom logowanie się lub rejestrowanie, możesz komunikować się z wieloma dostawcami tożsamości, aby znaleźć dostępne dane logowania. Możesz chcieć znać stan interfejsu promptu, aby móc wywołać następnego dostawcę tożsamości.
JavaScript
Przekaż uchwyt wywołania zwrotnego jako parametr do funkcji google.accounts.id.prompt
, która używa funkcji strzałki do obsługi aktualizacji powiadomień.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt((notification) => {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try next provider if OneTap is not displayed or skipped
}
});
}
</script>
Przycisk i prompt
Przycisk Zaloguj się przez Google i prośba o zalogowanie się jednym dotknięciem mogą być wyświetlane na jednej stronie.
HTML
Wyświetlaj przycisk Zaloguj się przez Google i prośbę o zalogowanie się jednym dotknięciem, dodając elementy g_id_onload
i g_id_signin
.
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-context="signin"
data-ux_mode="redirect"
data-login_uri="https://your.domain/your_login_endpoint"
data-itp_support="true">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left">
</div>
JavaScript
Wyświetl przycisk Zaloguj się przez Google i prośbę o zalogowanie się jednym dotknięciem, wywołując jednocześnie funkcje renderButton()
i prompt()
.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
const parent = document.getElementById('google_btn');
google.accounts.id.renderButton(parent, {theme: "filled_blue"});
google.accounts.id.prompt();
}
</script>
Nie zasłaniaj przycisku One Tap
Ta sekcja ma zastosowanie tylko wtedy, gdy funkcja FedCM jest wyłączona. Jeśli funkcja FedCM jest włączona, przeglądarka wyświetla prompty dla użytkownika u góry treści strony.
Aby użytkownicy mogli zobaczyć wszystkie wyświetlane informacje, Google One Tap nie może być objęty żadną inną treścią. W przeciwnym razie w niektórych przypadkach mogą się wyświetlać wyskakujące okienka.
Sprawdź układ strony i właściwości indeksu Z elementów, aby mieć pewność, że Google One Tap nie jest w żadnym momencie przysłonięty przez inne treści. Zmiana przepływu interfejsu użytkownika może zostać wywołana, nawet jeśli pokryta jest tylko część piksela na krawędziach.
Odpowiedź dotycząca danych logowania
Odpowiedź z danymi uwierzytelniania zawiera podpisany przez Google token JWT. Odpowiedź jest zwracana do przeglądarki za pomocą funkcji wywołania zwrotnego JavaScript lub do Twojej platformy przez przekierowanie do punktu logowania.
wywołanie zwrotne JS,
Aby skonfigurować wywołanie zwrotne, użyj kodu HTML lub JavaScript.
HTML
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-callback="YOUR_CALLBACK_HANDLER"
</div>
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
Na przykład handleCredentialResponse
dekoduje token JWT i wypisuje niektóre pola tokenu identyfikacyjnego w konsoli.
<script>
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse
});
function handleCredentialResponse(response) {
const responsePayload = decodeJwtResponse(response.credential);
console.log("ID: " + responsePayload.sub);
console.log('Full Name: ' + responsePayload.name);
console.log('Given Name: ' + responsePayload.given_name);
console.log('Family Name: ' + responsePayload.family_name);
console.log("Image URL: " + responsePayload.picture);
console.log("Email: " + responsePayload.email);
}
function decodeJwtResponse(token) {
let base64Url = token.split('.')[1];
let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
let jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return JSON.parse(jsonPayload);
}
</script>
Przekierowanie
Aby zwrócić dane logowania do punktu logowania platformy, dodaj adres URL do ustawień autoryzowanego identyfikatora URI przekierowania w kliencie internetowym OAuth 2.0.
Aby skonfigurować identyfikator URI przekierowania, użyj kodu HTML lub JavaScript.
HTML
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-ux_mode="redirect"
data-login-uri="YOUR_LOGIN_URI"
</div>
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
ux_mode: 'redirect',
login_uri: 'YOUR_LOGIN_URI'
});