Azure Face API Liveness Demo

Demostración completa de Detección de Vida (Liveness Detection) utilizando Azure Face API. Incluye aplicaciones Web (Next.js) y Móvil (.NET MAUI).

📖 ¿Qué es Face Liveness Detection?

Face Liveness es una tecnología de Azure AI que verifica si la persona frente a la cámara es real y está presente físicamente, protegiendo contra ataques de suplantación como:

Ataque	Descripción	Protección
📸 Foto impresa	Usar una fotografía de la víctima	✅ Detectado
📱 Foto digital	Mostrar foto desde otro dispositivo	✅ Detectado
🎬 Video pregrabado	Reproducir video de la víctima	✅ Detectado
🎭 Máscara 2D/3D	Usar máscara del rostro	✅ Detectado
🖼️ Deepfakes	Imágenes generadas por IA	✅ Detectado

🚀 Características

Aplicación Web (Next.js)

✅ Detección de vida en tiempo real
✅ Verificación de identidad con imagen de referencia
✅ Interfaz moderna con Tailwind CSS
✅ API Routes seguras (server-side)
✅ Modo simulado para pruebas

Aplicación Móvil (.NET MAUI)

✅ Multiplataforma: Android, iOS, Windows, macOS
✅ Captura de cámara nativa
✅ Selección de imagen de galería
✅ Patrón MVVM con CommunityToolkit
✅ UI optimizada para móviles

🔄 Flujo de Face Liveness

┌─────────────────────────────────────────────────────────────────────────────┐
│                         FLUJO DE FACE LIVENESS                              │
└─────────────────────────────────────────────────────────────────────────────┘

     ┌──────────────┐         ┌──────────────┐         ┌──────────────┐
     │   CLIENTE    │         │   SERVIDOR   │         │  AZURE FACE  │
     │  (Web/Móvil) │         │   (Backend)  │         │     API      │
     └──────┬───────┘         └──────┬───────┘         └──────┬───────┘
            │                        │                        │
            │  1. Iniciar Liveness   │                        │
            │───────────────────────>│                        │
            │                        │                        │
            │                        │  2. Crear Sesión       │
            │                        │───────────────────────>│
            │                        │                        │
            │                        │  3. SessionId + Token  │
            │                        │<───────────────────────│
            │                        │                        │
            │  4. Token de Acceso    │                        │
            │<───────────────────────│                        │
            │                        │                        │
            │  5. Captura de Rostro  │                        │
            │        (Cámara)        │                        │
            │─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─>│
            │                        │                        │
            │                        │                        │  6. Análisis
            │                        │                        │     de Vida
            │                        │                        │
            │  7. Obtener Resultado  │                        │
            │───────────────────────>│                        │
            │                        │  8. GET Session Result │
            │                        │───────────────────────>│
            │                        │                        │
            │                        │  9. Liveness Decision  │
            │                        │<───────────────────────│
            │                        │                        │
            │  10. Resultado Final   │                        │
            │<───────────────────────│                        │
            │                        │                        │
     ┌──────┴───────┐         ┌──────┴───────┐         ┌──────┴───────┐
     │  ✓ Persona   │         │              │         │              │
     │    Real      │         │              │         │              │
     └──────────────┘         └──────────────┘         └──────────────┘

📋 Prerrequisitos

Para Todas las Aplicaciones

Recurso de Azure Face API con Liveness habilitado
- Crear en Azure Portal
- ⚠️ Importante: Debes solicitar acceso a Liveness Detection en https://aka.ms/facerecognition

Para Aplicación Web

Node.js v18 o superior
npm o pnpm

Para Aplicación MAUI

.NET 10 SDK
Visual Studio 2022 con workload de .NET MAUI
Android SDK / Xcode (según plataforma destino)

🌐 Aplicación Web (Next.js)

Configuración Rápida

1. Clonar y configurar

git clone https://github.com/eincioch/Azure-Face-Liveness.git
cd Azure-Face-Liveness

2. Configurar Variables de Entorno

cp .env.local.example .env.local

Edita .env.local:

FACE_API_ENDPOINT=https://tu-recurso.cognitiveservices.azure.com
FACE_API_KEY=tu-clave-api-de-azure

3. Instalar y Ejecutar

npm install
npm run dev

Abre http://localhost:3000

Estructura del Proyecto Web

├── app/
│   ├── api/
│   │   ├── generateAccessToken/    # Crear sesiones de liveness
│   │   └── getSessionResult/       # Obtener resultados
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── FaceLivenessDemo.tsx        # UI principal
│   ├── FaceLivenessDetector.tsx    # SDK wrapper
│   └── FaceLivenessDetectorMock.tsx # Simulador
├── lib/
│   └── face-utils.ts               # Utilidades
└── public/
    └── icons/

📱 Aplicación Móvil (.NET MAUI)

Configuración Rápida

1. Abrir Proyecto

cd AppmovilFaceLiveness/MauiAppFaceLiveness

Abre MauiAppFaceLiveness.slnx en Visual Studio 2022.

2. Configurar Credenciales

Edita MauiProgram.cs y reemplaza las credenciales:

var faceApiConfig = new FaceApiConfig
{
    Endpoint = "https://TU-RECURSO.cognitiveservices.azure.com",
    ApiKey = "TU-API-KEY-AQUI"
};

3. Compilar y Ejecutar

# Windows
dotnet build -f net10.0-windows10.0.19041.0

# Android
dotnet build -f net10.0-android

# iOS (requiere Mac)
dotnet build -f net10.0-ios

Estructura del Proyecto MAUI

AppmovilFaceLiveness/
└── MauiAppFaceLiveness/
    ├── Models/
    │   └── LivenessModels.cs       # Modelos de datos
    ├── Services/
    │   ├── IFaceApiService.cs      # Interfaz
    │   └── FaceApiService.cs       # Implementación HTTP
    ├── ViewModels/
    │   ├── MainViewModel.cs        # VM principal
    │   └── LivenessDetectorViewModel.cs
    ├── Pages/
    │   └── LivenessDetectorPage.xaml
    ├── Converters/
    │   └── Converters.cs
    ├── Platforms/
    │   ├── Android/AndroidManifest.xml  # Permisos cámara
    │   └── iOS/Info.plist              # Permisos cámara
    └── MauiProgram.cs              # Configuración DI

🔧 Modos de Operación

Modo	Descripción	Uso Recomendado
Passive	Detección automática sin interacción	Experiencia fluida, menor seguridad
PassiveActive	Requiere que el usuario siga instrucciones (girar cabeza)	Mayor seguridad, autenticación crítica

Con Verificación de Identidad

Puedes combinar Liveness con verificación de identidad para confirmar que la persona es quien dice ser:

Proporciona una imagen de referencia (foto de DNI, foto previa)
El sistema compara el rostro capturado con la referencia
Devuelve un score de confianza (0-1)

Liveness + Verify = Autenticación Biométrica Completa

🔐 Seguridad y Mejores Prácticas

⚠️ IMPORTANTE

┌────────────────────────────────────────────────────────────────┐
│  🔒 NUNCA expongas tus API Keys en el código del cliente      │
│                                                                │
│  ✅ Usa variables de entorno                                   │
│  ✅ Implementa las llamadas a Azure desde el backend           │
│  ✅ Usa Azure Key Vault en producción                          │
│  ✅ Implementa autenticación de usuarios                       │
│  ✅ Agrega rate limiting                                       │
└────────────────────────────────────────────────────────────────┘

Producción Checklist

API Keys en Azure Key Vault
HTTPS obligatorio
Autenticación de usuarios (Azure AD, Auth0, etc.)
Rate limiting en endpoints
Logging y monitoreo (Application Insights)
Validación de entrada en todos los endpoints

🧪 Modo de Pruebas (Mock)

Si tu recurso de Azure no tiene Liveness habilitado, la aplicación web incluye un modo simulado que permite probar la UI sin conexión a Azure.

El componente FaceLivenessDetectorMock.tsx simula:

Detección facial animada
Resultados de liveness aleatorios
Resultados de verificación

📖 API Reference

Crear Sesión de Liveness

POST /api/generateAccessToken
Content-Type: application/json

{
  "livenessOperationMode": "PassiveActive",
  "deviceCorrelationId": "uuid-del-dispositivo"
}

Respuesta:

{
  "sessionId": "session-uuid",
  "authToken": "jwt-token-para-sdk"
}

Crear Sesión con Verificación

POST /api/generateAccessToken
Content-Type: multipart/form-data

livenessOperationMode: PassiveActive
deviceCorrelationId: uuid-del-dispositivo
verifyImage: (archivo de imagen)

Obtener Resultado

GET /api/getSessionResult?sessionId=xxx&withVerify=true

Respuesta:

{
  "isLive": true,
  "livenessDecision": "realface",
  "verifyResult": {
    "isIdentical": true,
    "matchConfidence": 0.95
  }
}

📚 Documentación Adicional

Recurso	Enlace
Azure Face API Docs	learn.microsoft.com
Face Liveness Tutorial	aka.ms/azure-ai-vision-face-liveness-tutorial
SDK Web Reference	aka.ms/azure-ai-vision-face-liveness-client-sdk-web-api-reference
Azure Samples	github.com/Azure-Samples/azure-ai-vision-sdk
Solicitar Acceso Liveness	aka.ms/facerecognition

🐛 Solución de Problemas

Error: "UnsupportedFeature" o 404

Tu recurso de Azure Face API no tiene habilitado Liveness Detection.
Solicita acceso en: https://aka.ms/facerecognition

Error: "Failed to fetch token"

Verifica FACE_API_ENDPOINT y FACE_API_KEY
Comprueba que el recurso esté activo en Azure Portal

La cámara no se activa

Usa HTTPS (o localhost para desarrollo)
Verifica permisos de cámara en navegador/dispositivo
En Android: revisa AndroidManifest.xml
En iOS: revisa Info.plist

Error de compilación MAUI

dotnet restore
dotnet clean
dotnet build

🤝 Contribuir

Fork el repositorio
Crea tu feature branch (git checkout -b feature/AmazingFeature)
Commit tus cambios (git commit -m 'Add AmazingFeature')
Push al branch (git push origin feature/AmazingFeature)
Abre un Pull Request

👨‍💻 Autor

📄 Licencia

Este proyecto está bajo la Licencia MIT - ver LICENSE para más detalles.

_{Hecho con ❤️ para la comunidad de desarrolladores}

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
.github/instructions		.github/instructions
AppmovilFaceLiveness/MauiAppFaceLiveness		AppmovilFaceLiveness/MauiAppFaceLiveness
app		app
components		components
lib		lib
public		public
scripts		scripts
.env.local.example		.env.local.example
.gitignore		.gitignore
.npmrc		.npmrc
LICENSE		LICENSE
README.md		README.md
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

License

eincioch/Azure-Face-Liveness

Folders and files

Latest commit

History

Repository files navigation

Azure Face API Liveness Demo

📖 ¿Qué es Face Liveness Detection?

🚀 Características

Aplicación Web (Next.js)

Aplicación Móvil (.NET MAUI)

🔄 Flujo de Face Liveness

📋 Prerrequisitos

Para Todas las Aplicaciones

Para Aplicación Web

Para Aplicación MAUI

🌐 Aplicación Web (Next.js)

Configuración Rápida

1. Clonar y configurar

2. Configurar Variables de Entorno

3. Instalar y Ejecutar

Estructura del Proyecto Web

📱 Aplicación Móvil (.NET MAUI)

Configuración Rápida

1. Abrir Proyecto

2. Configurar Credenciales

3. Compilar y Ejecutar

Estructura del Proyecto MAUI

🔧 Modos de Operación

Con Verificación de Identidad

🔐 Seguridad y Mejores Prácticas

⚠️ IMPORTANTE

Producción Checklist

🧪 Modo de Pruebas (Mock)

📖 API Reference

Crear Sesión de Liveness

Crear Sesión con Verificación

Obtener Resultado

📚 Documentación Adicional

🐛 Solución de Problemas

Error: "UnsupportedFeature" o 404

Error: "Failed to fetch token"

La cámara no se activa

Error de compilación MAUI

🤝 Contribuir

👨‍💻 Autor

📄 Licencia

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages