Эта страница переведена с помощью Cloud Translation API.

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

При желании используйте атрибут data-skip_prompt_cookie и файл cookie, чтобы контролировать, отображается ли запрос One Tap на статических HTML-страницах, где нельзя изменить содержимое. Если указанный файл cookie установлен, запрос не отображается.

Используйте необязательный атрибут data-context для изменения текста, используемого в заголовке приглашения. Например, data-context: "signup" изменяет "Sign in to" на "Sign up to".

По умолчанию запрос One Tap автоматически закрывается, если пользователь щелкает за пределами запроса. Вы можете отключить это поведение, если установите атрибут data-cancel_on_tap_outside на false.

Полный список поддерживаемых атрибутов см. в справочнике 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' меняет "Sign in to" на "Sign up to".

По умолчанию запрос One Tap автоматически закрывается, если пользователь щелкает за пределами запроса. Вы можете отключить это поведение, если установите свойство cancel_on_tap_outside на false.

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

Запросить статус

Используйте функцию обратного вызова JavaScript для прослушивания оперативных уведомлений о состоянии пользовательского интерфейса.

Уведомления отправляются в следующие моменты:

Момент отображения: Это происходит после вызова метода prompt() . Уведомление содержит логическое значение, указывающее, отображается ли пользовательский интерфейс или нет.
Пропущенный момент: это происходит, когда запрос «Одно нажатие» закрыт с помощью автоматической отмены, отмены вручную или когда 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» и подсказка «В одно касание» могут отображаться вместе на одной странице.

HTML

Отобразите кнопку «Войти через Google» и приглашение «В одно касание», включив элементы 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 может быть вызвано даже тогда, когда перекрыт только один пиксель в границах.

Ответ на учетные данные

В ответ на учетные данные включен подписанный Google JWT. Ответ возвращается либо в браузер с помощью функции обратного вызова 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 и выводит некоторые поля токена ID на консоль.

<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.

Для настройки URI перенаправления используйте HTML или JavaScript.

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'
});

Отображать Google One Tap Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Предпосылки

Оперативная отрисовка

HTML

JavaScript

Запросить статус

HTML

JavaScript

Кнопка и подсказка

HTML

JavaScript

Не закрывайте One Tap

Ответ на учетные данные

Обратный вызов JS

HTML

JavaScript

Перенаправить

HTML

JavaScript

Отображать Google One Tap
Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.