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

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

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

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

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

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

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

Впечатления от использования One Tap с 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

См. страницу с кнопкой «Войти через Google» для получения информации о ключевых сценариях взаимодействия пользователей с кнопкой FedCM.

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

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

  • API FedCM доступен в Chrome версии 117 и выше.

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

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

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

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

1. Добавьте логический флаг для включения 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 , чтобы включить новую функцию автоматического выбора .

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

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

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

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

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

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

Размер и положение пользовательских подсказок контролируется браузером; настройка положения подсказок в режиме «Одно касание» на настольных компьютерах не поддерживается.

5. При необходимости обновите макет страницы для режима «Одно касание».

Размер и положение пользовательских подсказок контролируется браузером. В зависимости от макета отдельных страниц, часть контента может быть наложена поверх других элементов, поскольку пользовательские позиции для функции «Одно касание» на настольных компьютерах не поддерживаются никакими способами, такими как атрибут стиля , data-prompt_parent_id , intermediate_iframes , настраиваемый iframe и другие креативные решения.

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

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

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

При вызове API One Tap или Button из iframe-элементов, расположенных в разных источниках, необходимо добавить атрибут 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.

    Для корректного отображения функции «Одно касание» или «Кнопка» необходимо добавить атрибут как к тегу Iframe A, так и к тегу Iframe B.

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

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

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

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

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

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

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

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

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

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

8. Удалить поддержку технологии Accelerated Mobile Pages (AMP) для входа в систему.

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

Удалите все упоминания о:

  • пользовательский элемент 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. Перейдите на страницу (страницы) «Одно касание» или «Кнопка» в вашем приложении.

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

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

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

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

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

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

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

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

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