Отображать Google One Tap

Добавьте на свой сайт приглашение 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.

Полный список поддерживаемых атрибутов см. в справке 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() чтобы отобразить пользовательский интерфейс подсказки.

Полный список параметров данных см. в справочнике idConfiguration .

Подскажите статус

Чтобы получать быстрые уведомления о состоянии пользовательского интерфейса, предоставьте функцию обратного вызова для метода prompt() .

HTML

Для получения уведомлений требуется обработчик обратного вызова JavaScript.

JavaScript

Здесь функция стрелки используется для обработки обновлений уведомлений.

<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 может быть вызвано, даже если закрыт только один пиксель в границах.