Начиная с Chrome 125 API режима кнопок начинает пробную версию Origin на десктопе. С API режима кнопок поставщики удостоверений могут использовать API FedCM, даже если у их пользователей нет активных сеансов IdP при вызове API. Затем пользователи могут войти на веб-сайт с помощью своей федеративной учетной записи без перехода на сайт IdP. Пользовательский интерфейс FedCM в режиме кнопок более заметен по сравнению с существующим потоком виджетов, поскольку он управляется жестом пользователя и лучше отражает намерение пользователя войти в систему.
API режима кнопки
Пользовательский интерфейс FedCM был доступен в виде виджета, отображаемого в правом верхнем углу на настольном компьютере или в виде нижнего листа на мобильном устройстве, как только вызывается API, что может происходить, когда пользователь попадает на проверяющую сторону (RP). Это называется режимом виджета . Чтобы отобразить виджет, пользователь должен войти в IdP, прежде чем он попадет на RP. FedCM сам по себе не имел надежного способа позволить пользователю войти в IdP, прежде чем он мог позволить пользователю войти в RP, используя учетную запись, доступную на IdP. FedCM собирается добавить способ сделать это.
Новый 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 125 по адресу https://fedcm-rp-demo.glitch.me/button_flow .
Чтобы использовать 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 указано следующее:
{
"accounts_endpoint" : ...,
"modes: {
"button": {
"supports_use_other_account": true,
}
}
}
Примите участие в исследовании происхождения
Вы можете попробовать API режима кнопок локально, включив флаг Chrome chrome://flags#fedcm-button-mode в Chrome 125 или более поздней версии.
Провайдеры удостоверений также могут включить режим кнопки, зарегистрировав пробную версию источника:
- Зарегистрируйте пробную версию стороннего источника для RP.
Пробные версии Origin позволяют вам попробовать новые функции и дать отзыв об их удобстве использования, практичности и эффективности сообществу веб-стандартов. Для получения дополнительной информации ознакомьтесь с Руководством по пробным версиям Origin для веб-разработчиков .
Пробная версия API Button Mode доступна для версий Chrome 125 и Chrome 130.
- Перейдите на страницу регистрации пробной версии Origin .
- Нажмите кнопку «Зарегистрироваться» и заполните форму для запроса токена.
- Введите источник IdP как Web Origin .
- Установите флажок «Стороннее сопоставление», чтобы внедрить токен с помощью JavaScript в другие источники.
- Нажмите «Отправить» .
- Встроить выпущенный токен на сторонний сайт.
Чтобы встроить токен на сторонний веб-сайт, добавьте следующий код в библиотеку 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 будет применять CORS к конечной точке утверждения идентификатора, начиная с Chrome 125.
CORS (Cross-Origin-Resource-Sharing) — это система, состоящая из передачи заголовков HTTP, которая определяет, блокируют ли браузеры код JavaScript интерфейса для доступа к ответам на запросы кросс-источника. Конечная точка утверждения идентификатора на сервере IdP должна отвечать на запрос дополнительными заголовками. Ниже приведен пример заголовка ответа на запрос с 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 контекстом first-party или same-site. Указав None , файл cookie можно отправить на сторонний домен.
В FedCM Chrome отправляет файлы cookie в конечную точку учетных записей , конечную точку утверждения идентификатора и конечную точку отключения . Начиная с Chrome 125, Chrome будет отправлять эти запросы с учетными данными только с файлами cookie, явно помеченными как SameSite=None .