О практической работе
1. Обзор
В этой лаборатории кода мы создадим простую веб-страницу для входа пользователя. Вы будете использовать библиотеку JavaScript Google Identity Services для отображения и настройки кнопки «Войти через Google».
Что вы узнаете
- Как добавить кнопку «Войти через Google» на веб-страницу
- Как настроить веб-приложение OAuth 2.0
- Как расшифровать идентификационный токен
- Как настроить кнопку «Войти через Google»
Что вам понадобится
- Текстовый редактор и место для размещения веб-страницы. Среды, которые мы рассмотрим в этой лаборатории кода:
- работает локально в терминале на вашем компьютере или
- используя такую платформу, как Glitch .
- Проект Google Cloud. Вы можете использовать существующий проект или создать новый. Учетная запись и проект Google Cloud Platform бесплатны.
- Базовые знания 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. Например, если ваш проект с ошибками называется 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.
В этой Codelab мы декодируем и распечатываем содержимое JWT. В рабочем веб-приложении вы будете проверять и использовать декодированный JWT для выполнения чего-то более значимого, например создания новой учетной записи на вашей серверной платформе или установления нового сеанса для пользователя.
6. Проверьте токен идентификатора JWT
Закодированный JWT регистрируется в консоли разработчика. После декодирования JWT некоторые часто используемые поля токена идентификатора также регистрируются в консоли.
Вы можете использовать онлайн-инструменты, такие как jwt.io , для декодирования JWT.
Альтернативно, 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 перед его использованием. Получите информацию о пользователе из токена идентификатора, чтобы узнать больше о том, что означают все поля.
7. Настройте кнопку
Размещение кнопки входа по умолчанию на странице выполняется следующим образом.
<div class="g_id_signin"></div>
и вы увидите эту кнопку
Но, возможно, вы захотите изменить цвет, размер или текст в соответствии с темой вашего сайта.
Давайте изменим цвет кнопки на синий и вместо этого напишем « Зарегистрироваться в 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>
После сохранения и перезагрузки страницы вы увидите синюю кнопку с новым текстом.
Вы можете дополнительно настроить кнопку. Полный список параметров см. в разделе Атрибуты визуальных данных .
8. Дополнительные ресурсы
Поздравляем!
Вы добавили кнопку «Войти через Google» на веб-страницу, настроили веб-клиент OAuth 2.0, декодировали токен идентификатора JWT и узнали, как настроить внешний вид кнопки.
Эти ссылки могут помочь вам в следующих шагах:
- HTML API служб идентификации Google
- API JavaScript служб идентификации Google
- Как настроить вход через Google для Интернета
- Подтвердите токен Google ID
- Узнайте больше о проектах Google Cloud здесь .
- Методы аутентификации Google Identity
Часто задаваемые вопросы
О практической работе
1. Обзор
В этой лаборатории кода мы создадим простую веб-страницу для входа пользователя. Вы будете использовать библиотеку JavaScript Google Identity Services для отображения и настройки кнопки «Войти через Google».
Что вы узнаете
- Как добавить кнопку «Войти через Google» на веб-страницу
- Как настроить веб-приложение OAuth 2.0
- Как расшифровать идентификационный токен
- Как настроить кнопку «Войти через Google»
Что вам понадобится
- Текстовый редактор и место для размещения веб-страницы. Среды, которые мы рассмотрим в этой лаборатории кода:
- работает локально в терминале на вашем компьютере или
- используя такую платформу, как Glitch .
- Проект Google Cloud. Вы можете использовать существующий проект или создать новый. Учетная запись и проект Google Cloud Platform бесплатны.
- Базовые знания 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. Например, если ваш проект с ошибками называется 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.
В этой Codelab мы декодируем и распечатываем содержимое JWT. В рабочем веб-приложении вы будете проверять и использовать декодированный JWT для выполнения чего-то более значимого, например создания новой учетной записи на вашей серверной платформе или установления нового сеанса для пользователя.
6. Проверьте токен идентификатора JWT
Закодированный JWT регистрируется в консоли разработчика. После декодирования JWT некоторые часто используемые поля токена идентификатора также регистрируются в консоли.
Вы можете использовать онлайн-инструменты, такие как jwt.io , для декодирования JWT.
Альтернативно, 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 перед его использованием. Получите информацию о пользователе из токена идентификатора, чтобы узнать больше о том, что означают все поля.
7. Настройте кнопку
Размещение кнопки входа по умолчанию на странице выполняется следующим образом.
<div class="g_id_signin"></div>
и вы увидите эту кнопку
Но, возможно, вы захотите изменить цвет, размер или текст в соответствии с темой вашего сайта.
Давайте изменим цвет кнопки на синий и вместо этого напишем « Зарегистрироваться в 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>
После сохранения и перезагрузки страницы вы увидите синюю кнопку с новым текстом.
Вы можете дополнительно настроить кнопку. Полный список параметров см. в разделе Атрибуты визуальных данных .
8. Дополнительные ресурсы
Поздравляем!
Вы добавили кнопку «Войти через Google» на веб-страницу, настроили веб-клиент OAuth 2.0, декодировали токен идентификатора JWT и узнали, как настроить внешний вид кнопки.
Эти ссылки могут помочь вам в следующих шагах:
- HTML API служб идентификации Google
- API JavaScript служб идентификации Google
- Как настроить вход через Google для Интернета
- Подтвердите токен Google ID
- Узнайте больше о проектах Google Cloud здесь .
- Методы аутентификации Google Identity
Часто задаваемые вопросы
О практической работе
1. Обзор
В этой лаборатории кода мы создадим простую веб-страницу для входа пользователя. Вы будете использовать библиотеку JavaScript Google Identity Services для отображения и настройки кнопки «Войти через Google».
Что вы узнаете
- Как добавить кнопку «Войти через Google» на веб-страницу
- Как настроить веб-приложение OAuth 2.0
- Как расшифровать идентификационный токен
- Как настроить кнопку «Войти через Google»
Что вам понадобится
- Текстовый редактор и место для размещения веб-страницы. Среды, которые мы рассмотрим в этой лаборатории кода:
- работает локально в терминале на вашем компьютере или
- используя такую платформу, как Glitch .
- Проект Google Cloud. Вы можете использовать существующий проект или создать новый. Учетная запись и проект Google Cloud Platform бесплатны.
- Базовые знания 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. Например, если ваш проект с ошибками называется 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.
В этой Codelab мы декодируем и распечатываем содержимое JWT. В рабочем веб-приложении вы будете проверять и использовать декодированный JWT для выполнения чего-то более значимого, например создания новой учетной записи на вашей серверной платформе или установления нового сеанса для пользователя.
6. Проверьте токен идентификатора JWT
Закодированный JWT регистрируется в консоли разработчика. После декодирования JWT некоторые часто используемые поля токена идентификатора также регистрируются в консоли.
Вы можете использовать онлайн-инструменты, такие как jwt.io , для декодирования JWT.
Альтернативно, 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 перед его использованием. Получите информацию о пользователе из токена идентификатора, чтобы узнать больше о том, что означают все поля.
7. Настройте кнопку
Размещение кнопки входа по умолчанию на странице выполняется следующим образом.
<div class="g_id_signin"></div>
и вы увидите эту кнопку
Но, возможно, вы захотите изменить цвет, размер или текст в соответствии с темой вашего сайта.
Давайте изменим цвет кнопки на синий и вместо этого напишем « Зарегистрироваться в 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>
После сохранения и перезагрузки страницы вы увидите синюю кнопку с новым текстом.
Вы можете дополнительно настроить кнопку. Полный список параметров см. в разделе Атрибуты визуальных данных .
8. Дополнительные ресурсы
Поздравляем!
Вы добавили кнопку «Войти через Google» на веб-страницу, настроили веб-клиент OAuth 2.0, декодировали токен идентификатора JWT и узнали, как настроить внешний вид кнопки.
Эти ссылки могут помочь вам в следующих шагах:
- HTML API служб идентификации Google
- API JavaScript служб идентификации Google
- Как настроить вход через Google для Интернета
- Подтвердите токен Google ID
- Узнайте больше о проектах Google Cloud здесь .
- Методы аутентификации Google Identity