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 de escritorio. Con la API de modo de botón, los proveedores de identidad pueden usar la API de FedCM incluso si sus usuarios no tienen sesiones activas de IdP en el momento de la llamada a la API. Luego, los usuarios pueden acceder a un sitio web con su cuenta federada sin que se los dirija al sitio del IdP. La IU de FedCM en el modo de botón es más prominente en comparación con la del flujo de widgets existente porque está restringida 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 de escritorio o como una hoja inferior en dispositivos móviles, en cuanto se invoca la API, lo que puede ocurrir cuando el usuario llega al usuario de confianza (RP). Esto se denomina modo widget. Para mostrar el widget, el usuario debe haber accedido a la AC antes de llegar a la RP. FedCM por sí solo no tenía una forma confiable de permitir que el usuario acceda al IdP antes de permitir que acceda al RP con la cuenta disponible en el IdP. FedCM pronto agregará una forma de hacerlo.

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

La nueva API de modo de botón agrega un nuevo modo de IU llamado modo botón. A diferencia del modo de widget, el modo de botones 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 presionar 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 del extremo de la cuenta o un estado de acceso almacenado en el navegador. Si el usuario aún no accedió, FedCM le solicita que acceda al IdP con el 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 del IdP con la que acceder. Si selecciona una cuenta, el usuario puede acceder a la RP con la cuenta del IdP.

En la IU del modo de botones, el diálogo de acceso que se muestra es más grande en comparación con el modo de widget, y también debe serlo el ícono de desarrollo de la marca para mantener la coherencia visual. Si bien el tamaño mínimo del ícono para el modo de widget es de 25 x 25 px, el tamaño mínimo del ícono en el modo de botón es de 40 x 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 un ícono más grande.

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

Un usuario accede a la RP con la API de modo de botones.

Para usar la API de Button Mode, sigue estos pasos:

• Habilita la función experimental FedCmButtonMode en chrome://flags.
• Asegúrate de invocar la API detrás de la activación del usuario transitoria, 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 lance esta función.

El navegador enviará un parámetro nuevo al extremo de la aserción de ID que representa el tipo de solicitud si incluye 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 se produce un error, 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 forma intencional. Esto se debe a que el estado de acceso del usuario al IdP se considera información privada y el envío de un indicador de error pronto le da al RP una sugerencia del estado de acceso del usuario al IdP. Con el modo de botón, se le solicita al usuario que acceda a la IdP de todos modos, por lo que no hay preocupación por exponer el estado de acceso de la IdP del usuario a la RP.

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

Detección de atributos

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.
}

Usa la opción de 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 inscribe la prueba de origen de la API del modo de botones.
• 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

Para probar la API de modo de botones de forma local, activa una marca de Chrome chrome://flags#fedcm-button-mode en Chrome 125 o versiones posteriores.

Las AC también pueden habilitar el modo de botón si registran una prueba de origen:

• 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 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 Origen web.
4. Verifica 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 en un sitio web de terceros, agrega el siguiente código a la biblioteca de JavaScript o al SDK del proveedor de identidad que se publique desde el origen del proveedor de identidad.

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 la RP invoca la API de FedCM, y no la secuencia de comandos cargada desde el IdP, la RP debe registrar su origen y ejecutar su prueba de origen propia.

Se requerirán CORS y SameSite=None en Chrome 125

CORS

A partir de Chrome 125, Chrome aplicará CORS en el extremo de la aserción de ID.

El 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 extremo 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

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

SameSite=None

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

En FedCM, Chrome envía cookies al extremo de 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.