Actualizaciones de FedCM: Prueba de origen de la API de Button Mode, CORS y SameSite

Eiji Kitamura

A partir de Chrome 125, la API de Button Mode inicia una prueba de origen en computadoras de escritorio. Con la API de Button Mode, los proveedores de identidad pueden usar la API de FedCM incluso si sus usuarios no tienen sesiones activas de IdP en la llamada a la API. Luego, los usuarios pueden acceder a un sitio web con su cuenta federada sin navegar al sitio del IdP. La IU de FedCM en el modo de botón es más destacada en comparación con la del flujo de widget existente porque está restringida por un gesto del usuario y refleja mejor su intención de acceder.

API de Button Mode

La interfaz de usuario de FedCM está disponible como un widget que se muestra en la esquina superior derecha en computadoras de escritorio o como una hoja inferior en dispositivos móviles, tan pronto como se invoca la API, que podría ser cuando el usuario llega al usuario de confianza (RP). Esto se denomina modo widget. Para mostrar el widget, el usuario debe acceder al IdP antes de llegar al RP. FedCM por sí solo no tenía una forma confiable de permitir que el usuario acceda al IdP antes de que pudiera acceder al RP con la cuenta disponible en el IdP. FedCM está a punto de agregar una forma de hacerlo.

En el modo de widget, se muestra un diálogo en la esquina superior derecha de la versión de Chrome para computadoras sin activación del usuario.

La nueva API de modo de botón agrega un nuevo modo de IU llamado modo button. A diferencia del modo de widget, el modo de botón no debe invocarse tan pronto como el usuario aterriza el RP. En cambio, debe invocarse cuando el usuario inicia un flujo de acceso, como presionar un botón “Acceder con IdP”.

En cuanto se presiona el botón, FedCM verifica si el usuario accedió al IdP mediante una recuperación del extremo de las cuentas o un estado de acceso almacenado en el navegador. Si el usuario aún no accedió, FedCM le pide que acceda al IdP con login_url que proporciona el IdP en una ventana emergente. Si el navegador sabe que el usuario ya accedió al IdP o en cuanto accede al IdP con la ventana emergente, FedCM abre un diálogo modal para que el usuario elija una cuenta de IdP con la cual acceder. Si selecciona una cuenta, el usuario puede acceder al RP con la cuenta de IdP.

Con el modo de botones, se muestra un diálogo modal en la parte superior central de la versión de Chrome para computadoras de escritorio.

Pruébalo con Chrome 125 en https://fedcm-rp-demo.glitch.me/button_flow.

Un usuario accede al RP con la API de Button Mode.

Para usar la API de Button Mode, haz lo siguiente:

• Habilita la función experimental FedCmButtonMode en chrome://flags.
• Asegúrate de invocar la API detrás de la activación transitoria de usuarios, como un clic en un botón.
• Invoca la API con el parámetro mode de la siguiente manera:

  return await navigator.credentials.get({
    identity: {
      providers: [{
        configURL: "https://idp.example/config.json",
        clientId: "123",
        nonce:"456",
      }],
      mode: "button"
    }
  });

Nota: Por el momento, Chrome solo admite "button" en la nueva propiedad mode. Se agregarán otras propiedades, como "widget", cuando Chrome envíe esta función.

El navegador enviará un parámetro nuevo al extremo de aserción de ID, que representa el tipo de solicitud, mediante la inclusión de 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

Nota: Cuando algo sale mal, la llamada a la API de FedCM con el modo de botón responde de inmediato, mientras que, con el modo de widget, retrasa la respuesta de manera intencional. Esto se debe a que el estado de acceso del usuario al IdP se considera información privada, y el envío de una señal de error pronto le da al RP una sugerencia del estado de acceso del IdP del usuario. Con el modo de botón, se le pide al usuario que acceda al IdP. De cualquier manera, no hay preocupación de exponer el estado de acceso del IdP del usuario al RP.

Nota: Los usuarios pueden inhabilitar el modo del widget de FedCM en la configuración de Chrome. Esto no afecta a la API de Button Mode porque la solicitud de acceso se inicia mediante un gesto del usuario y el navegador debe ayudar a los usuarios a completarlo.

Usar otra opción de cuenta

El RP puede permitir a los usuarios "usar otras cuentas" en el selector de cuentas, por ejemplo, cuando los IdP admiten varias cuentas o reemplazan la cuenta existente.

Para habilitar la opción de usar otra cuenta, sigue estos pasos:

• Habilita la función experimental FedCmUseOtherAccount en chrome://flags o inscribe la prueba de origen de la API de Button Mode.
• El IdP especifica lo siguiente en el archivo de configuración de IdP:

{
  "accounts_endpoint" : ...,
  "modes: {
    "button": {
      "supports_use_other_account": true,
    }
  }
}

Participar en la prueba de origen

Puedes probar la API de Button Mode de manera local si activas una función experimental de Chrome chrome://flags#fedcm-button-mode en Chrome 125 o versiones posteriores.

Los IdP también pueden habilitar el modo Button registrando una prueba de origen:

• 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 Button Mode está disponible desde la versión 125 de Chrome hasta la 127.

1. Ve a la página de registro de la prueba de origen.
2. Haz clic en el botón Register y completa el formulario para solicitar un token.
3. Ingresa el origen del IdP como Web Origin.
4. Marca la coincidencia de terceros para insertar el token con JavaScript en otros orígenes.
5. Haz clic en Enviar.
6. Incorpora el token emitido en un sitio web de terceros.

Para incorporar el token a un sitio web de terceros, agrega el siguiente código a la biblioteca de JavaScript o al SDK del IdP que se entrega 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.

Nota: Si el RP invoca la API de FedCM y no a través de una secuencia de comandos cargada desde el IdP, el RP debe registrar su origen y ejecutar su prueba de origen propia.

Se requerirá CORS y SameSite=None en Chrome 125

CORS

Chrome aplicará CORS en el extremo de aserción de ID a partir de Chrome 125.

CORS (uso compartido de recursos entre dominios) es un sistema que consiste en la transmisión de encabezados HTTP, que determina si los navegadores bloquean el código JavaScript de frontend para que no acceda a las respuestas de solicitudes de origen cruzado. El extremo de aserción de ID en el servidor del IdP debe responder a la solicitud con encabezados adicionales. El siguiente es un ejemplo de encabezado de respuesta para una solicitud de https://fedcm-rp-demo.glitch.me:

Access-Control-Allow-Origin: https://fedcm-rp-demo.glitch.me
Access-Control-Allow-Credentials: true

Nota: Como Access-Control-Allow-Credentials se configura como verdadero, Access-Control-Allow-Origin debe mostrar un dominio de forma explícita y no puede usar un comodín indicado por *.

SameSite=Ninguno

El parámetro SameSite de la cookie declara si la cookie está restringida a un contexto propio o del mismo sitio. Si la especificas como None, la cookie se puede enviar a un dominio de terceros.

En FedCM, Chrome envía cookies al extremo de las cuentas, al extremo de aserción de ID y al extremo de desconexión. A partir de Chrome 125, Chrome enviará esas solicitudes con credenciales solo con cookies marcadas explícitamente como SameSite=None.