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

Добавьте на свой сайт всплывающее окно «Один клик», позволяющее пользователям зарегистрироваться или войти в ваше веб-приложение. Используйте HTML и JavaScript для отображения и настройки всплывающего окна.

Предварительные требования

Выполните действия, описанные в разделе «Настройка» , чтобы настроить экран согласия OAuth, получить идентификатор клиента и загрузить библиотеку клиентов.

Добавьте кнопку «Войти через Google» на страницу авторизации.

Быстрая отрисовка

Вставьте фрагмент кода на любую страницу, где вы хотите отобразить функцию «Одно касание».

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>

Для настройки всплывающего окна «Одно касание» в JavaScript сначала необходимо вызвать метод ` initialize() . Затем вызовите метод ` prompt() , чтобы отобразить интерфейс всплывающего окна.

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

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

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

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 ни в коем случае не перекрывается другим контентом. Изменение пользовательского интерфейса может произойти даже при перекрытии всего одного пикселя границ.

Ответ на запрос об учетных данных

В ответе, содержащем учетные данные, находится 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 и выводит в консоль некоторые поля токена 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'
});