Настройка

Прежде чем добавить на свой веб-сайт вход с помощью Google, вход в одно касание или автоматический вход, настройте конфигурацию OAuth и, при необходимости, настройте политику безопасности контента вашего сайта.

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

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

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

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

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

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

  1. Откройте страницу экрана согласия OAuth в разделе API и службы консоли разработчика Google.
  2. При появлении запроса выберите только что созданный проект.

  3. На странице «Экран согласия OAuth» заполните форму и нажмите кнопку «Сохранить».

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

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

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

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

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

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

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

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

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

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

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

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

Авторизованный домен верхнего уровня отображается во время согласия пользователя в Chrome.

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

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

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

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

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

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

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