Настройка

Чтобы добавить на свой веб-сайт кнопку «Войти с помощью Google» или запросы на вход в одно касание и автоматический вход, вам сначала необходимо:

  1. получить идентификатор клиента OAuth 2.0,
  2. настроить брендинг и настройки OAuth,
  3. загрузите клиентскую библиотеку Google Identity Services и
  4. при необходимости настроить Политику безопасности контента и
  5. обновить политику открытия перекрестного происхождения

Получите идентификатор клиента Google API

Чтобы включить службы идентификации Google на своем веб-сайте, сначала необходимо настроить идентификатор клиента Google API. Для этого выполните следующие шаги:

  1. Откройте принадлежащий .
  2. Создайте или выберите проект. Если у вас уже есть проект для кнопки «Войти с помощью Google» или Google One Tap, используйте существующий проект и идентификатор веб-клиента. При создании производственных приложений может потребоваться несколько проектов . Повторите оставшиеся шаги этого раздела для каждого проекта, которым вы управляете.
  3. Нажмите «Создать клиент» и в поле «Тип приложения» выберите «Веб-приложение» , чтобы создать новый идентификатор клиента. Чтобы использовать существующий идентификатор клиента, выберите один из типов Веб-приложение .

  4. Добавьте URI вашего веб-сайта в авторизованные источники JavaScript . URI включает только схему и полное имя хоста. Например, https://www.example.com .

  5. При желании учетные данные могут быть возвращены с помощью перенаправления на конечную точку, которую вы размещаете, а не через обратный вызов JavaScript. В этом случае добавьте URI перенаправления в раздел «Авторизованные URI перенаправления» . URI перенаправления включают схему, полное имя хоста и путь и должны соответствовать правилам проверки URI перенаправления . Например, https://www.example.com/auth-receiver .

Включите идентификатор клиента в свое веб-приложение, используя поля data-client_id или client_id .

И «Вход через Google», и аутентификация One Tap включают в себя экран согласия, который сообщает пользователям, какое приложение запрашивает доступ к их данным, какие данные они запрашивают и какие условия применяются.

  1. Откройте раздела Платформа Google Auth на.
  2. При появлении запроса выберите только что созданный проект.

  3. На , заполните форму и нажмите кнопку «Сохранить».

    1. Имя приложения: имя приложения, запрашивающего согласие. Имя должно точно отражать ваше приложение и соответствовать имени приложения, которое пользователи видят в других местах.

    2. Логотип приложения: это изображение отображается на экране согласия, чтобы помочь пользователям узнать ваше приложение. Логотип отображается на экране согласия «Вход с помощью Google» и в настройках учетной записи , но не отображается в диалоговом окне «В одно касание».

    3. Электронная почта службы поддержки: отображается на экране согласия для поддержки пользователей и для администраторов G Suite, оценивающих доступ к вашему приложению для своих пользователей. Этот адрес электронной почты отображается пользователям на экране согласия «Вход с помощью Google», когда пользователь щелкает имя приложения.

    4. Авторизованные домены. Чтобы защитить вас и ваших пользователей, Google разрешает использовать авторизованные домены только приложениям, которые проходят аутентификацию с помощью OAuth. Ссылки ваших приложений должны размещаться на авторизованных доменах. Узнать больше .

    5. Ссылка на домашнюю страницу приложения: отображается на экране согласия «Вход с помощью Google» и информацией об отказе от ответственности, соответствующей требованиям GDPR, в одно касание под кнопкой «Продолжить как». Должен быть размещен на авторизованном домене.

    6. Ссылка на политику конфиденциальности приложения: отображается на экране согласия «Вход в систему с помощью Google» и информации об отказе от ответственности в соответствии с GDPR в одно касание под кнопкой «Продолжить как». Должен быть размещен на авторизованном домене.

    7. Ссылка на Условия использования приложения (необязательно): отображается на экране согласия «Вход с помощью Google» и информация об отказе от ответственности, соответствующая требованиям GDPR, в одно касание под кнопкой «Продолжить как». Должен быть размещен на авторизованном домене.

  4. Перейдите к чтобы настроить области действия вашего приложения.

    1. Области для API Google . Области позволяют вашему приложению получать доступ к личным данным вашего пользователя. Для аутентификации достаточно области по умолчанию (электронная почта, профиль, openid), вам не нужно добавлять какие-либо конфиденциальные области. Обычно рекомендуется запрашивать области постепенно , в тот момент, когда требуется доступ, а не заранее.

  5. Проверьте «Статус проверки». Если ваше приложение требует проверки, нажмите кнопку «Отправить на проверку», чтобы отправить заявку на проверку. Подробную информацию см. в требованиях к проверке OAuth .

Отображение настроек OAuth во время входа в систему

Одно касание с использованием FedCM

Настройки согласия OAuth, отображаемые Chrome One Tap с использованием FedCM

Авторизованный домен верхнего уровня отображается во время согласия пользователя в Chrome. Поддерживается только использование One Tap в iframe из разных источников, но на одном и том же сайте .

Одно касание без FedCM

Настройки согласия OAuth, отображаемые One Tap

Имя приложения отображается во время согласия пользователя.

Рисунок 1. Настройки согласия OAuth, отображаемые с помощью One Tap в Chrome.

Загрузите клиентскую библиотеку

Обязательно загружайте клиентскую библиотеку Google Identity Services на любой странице, на которой пользователь может войти. Используйте следующий фрагмент кода:

<script src="https://accounts.google.com/gsi/client" async></script>

Вы можете оптимизировать скорость загрузки страниц, если загрузите скрипт с атрибутом async .

Список методов и свойств, поддерживаемых библиотекой, см. в справочниках по API HTML и JavaScript.

Политика безопасности контента

Политика безопасности контента не является обязательной, но рекомендуется для защиты вашего приложения и предотвращения атак с использованием межсайтовых сценариев (XSS). Чтобы узнать больше, см. Введение в CSP и CSP и XSS .

Ваша политика безопасности контента может включать одну или несколько директив, таких как connect-src , frame-src , script-src , style-src или default-src .

Если ваш CSP включает в себя:

  • connect-src добавьте https://accounts.google.com/gsi/ , чтобы страница могла загружать родительский URL-адрес для конечных точек серверной службы Google Identity Services.
  • В директиве frame-src добавьте https://accounts.google.com/gsi/ , чтобы разрешить родительский URL-адрес кнопки «Одно касание и вход с помощью Google» iframe.
  • script-src добавьте https://accounts.google.com/gsi/client , чтобы разрешить URL-адрес библиотеки JavaScript Google Identity Services.
  • style-src добавьте https://accounts.google.com/gsi/style , чтобы разрешить URL-адрес таблиц стилей Google Identity Services.
  • Директива default-src , если она используется, является резервной, если какая-либо из предыдущих директив ( connect-src , frame-src , script-src или style-src ) не указана, добавьте https://accounts.google.com/gsi/ , чтобы страница могла загружать родительский URL-адрес для конечных точек на стороне сервера Google Identity Services.

Избегайте перечисления отдельных URL-адресов ГИС при использовании connect-src . Это помогает минимизировать сбои при обновлении ГИС. Например, вместо добавления https://accounts.google.com/gsi/status используйте родительский URL-адрес ГИС https://accounts.google.com/gsi/ .

Этот пример заголовка ответа позволяет службам идентификации Google загружаться и успешно выполняться:

Content-Security-Policy-Report-Only: script-src
https://accounts.google.com/gsi/client; frame-src
https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;

Политика открытия кросс-происхождения

Кнопка «Войти с помощью Google» и Google One Tap могут потребовать внесения изменений в вашу Cross-Origin-Opener-Policy (COOP) для успешного создания всплывающих окон.

Когда FedCM включен, браузер напрямую отображает всплывающие окна, и никаких изменений не требуется.

Однако, когда FedCM отключен, установите заголовок COOP:

  • same-origin и
  • включить same-origin-allow-popups .

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