Обновления FedCM: API статуса входа в систему IdP, подсказка для входа и многое другое

Chrome 116 предоставляет такие возможности FedCM, как API подсказки для входа, API информации о пользователе и API контекста RP, а также запускает пробную версию API статуса входа в систему IdP.

В Chrome 116 Chrome предоставляет следующие три новые функции федеративного управления учетными данными (FedCM) :

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

Кроме того, Chrome запускает пробную версию API статуса входа в систему IdP . API статуса входа в систему IdP является обязательным и станет критическим изменением после его выпуска. Если у вас уже есть реализация FedCM, обязательно примите участие в исходной пробной версии.

API подсказок для входа в систему

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

Диалоговое окно FedCM, показывающее несколько учетных записей пользователей

После входа пользователя в систему иногда проверяющая сторона (RP) просит пользователя пройти повторную аутентификацию. Но пользователь может не быть уверен, какую учетную запись он использовал. Если RP может указать, с какой учетной записью войти в систему, пользователю будет проще выбрать учетную запись. Подсказка для входа в систему поставляется в Chrome 116, и с ее помощью RP может сузить список до одного.

Это расширение добавляет массив login_hints в ответ конечной точки списка учетных записей от IdP со всеми возможными типами фильтров, которые поддерживает IdP. Например, ответ учетной записи может выглядеть следующим образом, если поставщик удостоверений поддерживает фильтрацию по электронной почте и идентификатору:

{
  "accounts": [{
    "id": "demo1",
    "email": "[e-mail]",
    "name": "John Doe",
    "login_hints": ["demo1", "[e-mail]"],
    ...
  }, {
    "id": "demo2",
    "email": "[e-mail]",
    "name": "Jane Doe",
    "login_hints": ["demo2", "[e-mail]"],
    ...
  }, ...]
}

Передавая login_hints в списке учетных записей, RP может вызвать navigator.credentials.get() со свойством loginHint , как показано в следующем примере кода, чтобы выборочно отобразить указанную учетную запись:

return await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: "https://idp.example/manifest.json",
      clientId: "123",
      nonce: nonce,
      loginHint : "[e-mail]"
    }]
  }
});

API информации о пользователе

Кнопки входа, украшенные логотипом IdP, которые позволяют пользователям входить в систему с использованием федерации удостоверений, теперь стали обычным явлением. Однако украшение кнопки с использованием значка профиля пользователя и его информации еще более интуитивно понятно для входа в систему, особенно если пользователь ранее зарегистрировался на этом веб-сайте с помощью IdP.

Войти с помощью кнопки Google

Персонализированная кнопка входа в систему с помощью Google

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

API информации о пользователе, поставляемый в Chrome 116, предоставляет IdP возможность получать информацию о возвращающемся пользователе с сервера без зависимости от сторонних файлов cookie.

Ожидается, что поставщик удостоверений будет вызывать API из iframe, встроенного в веб-сайт RP, чтобы он мог получать информацию о пользователе и отображать персонализированную кнопку, как если бы она была частью поверхности RP. С помощью вызова API браузер делает запрос к конечной точке списка учетных записей , а затем возвращает массив информации о пользователе, если:

• Пользователь ранее входил в RP с IdP через FedCM в том же экземпляре браузера, и данные не были удалены.
• Пользователь входит в IdP в том же экземпляре браузера.

// Iframe displaying a page from the https://idp.example origin
const user_info = await IdentityProvider.getUserInfo({
    configUrl: "https://idp.example/fedcm.json",
    clientId: "client1234"
});

// IdentityProvider.getUserInfo returns an array of user information.
if (user_info.length > 0) {
  // Chrome puts returning accounts first, so the first account received is guaranteed to be a returning account.
  const name = user_info[0].name;
  const given_name = user_info[0].given_name;
  const display_name = given_name ? given_name : name;
  const picture = user_info[0].picture;
  const email = user_info[0].email;
  // Renders the personalized sign-in button with the information above.
}

Обратите внимание: чтобы разрешить вызов IdentityProvider.getUserInfo() из iframe, который имеет то же происхождение, что и IdP, встраиваемый HTML должен явно разрешать это с помощью политики разрешений identity-credentials-get .

<iframe src="https://fedcm-idp-demo.glitch.me" allow="identity-credentials-get"></iframe>

Вы можете увидеть это в действии по адресу https://fedcm-rp-demo.glitch.me/button .

API контекста RP

API контекста RP, поставляемый в Chrome 116, позволяет RP изменять строку в диалоговом пользовательском интерфейсе FedCM, чтобы она могла соответствовать предопределенным контекстам аутентификации. На следующих скриншотах представлены различные варианты:

Диалоговое окно FedCM отображается с надписью «Войти в ****». Это опция по умолчанию, если не указан контекст RP.

Диалоговое окно FedCM отображается с надписью «Зарегистрируйтесь в ****».

Диалоговое окно FedCM отображается с надписью «Продолжить до ****».

Диалоговое окно FedCM отображается с использованием параметра «Использовать ****».

Использование простое; укажите для identity.context одно из следующих значений: "signin" (по умолчанию), "signup" , "use" или "continue" .

const credential = await navigator.credentials.get({
  identity: {
    // "signin" is the default, "signup", "use" and "continue" 
    // can also be used
    context: "signup", 
    providers: [{
      configURL: "https://idp.example/fedcm.json",
      clientId: "1234",
    }],
  }
});

Исходная пробная версия API статуса входа в IdP

Chrome запускает пробную версию API статуса входа в систему IdP на настольных компьютерах из Chrome 116, а позже — Android Chrome. Пробные версии Origin предоставляют вам доступ к новой или экспериментальной функции для создания функций, которые ваши пользователи могут опробовать в течение ограниченного времени, прежде чем эта функция станет доступна всем.

Ключевой момент: API статуса входа в систему IdP — это кардинальное изменение, которое станет обязательным требованием для FedCM после его выпуска.

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

Примечание. FedCM вводит запрос с учетными данными к конечной точке списка учетных записей . Этот запрос не отправляет данные, идентифицирующие запрашивающую сторону, а также не позволяет передавать данные, предоставленные RP; однако браузер отдельно выполняет запрос без учетных данных, содержащий информацию RP, к client_metadata_endpoint , затем сервер IdP может сопоставить запрос без учетных данных с запросом с учетными данными (стохастически), используя время или другие данные для снятия отпечатков пальцев. Более подробную информацию можно найти на этих слайдах .

Сообщите браузеру о статусе входа пользователя.

Поставщики удостоверений могут сообщать браузеру о статусе входа пользователя, отправляя HTTP-заголовок или вызывая API JavaScript, когда пользователь входит в систему в IdP или когда пользователь выходит из всех своих учетных записей IdP. Браузер записывает одно из следующих состояний: «вход», «выход» или «неизвестно» (по умолчанию).

Чтобы сигнализировать о том, что пользователь вошел в систему, отправьте HTTP-заголовок IdP-SignIn-Status: action=signin в навигации верхнего уровня или в запросе подресурса того же происхождения:

IdP-SignIn-Status: action=signin

Альтернативно, вызовите JavaScript API IdentityProvider.login() из источника IdP:

IdentityProvider.login()

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

Чтобы сигнализировать о том, что пользователь вышел из всех своих учетных записей, отправьте HTTP-заголовок IdP-SignIn-Status: action=signout-all в навигации верхнего уровня или в запросе подресурса того же происхождения:

IdP-SignIn-Status: action=signout-all

Альтернативно, вызовите JavaScript API IdentityProvider.logout() из источника IdP:

IdentityProvider.logout()

Они будут записывать статус входа пользователя как «выход». Когда статус входа пользователя — «выход», вызов FedCM автоматически завершается неудачей без выполнения запроса к конечной точке списка учетных записей IdP.

По умолчанию статус входа в IdP установлен на «неизвестно». Этот статус используется до того, как IdP отправит сигнал с помощью API статуса входа IdP. Мы вводим этот статус для более удобного перехода, поскольку пользователь, возможно, уже вошел в IdP, когда мы поставляем этот API, и у IdP может не быть возможности сообщить об этом браузеру к моменту первого вызова FedCM. В этом случае мы делаем запрос к конечной точке списка учетных записей IdP и обновляем статус на основе ответа от конечной точки списка учетных записей:

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

Что делать, если срок действия сеанса пользователя истекает? Разрешите пользователю войти в систему с помощью динамического процесса входа.

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

В диалоговом окне FedCM отобразится сообщение, как показано на следующем рисунке:

Диалоговое окно FedCM с предложением войти в IdP.

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

Всплывающее окно, отображаемое после нажатия кнопки входа в систему IdP.

Примечание. Веб-сайт не контролирует размер всплывающего окна до его открытия. По умолчанию размер установлен на 500 пикселей по ширине и 600 пикселей по высоте. Веб-сайт может изменить размер после открытия окна из области содержимого.

URL-адрес страницы входа (который должен быть источником IdP) можно указать с помощью signin_url как часть файла конфигурации IdP .

{
  "accounts_endpoint": "/auth/accounts",
  "client_metadata_endpoint": "/auth/metadata",
  "id_assertion_endpoint": "/auth/idtokens",
  "signin_url": "/signin"
  }
}

Всплывающее окно представляет собой обычное окно браузера, в котором используются основные файлы cookie. Что бы ни происходило в окне контента, зависит от IdP, но дескрипторы окон недоступны для отправки запроса на связь между источниками на странице RP. После того как пользователь вошел в систему, IdP должен:

• Отправьте заголовок IdP-SignIn-Status: action=signin или вызовите API IdentityProvider.login() , чтобы сообщить браузеру, что пользователь выполнил вход.
• Вызовите IdentityProvider.close() , чтобы закрыться (всплывающее окно).

// User is signed in...
// Don't forget feature detection.
if (IdentityProvider) {
  // Signal to the browser that the user has signed in.
  IdentityProvider.close();
}

Пользователь входит в RP после входа в IdP с помощью FedCM.

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

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

• Если браузер не знает статус входа пользователя («неизвестно»), статус обновляется («вход» или «выход») в зависимости от ответа IdP от конечной точки списка учетных записей. Динамический поток входа не будет запущен.
• Если пользователь вошел в IdP в браузере («вход»), а затем явно вышел из IdP («выход»), поток динамического входа не будет запущен.
• Если пользователь вошел в IdP в браузере («вход»), но срок действия сеанса истекает без явного выхода, будет запущен поток динамического входа.

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

Вы можете попробовать поведение API статуса входа в систему IdP в нашей демонстрации . Срок действия сеанса истекает через три минуты после входа в демонстрационную версию IdP . Затем вы можете наблюдать за входом в IdP через поведение всплывающего окна.

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

Вы можете попробовать API статуса входа в систему IdP локально, включив Chrome.
включить флаг chrome://flags#fedcm-idp-signin-status-api
Chrome 116 или новее.

Вы также можете включить API статуса входа в систему IdP, дважды зарегистрировав пробную версию Origin:

• Зарегистрируйте пробную версию источника для IdP.
• Зарегистрируйте стороннюю пробную версию для RP.

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

Исходная пробная версия API статуса входа в IdP доступна в Chrome 116–119.

Зарегистрируйте пробную версию источника для IdP

1. Перейдите на страницу регистрации пробной версии Origin .
2. Нажмите кнопку «Зарегистрироваться» и заполните форму, чтобы запросить токен.
3. Введите источник IdP в качестве Web Origin .
4. Нажмите «Отправить» .
5. Добавьте тег <meta> origin-trial в заголовок страниц, использующих IdentityProvider.close() . Например, это может выглядеть примерно так:
   <meta http-equiv="origin-trial" content="TOKEN_GOES_HERE"> .

Предупреждение. Отправка HTTP-заголовка Origin-Trial не будет работать для этого API.

Зарегистрируйте стороннюю пробную версию для RP

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

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

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

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

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

Привлекайте и делитесь отзывами

Если у вас есть отзывы или вы столкнулись с какими-либо проблемами во время тестирования, вы можете поделиться ими на crbug.com .

Фото Дэна Кристиана Пэдуреца на Unsplash