Обновления 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 запускает пробную версию Origin для API IdP Sign-In Status . API IdP Sign-in Status является обязательным и станет критическим изменением после его выпуска. Если у вас уже есть реализация FedCM, обязательно примите участие в пробной версии Origin.

API подсказок для входа

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

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

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

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

{
  "accounts": [{
    "id": "demo1",
    "email": "demo1@example.com",
    "name": "John Doe",
    "login_hints": ["demo1", "demo1@example.com"],
    ...
  }, {
    "id": "demo2",
    "email": "demo2@example.com",
    "name": "Jane Doe",
    "login_hints": ["demo2", "demo2@example.com"],
    ...
  }, ...]
}

Передав 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 : "demo1@example.com"
    }]
  }
});

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

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

Кнопка «Войти с помощью Google».
Кнопка «Войти с помощью Google»
Персонализированный вход с кнопкой Google.
Персонализированный вход с кнопкой Google

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

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

Ожидается, что IdP будет вызывать 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-demo-idp.dev" allow="identity-credentials-get"></iframe>

Увидеть это в действии можно по ссылке https://fedcm-demo-rp.dev/active-mode .

API контекста RP

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

Отображается диалоговое окно FedCM с надписью «Войти в ****».
Отображается диалоговое окно FedCM с надписью «Войти в ****». Это вариант по умолчанию, если контекст RP не указан.
Диалог FedCM визуализирован с помощью
Диалоговое окно FedCM с надписью «Зарегистрироваться в ****»
Диалог FedCM визуализирован с помощью
Диалоговое окно 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

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

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

Информировать браузер о статусе входа пользователя

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

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

IdP-SignIn-Status: action=signin

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

IdentityProvider.login()

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

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

IdP-SignIn-Status: action=signout-all

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

IdentityProvider.logout()

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

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

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

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

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

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

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

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

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

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

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

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

  • Отправьте заголовок 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.

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

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

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

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

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

Пробная версия API IdP Sign-In Status доступна для версий 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"> .

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

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

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

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

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

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

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

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