Перейти на FedCM

Это руководство поможет вам понять изменения в вашем веб-приложении, внесенные API управления федеративными учетными данными (FedCM).

При включении FedCM браузер отображает пользовательские подсказки и не использует сторонние файлы cookie.

Обзор

FedCM обеспечивает более конфиденциальный вход в систему без использования сторонних файлов cookie. Браузер управляет настройками пользователя, отображает запросы и обращается к поставщику удостоверений, например Google, только после получения явного согласия пользователя.

Для большинства веб-сайтов миграция происходит беспроблемно посредством обратно совместимых обновлений библиотеки JavaScript Google Identity Services.

Обновления функции автоматического входа

Бета-версия Federated Credential Management (FedCM) для Google Identity Services была запущена в августе 2023 года. Многие разработчики протестировали API и оставили ценные отзывы.

Один из ответов, полученных Google от разработчиков, касается требования к жестам пользователя для автоматического входа в систему FedCM. Для повышения конфиденциальности Chrome требует от пользователей повторного подтверждения того, что они хотят войти на сайт с помощью учётной записи Google, в каждом экземпляре Chrome, даже если пользователь одобрил вход на сайт до внедрения FedCM. Это однократное подтверждение выполняется одним нажатием кнопки One Tap или Button в системе FedCM, чтобы продемонстрировать намерение пользователя войти. Это изменение может привести к первоначальному сбою в показателях конверсии автоматического входа на некоторых сайтах.

Недавно, в версии M121, Chrome внёс изменения в интерфейс автоматического входа в FedCM. Повторное подтверждение требуется только при ограничении использования сторонних cookie-файлов. Это означает:

  1. Автоматический вход в FedCM не требует повторного подтверждения для возвращающихся пользователей. Если пользователи повторно подтвердят вход через интерфейс FedCM, это подтверждение будет учитываться при выполнении требования к жестам пользователя в эпоху после 3PCD.

  2. Функция автоматического входа в FedCM проверит статус повторного подтверждения, если сторонние файлы cookie будут вручную ограничены пользователями сегодня или будут по умолчанию в будущих версиях Chrome.

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

Для автоматического процесса входа GIS JavaScript не будет запускать FedCM на старых версиях Chrome (до M121), даже если на вашем веб-сайте выбрано использование FedCM.

Различия в пути пользователя

Опыт использования One Tap при использовании FedCM и без FedCM аналогичен, за исключением небольших различий.

Новый пользователь за один сеанс

При использовании FedCM One Tap отображает доменное имя верхнего уровня вместо имени приложения.

Использование FedCM Без FedCM
Новый пользователь, использующий FedCM, за один сеансНовый пользователь с одним сеансом без FedCM

Повторный вход пользователя с одним сеансом (автоматический вход отключен)

При использовании FedCM One Tap отображает доменное имя верхнего уровня вместо имени приложения.

Использование FedCM Без FedCM
Повторный сеанс пользователя с использованием FedCM (с отключенным автоматическим входом)Повторный сеанс пользователя без FedCM (с отключенным автоматическим входом)

Повторный пользователь, зашедший один раз (с включенным автоматическим входом)

Используя FedCM, пользователи могут нажать X , чтобы отменить автоматический вход в систему в течение 5 секунд вместо нажатия кнопки «Отмена» .

Использование FedCM Без FedCM
Повторный сеанс пользователя с использованием FedCM (с включенным автоматическим входом)Повторный сеанс пользователя без FedCM (с включенным автоматическим входом)

Многосеансовый

При использовании FedCM One Tap отображает доменное имя верхнего уровня вместо имени приложения.

Использование FedCM Без FedCM
Многосессионный пользователь, использующий FedCMМногосессионный пользователь без FedCM

Основные этапы работы пользователя с кнопкой FedCM см. на странице «Войти с помощью Google».

Прежде чем начать

Проверьте, поддерживают ли настройки и версия вашего браузера API FedCM. Рекомендуется обновить его до последней версии.

  • API FedCM доступен в Chrome 117 и более поздних версиях.

  • Настройка входа через сторонние сервисы включена в Chrome. Она влияет только на функцию One Tap и не влияет на работу кнопок FedCM.

  • Если у вас браузер Chrome версии 119 или более ранней, откройте chrome://flags и включите экспериментальную функцию FedCmWithoutThirdPartyCookies . Этот шаг не требуется для браузера Chrome версии 120 или более поздней.

Перенесите свое веб-приложение

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

1. Добавьте логический флаг для включения FedCM для One Tap при инициализации с помощью:

2. Добавьте логический флаг для включения FedCM для кнопки при инициализации с помощью: (Необязательно)

  • HTML-код: установите атрибут data-use_fedcm_for_button в true , чтобы включить поток кнопок FedCM. Если включен только поток кнопок FedCM, вы также можете установить атрибут data-use_fedcm_for_button в true , чтобы включить новую функцию автоматического выбора .

  • JavaScript: установите для use_fedcm_for_button значение true в объекте IdConfiguration , чтобы включить поток кнопок FedCM. Если включен только поток кнопок FedCM, можно также установить для атрибута button_auto_select значение true , чтобы включить новую функцию автоматического выбора .

3. Удалите использование методов isDisplayMoment() , isDisplayed() , isNotDisplayed() и getNotDisplayedReason() для One Tap в вашем коде.

Для повышения конфиденциальности пользователей обратный вызов google.accounts.id.prompt больше не возвращает уведомления о моменте отображения в объекте PromptMomentNotication . Удалите весь код, зависящий от методов, связанных с моментом отображения. Это методы isDisplayMoment() , isDisplayed() , isNotDisplayed() и getNotDisplayedReason() .

4. Удалите использование метода getSkippedReason() для One Tap в вашем коде.

Хотя момент пропуска isSkippedMoment() по-прежнему будет вызываться из обратного вызова google.accounts.id.prompt в объекте PromptMomentNotication , подробная причина не будет указана. Удалите из кода весь код, зависящий от метода getSkippedReason() .

Обратите внимание, что уведомление о моменте отклонения isDismissedMoment() и связанный с ним подробный метод причины getDismissedReason() не изменяются при включении FedCM.

5. Удалите атрибуты стиля position из data-prompt_parent_id и intermediate_iframes для One Tap.

Браузер управляет размером и положением пользовательских подсказок, настраиваемые положения для One Tap on Desktop не поддерживаются.

6. При необходимости обновите макет страницы для One Tap.

Браузер управляет размером и положением пользовательских подсказок. В зависимости от макета отдельных страниц, часть контента может быть перекрыта, поскольку пользовательские положения для One Tap on Desktop не поддерживаются никакими способами, такими как атрибут style , data-prompt_parent_id , intermediate_iframes , настраиваемый iframe и другие креативные способы.

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

7. Добавьте атрибут allow="identity-credentials-get" к родительскому фрейму, если ваше веб-приложение вызывает API One Tap или Button из кросс-источниковых iframes.

Элемент iframe считается кросс-источником, если его источник не полностью совпадает с родительским источником. Например:

  • Разные домены: https://example1.com и https://example2.com
  • Различные домены верхнего уровня: https://example.uk и https://example.jp
  • Поддомены: https://example.com и https://login.example.com

При использовании One Tap в кросс-доменном iframe пользователи могут столкнуться с проблемой. В качестве меры безопасности для предотвращения сбора учётных данных в запросе One Tap отображается имя домена верхнего уровня , а не iframe. Однако токены идентификаторов выдаются источнику iframe. Подробнее см. в этой проблеме на GitHub .

Поскольку это несоответствие может вводить в заблуждение, поддерживается только использование One Tap в кросс-доменных, но на одном сайте iframe. Например, страница в домене верхнего уровня https://www.example.com использует iframe для встраивания страницы с One Tap на https://login.example.com . В подсказке One Tap будет отображаться «Войти на example.com через google.com».

Все остальные случаи, например, разные домены, не поддерживаются . Вместо этого рассмотрите альтернативные методы интеграции, такие как:

  • Реализация кнопки «Войти через Google» без включенного FedCM.
  • Реализация One Tap на домене верхнего уровня
  • Использование конечных точек Google OAuth 2.0 для более индивидуальной интеграции.
  • Если вы встраиваете сторонний сайт в iframe и не можете изменить его реализацию One Tap, вы можете отключить отображение запроса One Tap в iframe. Для этого удалите атрибут allow="identity-credentials-get" из тега iframe в родительском фрейме. Это отключит вывод запроса, и вы сможете направлять пользователей непосредственно на страницу входа встроенного сайта.

При вызове One Tap или Button API из кросс-источниковых iframes необходимо добавить атрибут allow="identity-credentials-get" в тег iframe каждого родительского фрейма:

  <iframe src="https://your.cross-origin/onetap.page" allow="identity-credentials-get"></iframe>

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

Например, рассмотрим следующий сценарий:

  • Верхний документ ( https://www.example.uk ) содержит iframe с именем «Iframe A», в который встроена страница ( https://logins.example.com ).

  • Эта встроенная страница ( https://logins.example.com ) также содержит iframe с именем «Iframe B», который дополнительно встраивает страницу ( https://onetap.example2.com ), на которой размещены One Tap или Button.

    Чтобы обеспечить правильное отображение One Tap или Button, атрибут необходимо добавить к тегам Iframe A и Iframe B.

    Будьте готовы к вопросам о том, что запрос One Tap или кнопка не отображаются. Другие сайты с другим происхождением могут встраивать ваши страницы с One Tap в свои iframe. Вы можете получать больше запросов в службу поддержки, связанных с отсутствием One Tap или кнопки от конечных пользователей или других владельцев сайтов. Хотя обновления могут вносить только владельцы сайтов на своих страницах, вы можете сделать следующее, чтобы смягчить последствия:

  • Обновите документацию для разработчиков, включив в неё информацию о том, как правильно настроить iframe для вызова вашего сайта. Вы можете добавить ссылку на эту страницу в документацию.

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

  • Сообщите своей службе поддержки об этом предстоящем изменении и подготовьтесь к ответу на запрос заранее.

  • Заранее свяжитесь с затронутыми партнерами, клиентами или владельцами сайтов для обеспечения плавного перехода FedCM.

8. Добавьте эти директивы в свою политику безопасности контента (CSP).

Этот шаг необязателен, поскольку не все веб-сайты определяют CSP.

  • Если на вашем сайте не используется CSP, никаких изменений не требуется.

  • Если ваш CSP работает с текущим One Tap или Button и вы не используете connect-src , frame-src , script-src , style-src или default-src , то никаких изменений не требуется.

  • В противном случае следуйте этому руководству по настройке CSP. Без правильной настройки CSP кнопка FedCM One Tap или Button не будет отображаться на сайте.

9. Удалите поддержку ускоренных мобильных страниц (AMP) для входа.

Поддержка входа пользователей в AMP — это дополнительная функция ГИС, которую может реализовать ваше веб-приложение. В этом случае

Удалить все ссылки на:

  • пользовательский элемент amp-onetap-google и 
  • <script async custom-element="amp-onetap-google" src="https://cdn.ampproject.org/v0/amp-onetap-google-0.1.js"></script>

    Рассмотрите возможность перенаправления запросов на вход с AMP на HTML-интерфейс вашего сайта. Обратите внимание, что Intermediate Iframe Support API останется прежним.

Протестируйте и проверьте свою миграцию

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

  1. Убедитесь, что ваш браузер поддерживает FedCM и у вас есть существующий сеанс учетной записи Google.

  2. Перейдите на страницу(ы) One Tap или Button в вашем приложении.

  3. Убедитесь, что подсказка или кнопка «Одно касание» отображается и безопасно накладывается на базовый контент.

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

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

Период восстановления одного нажатия

Нажатие кнопки « одним нажатием» в правом верхнем углу закрывает окно и переходит в режим ожидания, который временно отключает отображение окна «Закрыть одним нажатием». В Chrome, если вы хотите, чтобы окно «Закрыть одним нажатием» снова отображалось до окончания периода ожидания, вы можете сбросить статус ожидания, нажав на значок замка в адресной строке и нажав кнопку «Сбросить разрешение» .

Автоматический вход в тихий период

При тестировании автоматического входа в One Tap с помощью FedCM между каждой попыткой входа устанавливается 10-минутный период молчания. Этот период молчания нельзя сбросить. Чтобы снова запустить автоматический вход, вам придётся подождать 10 минут или использовать другую учётную запись Google.

Полезные ресурсы

Инструмент анализа Privacy Sandbox (PSAT) — это расширение Chrome DevTools, помогающее внедрять альтернативные API, такие как FedCM. Он сканирует ваш сайт на наличие уязвимых функций и предоставляет список рекомендуемых изменений.