Añadir FACEIO a una página de inicio de sesión

Añade autenticación facial a una página de inicio de sesión web mediante un proceso claro de registro, el widget fio.js, la gestión de cuentas en el backend y una vía alternativa para recuperar el acceso.

Volver al Centro de conocimiento
Por el equipo de ingeniería de FACEIO Actualizado

Un flujo práctico de integración para páginas de inicio de sesión

Puedes añadir FACEIO a una página de inicio de sesión sin sustituir tu sistema de cuentas. Mantén el registro, la autenticación y la gestión de cuentas en el backend como pasos independientes.

Utiliza el widget del navegador para la captura con la cámara, la detección de vivacidad, las solicitudes de PIN y la interacción con el usuario. Mantén las decisiones finales de acceso en el backend para separar claramente las responsabilidades de autenticación.

Este tutorial parte de una página de inicio de sesión existente. Si empiezas desde cero, consulta la guía de primeros pasos para crear tu aplicación FACEIO y obtener el App ID público desde FACEIO Console ↗.

Pasos de implementación

Sigue estos pasos para añadir FACEIO a una página de inicio de sesión. Cada paso enlaza con la referencia correspondiente:

  1. Crea una aplicación FACEIO. Abre la FACEIO Console, crea una aplicación y copia el App ID público. Este identificador se utiliza con fio.js en el navegador.
  2. Carga el SDK fio.js. Añade fio.js en las páginas de inicio de sesión y registro. Cárgalo solo donde se necesite la captura facial, no en todo el sitio.
  3. Registra a los usuarios nuevos. Después de crear la cuenta y obtener el consentimiento, llama a enroll() para capturar el rostro y crear un Facial ID. Guarda la referencia del Facial ID junto a la cuenta del usuario en el backend.
  4. Autentica a los usuarios existentes. Llama a authenticate() cuando el usuario elija el acceso facial o cuando tu sitio requiera una autenticación facial adicional. El SDK devuelve el resultado al navegador.
  5. Completa el acceso en el backend. Envía el Facial ID devuelto y el contexto necesario al backend, asócialo con la cuenta esperada y aplica tus reglas de sesión y autorización. Utiliza CHECKFACIALID solo cuando necesites confirmar que el Facial ID sigue registrado.
  6. Gestiona los errores y el acceso alternativo. Gestiona los códigos de error de fio.js y ofrece instrucciones para reintentar o un método alternativo, como contraseña, OTP o soporte.

Qué debe incluir la página de inicio de sesión

Para usuarios nuevos

Presenta el registro facial como un paso opcional u obligatorio después de crear la cuenta, según la política de tu producto. Muestra el aviso de consentimiento antes de solicitar la cámara y enlaza con tu información de privacidad.

Para usuarios existentes

Ofrece la autenticación facial junto al formulario de contraseña o en su lugar. Etiquétala con claridad, por ejemplo “Iniciar sesión con el rostro”, y conserva un método alternativo para problemas de cámara o permisos.

Para revisar los patrones de UX, consulta la guía de buenas prácticas de inicio de sesión con reconocimiento facial. Para preparar el lanzamiento, incluidos los avisos de privacidad, el consentimiento y el despliegue, utiliza la lista de lanzamiento y la guía de buenas prácticas de privacidad.

Patrón de cuentas y sesiones en el backend

El callback del navegador de authenticate() devuelve un resultado de autenticación. El backend sigue siendo responsable de seleccionar la cuenta y emitir la sesión:

  1. Recibe el resultado de autenticación y el contexto necesario en un endpoint del servidor.
  2. Busca la cuenta asociada con el Facial ID devuelto, no con un ID de usuario enviado por el cliente.
  3. Comprueba el estado de la cuenta, el tenant, la acción solicitada y los demás controles que requiera tu sitio.
  4. Emite un token de sesión de corta duración asociado con ese usuario.
  5. Registra la fecha y hora, el Facial ID, el App ID y el resultado sin conservar contenido de verificación, capturas faciales ni hashes biométricos.

La lista de verificación de la API, referencia de REST API, documentación de webhooks, y buenas prácticas de seguridad explican estos controles en detalle. No permitas que el estado del cliente seleccione una cuenta o conceda acceso por sí solo.

Recursos para integrar el inicio de sesión

Utiliza la documentación de FACEIO para implementar el flujo de acceso, asociar Facial IDs con cuentas, recibir eventos webhook y configurar la aplicación.

Primeros pasos Configura tu aplicación FACEIO y obtén los identificadores necesarios para tu proyecto web. Guía de integración Conecta el registro y la autenticación con tu página de inicio de sesión. Guías para desarrolladores Conecta los resultados de autenticación con los flujos de cuenta y recuperación del backend. REST API Administra Facial IDs, payloads, códigos PIN, eliminación y comprobaciones del backend. Webhooks Recibe en el servidor eventos de registro y autenticación. FACEIO Console Crea tu App ID y administra la configuración de autenticación.

Preguntas frecuentes

¿Debo eliminar el acceso existente con contraseña?

No. FACEIO puede funcionar junto al acceso existente. Ofrece el rostro como opción alternativa o como factor adicional para acciones sensibles. Conserva el método con contraseña durante la transición. Consulta el inicio de sesión biométrico para aplicaciones web para revisar los patrones de UX.

¿Cuánto se tarda en añadir FACEIO a una página de inicio de sesión?

La integración del cliente es breve, especialmente si sigues la guía de primeros pasos. La preparación para producción también depende de la gestión de cuentas y sesiones en el backend, los errores, la recuperación, el consentimiento y las pruebas de despliegue, aspectos incluidos en la lista de lanzamiento.

¿Qué frameworks admite fio.js?

fio.js funciona con JavaScript puro, React, Vue, Angular, Next.js, Nuxt, Svelte y Ember. Consulta la guía de integración para ver las notas de cada framework.

¿Cómo gestiono a un usuario que pierde el acceso a la cámara?

Mantén un método alternativo como contraseña, OTP o soporte. No conviertas la autenticación facial en la única forma de recuperar una cuenta sin un procedimiento documentado. La guía de buenas prácticas de acceso lo explica en detalle.

Guías relacionadas

Añade el inicio de sesión facial a tu sitio web

El backend asocia el Facial ID devuelto con una cuenta y decide si emite una sesión. Complementa este tutorial con las buenas prácticas de seguridad, buenas prácticas de privacidad y la lista de implementación. Crea una aplicación en FACEIO Console y prueba el flujo completo en tu entorno.

Abrir FACEIO Console Comenzar