Обновления FedCM: пробная версия API режима кнопок, CORS и SameSite

Эйдзи Китамура

Начиная с Chrome 125, API режима кнопок начинает пробную версию на десктопах. С API режима кнопок поставщики удостоверений могут использовать API FedCM, даже если у их пользователей нет активных сеансов IdP на момент вызова API. После этого пользователи могут входить на веб-сайт, используя свою федеративную учётную запись, без перехода на сайт IdP. Пользовательский интерфейс FedCM в режиме кнопок более заметен по сравнению с интерфейсом существующего виджета, поскольку он управляется жестом пользователя и лучше отражает намерение пользователя войти в систему.

API режима кнопки

Пользовательский интерфейс FedCM доступен в виде виджета, отображаемого в правом верхнем углу на десктопе или в виде нижней панели на мобильном устройстве сразу после вызова API, что может происходить при переходе пользователя на проверяющую сторону (RP). Это называется режимом виджета . Для отображения виджета пользователь должен был войти в IdP до перехода на RP. FedCM сам по себе не предлагал надёжного способа, позволяющего пользователю войти в IdP до того, как он сможет войти в RP, используя учётную запись, доступную на IdP. FedCM готовится добавить такую ​​возможность.

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

Новый API режима кнопок добавляет новый режим пользовательского интерфейса, называемый режимом кнопок . В отличие от режима виджетов, режим кнопок не активируется сразу после того, как пользователь нажимает на RP. Вместо этого он активируется, когда пользователь инициирует процесс входа, например, нажимает кнопку «Войти с помощью IdP».

После нажатия кнопки FedCM проверяет, вошел ли пользователь в IdP , обращаясь к конечной точке учётных записей или проверяя статус входа, сохранённый в браузере . Если пользователь ещё не вошел в систему, FedCM предлагает ему войти в IdP, используя login_url предоставленный IdP, во всплывающем окне. Если браузер знает, что пользователь уже вошел в IdP, или как только пользователь войдет в IdP с помощью всплывающего окна, FedCM открывает модальное диалоговое окно, в котором пользователь может выбрать учётную запись IdP для входа. Выбрав учётную запись, пользователь может войти в RP, используя учётную запись IdP.

В режиме кнопки отображаемое диалоговое окно входа больше, чем в режиме виджета, поэтому значок бренда должен быть больше для поддержания визуального единообразия. Минимальный размер значка для режима виджета составляет 25x25 пикселей, а для режима кнопки — 40x40 пикселей. Известный файл IdP позволяет указать несколько URL-адресов значков следующим образом:

{
  // ... Other settings (like endpoints) here
  "branding": {
    "icons": [
      {
        "url": "https://size-25px-image",
        "size": 25,
      },
      {
        "url": "https://size-40px-image",
        "size": 40
      }
    ]
  }
}
В режиме кнопки модальное диалоговое окно отображается в верхней центральной части Chrome для настольных компьютеров.
В режиме кнопки в верхней центральной части настольного браузера Chrome отображается модальное диалоговое окно с более крупным значком.

Попробуйте сами, используя Chrome 125 по адресу https://fedcm-demo-rp.dev/active-mode .

Пользователь входит в RP, используя API режима кнопок.

Чтобы использовать API режима кнопок:

  • Включите экспериментальную функцию FedCmButtonMode в chrome://flags .
  • Обязательно вызовите API, отвечающий за кратковременную активацию пользователя, например нажатие кнопки.
  • Вызовите API с параметром mode следующим образом: 
  return await navigator.credentials.get({
    identity: {
      providers: [{
        configURL: "https://idp.example/config.json",
        clientId: "123",
        nonce:"456",
      }],
      mode: "button"
    }
  });

Браузер отправит новый параметр в конечную точку утверждения идентификатора, представляющий тип запроса, включив mode=button :

POST /fedcm_assertion_endpoint HTTP/1.1
Host: idp.example
Origin: https://rp.example/
Content-Type: application/x-www-form-urlencoded
Cookie: 0x23223
Sec-Fetch-Dest: webidentity
account_id=123&client_id=client1234&nonce=Ct60bD&disclosure_text_shown=true&is_auto_selected=false&mode=button

Обнаружение особенностей

Чтобы определить, может ли браузер использовать режим кнопки, вы можете проверить это с помощью следующего кода:

let supportsFedCmMode = false;
try {
  navigator.credentials.get({
    identity: Object.defineProperty(
      {}, 'mode', {
        get: function () { supportsFedCmMode = true; }
      }
    )
  });
} catch(e) {}

if (supportsFedCmMode) {
  // The button mode is supported.
}

Использовать другой вариант учетной записи

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

Чтобы включить возможность использования другой учетной записи:

  • Включите экспериментальную функцию FedCmUseOtherAccount в chrome://flags или зарегистрируйтесь в пробной версии API Button Mode.
  • IdP указывает в файле конфигурации IdP следующее: 
{
  "accounts_endpoint" : ...,
  "modes: {
    "button": {
      "supports_use_other_account": true,
    }
  }
}

Примите участие в исследовании происхождения

Вы можете попробовать API режима кнопок локально, включив флаг Chrome chrome://flags#fedcm-button-mode в Chrome 125 или более поздней версии.

Провайдеры удостоверений также могут включить режим кнопки, зарегистрировав пробную версию источника:

Пробные версии Origin позволяют вам опробовать новые функции и оставить отзыв об их удобстве использования, практичности и эффективности сообществу веб-стандартов. Подробнее см. в Руководстве по пробным версиям Origin для веб-разработчиков .

Пробная версия API Button Mode доступна для версий Chrome 125 и 130.

  1. Перейдите на страницу регистрации пробной версии Origin .
  2. Нажмите кнопку «Зарегистрироваться» и заполните форму для запроса токена.
  3. Введите источник IdP как Web Origin .
  4. Установите флажок Соответствие третьих сторон, чтобы внедрить токен с помощью JavaScript в другие источники.
  5. Нажмите «Отправить» .
  6. Встроить выпущенный токен на сторонний сайт.

Чтобы встроить токен на сторонний веб-сайт, добавьте следующий код в библиотеку JavaScript IdP или SDK, предоставляемый из источника IdP.

const tokenElement = document.createElement('meta');
tokenElement.httpEquiv = 'origin-trial';
tokenElement.content = 'TOKEN_GOES_HERE';
document.head.appendChild(tokenElement);

Замените TOKEN_GOES_HERE на свой токен.

CORS и SameSite=None потребуются в Chrome 125

КОРС

Начиная с Chrome 125, Chrome будет применять CORS к конечной точке утверждения идентификатора .

CORS (Cross-Origin-Resource-Sharing) — это система, состоящая из передачи HTTP-заголовков, которая определяет, блокируют ли браузеры доступ JavaScript-кода фронтенда к ответам на запросы из разных источников. Конечная точка подтверждения идентификатора на сервере поставщика удостоверений должна отвечать на запрос дополнительными заголовками. Ниже приведён пример заголовка ответа на запрос с https://fedcm-rp-demo.glitch.me :

Access-Control-Allow-Origin: https://fedcm-rp-demo.glitch.me
Access-Control-Allow-Credentials: true

SameSite=Нет

Параметр SameSite файла cookie определяет, ограничен ли cookie контекстом основного сайта или того же сайта. Если указать значение None , cookie может быть отправлен на сторонний домен.

В FedCM Chrome отправляет файлы cookie на конечную точку учётных записей , конечную точку подтверждения идентификатора и конечную точку отключения . Начиная с версии Chrome 125, Chrome будет отправлять запросы с учётными данными только с файлами cookie, явно помеченными как SameSite=None .