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 comenzará una prueba de origen en computadoras. Con la API de Button Mode, los proveedores de identidad pueden usar la API de FedCM incluso si sus usuarios no tienen sesiones activas del IdP cuando se realiza la llamada a la API. Luego, los usuarios pueden acceder a un sitio web con su cuenta federada sin que se los redireccione al sitio del IdP. La IU de FedCM en el modo de botón es más prominente que la del flujo de widgets existente porque está controlada por un gesto del usuario y refleja mejor la intención del usuario 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 o como una hoja inferior en dispositivos móviles, en cuanto se invoca la API, lo que podría ocurrir cuando el usuario llega a la parte externa (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 accediera 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.

Con el modo de widget, se muestra un diálogo en la esquina superior derecha de Chrome para computadoras sin que el usuario lo active.
Con el modo de widget, se muestra un diálogo en la esquina superior derecha de Chrome para computadoras sin que el usuario lo active.

La nueva API de Button Mode agrega un nuevo modo de IU llamado modo botón. A diferencia del modo de widget, el modo de botón no está diseñado para invocarse en cuanto el usuario llega a la RP. En cambio, se debe invocar cuando el usuario inicia un flujo de acceso, como cuando presiona un botón "Acceder con IdP".

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

En la IU del modo de botón, el diálogo de acceso que se muestra es más grande en comparación con el modo de widget, por lo que el ícono de la marca también debería ser más grande para mantener la coherencia visual. Si bien el tamaño mínimo del ícono para el modo de widget es de 25 × 25 px, el tamaño mínimo del ícono en el modo de botón es de 40 × 40 px. El archivo conocido del IdP permite especificar varias URLs de íconos de la siguiente manera:

{
  // ... Other settings (like endpoints) here
  "branding": {
    "icons": [
      {
        "url": "https://size-25px-image",
        "size": 25,
      },
      {
        "url": "https://size-40px-image",
        "size": 40
      }
    ]
  }
}
Con el modo de botón, se muestra un diálogo modal en la parte superior central de Chrome para computadoras.
Con el modo de botón, se muestra un diálogo modal en la parte superior central de Chrome para computadoras, con un ícono más grande.

Pruébalo tú mismo con Chrome 125 en https://fedcm-demo-rp.dev/active-mode.

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 una activación transitoria del usuario, 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"
    }
  });

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

Detección de características

Para determinar si el navegador es apto para usar el modo de botón, puedes examinarlo con el siguiente código:

let supportsFedCmMode = false;
try {
  navigator.credentials.get({
    identity: Object.defineProperty(
      {}, 'mode', {
        get: function () { supportsFedCmMode = true; }
      }
    )
  });
} catch(e) {}

if (supportsFedCmMode) {
  // The button mode is supported.
}

Opción para usar otra cuenta

El RP puede permitir que los usuarios "usen 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 inscríbete en la prueba de origen de la API de Button Mode.
  • El IdP especifica lo siguiente en el archivo de configuración del IdP:
{
  "accounts_endpoint" : ...,
  "modes: {
    "button": {
      "supports_use_other_account": true,
    }
  }
}

Participa en la prueba de origen

Puedes probar la API de Button Mode de forma local activando una marca de Chrome chrome://flags#fedcm-button-mode en Chrome 125 o versiones posteriores.

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

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 Button Mode está disponible desde Chrome 125 hasta Chrome 130.

  1. Ve a la página de registro de la prueba de origen.
  2. Haz clic en el botón Registrarse y completa el formulario para solicitar un token.
  3. Ingresa el origen del IdP como Web Origin.
  4. Marca la casilla Third-party matching 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 en un sitio web de terceros, agrega el siguiente código a la biblioteca o el SDK de JavaScript del IdP que se publican 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.

CORS y SameSite=None serán obligatorios en Chrome 125

CORS

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

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

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

SameSite=None

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

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