Cómo integré la validación facial de Azure en mi web hecha con Astro y Next.js

En este post, quiero compartir cómo implementé la validación facial en mi sitio web, utilizando Astro para el frontend y Next.js en el backend. Mi objetivo no es autenticar a los usuarios mediante reconocimiento facial ni hacer comparaciones de rostros, sino verificar que la imagen proporcionada por ellos contiene un rostro humano. Esta validación es una parte importante del proceso de verificación de cuentas en mi plataforma.

Arquitectura del proyecto

El sitio web está dividido en dos partes principales:

• Frontend (Astro): Astro genera un frontend rápido y optimizado, centrado en la entrega de contenido estático eficiente.
• Backend (Next.js): Next.js gestiona la lógica del backend, incluyendo las solicitudes de validación facial y la comunicación con Azure Face API para procesar las imágenes enviadas por los usuarios.

Esta estructura permite ofrecer una experiencia de usuario fluida en el frontend, mientras que el backend maneja operaciones críticas como la validación de imágenes.

Configuración inicial de Azure Face API

Para comenzar, configuré Azure Cognitive Services para utilizar la API de reconocimiento facial. El propósito aquí no es autenticar a los usuarios ni hacer comparaciones faciales, sino simplemente validar que la imagen enviada contiene un rostro humano.

1. Registro en Azure: En el portal de Azure Cognitive Services, creé un recurso de Face API y obtuve un endpoint y una clave de suscripción. Estas credenciales permiten que el backend se comunique con Azure Face.

2. Configuración del cliente de Azure en Next.js: En el archivo validateface.js, configuro el cliente de Azure Face para enviar las imágenes al servicio y validar si contienen un rostro.

   import { FaceClient } from '@azure/cognitiveservices-face';
   import { ApiKeyCredentials } from '@azure/ms-rest-js';
   
   const endpoint = process.env.AZURE_FACE_ENDPOINT;
   const key = process.env.AZURE_FACE_KEY;
   const credentials = new ApiKeyCredentials({ inHeader: { 'Ocp-Apim-Subscription-Key': key } });
   const faceClient = new FaceClient(credentials, endpoint);

Este cliente permite que mi backend envíe las imágenes capturadas a Azure Face API para la validación.

Capturando la imagen desde el frontend

En el frontend, utilizo la API de MediaDevices de JavaScript para acceder a la cámara del dispositivo del usuario y capturar una imagen. Esta imagen se convierte en una cadena base64 y se envía al backend para su validación. Dado que las solicitudes se realizan a través de un servidor HTTPS, la seguridad de la transmisión de datos está garantizada.

En el archivo Login.jsx, se utiliza el siguiente código para capturar la imagen del video de la cámara y enviarla al backend:

const handleCaptureImage = async () => {
  const canvas = canvasRef.current;
  const video = videoRef.current;
  if (canvas && video) {
    const context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
    const image = canvas.toDataURL('image/png');
    sendFaceValidation(image);
  }
};

El método handleCaptureImage captura la imagen y la envía al backend utilizando una solicitud HTTPS para garantizar la seguridad.

Procesando la imagen en el backend

Cuando la imagen llega al backend, se convierte en un buffer de datos y se envía a Azure Face API para su análisis. Aquí, el objetivo es simplemente verificar que la imagen contenga un rostro humano. Si Azure detecta un rostro, la cuenta del usuario se marca como verificada en la base de datos.

El siguiente código en validateface.js realiza la validación:

const buffer = Buffer.from(image.split(',')[1], 'base64');
const faceDetected = await faceClient.face.detectWithStream(() => readableStream, {
  detectionModel: 'detection_03',
  returnFaceId: false,
});

if (faceDetected.length === 0) {
  return res.status(404).json({ error: 'No se detectaron rostros en la imagen proporcionada.' });
}

Si se detecta un rostro, se actualiza el estado de la cuenta del usuario en la base de datos mediante una consulta SQL.

async function updateUserVerification(email) {
  await sql`
    UPDATE users
    SET verification = true
    WHERE email = ${email}
  `;
}

Interacción en el frontend

En el frontend, si la validación es exitosa, se muestra un mensaje al usuario informándole que su cuenta ha sido verificada. En caso de error, se muestra un mensaje explicando que no se pudo validar el rostro.

if (response.status === 200) {
  setVerificationMessage('Cuenta verificada correctamente.');
  setIsAccountValidated(true);
} else {
  setValidationErrorMessage('No se ha podido validar el rostro.');
}

Beneficios de usar la validación facial de Azure

El uso de la validación facial con Azure Face API proporciona una capa adicional de seguridad en el proceso de verificación de cuentas en mi plataforma. Aunque en este caso no se realiza una autenticación biométrica, la validación de que el usuario proporciona una imagen con un rostro humano es clave para asegurar que el proceso sea más seguro.

Posibles aplicaciones adicionales de esta tecnología:

1. Validación de cuentas: Verificar que el usuario presenta una imagen válida con un rostro antes de activar su cuenta.

2. Verificación de identidad: Esta tecnología también se podría aplicar en procesos internos, como registrar el rostro de un trabajador para validar documentos, firmar electrónicamente, o verificar su identidad en distintos flujos.

3. Automatización de procesos: La validación facial también puede ser utilizada en sistemas empresariales para automatizar tareas como el control de asistencia o acceso a áreas restringidas.

Integrar Azure Face API ha mejorado significativamente la seguridad y confiabilidad de mi plataforma, proporcionando un proceso de verificación de cuentas sencillo pero eficaz. Esta tecnología tiene el potencial de ser utilizada en múltiples escenarios donde se requiera una validación rápida y segura.