Przycisk Zaloguj się przez Google w przeglądarce

1. Przegląd

W tym ćwiczeniu utworzymy stronę internetową do logowania użytkowników. Użyjemy biblioteki JavaScript usług Google Identity Services, aby wyświetlić i dostosować przycisk Zaloguj się przez Google.

Przycisk Zaloguj się przez Google.

Czego się nauczysz

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

Czego potrzebujesz

  1. Edytor tekstu i miejsce na hostowanie strony internetowej. Środowiska, które omówimy w tym ćwiczeniu:
    • lokalne uruchomienie w terminalu na komputerze lub
    • użycie platformy takiej jak Glitch.
    Wybierz środowisko, w którym czujesz się najbardziej komfortowo.
  2. Projekt Google Cloud. Możesz użyć dotychczasowego projektu lub utworzyć nowy. Konto i projekt Google Cloud Platform są bezpłatne.
  3. Podstawowa wiedza na temat HTML, CSS, 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 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 HTML i JavaScriptu. Wykonuje on kilka czynności:

  • konfiguruje bibliotekę usług Google Identity Services za pomocą g_id_onload,
  • wyświetla przycisk Zaloguj się przez Google za pomocą g_id_signin,
  • dodaje funkcję wywołania zwrotnego JavaScript o nazwie handleCredentialResponse, aby otrzymywać dane logowania użytkownika od Google, oraz
  • funkcję decodeJWT, która przekształca dane logowania w postaci tokena internetowego JSON (JWT) w zwykły format JSON.

Coś może się wydawać nie tak z data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE".

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

3. Udostępnianie strony internetowej

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

  • uruchomienie serwera WWW lokalnie na komputerze
  • platforma zdalna, taka jak Glitch.

Wybierz tę, która Ci najbardziej odpowiada. Po skonfigurowaniu użyjemy adresu URL do skonfigurowania klienta internetowego OAuth.

Lokalnie na komputerze

Upewnij się, że masz zainstalowanego Pythona 3. Konfiguracja różni się w zależności od systemu operacyjnego i platformy. Jeśli musisz zainstalować Pythona na komputerze, zacznij od konfiguracji i użycia Pythona.

Uruchom serwer WWW w Pythonie w katalogu zawierającym plik 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 podobnej platformy), 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 w glich.com. Jeśli na przykład projekt Glitch ma nazwę gis-example, adres URL to https://gis-example.glitch.me. Oczywiście wybierzesz inną nazwę projektu i nie możesz użyć tej. Adres URL to

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

Wczytywanie strony

Chwileczkę…

Najpierw musimy utworzyć klienta internetowego OAuth 2.0 i go skonfigurować.

Skopiuj lub zanotuj adres URL. Będzie on używany w następnym kroku.

4. Konfigurowanie klienta internetowego OAuth

Skonfigurujmy protokół OAuth, aby użytkownicy mogli się logować.

  • Kliknij ten link, aby utworzyć klienta internetowego OAuth 2.0. W razie potrzeby kreator pomoże Ci utworzyć i skonfigurować nowy projekt Google Cloud.
  • W menu Typ aplikacji wybierz Aplikacja internetowa.
  • Kliknij przycisk Dodaj identyfikator URI w sekcji Autoryzowane źródła JavaScript.
  • Wpisz adres URL, który hostuje plik index.html z kroku 3. Wyświetlanie strony internetowej.

    Hostowanie na komputerze lokalnym

    Lokalne źródło hostowane na Twoim komputerze

    Hostowanie na platformie zdalnej

    Korzystanie z platformy hostingu zdalnego
  • Kliknij Utwórz.
  • Skopiuj nowy identyfikator klienta.

Ostatnia sprawa

Musimy wrócić i zaktualizować plik index.html, aby używać nowego identyfikatora klienta. W edytorze zastąp ciąg PUT_YOUR_WEB_CLIENT_ID_HERE nowym identyfikatorem klienta. Identyfikator klienta wygląda podobnie do tego przykładu: 1234567890-abc123def456.apps.googleusercontent.com.

Zalogujmy się!

5. Zaloguj się

Najpierw otwórz konsolę programisty w przeglądarce. Będą tu rejestrowane wszelkie błędy i dane logowania w postaci tokena identyfikatora JWT zwrócone przez Google.

Kliknij przycisk Zaloguj się przez Google.

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

  • Jeśli jesteś obecnie zalogowany(-a) na więcej niż 1 koncie 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 internetowej po raz pierwszy, pojawi się prośba o zgodę.

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

W tym ćwiczeniu dekodujemy i wyświetlamy zawartość tokena JWT. W aplikacji internetowej w środowisku produkcyjnym zweryfikujesz i użyjesz zdekodowanego tokena JWT, aby wykonać bardziej złożone czynności, takie jak utworzenie nowego konta na platformie backendowej lub utworzenie nowej sesji dla użytkownika.

6. Sprawdzanie tokena identyfikatora JWT

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

Do dekodowania tokena JWT możesz używać narzędzi online, takich jak jwt.io.

Alternatywnie możesz też użyć narzędzia 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 tokena JWT w podwójnych cudzysłowach:

$ 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 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. Więcej informacji o znaczeniu wszystkich pól znajdziesz w artykule Uzyskiwanie informacji o użytkowniku z tokena identyfikatora.

7. Dostosowywanie przycisku

Umieszczenie domyślnego przycisku logowania na stronie wygląda tak:

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

i zobaczysz ten przycisk:

Przycisk Zaloguj się przez Google.

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

Zmieńmy kolor przycisku na niebieski i dodajmy tekst 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 wczytaniu strony zobaczysz niebieski przycisk z nowym tekstem.

Przycisk Zarejestruj się przez Google.

Możesz dalej dostosowywać przycisk. Pełną listę opcji znajdziesz w artykule Atrybuty danych wizualnych. Możesz też wypróbować nasz generator kodu HTML.

8. Dodatkowe materiały

Gratulacje!

Dodano przycisk Zaloguj się przez Google do strony 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 dalszych krokach:

Najczęstsze pytania