Chrome 116 envía capacidades 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 IdP Sign-In Status.
En Chrome 116, Chrome envía las siguientes tres funciones nuevas de Federated Credential Management (FedCM):
- API de Login Hint: Especifica una cuenta de usuario preferida para acceder.
- API de User Info: Recupera la información del usuario que regresa para que el proveedor de identidad (IdP) pueda renderizar un botón de acceso personalizado dentro de un iframe.
- API de Contexto de RP: Usa un título diferente de "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 IdP Sign-in Status es un requisito y será un cambio rotundo cuando se envíe. Si ya tienes una implementación de FedCM, asegúrate de participar en la prueba de origen.
API de Login Hint
Cuando se invoca FedCM, el navegador muestra la cuenta a la que se accedió desde el proveedor de identidad (IdP) especificado. Cuando el IdP admite varias cuentas, muestra todas las cuentas a las que se accedió.
Después de que el usuario accede, a veces la parte de confianza (RP) le solicita que se vuelva a autenticar. Sin embargo, es posible que el usuario no esté seguro de qué cuenta usó. Si el RP puede especificar con qué cuenta acceder, sería más fácil para el usuario elegir una cuenta. La sugerencia de acceso se envía en Chrome 116 y, con ella, el RP puede reducir la lista a una.
Esta extensión agrega un array de login_hints en la respuesta del endpoint 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 correo electrónico y ID:
{
"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"],
...
}, ...]
}
Si pasas login_hints en la lista de cuentas, el RP puede invocar navigator.credentials.get() con la propiedad loginHint, como se muestra en el siguiente ejemplo de código, para mostrar de forma 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
Ahora es común ver botones de acceso decorados con el logotipo del IdP que permiten a los usuarios acceder con la federación de identidades. Sin embargo, decorar el botón con el ícono de perfil del usuario y su información es aún más intuitivo para acceder, en especial, cuando un usuario ya se registró en este sitio web con el IdP.
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 se den de baja las cookies de terceros.
La API de User Info, que se envía en Chrome 116, proporciona una forma para que la AC obtenga la información del usuario que regresa desde el servidor sin depender de las cookies de terceros.
Se espera que la IdP llame a la API desde un iframe incorporado en el sitio web de la RP para que pueda recuperar la información del usuario y renderizar un botón personalizado como si fuera parte de la plataforma de la RP. Con la llamada a la API, el navegador realiza una solicitud al extremo de la lista de cuentas y, luego, muestra un array de información del usuario en los siguientes casos:
- El usuario accedió a la RP con el IdP a través de FedCM en el pasado en la misma instancia del navegador y los datos no se borraron.
- 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 llamar a IdentityProvider.getUserInfo() desde un iframe que tenga el mismo origen que la IdP, el HTML incorporado debe permitirlo de forma explícita con la política de permisos de 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 Contexto de RP
La API de Contexto de RP, que se envía 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 las diferentes opciones:
El uso es sencillo: proporciona a la propiedad identity.context uno de los valores "signin" (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 de IdP Sign-In Status
Chrome inicia una prueba de origen de la API de Sign-In Status de IdP en computadoras de escritorio a partir de Chrome 116, seguida de Chrome para Android más adelante. Las pruebas de origen te brindan acceso a una función nueva o experimental para crear una funcionalidad que tus usuarios puedan probar por un tiempo limitado antes de que esté disponible para todos.
La API de estado de acceso del 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 sincronización.
Informa al navegador el estado de acceso del usuario
Los IdPs pueden indicar el estado de acceso del usuario al navegador enviando un encabezado HTTP o llamando a una API de JavaScript, cuando el usuario accedió al IdP o cuando salió de todas sus cuentas de IdP. El navegador registra el estado como una de las siguientes opciones: "acceso", "salida" o "desconocido" (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 subrecurso 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()
Estos registrarán el estado de acceso del usuario como "acceso". Cuando el estado de acceso del usuario está configurado como "acceso", la llamada de PR a FedCM realiza solicitudes al extremo de la lista de cuentas de la AC 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 subrecurso 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()
Estos registrarán el estado de acceso del usuario como "salir". Cuando el estado de acceso del usuario es "salir", llamar a FedCM falla de forma silenciosa sin realizar una solicitud al extremo de la lista de cuentas del IdP.
De forma predeterminada, el estado de acceso de la IdP se establece en "desconocido". Este estado se usa antes de que el IdP envíe un indicador con la API de estado de acceso del IdP. Presentamos este estado para lograr una mejor transición, ya que es posible que un usuario ya haya accedido al IdP cuando enviamos esta API y es posible que el IdP no tenga la oportunidad de indicar esto al navegador cuando 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 según la respuesta del extremo de la lista de cuentas:
- Si el extremo muestra una lista de cuentas activas, actualiza el estado a “acceso” 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é sucede si vence la sesión del usuario? Permite que el usuario acceda a través de un flujo de acceso dinámico
Aunque el IdP sigue informando al navegador el estado de acceso del usuario, es posible que esté desincronizado, por ejemplo, cuando venza la sesión. El navegador intenta enviar una solicitud con credenciales al extremo de la lista de cuentas cuando el estado de acceso es "acceso", pero el servidor la rechaza porque la sesión ya no está disponible. En este caso, el navegador puede permitir que el usuario acceda al IdP de forma dinámica a través de una ventana emergente.
El diálogo de FedCM mostrará un mensaje, como se muestra en la siguiente imagen:
Cuando el usuario hace clic en el botón Continuar, el navegador abre una ventana emergente que lo dirige a la página de acceso del proveedor de identidad.
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 del IdP.
{
"accounts_endpoint": "/auth/accounts",
"client_metadata_endpoint": "/auth/metadata",
"id_assertion_endpoint": "/auth/idtokens",
"signin_url": "/signin"
}
}
La ventana emergente es una ventana de navegador normal que usa cookies propias. El IdP decide lo que sucede dentro de la ventana de contenido, pero no hay controladores de ventana disponibles para realizar una solicitud de comunicación entre orígenes a la página del RP. Después de 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 informarle al navegador que el usuario accedió. - 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 IdP Sign-In Status en nuestra demo. La sesión vencerá en tres minutos después de que accedas a la IdP de demostración. Luego, puedes observar el acceso al IdP a través del comportamiento de la ventana emergente.
Participa en la prueba de origen
Para probar la API de IdP Sign-In Status de forma local, activa una marca
chrome://flags#fedcm-idp-signin-status-api en
Chrome 116 o versiones posteriores.
También puedes habilitar la API de IdP Sign-In Status. Para ello, registra una prueba de origen dos veces:
- Registra una prueba de origen para la AC.
- Registra una prueba de origen de terceros para el RP.
Las pruebas de origen te permiten probar funciones nuevas y enviar comentarios sobre su usabilidad, practicidad y eficacia a la comunidad de estándares 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 IdP Sign-In Status está disponible desde la versión 116 hasta la 119 de Chrome.
Registra una prueba de origen para la IdP
- Ve a la página de registro de la prueba de origen.
- Haz clic en el botón Registrarse y completa el formulario para solicitar un token.
- Ingresa el origen del IdP como Origen web.
- Haz clic en Enviar.
- Agrega una etiqueta
<meta>origin-trialal encabezado de las páginas que usanIdentityProvider.close(). Por ejemplo, podría verse así:
<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">.
Registra una prueba de origen de terceros para la RP
- Ve a la página de registro de la prueba de origen.
- Haz clic en el botón Registrarse y completa el formulario para solicitar un token.
- Ingresa el origen del IdP como Origen web.
- Consulta 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 tu biblioteca de JavaScript o SDK que se publique desde el origen de la AC.
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 las pruebas, puedes compartirlos en crbug.com.
Foto de Dan Cristian Pădureț en Unsplash