Saltar al contenido principal

Inicio rápido

Pon en marcha la verificación facial en tu aplicación en menos de 5 minutos.

1
Obtener credenciales
Clave API desde tu panel
2
Generar token
Llamada a la API del lado del servidor
3
Integrar FaceGuard
Añade el SDK o el iframe

1. Obtén tus credenciales​

Después de que Surt te proporcione credenciales de acceso:

  • Se crea una clave API para tu organización
  • Crea un flujo de trabajo en tu panel para obtener un workflow_id

Tu clave API va en el encabezado Authorization de cada solicitud al backend. Nunca la expongas en código del lado del cliente. Consulta Autenticación para más detalles.

2. Genera un token de portal​

Llama a la API de Surt desde tu backend para crear un token de portal:

cURL
curl --location 'https://api.surt.com/faceguard/session/portal' \
--header 'Authorization: Bearer YOUR_API_KEY' \
--header 'Content-Type: application/json' \
--data-raw '{
    "workflow_id": "YOUR_WORKFLOW_ID",
    "customer": {
        "customer_id": "your_user_id",
        "email": "user@example.com",
        "first_name": "John",
        "last_name": "Doe"
    }
}'

La respuesta contiene un token de portal JWT. Pasa este token a tu frontend.

Expiración del token de portal

Los tokens de portal expiran a los 30 minutos. Genera un nuevo token para cada intento de verificación.

3. Integra FaceGuard​

Opción A: Paquete NPM (recomendado)​

npm install @surtai/faceguard
TypeScript
import { FaceGuard } from '@surtai/faceguard';

const result = await FaceGuard.verify({ token: 'YOUR_PORTAL_TOKEN' });

if (result.status === 'approved') {
  // Conceder acceso
} else if (result.status === 'rejected') {
  // Denegar acceso o reintentar con un nuevo token
}

El SDK detecta automáticamente el dispositivo: cámara a pantalla completa en móvil, modal con código QR en escritorio.

Opción B: iframe​

HTML
<div style="position: fixed; inset: 0; z-index: 9999; background: #0D141A;">
  <iframe
    src="https://faceguard.surt.com/intro?token=YOUR_PORTAL_TOKEN"
    allow="camera"
    style="width: 100%; height: 100%; border: none;"
  ></iframe>
</div>

Opción C: React Native WebView​

React Native
import { SafeAreaView } from 'react-native';
import { WebView } from 'react-native-webview';

<SafeAreaView style={{ flex: 1, backgroundColor: '#0D141A' }}>
  <WebView
    source={{ uri: `https://faceguard.surt.com/intro?token=${token}` }}
    onMessage={(event) => {
      const data = JSON.parse(event.nativeEvent.data);
      if (data.action === 'close') {
        console.log('Resultado:', data.reason, data.confidence);
      }
    }}
    mediaPlaybackRequiresUserAction={false}
    allowsInlineMediaPlayback={true}
    mediaCapturePermissionGrantType="grant"
    style={{ flex: 1 }}
  />
</SafeAreaView>

4. Gestiona el resultado​

Callbacks del SDK​

TypeScript
const fg = FaceGuard.init({
  token: 'YOUR_PORTAL_TOKEN',
  onSuccess: (result) => console.log('Aprobado', result.confidence),
  onFailed: (result) => console.log('Rechazado', result.confidence),
  onCancel: () => console.log('Usuario canceló'),
  onError: (error) => console.log('Error', error.message),
});

Eventos postMessage (iframe / WebView)​

JavaScript
window.addEventListener('message', (e) => {
  if (e.data?.action === 'close') {
    switch (e.data.reason) {
      case 'approved':   // Cara verificada - confidence: 0-100
      case 'rejected':   // La cara no coincidió - confidence: 0-100
      case 'canceled':   // El usuario cerró FaceGuard
      case 'error':      // Algo salió mal - mensaje de error
    }
  }
});
tip

Usa el modo sandbox durante el desarrollo. Contacta con Surt para obtener credenciales de sandbox.

Próximos pasos​