Implementação

Novidade na versão 4.0.0

A partir da versão 4.0.0, o construtor WebFaceRecon não recebe mais o hostComponent — o SDK gerencia seu próprio nó DOM. O client_session_key continua sendo obrigatório e deve ser passado ao método .open().

A implementação é realizada instanciando ZaigWebFaceRecon.WebFaceRecon(), encadeando as opções de configuração e chamando .build(). A inicialização ocorre em .initialize(), e a captura da prova de vida é iniciada com .open(clientSessionKey).

Obtendo o Client Session Key

Antes de chamar .open(), você deve gerar um clientSessionKey temporário via requisição server-to-server para a nossa API de face recognition.

Endpoint

Ambiente	URL
Sandbox	https://api.sandbox.zaig.com.br/face_recognition/client_session
Produção	https://api.zaig.com.br/face_recognition/client_session

Requisição

Method: POST

Headers:

{
  "Authorization": "YOUR_FACE_RECON_API_KEY"
}

Body (Opcional, mas recomendado):

{
  "user_id": "unique_user_identifier"
}

Importante: O campo user_id é altamente recomendado para medidas de segurança e antifraude. Use um identificador único do usuário da sua aplicação.

Resposta

{
  "client_session_key": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}

Exemplo completo

<script src="https://facerecon.zaig.com.br/face-recognition-4-0-1.js"></script>

<script>
  async function iniciarReconhecimentoFacial() {
    // 1. Obtenha o clientSessionKey via chamada server-to-server
    const clientSessionKey = await fetchClientSessionKey();

    // 2. Configure e instancie o SDK
    const webFaceRecon = new ZaigWebFaceRecon.WebFaceRecon()
      .setThemeConfiguration({
        primaryColor:  "#2848A8",
        tertiaryColor: "#57D9FF",
        fontFamily:    "Verdana"
      })
      .setSandboxEnvironment()
      .setSessionId("UNIQUE_SESSION_ID")
      .build();

    // 3. Inicializa (valida browser/dispositivo e carrega modelo)
    await webFaceRecon.initialize();

    // 4. Inicia a captura da prova de vida
    const response = await webFaceRecon.open(clientSessionKey);
    console.log(`Status: ${response.status}, Key: ${response.data}`);
  }
</script>

Versões anteriores

Aviso Importante!

Versões anteriores à 4.0.0 recebem o hostComponent como primeiro argumento do construtor. A partir da 3.0.0, o web_token foi removido do construtor e o fluxo de client_session_key foi introduzido.

<script>
  // Versões 3.x
  var hostComponent = document.getElementById('webfacerecon');
  var webFaceRecon = new ZaigWebFaceRecon.WebFaceRecon(hostComponent)
    .setThemeConfiguration({
      "buttonColor": "#2848A8",
      "fontColor": "#FFFFFF",
      "backgroundColor": "#FFFFFF"
    })
    .setSandboxEnvironment()
    .setSessionId('UNIQUE_SESSION_ID')
    .build();

  webFaceRecon.initialize()
    .then(() => fetchClientSessionKey())
    .then(clientSessionKey => webFaceRecon.open(clientSessionKey))
    .then(response => console.log(`Status: ${response.status}, Key: ${response.data}`))
    .catch(error => {
      console.error(error);
      alert(error.reason || error);
    });
</script>