1. Omówienie
W ramach tego ćwiczenia w Codelabs utworzymy prostą stronę internetową do logowania się. Do wyświetlania i dostosowywania przycisku Zaloguj się przez Google będziesz używać biblioteki JavaScript Google Identity Services.
Czego się nauczysz
- Dodawanie przycisku Zaloguj się przez Google do strony internetowej
- Jak skonfigurować aplikację internetową OAuth 2.0
- Jak zdekodować token identyfikatora
- Dostosowywanie przycisku Zaloguj się przez Google
Czego potrzebujesz
- Edytor tekstu i miejsce do hostowania strony internetowej oraz środowiska, które omówimy w tym ćwiczeniu z programowania:
- uruchomione lokalnie w terminalu na komputerze lub
- przy użyciu takiej platformy jak Glitch.
- projekt Google Cloud, Możesz użyć istniejącego projektu lub utworzyć nowy. Konto i projekt Google Cloud Platform są bezpłatne.
- Podstawowa znajomość języka HTML, CSS, JavaScript i Narzędzi deweloperskich w Chrome (lub ich odpowiedników).
Zaczynamy.
2. Utwórz stronę logowania
Dodaj ten przykładowy kod do pliku o nazwie index.html. Możesz to zrobić na komputerze za pomocą ulubionego edytora tekstu lub na platformie takiej jak Glitch.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://accounts.google.com/gsi/client" async></script>
<script>
function decodeJWT(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);
}
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
const responsePayload = decodeJWT(response.credential);
console.log("Decoded JWT ID token fields:");
console.log(" Full Name: " + responsePayload.name);
console.log(" Given Name: " + responsePayload.given_name);
console.log(" Family Name: " + responsePayload.family_name);
console.log(" Unique ID: " + responsePayload.sub);
console.log(" Profile image URL: " + responsePayload.picture);
console.log(" Email: " + responsePayload.email);
}
</script>
</head>
<body>
<!-- g_id_onload contains Google Identity Services settings -->
<div
id="g_id_onload"
data-auto_prompt="false"
data-callback="handleCredentialResponse"
data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE"
></div>
<!-- g_id_signin places the button on a page and supports customization -->
<div class="g_id_signin"></div>
</body>
</html>
Ten kod to połączenie języków HTML i JavaScript. Pełni funkcje, takie jak:
- konfiguruje tę bibliotekę usług tożsamości Google przy użyciu:
g_id_onload, - wyświetla przycisk Zaloguj się przez Google, używając
g_id_signin, - dodaje moduł obsługi wywołań zwrotnych JavaScript o nazwie
handleCredentialResponsew celu otrzymywania danych logowania użytkownika z Google, - funkcję
decodeJWTdo konwersji danych logowania JWT (tokeny internetowe JSON) na zwykły plik JSON.
Coś może być nie tak z usługą data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE".
Na razie po prostu to zignoruj – wrócimy do tego za chwilę.
3. Wyświetlanie strony internetowej
Omówimy 2 środowiska wyświetlania index.html w przeglądarce:
- uruchamianie serwera WWW lokalnie na komputerze,
- z platformy zdalnej, takiej jak Glitch.
Wybierz tę, która najbardziej Ci odpowiada. Po zakończeniu konfiguracji użyjemy tego adresu URL do skonfigurowania klienta internetowego OAuth.
Lokalnie z Twojego komputera
Upewnij się, że w systemie jest zainstalowany Python3. Konfiguracja różni się w zależności od systemu operacyjnego i platformy. Jeśli chcesz zainstalować Pythona na swoim komputerze, rozpocznij od konfiguracji i użycia Pythona.
Uruchom serwer WWW Pythona w katalogu zawierającym index.html:
$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
Serwer WWW nasłuchuje teraz połączeń na porcie 8000 i jest gotowy do wyświetlenia strony logowania. Adres URL to
http://localhost:8000
Za pomocą platformy zdalnej
Jeśli strona logowania została przez Ciebie edytowana i hostowana przez Ciebie za pomocą Glitch (lub podobnej opcji), możesz otworzyć index.html w oknie podglądu lub na nowej karcie przeglądarki.
Zwykle adresem URL jest nazwa projektu podana podczas konfigurowania projektu w witrynie glich.com. Jeśli na przykład projekt błędu nazywa się gis-example, adres URL to https://gis-example.glitch.me. Oczywiście wybrana przez Ciebie nazwa projektu jest inna i nie możesz użyć tej. Adres URL to
https://<var>your-project-name</var>.glitch.me
Wczytaj stronę
Zaczekaj chwilę...
Najpierw musimy utworzyć i skonfigurować klienta internetowego OAuth 2.0.
Skopiuj lub zanotuj adres URL. Będzie on potrzebny w następnym kroku.
4. Konfigurowanie klienta internetowego OAuth
Skonfigurujmy protokół OAuth, aby użytkownicy mogli się zalogować.
- Kliknij ten link, aby utworzyć klienta internetowego OAuth 2.0. W razie potrzeby kreator pomoże Ci utworzyć i skonfigurować nowy projekt Google Cloud.
- Z menu Typ aplikacji wybierz Aplikacja internetowa.
- Kliknij przycisk Dodaj identyfikator URI w sekcji Autoryzowane źródła JavaScript.
- Wpisz adres URL hostujący
index.htmlz kroku 3 w sekcji Krok 3. Udostępnij swoją stronę internetową.Umieszczony na komputerze lokalnym
Umieszczony na platformie zdalnej
- Kliknij Create (Utwórz).
- Skopiuj nowy identyfikator klienta.
Ostatnia sprawa
Musimy wrócić i zaktualizować usługę index.html, aby używać nowego identyfikatora klienta. W edytorze zastąp PUT_YOUR_WEB_CLIENT_ID_HERE nowym identyfikatorem klienta. Identyfikator klienta wygląda jak w tym przykładzie: 1234567890-abc123def456.apps.googleusercontent.com.
Zaloguj się!
5. Zaloguj się
Najpierw otwórz konsolę programisty w przeglądarce. W tym miejscu zostaną zarejestrowane wszystkie błędy i dane uwierzytelniające tokena identyfikatora JWT zwrócone przez Google.
Naciśnij przycisk Zaloguj się przez Google.
Dalsze działania mogą się nieco różnić:
- Jeśli korzystasz obecnie z więcej niż jednego konta Google, zobaczysz prośbę o wybranie konta, którego chcesz używać do logowania się w tej aplikacji internetowej.
- Jeśli logujesz się w niej po raz pierwszy, zobaczysz prośbę o zgodę na wykorzystanie danych.
Gdy opcjonalnie wybierzesz konto i wyrazisz zgodę, Google odpowie za pomocą tokena JWT. Funkcja wywołania zwrotnego handleCredentialResponse uruchomiona w przeglądarce otrzymuje token JWT.
W ramach tego ćwiczenia z programowania dekodujemy i wydrukujemy treść tokena JWT. W produkcyjnej aplikacji internetowej sprawdzisz i wykorzystasz zdekodowany token JWT do czegoś bardziej wartościowego, np. do utworzenia nowego konta na platformie backendu lub ustanowienia nowej sesji dla użytkownika.
6. Sprawdzanie tokena identyfikatora JWT
Zakodowany token JWT jest logowany w konsoli programisty. Po zdekodowaniu JWT niektóre często używane pola tokena tożsamości są również logowane w konsoli.
Do zdekodowania tokena JWT możesz użyć narzędzi online, takich jak jwt.io.
Możesz też użyć jq w terminalu do zdekodowania i wyświetlenia tokena JWT (do zainstalowania jq może być konieczne użycie menedżera pakietów). Najpierw wklej zakodowany ciąg JWT do cudzysłowów podwójnych:
$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"
a następnie użyć tego polecenia, aby go zdekodować
$ echo $JWT | jq -R 'split(".") | .[0],.[1] | @base64d | fromjson'
{
"alg": "RS256",
"kid": "c7e04465649ffa606557650c7e65f0a87ae00fe8",
"typ": "JWT"
}
{
"iss": "https://accounts.google.com",
"azp": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
"aud": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
"sub": "2718281828459045",
"email": "example@example.com",
"email_verified": true,
"nbf": 1744645148,
"name": "Brian Daugherty",
"picture": "https://lh3.googleusercontent.com/a/08a898b88ca4d6407be652d8",
"given_name": "Brian",
"family_name": "Daugherty",
"iat": 1744645448,
"exp": 1744649048,
"jti": "52cd32984b30e178aa88bc2e75e63e055a461fcf"
}
Niektóre klucze i wartości, takie jak adres e-mail, nazwa i zdjęcie, powinny być dość łatwe do zrozumienia. Inne wartości służą do weryfikacji tokena JWT przed jego użyciem. Uzyskiwanie informacji o użytkowniku za pomocą tokena identyfikatora zawiera więcej informacji o znaczeniu wszystkich pól.
7. Dostosowywanie przycisku
Umieszczenie domyślnego przycisku logowania na stronie odbywa się w ten sposób
<div class="g_id_signin"></div>
i zobaczysz ten przycisk
Możesz jednak chcieć zmienić kolor, rozmiar lub tekst, aby pasowały do motywu witryny.
Zmieńmy kolor przycisku na niebieski i zmieńmy go na Zarejestruj się przez Google.
Otwórz index.html, znajdź element g_id_signin i dodaj atrybuty data-theme="filled_blue" oraz data-text="signup_with":
<div
class="g_id_signin"
data-theme="filled_blue"
data-text="signup_with"
></div>
Po zapisaniu i ponownym załadowaniu strony zobaczysz niebieski przycisk z nowym tekstem.
Możesz jeszcze bardziej dostosować przycisk. Pełną listę opcji znajdziesz w sekcji Atrybuty danych wizualnych.
8. Dodatkowe materiały
Gratulacje!
Udało Ci się dodać przycisk Zaloguj się przez Google do strony internetowej, skonfigurować klienta internetowego OAuth 2.0, odkodować token identyfikatora JWT i dowiedzieć się, jak dostosować wygląd przycisku.
Te linki mogą Ci pomóc w wykonaniu kolejnych kroków:
- Interfejs HTML API usług Google Identity Services
- JavaScript API usług Google Identity Services
- Jak skonfigurować funkcję Zaloguj się przez Google w przeglądarce.
- Weryfikowanie tokena tożsamości Google
- Więcej informacji o projektach Google Cloud znajdziesz tutaj.
- Metody uwierzytelniania Tożsamości Google