Cómo autenticar a un usuario a través del reconocimiento facial en su aplicación web

La autenticación es un aspecto muy importante de su aplicación web. Si está ofreciendo un servicio o vendiendo algún producto al usuario, debe realizar un seguimiento del usuario para referencia futura. Todo esto solo puede ser posible si tiene un sistema de autenticación implementado.

Pero también es muy necesario utilizar la herramienta adecuada para el trabajo. En el pasado, la autenticación basada en correo electrónico y contraseña era la más popular y ampliamente utilizada. Pero con el tiempo, se introdujo un nuevo concepto llamado OAuth cuando aparecieron grandes tecnologías con una gran base de usuarios. Cuando usted, como propietario del sitio, confía en el proveedor de OAuth para autenticar a un usuario, a cambio, el proveedor de OAuth le brinda detalles del usuario.

La autenticación basada en OAuth es simple para el usuario. Solo tienen que mantener una cuenta con un proveedor de OAuth y usar esta cuenta para iniciar sesión en todos los demás sitios web. Pero siempre hay confianza involucrada en el proceso de OAuth.

Después de un tiempo, la autenticación sin contraseña entró en escena. En este proceso, cuando ingresas el nombre de usuario o tu correo electrónico, te envían un enlace. Si pega el enlace en el navegador, se autentica e inicia sesión automáticamente. El ejemplo más común de autenticación sin contraseña es cuando hace clic en el enlace mágico de envío para iniciar sesión en hackernoon.com .

Con el avance de la Inteligencia Artificial (IA) y el aprendizaje automático (ML), las técnicas de reconocimiento facial están ganando una gran popularidad. Con el tiempo, a medida que los conjuntos de datos crezcan, la precisión de un modelo de IA también aumentará. Hoy en día, también podemos utilizar técnicas de reconocimiento facial, para autenticar a los usuarios en nuestra aplicación web.

En este artículo, estamos creando una aplicación simple para demostrar cómo autenticar a un usuario mediante el reconocimiento facial. En este proceso, vamos a utilizar las API de FaceIO.

Por qué necesitamos autenticación basada en reconocimiento facial

La necesidad de reconocimiento facial es múltiple. Estoy tratando de poner algunos puntos aquí de una manera concisa. Asegúrese de leer el artículo hasta el final para obtener una comprensión conceptual completa y un recorrido de implementación detallado.

1. Más rápido que los métodos tradicionales : el método de autenticación facial es muy rápido que los medios tradicionales de autenticación. Solo tiene que hacer clic en un botón para iniciar el proceso de autenticación y en una milésima de segundo, ya está hecho. En los métodos tradicionales basados en contraseñas de correo electrónico, debe agregar sus detalles línea por línea. A veces, después de un inicio de sesión exitoso, se le saluda con un captcha. ¡Qué irritante es!
2. No requiere hardware especializado : el único requisito de la técnica de autenticación facial es una cámara. Todos los teléfonos inteligentes hoy en día tienen una cámara por defecto. Todos los escritorios también tienen algún tipo de cámara web presente. Por lo tanto, los usuarios no necesitan ningún hardware especializado para utilizar este servicio.
3. Reducir la suplantación de identidad en las plataformas sociales : la característica más importante de la autenticación facial es que puede evitar la suplantación de identidad. En las plataformas sociales, muchas personas crean cuentas falsas haciéndose pasar por alguien. Esto puede ser muy arriesgado si el titular de la cuenta falsa comete algún tipo de delito digital. Con la ayuda del reconocimiento facial, las plataformas sociales pueden reconocer si la cuenta a la que alguien intenta acceder realmente le pertenece.
4. Reduzca los bots y los scripts automatizados : se introducen bots y scripts automatizados para ayudar a las personas a deshacerse de las tareas repetitivas. Pero la gente también los usó de una manera diferente para enviar spam a otros. Diariamente te encuentras con muchos bots y scripts automatizados en tu vida digital que ni siquiera notas o te das cuenta. Para evitar esto, algunos sitios web usan captcha. Usando el reconocimiento facial, este problema también se puede resolver ya que los bots no tienen rostro para autenticarse 😄.
5. Centrado en la privacidad: la privacidad es un tema muy delicado para todos nosotros. Todos nos preocupamos un poco cuando alguien le pide que se autentique con sus datos faciales. Pero como estamos usando FaceIO en este tutorial, el proceso de autenticación está cifrado puramente de extremo a extremo. En el backend, almacenan solo el hash de tus rasgos faciales. Son completamente compatibles con GDPR y CCPA. Por lo tanto, puede confiar en ellos para almacenar sus datos de forma segura.

Hacer un proyecto de autenticación facial

Ahora vamos a hacer una aplicación web de autenticación facial. Este proyecto incluye todos los detalles y todo lo que necesita saber sobre cómo implementar la autenticación basada en el reconocimiento facial en su aplicación web.

Estoy explicando el proceso paso a paso. Puede obtener un código fuente completo aquí . Asegúrese de obtener una clave API gratuita para seguir.

Instalando la dependencia requerida

Cree un directorio en blanco y dentro de él, cree un archivo index.html . También puede agregar un archivo CSS separado, pero por simplicidad, lo mantendré al mínimo.

Si está utilizando VSCode para el desarrollo, puede usar el servidor en vivo para servir sus archivos estáticos.

Dentro de su index.html , agregue este marcado HTML básico, para empezar.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> </html>

FaceIO proporciona una biblioteca javascript muy útil para interactuar con sus modelos de IA. Esto hace que nuestra vida sea tan fácil que podemos implementar la función de reconocimiento facial usando solo unas pocas líneas de código. Para agregar la biblioteca de javascript de FaceIO, usamos su CDN (red de entrega de contenido) dentro de la etiqueta del cuerpo de nuestro documento HTML.

 <body> <script src="https://cdn.faceio.net/fio.js"></script> </body>

Ahora, cree un archivo index.js y vincule el archivo dentro de la etiqueta del cuerpo después de FaceIO CDN.

 <body> <script src="https://cdn.faceio.net/fio.js"></script> <script src="./index.js"></script> </body>

Ahora vamos a crear 2 funciones auxiliares para facilitar nuestro proceso de desarrollo. Uno es para inscribir a un usuario (como la función de registro) y el otro es para la autenticación (como la función de inicio de sesión).

Inscripción de un usuario

Inscribir a un usuario es muy simple debido a la biblioteca de javascript que proporciona FaceIO. Dentro del marcado HTML, agregue un botón con id="enroll" . Accedemos a este botón dentro de nuestro archivo javascript usando el método getElementbyID .

Ahora inicialice el objeto FaceIO dentro de index.js . Tienes que añadir el ID público de tu proyecto FaceIO. Puede obtener la identificación pública que aparece en el tablero de su proyecto.

 const faceio = new faceIO("<Your Public ID here");

Agreguemos un detector de eventos en el botón de inscripción. Cuando alguien hace clic en el botón, ejecutamos el método de inscripción del objeto faceIO. Este método de inscripción toma una variedad de parámetros opcionales.

1. locale es el idioma local del usuario.
2. El tiempo de permissions timeout corresponde a la cantidad de segundos de espera para que el usuario conceda acceso a la cámara.
3. termsTimeout es la cantidad de segundos que se esperará para que el usuario acepte los términos y condiciones de FaceIO.
4. idleTimeout es el número total de segundos de espera mientras se intenta reconocer una cara.
5. replyTimeout es el número de segundos de espera para recibir datos faciales procesados desde el nodo FaceIO.
6. userConcent es un booleano que representa si los usuarios dan su consentimiento para escanear sus rostros. Si ya ha obtenido el consentimiento del usuario, puede establecer el valor en true .
7. payload : dentro de la función de registro, puede agregar una carga útil de su elección. La carga útil debe ser un objeto de valor clave. Puede usar esta función de carga útil para adjuntar su dirección de correo electrónico o cualquier otra información relacionada con el usuario.

En nuestro caso, la función de registro se ve así.

 enroll.addEventListener("click", async () => { let response = await faceio.enroll({ locale: "auto", payload: { email: "[email protected]", pin: "12345", }, }); console.log(` Unique Facial ID: ${response.facialId} Enrollment Date: ${response.timestamp} Gender: ${response.details.gender} Age Approximation: ${response.details.age}`); });

Cuando ejecuta esta función, aparece una ventana emergente frente al usuario. Esta ventana emergente contiene términos y condiciones. Si el usuario acepta los términos y condiciones, solicita acceso a la cámara. Si el usuario otorga acceso a la cámara, FaceIO escaneará la cara.

El modelo FaceIO busca características faciales únicas que distinguen al usuario de los demás. Una vez completado, debe agregar un PIN que se adjunta a sus datos faciales. Este PIN es muy importante para el usuario y lo guarda en un lugar más seguro.

Cuando se completan todos estos pasos, userInfo devuelve un objeto de información de usuario al usuario. Este objeto contiene una identificación de rostro de usuario que es un identificador único universal, género y edad. El género y la edad no son muy precisos, ya que los predice un modelo de IA.

Puede usar almacenar este ID de rostro en su backend. Cuando un usuario quiere iniciar sesión, puede hacer coincidir este ID de cara para autenticar al usuario.

Durante el flujo de trabajo, si ocurre algún error, FaceIO tiene una extensa lista de mensajes de error. Si el usuario no permite el acceso a la cámara, se genera el error fioErrCode.PERMISSION_REFUSED .

Si el usuario no acepta la ventana emergente de términos y condiciones, el servidor arroja el error fioErrCode.TERMS_NOT_ACCEPTED .

Autenticar a un usuario

Para iniciar el flujo de autenticación, agregue un botón en su marcado HTML con id="authenticate" . Acceda a este botón dentro de index.js con la ayuda del método getElementbyID .

Ahora, cuando el usuario presiona este botón, iniciamos el flujo de autenticación. La función de autenticación es muy simple.

La función de autenticación toma el permissionTimeout , el tiempo de espera idleTimeout , el tiempo de replyTimeout y el parámetro de locale como la función enroll enroll() anterior. El código se parece a esto.

 authenticate.addEventListener("click", async () => { let response = await faceio.authenticate({ locale: "auto", }); console.log(` Unique Facial ID: ${response.facialId} PayLoad: ${response.payload} `); });

Cuando el usuario presiona el botón de autenticación, aparece una pantalla similar a la de la función de registro. Toma el acceso de su cámara y escanea su rostro. Una vez escaneado, te pide el PIN que ingresaste durante el tiempo de inscripción.

Si proporciona el pin correcto, FaceIO devolvió FaceData y la carga útil que especificó en el proceso de inscripción.

También puede verificar dos veces el flujo de autenticación haciendo coincidir el FaceID en su servidor.

Ahora nuestro flujo de autenticación está completo. Puede ver que es más fácil que implementar un flujo de autenticación de contraseña de correo electrónico. Todo el trabajo pesado lo realiza el servidor FaceIO y su modelo de IA, como desarrollador, solo tiene que agregar la lógica de la aplicación para modificar el flujo de autenticación y su experiencia.

Funciones de privacidad

FaceIO tiene un sólido sistema de protección de la privacidad. Permítanme enumerar algunos de ellos.

1. Es compatible con GDPR y CCPA : el servicio FaceIO es completamente compatible con GDPR y CCPA. GDPR significa Reglamento General de Protección de Datos. Se adopta en 2018 y requiere que todas las empresas protejan los datos personales y la privacidad del usuario.

   
   

   CCPA significa Ley de Protección al Consumidor de California que otorga más control al usuario sobre sus datos. Si está operando en esas regiones, no tiene que preocuparse.

   
   

2. Solo almacena hashes : FaceIO solo almacena hashes de sus rasgos faciales. No almacena ningún dato simple y almacena la mínima información posible. La biblioteca y los widgets del lado del cliente no manejan datos biométricos. Todo el proceso se realiza en el backend.

Preguntas más frecuentes

¿El navegador FaceIO es independiente?

FaceIO es completamente independiente del navegador. Puede ejecutar cualquier navegador, incluidos Chrome, Firefox y Safari. Como todo el procesamiento se realiza en el servidor, FaceIO solo necesita el acceso de su cámara para ejecutarse.

Si está utilizando algún navegador de privacidad al deshabilitar javascript, asegúrese de habilitarlo. Como FaceIO necesita usar javascript para hablar con el servidor.

¿No podemos construir nuestro modelo desde cero?

Sí, puede crear su modelo desde cero e implementar la función de autenticación facial en su aplicación web. Pero para esto, debe tener una comprensión profunda de la inteligencia artificial y los procesos de aprendizaje automático.

Como la mayoría de los desarrolladores web no tienen este trasfondo, es una decisión inteligente utilizar los servicios de otros para implementar una función en lugar de reinventar la rueda.

Hay otras soluciones presentes en el mercado que puede explorar. Uno es AWS Rekognition. Este servicio lo ofrece AWS y funciona de manera muy similar a FaceIO. Lo interesante es que puedes optar por AWS Rekognition dentro de tu panel de FaceIO.

Sí, es posible. Ahora puedes elegir lo que quieres e ir a por ello.

Ocultar la identificación pública

Como podemos ver en la parte de codificación, debe proporcionar su identificación pública durante el inicio del objeto FaceIO. Si lo desea, puede ocultarlo utilizando variables de entorno. Si está utilizando un marco de front-end o un sistema de compilación, puede agregar dinámicamente estos valores en el momento de la compilación.

Si está utilizando NextJS, puede usar el archivo .env.local para guardar sus credenciales confidenciales.

Si no está utilizando ningún marco, puede usar Vite. Vite admite variables de entorno. Construye y comprime su proyecto vanilla js para una implementación más rápida. Simplemente cree un archivo .env , coloque todas sus credenciales allí y listo. No olvide poner su archivo .env dentro de su lista .gitignore .

Conclusión

Si has leído el artículo hasta este punto, creo que te gusta este artículo. Por favor, compártalo con sus compañeros. Si desea dar algún comentario, estoy disponible en Twitter como hrishikshpathak . Sigue leyendo, sigue aprendiendo.