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

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

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

После того, как пользователь выберет учетную запись Google и даст свое согласие, Google передаст профиль пользователя, используя JSON Web Token (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() , который отображает опцию «Одно касание» в качестве второй альтернативы использованию кнопки для регистрации или входа в систему.

Библиотека GIS анализирует HTML-документ на наличие элементов с атрибутом ID, установленным на g_id_onload , или атрибутами класса, содержащими g_id_signin . Если найден соответствующий элемент, кнопка отображается с использованием HTML, независимо от того, отображали ли вы кнопку также с помощью JavaScript. Чтобы избежать двойного отображения кнопки, возможно, с конфликтующими параметрами, не включайте в свои HTML-страницы HTML-элементы, соответствующие этим именам.

Язык кнопки

Язык кнопки определяется автоматически языком по умолчанию браузера или настройками пользователя в сессии Google. Вы также можете выбрать язык вручную, добавив параметр hl и код языка в директиву src при загрузке библиотеки, а также добавив необязательный параметр data -locale или locale в HTML или locale в 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 , установленным на French:

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

Using popup UX mode performs the sign-in UX flow in a pop-up window. This is generally a less intrusive experience for users and is the default UX mode.

При отображении кнопки с использованием:

HTML

Вы можете установить один из следующих вариантов:

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

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

JavaScript

You must specify a callback , popup mode does not support redirects when rending the button in JavaScript. If set, login_uri is ignored.

Подробнее о декодировании JWT в обработчике обратного вызова JavaScript см. в разделе "Обработка возвращенного ответа с учетными данными" .

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

В режиме перенаправления пользовательского интерфейса процесс redirect осуществляется путем полного перенаправления страницы в браузере пользователя, а Google возвращает JWT непосредственно на вашу конечную точку авторизации с помощью POST-запроса . Как правило, это более навязчивый способ для пользователей, но считается наиболее безопасным методом авторизации.

При отображении кнопки с использованием:

  • В HTML-коде можно дополнительно установить data-login_uri в URI вашей конечной точки входа.
  • В JavaScript можно дополнительно установить login_uri в URI конечной точки авторизации.

Если вы не укажете значение, Google вернет JWT, соответствующий URI текущей страницы.

URI вашей конечной точки входа

При задании параметров data-login_uri или login_uri используйте HTTPS и абсолютный URI. Например, https://example.com/path .

Использование HTTP разрешено только при работе с localhost во время разработки: http://localhost/path .

Полное описание требований и правил проверки Google см. в разделе «Использование безопасных источников JavaScript и URI перенаправления» .