Chrome 116 envía funciones de FedCM, como la API de Login Hint, la API de User Info y la API de RP Context, y comienza una prueba de origen para la API de estado de acceso de IdP.
En Chrome 116, Chrome incluirá las siguientes tres funciones nuevas de Administración de credenciales federadas (FedCM):
- API de Hint de acceso: Especifica una cuenta de usuario preferida para acceder.
- API de User Info: Recupera la información del usuario recurrente para que el proveedor de identidad (IdP) pueda renderizar un botón de acceso personalizado en un iframe.
- API de RP Context: Usa un título que no sea "Acceder" en el diálogo de FedCM.
Además, Chrome comenzará una prueba de origen para la API de estado de acceso de IdP. La API de estado de acceso del IdP es un requisito y será un cambio rotundo cuando se envíe. Si tienes una implementación de FedCM existente, asegúrate de participar en la prueba de origen.
API de información de acceso
Cuando se invoca a FedCM, el navegador muestra la cuenta con la que se accedió del proveedor de identidad (IdP) especificado. Cuando el IdP admite varias cuentas, enumera todas las cuentas con las que accediste.
Después de que el usuario accede, a veces, el usuario de confianza (RP) le solicita que se vuelva a autenticar. Sin embargo, es posible que el usuario no esté seguro de qué cuenta ha estado usando. Si el RP puede especificar con qué cuenta acceder, sería más fácil para el usuario elegir una. La sugerencia de acceso es el envío de Chrome 116 y, con ella, el RP puede reducir la lista a uno.
Esta extensión agrega un arreglo de login_hints en la respuesta del extremo de la lista de cuentas del IdP, con todos los tipos de filtros posibles que admite el IdP. Por ejemplo, la respuesta de las cuentas podría verse de la siguiente manera cuando un IdP admite el filtrado por ID y correo electrónico:
{
"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"],
...
}, ...]
}
Cuando se pasa login_hints en la lista de cuentas, el RP puede invocar a navigator.credentials.get() con la propiedad loginHint, como se muestra en la siguiente muestra de código para mostrar de manera selectiva la cuenta especificada:
return await navigator.credentials.get({
identity: {
providers: [{
configURL: "https://idp.example/manifest.json",
clientId: "123",
nonce: nonce,
loginHint : "demo1@example.com"
}]
}
});
API de User Info
Los botones de acceso decorados con el logotipo del IdP que permiten a los usuarios acceder con la federación de identidades ahora son comunes. Sin embargo, decorar el botón con el ícono de perfil del usuario y su información resulta aún más intuitivo para acceder, en especial cuando un usuario se registró en este sitio web con el IdP antes.
El desafío es que, como el botón personalizado depende de las cookies de terceros en el dominio del IdP dentro de un iframe para identificar al usuario que accedió para renderizar el botón, no estará disponible una vez que las cookies de terceros dejen de estar disponibles.
La API de User Info, disponible en Chrome 116, proporciona una forma para que el IdP obtenga la información del usuario recurrente del servidor sin depender de las cookies de terceros.
Se espera que el IdP llame a la API desde un iframe incorporado en el sitio web del RP para que pueda recuperar la información del usuario y renderizar un botón personalizado como si fuera parte de la superficie del RP. Con la llamada a la API, el navegador realiza una solicitud al extremo de la lista de cuentas y, luego, muestra un arreglo de información del usuario en los siguientes casos:
- El usuario ya accedió al RP con el IdP a través de FedCM en la misma instancia del navegador y no se borraron los datos.
- El usuario accedió al IdP en la misma instancia del navegador.
// 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.
}
Ten en cuenta que, para permitir la llamada a IdentityProvider.getUserInfo() desde un iframe que tiene el mismo origen que el IdP, el HTML de incorporación debe permitirlo explícitamente con la política de permisos identity-credentials-get.
<iframe src="https://fedcm-idp-demo.glitch.me" allow="identity-credentials-get"></iframe>
Puedes verlo en acción en https://fedcm-rp-demo.glitch.me/button.
API de RP Context
La API de RP Context, disponible en Chrome 116, permite que un RP modifique la cadena en la IU del diálogo de FedCM para que pueda admitir contextos de autenticación predefinidos. Consulta las siguientes capturas de pantalla para ver distintas opciones:
El uso es simple; proporciona la propiedad identity.context de "signin" (valor predeterminado), "signup", "use" o "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",
}],
}
});
Prueba de origen de la API del estado de acceso del IdP
Chrome inicia una prueba de origen de la API de estado de acceso de IdP en computadoras de escritorio desde Chrome 116, seguida de Chrome para Android. Las pruebas de origen te brindan acceso a una función nueva o experimental para compilar una funcionalidad que los usuarios pueden probar durante un tiempo limitado antes de que esté disponible para todos.
La API de estado de acceso de IdP es un mecanismo en el que un IdP informa al navegador el estado de acceso del usuario en el IdP. Con esta API, el navegador puede reducir las solicitudes innecesarias al IdP y mitigar posibles ataques de tiempo.
Informa al navegador sobre el estado de acceso del usuario
Los IdP pueden indicar el estado de acceso del usuario al navegador mediante el envío de un encabezado HTTP o una llamada a una API de JavaScript, cuando el usuario accede al IdP o cuando el usuario sale de todas sus cuentas de IdP. El navegador registra el estado como uno de los siguientes: "sign-in", "sign-out" o "unknown" (predeterminado).
Para indicar que el usuario accedió, envía un encabezado HTTP IdP-SignIn-Status: action=signin
en una navegación de nivel superior o una solicitud de subrecursos del mismo origen:
IdP-SignIn-Status: action=signin
Como alternativa, llama a la API de JavaScript IdentityProvider.login() desde el origen del IdP:
IdentityProvider.login()
Estas registrarán el estado de acceso del usuario como “acceso”. Cuando el estado de acceso del usuario se establece como "sign-in", el FedCM que realiza la llamada de relaciones públicas realiza solicitudes al extremo de la lista de cuentas del IdP y muestra las cuentas disponibles al usuario en el diálogo de FedCM.
Para indicar que el usuario salió de todas sus cuentas, envía el encabezado HTTP IdP-SignIn-Status: action=signout-all en una navegación de nivel superior o una solicitud de subrecursos del mismo origen:
IdP-SignIn-Status: action=signout-all
Como alternativa, llama a la API de JavaScript IdentityProvider.logout() desde el origen del IdP:
IdentityProvider.logout()
Estas registrarán el estado de acceso del usuario como "salida". Cuando el estado de acceso del usuario es "salir", la llamada a FedCM falla silenciosamente sin enviar una solicitud al extremo de la lista de cuentas del IdP.
De forma predeterminada, el estado de acceso del IdP está configurado como "desconocido". Este estado se usa antes de que el IdP envíe una señal mediante la API de estado de acceso del IdP. Presentamos este estado para una mejor transición porque es posible que un usuario ya haya accedido al IdP cuando enviamos esta API y que el IdP no tenga la oportunidad de indicarlo al navegador en el momento en que se invoque FedCM por primera vez. En este caso, hacemos una solicitud al extremo de la lista de cuentas del IdP y actualizamos el estado en función de la respuesta del extremo de la lista de cuentas:
- Si el extremo muestra una lista de cuentas activas, actualiza el estado a "sign-in" y abre el diálogo de FedCM para mostrar esas cuentas.
- Si el extremo no muestra ninguna cuenta, actualiza el estado a "salir" y falla la llamada a FedCM.
¿Qué ocurre si vence la sesión del usuario? Permitir que el usuario acceda mediante un flujo de acceso dinámico
Aunque el IdP continúa informando al navegador del estado de acceso del usuario, podría estar desincronizado, por ejemplo, cuando vence la sesión. El navegador intenta enviar una solicitud con credenciales al extremo de la lista de cuentas cuando el estado de acceso es "sign-in", pero el servidor la rechaza porque la sesión ya no está disponible. En ese caso, el navegador puede permitir de forma dinámica que el usuario acceda al IdP a través de una ventana emergente.
El diálogo FedCM mostrará un mensaje, como se muestra en la siguiente imagen:
Cuando haces clic en el botón Continuar, el navegador abre una ventana emergente que envía al usuario a la página de acceso del IdP.
La URL de la página de acceso (que debe ser el origen del IdP) se puede especificar con signin_url como parte del archivo de configuración de IdP.
{
"accounts_endpoint": "/auth/accounts",
"client_metadata_endpoint": "/auth/metadata",
"id_assertion_endpoint": "/auth/idtokens",
"signin_url": "/signin"
}
}
La ventana emergente es una ventana normal del navegador que utiliza cookies propias. Lo que suceda dentro de la ventana de contenido depende del IdP, pero no hay controladores de ventana disponibles para realizar una solicitud de comunicación de origen cruzado a la página de RP. Una vez que el usuario accede, el IdP debe hacer lo siguiente:
- Envía el encabezado
IdP-SignIn-Status: action=signino llama a la API deIdentityProvider.login()para informar al navegador que accedió el usuario. - Llama a
IdentityProvider.close()para que se cierre (la ventana emergente).
// User is signed in...
// Don't forget feature detection.
if (IdentityProvider) {
// Signal to the browser that the user has signed in.
IdentityProvider.close();
}
Puedes probar el comportamiento de la API de estado de acceso del IdP en nuestra demostración. La sesión vence en tres minutos después de que accedas al IdP de demostración. Luego, puedes observar el acceso al IdP a través del comportamiento de la ventana emergente.
Participar en la prueba de origen
Puedes probar la API de estado de acceso de IdP de manera local si activas una marca
de Chrome
chrome://flags#fedcm-idp-signin-status-api en
Chrome 116 o versiones posteriores.
También puedes habilitar la API de estado de acceso de IdP registrando una prueba de origen dos veces:
- Registra una prueba de origen para el IdP.
- Registrar una prueba de origen de terceros para el RP.
Las pruebas de origen te permiten probar funciones nuevas y enviar comentarios sobre su usabilidad, funcionalidad y eficacia a la comunidad de estándares de la Web. Para obtener más información, consulta la Guía de pruebas de origen para desarrolladores web.
La prueba de origen de la API de estado de acceso del IdP está disponible desde Chrome 116 hasta Chrome 119.
Registra una prueba de origen para el IdP
- Ve a la página de registro de la prueba de origen.
- Haz clic en el botón Register y completa el formulario para solicitar un token.
- Ingresa el origen del IdP como Web Origin.
- Haz clic en Enviar.
- Agrega una etiqueta
origin-trial<meta>al encabezado de las páginas que usanIdentityProvider.close(). Por ejemplo, podría verse de la siguiente manera:
<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">.
Registrar una prueba de origen de terceros para la parte restringida
- Ve a la página de registro de la prueba de origen.
- Haz clic en el botón Register y completa el formulario para solicitar un token.
- Ingresa el origen del IdP como Web Origin.
- Marca Coincidencia de terceros para insertar el token con JavaScript en otros orígenes.
- Haz clic en Enviar.
- Incorpora el token emitido en un sitio web de terceros.
Para incorporar el token en un sitio web de terceros, agrega el siguiente código a la biblioteca de JavaScript o al SDK que se entregan desde el origen del IdP.
const tokenElement = document.createElement('meta');
tokenElement.httpEquiv = 'origin-trial';
tokenElement.content = 'TOKEN_GOES_HERE';
document.head.appendChild(tokenElement);
Reemplaza TOKEN_GOES_HERE por tu propio token.
Interactúa y comparte comentarios
Si tienes comentarios o tienes algún problema durante la prueba, puedes compartirlos en crbug.com.
Foto de Dan Cristian Pădureaccessibility en Unsplash