Pular para o conteúdo principal

Início rápido

Coloque a verificação facial a funcionar na sua aplicação em menos de 5 minutos.

1
Obter credenciais
Chave API do seu painel
2
Gerar token
Chamada à API do lado do servidor
3
Integrar o FaceGuard
Adicione o SDK ou o iframe

1. Obtenha as suas credenciais​

Após a Surt fornecer as suas credenciais de acesso:

  • É criada uma chave API para a sua organização
  • Crie um fluxo de trabalho no seu painel para obter um workflow_id

A sua chave API é incluída no cabeçalho Authorization de cada pedido ao backend. Nunca a exponha em código do lado do cliente. Consulte Autenticação para mais detalhes.

2. Gere um token de portal​

Chame a API da Surt a partir do seu backend para criar um 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"
    }
}'

A resposta contém um token de portal JWT. Passe este token para o seu frontend.

Expiração do token de portal

Os tokens de portal expiram ao fim de 30 minutos. Gere um novo token para cada tentativa de verificação.

3. Integre o FaceGuard​

Opção A: Pacote 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 acesso
} else if (result.status === 'rejected') {
  // Negar acesso ou tentar novamente com um novo token
}

O SDK deteta automaticamente o dispositivo: câmara em ecrã completo no móvel, modal com código QR no desktop.

Opção 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>

Opção 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. Processe o resultado​

Callbacks do SDK​

TypeScript
const fg = FaceGuard.init({
  token: 'YOUR_PORTAL_TOKEN',
  onSuccess: (result) => console.log('Aprovado', result.confidence),
  onFailed: (result) => console.log('Rejeitado', result.confidence),
  onCancel: () => console.log('Utilizador cancelou'),
  onError: (error) => console.log('Erro', error.message),
});

Eventos postMessage (iframe / WebView)​

JavaScript
window.addEventListener('message', (e) => {
  if (e.data?.action === 'close') {
    switch (e.data.reason) {
      case 'approved':   // Rosto verificado - confidence: 0-100
      case 'rejected':   // Rosto não correspondeu - confidence: 0-100
      case 'canceled':   // Utilizador fechou o FaceGuard
      case 'error':      // Algo correu mal - mensagem de erro
    }
  }
});
dica

Use o modo sandbox durante o desenvolvimento. Contacte a Surt para obter credenciais de sandbox.

Próximos passos​