Simplificación de la detección de funciones de WebAuthn para llaves de acceso

Descubre cómo detectar las capacidades de WebAuthn con getClientCapabilities() y adaptar los flujos de trabajo de autenticación para tus usuarios.

Fecha de publicación: 22 de enero de 2025

¿Cómo puedes asegurarte de que tus flujos de trabajo de autenticación se adapten sin problemas a los navegadores y dispositivos de tus usuarios?

A partir de Chrome 133, la API de getClientCapabilities() WebAuthn está aquí para ayudarte a determinar qué funciones de autenticación admite un navegador. Cuando llaman a PublicKeyCredential.getClientCapabilities(), los desarrolladores pueden recuperar una lista de funciones compatibles y adaptar los flujos de trabajo de autenticación según corresponda.

Esta mejora permite a los desarrolladores crear flujos de autenticación más sólidos y fáciles de usar, adaptados a los entornos de sus usuarios.

Sigue estos pasos para implementarlo:

if (window.PublicKeyCredential &&
    PublicKeyCredential.getClientCapabilities) {
  const capabilities = await PublicKeyCredential.getClientCapabilities();
  if (capabilities.conditionalGet === true &&
      capabilities.passkeyPlatformAuthenticator === true) {
    // The browser supports passkeys and conditional mediation.
  }
}

Este método te ayuda a adaptar las experiencias de autenticación para los usuarios, ya que identifica las capacidades admitidas, como las llaves de acceso, la mediación condicional (autocompletado de llaves de acceso en diálogos), el transporte híbrido (autenticación multidispositivo con Bluetooth) y hasta las extensiones.

Por qué es importante la detección de componentes

Comprender las capacidades del cliente te permite hacer lo siguiente:

  • Adapta tu implementación a las funciones compatibles del cliente para crear experiencias del usuario más fluidas y mejorar la confiabilidad de la autenticación.
  • Reduce los errores causados por funciones de WebAuthn no admitidas.

Con getClientCapabilites(), puedes crear experiencias de autenticación con confianza que funcionen en diversos dispositivos y navegadores.

Comenzar a explorar

Si tienes todo listo para comenzar, consulta Cómo detectar funciones de WebAuthn más simples con getClientCapabilities() para obtener una lista completa de las funciones, instrucciones detalladas y algunas prácticas recomendadas.

Para obtener más información sobre las llaves de acceso y el acceso sin contraseña, visita la página de Llaves de acceso de Chrome.