Добавьте на свой сайт приглашение One Tap, чтобы пользователи могли зарегистрироваться или войти в ваше веб-приложение. Используйте HTML и JavaScript для отображения и настройки приглашения.
Предварительные условия
Выполните действия, описанные в разделе «Настройка» , чтобы настроить экран согласия OAuth, получить идентификатор клиента и загрузить клиентскую библиотеку.
Добавьте кнопку «Войти через Google» на свою страницу входа.
Оперативный рендеринг
Разместите фрагмент кода на всех страницах, где вы хотите, чтобы отображался One Tap.
HTML
Отобразите приглашение One Tap, возвращающее учетные данные JWT в конечную точку входа.
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-your_own_param_1_to_login="any_value"
data-your_own_param_2_to_login="any_value">
</div>
Атрибут data-login_uri — это URI конечной точки входа в ваше веб-приложение. Вы можете добавить пользовательские атрибуты данных, которые отправляются на вашу конечную точку входа вместе с идентификационным токеном, выданным Google.
Используйте атрибут data-context , чтобы изменить текст, используемый в заголовке приглашения. Например, data-context: "signup" заменяет «Войти в» на «Зарегистрироваться».
Полный список поддерживаемых атрибутов см. в справке g_id_onload .
JavaScript
Отобразите приглашение One Tap, возвращающее учетные данные JWT обработчику обратного вызова JavaScript браузера.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt();
}
</script>
Чтобы настроить приглашение One Tap в JavaScript, сначала необходимо вызвать метод initialize() . Затем вызовите метод prompt() чтобы отобразить пользовательский интерфейс подсказки.
Используйте поле context , чтобы изменить текст, используемый в заголовке приглашения. Например, context: 'signup' заменяет «Войти в» на «Зарегистрироваться».
Полный список параметров данных см. в справочнике idConfiguration .
Подскажите статус
Используйте функцию обратного вызова JavaScript для прослушивания уведомлений о состоянии пользовательского интерфейса.
Уведомления отправляются в следующие моменты:
Момент отображения: это происходит после вызова метода
prompt(). Уведомление содержит логическое значение, указывающее, отображается ли пользовательский интерфейс или нет.Пропущенный момент: это происходит, когда приглашение One Tap закрывается посредством автоматической отмены, отмены вручную или когда Google не может выдать учетные данные, например, когда выбранный сеанс выходит из Google.
В этом случае мы рекомендуем вам перейти к следующим поставщикам удостоверений, если таковые имеются.
Момент отклонения: это происходит, когда Google успешно получает учетные данные или пользователь хочет остановить процесс получения учетных данных. Например, когда пользователь начинает вводить свое имя пользователя и пароль в диалоговое окно входа в систему, вы можете вызвать метод
google.accounts.id.cancel(), чтобы закрыть приглашение One Tap и вызвать момент отклонения.
HTML
Используйте атрибут data-moment_callback , чтобы указать функцию обратного вызова JavaScript. Для получения уведомлений необходим обработчик обратного вызова.
<html>
<head>
<script>
function continueWithNextIdp(notification) {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try Next provider if One Tap is not displayed or skipped
}
}
</script>
</head>
<body>
...
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-moment_callback="continueWithNextIdp"
</div>
...
</body>
</html>
Чтобы облегчить пользователям вход или регистрацию, вы можете связаться с несколькими поставщиками удостоверений, чтобы найти доступные учетные данные. Возможно, вам захочется узнать статус нашего оперативного пользовательского интерфейса, чтобы можно было позвонить следующему поставщику удостоверений.
JavaScript
Передайте обработчик обратного вызова в качестве параметра в google.accounts.id.prompt . Здесь функция стрелки используется для обработки обновлений уведомлений.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt((notification) => {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try next provider if OneTap is not displayed or skipped
}
});
}
</script>
Кнопка и подсказка
Кнопка «Войти через Google» и приглашение One Tap могут отображаться вместе на одной странице.
HTML
Отобразите кнопку «Войти с помощью Google» и приглашение One Tap, включив элементы g_id_onload и g_id_signin .
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-context="signin"
data-ux_mode="redirect"
data-login_uri="https://your.domain/your_login_endpoint"
data-itp_support="true">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left">
</div>
JavaScript
Отобразите кнопку «Войти с помощью Google» и приглашение «В одно касание», одновременно вызвав функции renderButton() и prompt() .
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
const parent = document.getElementById('google_btn');
google.accounts.id.renderButton(parent, {theme: "filled_blue"});
google.accounts.id.prompt();
}
</script>
Не закрывайте One Tap
Этот раздел применяется только в том случае, если FedCM отключен. Когда FedCM включен, браузер отображает подсказки пользователя поверх содержимого страницы.
Чтобы конечные пользователи видели всю отображаемую информацию, Google One Tap не должен быть закрыт каким-либо другим контентом. В противном случае в некоторых случаях могут появиться всплывающие окна.
Дважды проверьте макет страницы и свойства z-index элементов, чтобы убедиться, что Google One Tap никогда не перекрывается каким-либо другим контентом. Изменение потока UX может быть вызвано, даже если закрыт только один пиксель в границах.
Ответ на учетные данные
В ответ на учетные данные включен JWT, подписанный Google. Ответ возвращается либо в браузер с помощью функции обратного вызова JavaScript, либо на вашу платформу посредством перенаправления на конечную точку входа.
JS обратный вызов
Используйте HTML или JavaScript для настройки обратного вызова.
HTML
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-callback="YOUR_CALLBACK_HANDLER"
</div>
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
Например, handleCredentialResponse декодирует JWT и выводит на консоль некоторые поля токена идентификатора.
<script>
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse
});
function handleCredentialResponse(response) {
const responsePayload = decodeJwtResponse(response.credential);
console.log("ID: " + responsePayload.sub);
console.log('Full Name: ' + responsePayload.name);
console.log('Given Name: ' + responsePayload.given_name);
console.log('Family Name: ' + responsePayload.family_name);
console.log("Image URL: " + responsePayload.picture);
console.log("Email: " + responsePayload.email);
}
function decodeJwtResponse(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);
}
</script>
Перенаправление
Чтобы вернуть учетные данные в конечную точку входа на вашу платформу, добавьте URL-адрес в настройки URI авторизованного перенаправления вашего веб-клиента OAuth 2.0.
Используйте HTML или JavaScript для настройки URI перенаправления.
HTML
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-ux_mode="redirect"
data-login-uri="YOUR_LOGIN_URI"
</div>
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
ux_mode: 'redirect',
login_uri: 'YOUR_LOGIN_URI'
});