Добавьте кнопку «Войти через Google» на свой сайт, чтобы пользователи могли регистрироваться или входить в ваше веб-приложение. Используйте HTML или JavaScript для отображения кнопки и атрибутов, чтобы настроить форму, размер, текст и тему кнопки.
После того, как пользователь выбирает учетную запись Google и дает свое согласие, Google предоставляет общий доступ к профилю пользователя с помощью веб-токена JSON (JWT). Обзор шагов, необходимых для входа в систему и взаимодействия с пользователем, см. в разделе Как это работает . Понимание персонализированной кнопки рассматривает различные условия и состояния, влияющие на то, как кнопка отображается для пользователей.
Предпосылки
Перед добавлением кнопки на страницу входа выполните следующие действия:
- Выполните шаги, описанные в разделе « Настройка» , чтобы настроить экран согласия OAuth и получить идентификатор клиента.
- Загрузите клиентскую библиотеку .
Рендеринг кнопки
Чтобы отобразить кнопку «Войти через Google», вы можете выбрать HTML или JavaScript для отображения кнопки на странице входа:
HTML
Отобразите кнопку входа с помощью HTML, возвращая JWT в конечную точку входа вашей платформы.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="standard"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
</body>
</html>
Элемент с классом g_id_signin отображается как кнопка «Войти через Google». Кнопка настраивается по параметрам, указанным в атрибутах данных.
Чтобы кнопка «Войти с помощью Google» и кнопка «Google One Tap» отображались на одной странице, удалите data-auto_prompt="false" . Это рекомендуется для уменьшения трения и повышения скорости входа.
Полный список атрибутов данных см. на справочной странице g_id_signin
JavaScript
Отобразите кнопку входа с помощью JavaScript, возвращая JWT обработчику обратного вызова JavaScript браузера.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: "YOUR_GOOGLE_CLIENT_ID",
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large" } // customization attributes
);
google.accounts.id.prompt(); // also display the One Tap dialog
}
</script>
<div id="buttonDiv"></div>
</body>
</html>
Элемент, указанный в качестве первого параметра для renderButton , отображается как кнопка «Войти с помощью Google». В этом примере buttonDiv используется для отображения кнопки на странице. Кнопка настраивается с использованием атрибутов, указанных во втором параметре renderButton .
Чтобы свести к минимуму трение пользователя, google.accounts.id.prompt() вызывается для отображения One Tap в качестве второй альтернативы использованию кнопки для регистрации или входа.
Библиотека ГИС анализирует документ HTML на наличие элементов с атрибутом ID, установленным на g_id_onload , или атрибутов класса, содержащих g_id_signin . Если соответствующий элемент найден, кнопка также будет отображаться с использованием HTML, независимо от того, визуализировали ли вы кнопку в JavaScript. Чтобы кнопка не отображалась дважды, возможно, с конфликтующими параметрами, не включайте HTML-элементы, соответствующие этим именам, на свои HTML-страницы.
Обработка учетных данных
После получения согласия пользователя Google возвращает учетные данные JSON Web Token (JWT), известные как идентификационные токены, либо в браузер пользователя, либо непосредственно в конечную точку входа, размещенную на вашей платформе.
То, где вы решите получать JWT, зависит от того, визуализируете ли вы кнопку с помощью HTML или JavaScript и используете ли режим всплывающего окна или перенаправления UX.
Всплывающий режим
Использование popup режима UX выполняет вход в UX во всплывающем окне. Как правило, это менее навязчивый опыт для пользователей и режим UX по умолчанию.
При рендеринге кнопки с помощью:
HTML вы можете установить либо:
-
data-callback, чтобы вернуть JWT вашему обработчику обратного вызова, или -
data-login_uriдля Google, чтобы отправить JWT непосредственно на вашу конечную точку входа с помощью запроса POST .
Если установлены оба значения,
data-callbackимеет приоритет надdata-login_uri. Например, это может быть полезно, когда во время отладки используется обработчик обратного вызова.-
JavaScript вы должны установить
callback, всплывающий режим не поддерживает редиректы при отрисовке кнопки в JavaScript. Если установлено,login_uriигнорируется.См. обработку возвращенного ответа учетных данных . для получения дополнительной информации о декодировании JWT в вашем обработчике обратного вызова JS.
Режим перенаправления
При использовании режима redirect UX выполняется процесс входа UX с использованием полного перенаправления страницы в браузере пользователя, а Google возвращает JWT непосредственно в конечную точку входа с помощью запроса POST . Как правило, это более навязчивый опыт для пользователей, но он считается наиболее безопасным методом входа.
При рендеринге кнопки с помощью:
- В HTML можно дополнительно установить
data-login_uriдля URI вашей конечной точки входа. - JavaScript дополнительно устанавливает
login_uriв URI конечной точки входа.
Если вы не укажете значение, Google вернет JWT в URI текущей страницы.
URI конечной точки входа
Используйте HTTPS и абсолютный URI при настройке data-login_uri или login_uri . Например, https://example.com/path .
HTTP разрешен только при использовании localhost во время разработки: http://localhost/path .
Полное описание требований и правил проверки Google см. в разделе Использование безопасных источников JavaScript и URI перенаправления .