Ta strona została przetłumaczona przez Cloud Translation API.

Przycisk Zaloguj się przez Google w przeglądarce

1. Przegląd

W tym ćwiczeniu utworzymy stronę internetową do logowania użytkowników. Do wyświetlania i dostosowywania przycisku Zaloguj się przez Google będziesz używać biblioteki JavaScript Google Identity Services.

Czego się nauczysz

Jak dodać przycisk Zaloguj się przez Google do strony internetowej
Jak skonfigurować aplikację internetową OAuth 2.0
Jak zdekodować token identyfikatora
Jak dostosować przycisk Zaloguj się przez Google

Czego potrzebujesz

edytor tekstu i miejsce na hostowanie strony internetowej – środowiska, które omówimy w tym ćwiczeniu:
- uruchomienie lokalnie w terminalu na komputerze,
- za pomocą platformy takiej jak Glitch.
Wybierz środowisko, które najbardziej Ci odpowiada.
Projekt Google Cloud. Możesz użyć istniejącego projektu lub utworzyć nowy. Konto i projekt Google Cloud Platform są bezpłatne.
Podstawowa znajomość HTML-a, CSS-a, JavaScriptu i Narzędzi deweloperskich w Chrome (lub ich odpowiedników).

Zaczynamy.

2. Tworzenie strony logowania

Dodaj ten przykładowy kod do pliku o nazwie index.html. Możesz to zrobić na swoim komputerze, używając 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 HTML i JavaScript. Wykonuje on szereg czynności:

konfiguruje bibliotekę usług tożsamości Google za pomocą funkcji g_id_onload,
wyświetla przycisk Zaloguj się przez Google za pomocą g_id_signin,
dodaje funkcję wywołania zwrotnego JavaScript o nazwie handleCredentialResponse, która odbiera dane logowania użytkownika z Google;
funkcję decodeJWT do przekształcania tokena internetowego JSON (JWT) w zwykły format JSON.

Z data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE" może być coś nie tak.

Na razie zignoruj to, za chwilę do tego wrócimy.

3. Wyświetlanie strony internetowej

Omówimy 2 środowiska wyświetlania index.html w przeglądarce:

uruchamianie serwera WWW lokalnie na komputerze,
zdalnej platformy, takiej jak Glitch.

Wybierz ten, który najbardziej Ci odpowiada. Po skonfigurowaniu użyjemy tego adresu URL do skonfigurowania klienta internetowego OAuth.

lokalnie na komputerze,

Sprawdź, czy na Twoim komputerze jest zainstalowany Python 3. Konfiguracja różni się w zależności od systemu operacyjnego i platformy. Jeśli musisz zainstalować Pythona na swoim komputerze, zacznij od artykułu Konfiguracja i używanie Pythona.

Uruchom serwer WWW w Pythonie 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świetlania strony logowania. Adres URL to

http://localhost:8000

z platformy do tworzenia stron internetowych.

Jeśli zdecydujesz się edytować i hostować stronę logowania za pomocą Glitcha (lub podobnego narzędzia), możesz otworzyć index.html w panelu podglądu lub w nowej karcie przeglądarki.

Zwykle używany adres URL to nazwa projektu wpisana podczas konfigurowania projektu glich.com. Jeśli na przykład Twój projekt Glitch ma nazwę gis-example, adres URL to https://gis-example.glitch.me. Oczywiście musisz wybrać inną nazwę projektu, ponieważ nie możesz użyć tej. Adres URL to

https://<var>your-project-name</var>.glitch.me

Wczytywanie strony

Poczekaj 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 usługi internetowej OAuth

Skonfigurujmy OAuth, aby użytkownicy mogli się zalogować.

Kliknij ten link, aby utworzyć klienta usługi internetowej OAuth 2.0. W razie potrzeby kreator pomoże Ci utworzyć i skonfigurować nowy projekt Google Cloud.
W menu Typ aplikacji kliknij Aplikacja internetowa.
Kliknij przycisk Dodaj URI w sekcji Autoryzowane źródła JavaScript.
Wpisz adres URL, na którym jest hostowany plik index.html z kroku 3. Wyświetl stronę internetową.
Hostowane na komputerze lokalnym

hostowanie na platformie zdalnej,
Kliknij Utwórz.
Skopiuj nowy identyfikator klienta.

Ostatnia sprawa

Musimy wrócić i zaktualizować index.html, aby używać nowego identyfikatora klienta. W edytorze zastąp symbol PUT_YOUR_WEB_CLIENT_ID_HERE nowym identyfikatorem klienta. Identyfikator klienta wygląda na przykład tak: 1234567890-abc123def456.apps.googleusercontent.com.

Zalogujmy się!

5. Zaloguj się

Najpierw otwórz konsolę programisty przeglądarki. Zostaną w niej zarejestrowane wszystkie błędy i dane logowania tokena identyfikatora JWT zwrócone przez Google.

Kliknij przycisk Zaloguj się przez Google.

Dalsze kroki mogą się nieco różnić:

Jeśli jesteś zalogowany(-a) na więcej niż 1 konto Google, zobaczysz prośbę o wybranie konta, którego chcesz użyć do zalogowania się w tej aplikacji internetowej.
Jeśli logujesz się w tej aplikacji po raz pierwszy, pojawi się prośba o wyrażenie zgody.

Po opcjonalnym wybraniu konta i wyrażeniu zgody Google odpowiada za pomocą tokena JWT. Funkcja wywołania zwrotnego handleCredentialResponse działająca w przeglądarce otrzymuje token JWT.

W tym laboratorium kodowania dekodujemy i wyświetlamy zawartość JWT. W produkcyjnej aplikacji internetowej będziesz weryfikować i wykorzystywać zdekodowany JWT do bardziej złożonych działań, takich jak tworzenie nowego konta na platformie backendu lub ustanawianie nowej sesji dla użytkownika.

6. Sprawdzanie tokena identyfikatora JWT

Zakodowany JWT jest rejestrowany w konsoli programisty. Po zdekodowaniu tokena JWT w konsoli są też rejestrowane niektóre często używane pola tokena identyfikatora.

Aby zdekodować token JWT, możesz użyć narzędzi online, takich jak jwt.io.

Alternatywnie możesz użyć polecenia jq w terminalu, aby zdekodować i wyświetlić token JWT (może być konieczne zainstalowanie narzędzia jq za pomocą menedżera pakietów). Najpierw wklej zakodowany ciąg znaków JWT w cudzysłowie:

$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"

a następnie użyj 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, imię i nazwisko czy zdjęcie, powinny być dość łatwe do zrozumienia. Inne wartości służą do weryfikacji tokena JWT przed jego użyciem. Więcej informacji o znaczeniu poszczególnych pól znajdziesz w artykule Uzyskiwanie informacji o użytkowniku z tokena identyfikatora.

7. Dostosowywanie przycisku

Umieszczanie domyślnego przycisku logowania na stronie

    <div class="g_id_signin"></div>

i zobaczysz ten przycisk.

Możesz jednak zmienić kolor, rozmiar lub tekst, aby dopasować go do motywu witryny.

Zmieńmy kolor przycisku na niebieski i zastąpmy tekst napisem Zarejestruj się przez Google.

Otwórz plik index.html, znajdź element g_id_signin i dodaj atrybuty data-theme="filled_blue" i 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 dodatkowo dostosować przycisk. Pełną listę opcji znajdziesz w sekcji Atrybuty danych wizualnych. Możesz też wypróbować nasz generator kodu HTML.

8. Dodatkowe materiały

Gratulacje!

Dodano przycisk Zaloguj się przez Google na stronie internetowej, skonfigurowano klienta internetowego OAuth 2.0, zdekodowano token identyfikatora JWT i dowiedziano się, jak dostosować wygląd przycisku.

Te linki mogą Ci pomóc w wykonaniu kolejnych kroków:

Google Identity Services HTML API
JavaScript API usług tożsamości Google
Jak skonfigurować logowanie się przez Google w internecie
Weryfikowanie tokena identyfikatora Google
Dowiedz się więcej o projektach Google Cloud.
Metody uwierzytelniania w Google Identity

Najczęstsze pytania

StackOverflow