Кнопка «Войти с помощью Google» для веб-браузера

1. Обзор

В этом практическом занятии мы создадим веб-страницу для входа пользователя. Вы будете использовать библиотеку JavaScript Google Identity Services для отображения и настройки кнопки «Войти через Google».

Кнопка «Войти через Google».

Что вы узнаете

  • Как добавить кнопку «Войти через Google» на веб-страницу
  • Как настроить веб-приложение с использованием OAuth 2.0
  • Как расшифровать идентификационный токен
  • Как настроить кнопку «Войти через Google»

Что вам понадобится

  1. Текстовый редактор и платформа для размещения веб-страницы — среды, которые мы рассмотрим в этом практическом занятии:
    • запустить локально в терминале на вашем компьютере, или
    • используя такую ​​платформу, как Glitch .
    Выберите ту обстановку, в которой вам наиболее комфортно.
  2. Проект Google Cloud. Вы можете использовать свой существующий проект или создать новый. Учетная запись и проект Google Cloud Platform бесплатны.
  3. Базовые знания HTML, CSS, JavaScript и инструментов разработчика Chrome (или аналогичных).

Итак, начнём.

2. Создайте свою страницу входа.

Добавьте этот пример кода в файл с именем index.html . Вы можете сделать это на своем компьютере с помощью любимого текстового редактора или на такой платформе, как 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>

Этот код представляет собой смесь HTML и JavaScript и выполняет ряд действий:

  • Настраивает библиотеку Google Identity Services с помощью g_id_onload .
  • Отображает кнопку «Войти через Google» с помощью g_id_signin .
  • добавляет функцию обратного вызова JavaScript с именем handleCredentialResponse для получения учетных данных пользователя от Google, и
  • Функция decodeJWT для преобразования учетных данных JSON Web Token (JWT) в обычный JSON.

Возможно, что-то не так с data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE" .

Пока просто проигнорируйте это, мы вернемся к этому чуть позже.

3. Разместите свою веб-страницу на сервере.

Мы рассмотрим две среды для отображения index.html в браузере:

  • запустить веб-сервер локально на вашем компьютере
  • удаленная платформа, например, Glitch.

Выберите тот вариант, который вам наиболее удобен. После настройки мы используем URL-адрес для конфигурации веб-клиента OAuth.

Локально с вашего компьютера

Убедитесь, что Python3 установлен в вашей системе. Процедура установки различается в зависимости от ОС и платформы; если вам необходимо установить Python на свой компьютер, начните с раздела «Установка и использование Python» .

Запустите веб-сервер Python в директории, содержащей index.html :

$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

Веб-сервер в данный момент принимает соединения на порту 8000 и готов отобразить вашу страницу входа. URL-адрес:

http://localhost:8000

С платформы веб-разработки

Если вы решили редактировать и размещать свою страницу входа в систему с помощью Glitch (или аналогичной программы), вы сможете открыть index.html либо в окне предварительного просмотра, либо в новой вкладке браузера.

Как правило, в качестве URL-адреса используется имя проекта, которое вы указали при настройке проекта на glich.com. Например, если ваш проект на Glitch называется gis-example , то URL-адрес будет https://gis-example.glitch.me . Конечно, вы выбрали другое имя проекта и не можете использовать это. URL-адрес будет следующим:

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

Загрузить страницу

Подождите секунду...

Для начала нам нужно создать веб-клиент OAuth 2.0 и настроить его.

Скопируйте или запишите URL-адрес, он понадобится на следующем шаге.

4. Настройте веб-клиент OAuth.

Давайте настроим OAuth, чтобы люди действительно могли входить в систему.

  • Перейдите по этой ссылке, чтобы создать веб-клиент OAuth 2.0 . При необходимости мастер поможет вам создать и настроить новый проект Google Cloud.
  • Выберите «Веб-приложение» из раскрывающегося списка «Тип приложения» .
  • Нажмите кнопку «Добавить URI» в разделе «Авторизованные источники JavaScript».
  • Введите URL-адрес, на котором размещен файл index.html из шага 3. Разместите свою веб-страницу .

    Размещено на вашем локальном компьютере

    Локальный источник размещен на вашем компьютере.

    Размещено на удаленной платформе

    Использование платформы удалённого хостинга
  • Нажмите « Создать» .
  • Скопируйте новый идентификатор клиента.

И последнее

Нам нужно вернуться и обновить index.html , чтобы использовать новый идентификатор клиента. В редакторе замените PUT_YOUR_WEB_CLIENT_ID_HERE на ваш новый идентификатор клиента. Идентификатор клиента выглядит примерно так: 1234567890-abc123def456.apps.googleusercontent.com .

Давайте войдем в систему!

5. Войти

Сначала откройте консоль разработчика в вашем браузере; здесь будут регистрироваться любые ошибки и учетные данные токена JWT ID, полученные от Google.

Нажмите кнопку «Войти через Google»!

Дальнейшие события могут немного отличаться:

  • Если вы в данный момент вошли в несколько учетных записей Google, вам будет предложено выбрать, какую из них вы будете использовать для входа в это веб-приложение.
  • Если вы впервые входите в это веб-приложение, отобразится запрос на подтверждение согласия.

После выбора учетной записи и предоставления согласия Google отправляет JWT-токен. Функция обратного вызова handleCredentialResponse , работающая в браузере, получает этот JWT-токен.

В этом практическом занятии мы декодируем и выводим содержимое JWT. В рабочем веб-приложении вы проверите и используете декодированный JWT для выполнения более осмысленных действий, таких как создание новой учетной записи на вашей серверной платформе или установление новой сессии для пользователя.

6. Проверьте токен JWT ID.

Закодированный JWT выводится в консоль разработчика. После декодирования JWT в консоль также выводятся некоторые часто используемые поля ID-токена.

Для расшифровки JWT можно использовать онлайн-инструменты, такие как jwt.io.

В качестве альтернативы, для декодирования и просмотра JWT можно использовать jq в терминале (возможно, вам потребуется установить jq через менеджер пакетов). Сначала вставьте закодированную строку JWT в двойные кавычки:

$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"

а затем используйте эту команду для его расшифровки.

$ 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"
}

Некоторые ключи и значения, такие как email, имя и изображение, должны быть достаточно простыми для понимания. Другие значения используются для проверки JWT перед его использованием. Более подробное описание значения всех полей можно найти в разделе «Получение информации о пользователе из ID-токена» .

7. Настройте кнопку

Размещение кнопки входа по умолчанию на странице осуществляется следующим образом.

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

и вы увидите эту кнопку.

Кнопка «Войти через Google».

Но, возможно, вы захотите изменить цвет, размер или текст, чтобы они соответствовали тематике вашего сайта.

Давайте изменим цвет кнопки на синий и вместо этого напишем «Зарегистрироваться в Google» .

Откройте index.html , найдите элемент g_id_signin и добавьте атрибуты data-theme="filled_blue" и data-text="signup_with" :

    <div
      class="g_id_signin"
      data-theme="filled_blue"
      data-text="signup_with"
    ></div>

После сохранения и перезагрузки страницы вы увидите синюю кнопку с новым текстом.

Кнопка «Зарегистрироваться через Google».

Вы можете дополнительно настроить кнопку; полный список параметров см. в разделе «Атрибуты визуальных данных» , а также воспользоваться нашим генератором HTML-кода .

8. Дополнительные ресурсы

Поздравляем!

Вы добавили кнопку «Войти через Google» на веб-страницу, настроили веб-клиент OAuth 2.0, расшифровали токен JWT ID и научились настраивать внешний вид кнопки.

Эти ссылки могут помочь вам с дальнейшими шагами:

Часто задаваемые вопросы