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

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

Персонализированная кнопка входа.

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

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

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

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

Чтобы отобразить кнопку «Войти через Google», вы можете выбрать HTML или JavaScript для отображения кнопки на странице входа:

HTML

Отобразите кнопку входа в систему с помощью HTML, возвращая JWT в конечную точку входа на вашу платформу.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></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></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. Вы также можете выбрать язык вручную, добавив параметр hl и код языка в директиву src при загрузке библиотеки и добавив необязательный data-locale или параметр locale data-locale в HTML или языковой стандарт в JavaScript.

HTML

В следующем фрагменте кода показано, как отобразить язык кнопки на французском языке, добавив параметр hl в URL-адрес клиентской библиотеки и установив для атрибута data-locale значение French:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>

JavaScript

В следующем фрагменте кода показано, как отобразить язык кнопки на французском языке, добавив параметр hl в URL-адрес клиентской библиотеки и вызвав метод google.accounts.id.renderButton с параметром locale , установленным на французский язык:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
  google.accounts.id.renderButton(
    document.getElementById("buttonDiv"),
    { locale: "fr" }
  );
</script>

Обработка учетных данных

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

Выбор способа получения JWT зависит от того, визуализируете ли вы кнопку с помощью HTML или JavaScript, а также от того, используется ли режим всплывающего окна или перенаправления.

При использовании popup режима пользовательского интерфейса процесс входа в систему выполняется во всплывающем окне. Обычно этот режим менее навязчив для пользователей и является режимом UX по умолчанию.

При рендеринге кнопки с использованием:

HTML

Вы можете установить либо:

  • data-callback , чтобы вернуть JWT вашему обработчику обратного вызова, или
  • data-login_uri для Google, чтобы отправить JWT непосредственно на вашу конечную точку входа с помощью запроса POST .

Если установлены оба значения, data-callback имеет приоритет над data-login_uri . Установка обоих значений может быть полезна при использовании обработчика обратного вызова для отладки.

JavaScript

Вы должны указать callback , режим всплывающего окна не поддерживает перенаправления при отображении кнопки в JavaScript. Если установлено, login_uri игнорируется.

Дополнительную информацию о декодировании JWT в обработчике обратного вызова JS см. в разделе «Обработка возвращенного ответа на учетные данные» .

Режим перенаправления

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