Настройка

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

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

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

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

  1. Откройте страницу «Клиенты» в консоли Google Cloud.
  2. Создайте или выберите проект Cloud Console. Если у вас уже есть проект для кнопки «Войти через 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, так и аутентификация одним касанием включают в себя экран согласия, который информирует пользователей о приложении, запрашивающем доступ к их данным, о том, какие данные запрашиваются и какие условия применяются.

  1. Откройте страницу «Брендинг» в разделе «Платформа аутентификации Google» в консоли Cloud Console.
  2. Если появится запрос, выберите только что созданный вами проект.

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

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

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

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

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

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

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

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

  4. Перейдите на страницу «Доступ к данным» , чтобы настроить области действия для вашего приложения.

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

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

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

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

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

В Chrome во время подтверждения согласия пользователя отображается домен верхнего уровня Authorized . Поддерживается только использование 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 .

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

Хотя политика безопасности контента (CSP) необязательна, её использование рекомендуется для защиты вашего приложения и предотвращения атак межсайтового скриптинга (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-адреса для iframe-элементов кнопок «Вход в один клик» и «Войти через Google».
  • Добавьте директиву 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.

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

Этот пример заголовка ответа позволяет Google Identity Services успешно загрузить и выполнить следующие действия:

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 и
  • include same-origin-allow-popups .

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