Dodaj do swojej witryny przycisk Zaloguj się przez Google, aby umożliwić użytkownikom rejestrację lub logowanie się w Twojej aplikacji internetowej. Użyj kodu HTML lub JavaScript, aby renderować przycisk i jego atrybuty, aby dostosować kształt, rozmiar, tekst i motyw przycisku.
Gdy użytkownik wybierze konto Google i wyrazi zgodę, Google udostępni jego profil za pomocą tokena internetowego JSON (JWT). Omówienie czynności związanych z logowaniem się i wrażeniami użytkownika znajdziesz w artykule Jak to działa. Informacje o przycisku spersonalizowanym zawiera informacje o różnych warunkach i stanach wpływające na sposób jego wyświetlania użytkownikom.
Wymagania wstępne
Przed dodaniem przycisku do strony logowania wykonaj następujące czynności:
- Wykonaj czynności opisane w sekcji Konfiguracja, aby skonfigurować ekran zgody OAuth i uzyskać identyfikator klienta.
- Wczytaj bibliotekę klienta.
Renderowanie przycisku
Aby wyświetlić przycisk Zaloguj się przez Google, możesz wybrać kod HTML lub JavaScript, który będzie renderowany na stronie logowania:
HTML
Renderuj przycisk logowania za pomocą kodu HTML, zwracając token JWT do punktu końcowego logowania na platformę.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async></script>
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="standard"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
<body>
</html>
Element z klasą g_id_signin
renderuje się jako przycisk Zaloguj się przez Google.
Przycisk jest dostosowywany na podstawie parametrów podanych w atrybutach danych.
Aby wyświetlać przycisk Zaloguj się przez Google i Google One Tap na tej samej stronie, usuń data-auto_prompt="false"
. Warto to zrobić, aby zmniejszyć liczbę problemów i poprawić współczynnik logowania.
Pełną listę atrybutów danych znajdziesz na stronie z informacjami o g_id_signin
.
JavaScript
Renderuj przycisk logowania za pomocą JavaScriptu, zwracając token JWT do modułu obsługi wywołania zwrotnego JavaScript przeglądarki.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async></script>
<script>
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: "YOUR_GOOGLE_CLIENT_ID"
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large" } // customization attributes
);
google.accounts.id.prompt(); // also display the One Tap dialog
}
</script>
<div id="buttonDiv"></div>
</body>
</html>
Element określony jako pierwszy parametr funkcji renderButton
wyświetla się jako przycisk Zaloguj się przez Google. W tym przykładzie przycisk buttonDiv
służy do renderowania przycisku na stronie. Przycisk jest dostosowywany za pomocą atrybutów określonych w drugim parametrze renderButton
.
Aby zminimalizować niedogodności, w aplikacji google.accounts.id.prompt()
wyświetla się jedno dotknięcie jako druga alternatywa dla rejestracji lub logowania się za pomocą przycisku.
Biblioteka GIS analizuje dokument HTML pod kątem elementów z atrybutem identyfikatora ustawionym na g_id_onload
lub atrybutami klas zawierającymi g_id_signin
. Po znalezieniu pasującego elementu przycisk jest renderowany w języku HTML, niezależnie od tego, czy został on wyrenderowany także w języku JavaScript. Aby uniknąć dwukrotnego wyświetlenia przycisku, być może z parametrami powodującymi konflikt nie umieszczaj na stronach HTML elementów HTML pasujących do tych nazw.
Język przycisku
Język przycisku jest określany automatycznie na podstawie domyślnego języka przeglądarki lub ustawień użytkownika sesji Google. Język możesz też wybrać ręcznie, dodając parametr hl
i kod języka do dyrektywy src podczas wczytywania biblioteki oraz dodając opcjonalny parametr data-locale lub język data-locale w kodzie HTML lub języka w kodzie JavaScript.
HTML
Poniższy fragment kodu pokazuje, jak wyświetlać język przycisku w języku francuskim, dodając parametr hl
do adresu URL biblioteki klienta i ustawiając atrybut data-locale
na francuski:
<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>
JavaScript
Ten fragment kodu pokazuje, jak wyświetlić język przycisku w języku francuskim, dodając parametr hl
do adresu URL biblioteki klienta i wywołując metodę google.accounts.id.renderButton
z parametrem locale
ustawionym na język francuski:
<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ locale: "fr" }
);
</script>
Obsługa danych logowania
Po udzieleniu zgody użytkownika Google zwraca dane logowania tokenu internetowego (JWT) JSON (token identyfikatora) do przeglądarki użytkownika lub bezpośrednio do punktu końcowego logowania hostowanego przez Twoją platformę.
Miejsce otrzymania tokena JWT zależy od tego, czy wyrenderujesz przycisk za pomocą HTML czy JavaScriptu i czy używany jest tryb UX wyskakującego lub przekierowania.
Tryb wyskakującego okienka
Używanie trybu UX popup
umożliwia proces logowania w wyskakującym okienku. Zazwyczaj jest to mniej uciążliwe dla użytkowników i jest domyślnym trybem UX.
Podczas renderowania przycisku z użyciem:
HTML
Możesz wybrać jedną z tych opcji:
data-callback
, aby zwrócić token JWT do modułu obsługi wywołania zwrotnego, lubdata-login_uri
, aby umożliwić Google wysłanie tokena JWT bezpośrednio do punktu końcowego logowania za pomocą żądania POST.
Jeśli ustawisz obie wartości, data-callback
ma pierwszeństwo przed wartością data-login_uri
. Ustawienie obu wartości może być przydatne, jeśli do debugowania używasz modułu obsługi wywołania zwrotnego.
JavaScript
Musisz określić właściwość callback
. Tryb wyskakującego okienka nie obsługuje przekierowań podczas wypożyczania przycisku w kodzie JavaScript. Jeśli zasada jest skonfigurowana, login_uri
jest ignorowana.
Więcej informacji o dekodowaniu tokena JWT w module obsługi wywołania zwrotnego JS znajdziesz w artykule o obsłudze zwróconej odpowiedzi z danymi logowania.
Tryb przekierowania
W trybie UX redirect
proces logowania jest realizowany z wykorzystaniem pełnego przekierowania do strony przeglądarki użytkownika. Google zwraca token JWT bezpośrednio do punktu końcowego logowania za pomocą żądania POST.
Jest to zwykle bardziej uciążliwe, ale uważa się za najbezpieczniejszą metodę logowania.
Podczas renderowania przycisku z użyciem:
- HTML opcjonalnie ustaw
data-login_uri
jako identyfikator URI punktu końcowego logowania. - JavaScript opcjonalnie ustaw
login_uri
jako identyfikator URI punktu końcowego logowania.
Jeśli nie podasz wartości, Google zwróci token JWT do identyfikatora URI bieżącej strony.
Identyfikator URI punktu końcowego logowania
Podczas ustawiania data-login_uri
lub login_uri
użyj protokołu HTTPS i bezwzględnego identyfikatora URI.
Na przykład: https://example.com/path
.
Protokół HTTP jest dozwolony tylko w przypadku korzystania z hosta lokalnego podczas programowania: http://localhost/path
.
Pełny opis wymagań Google i reguł weryfikacji znajdziesz w artykule Korzystanie z bezpiecznych źródeł JavaScript i identyfikatorów URI przekierowania.