Предупреждение. Эти данные предоставляются в соответствии с политикой Google в отношении данных пользователей . Пожалуйста, ознакомьтесь с политикой и соблюдайте ее. Невыполнение этого требования может привести к приостановке проекта или учетной записи.

Отображение кнопки «Войти через Google»

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

Alt text

После того, как пользователь выбирает учетную запись Google и дает свое согласие, Google предоставляет общий доступ к профилю пользователя с помощью веб-токена JSON (JWT). Обзор шагов, необходимых для входа в систему и взаимодействия с пользователем, см. в разделе Как это работает . Понимание персонализированной кнопки рассматривает различные условия и состояния, влияющие на то, как кнопка отображается для пользователей.

Предпосылки

Перед добавлением кнопки на страницу входа выполните следующие действия:

Рендеринг кнопки

Чтобы отобразить кнопку «Войти через 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 перенаправления .