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

1. Обзор

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

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

Чему вы научитесь

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

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

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

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

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 , чтобы использовать новый Client ID. В редакторе замените PUT_YOUR_WEB_CLIENT_ID_HERE на ваш новый Client ID. Client ID выглядит следующим образом: 1234567890-abc123def456.apps.googleusercontent.com .

Давайте регистрируемся!

5. Войти

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

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

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

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

После того, как вы (по желанию) выберите учётную запись и дадите своё согласие, Google отправит вам JWT. Функция обратного вызова handleCredentialResponse , работающая в браузере, получает JWT.

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

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

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

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

В качестве альтернативы, jq в вашем терминале также можно использовать для декодирования и просмотра JWT (для установки 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"
}

Некоторые ключи и значения, такие как адрес электронной почты, имя и изображение, должны быть достаточно понятны. Другие значения используются для проверки 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 и узнали, как настроить внешний вид кнопки.

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

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