Implementação

Aviso Importante!

A partir da versão 3.0.0, a integração com a SDK web requere uma requisição à nossa API face recogntion antes do inicio do fluxo para obtenção da key de autenticação e mudamos a maneira como os resultados são retornados.

A implementação da biblioteca é realizada através da instância do componente ZaigWebFaceRecon e da chamada do construtor .WebFaceRecon(). Já sua inicialização ocorre no método .initialize(), em que criamos alguns elementos e carregamos os componentes necessários.

Para iniciar a interação com o usuário e coleta da prova de vida, basta chamar o método .open() e aguardar seu retorno.

Obtendo o Client Session Key

Antes de configurar a SDK, você deve gerar um clientSessionkey temporário através de uma 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

A resposta bem-sucedida conterá o client_session_key que deve ser passado para a configuração da SDK.

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

Exemplo

<script>
  const hostComponent = document.getElementById('webfacerecon');
  const webFaceRecon = new ZaigWebFaceRecon.WebFaceRecon(hostComponent)
    .setThemeConfiguration({
      buttonColor: "#2848A8",
      fontColor: "#FFFFFF",
      backgroundColor: "#FFFFFF"
    })
    .setSandboxEnvironment()
    .setLogLevel('debug')
    .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>

Versões anteriores

<script>
 var hostComponent = document.getElementById('webfacerecon')
      var webFaceRecon = new ZaigWebFaceRecon.WebFaceRecon(
        hostComponent,
        'YOUR_TOKEN_SENT_BY_QITECH'
      )
        .setThemeConfiguration(
        {
          "buttonColor": "#2848A8",
          "fontColor": "#FFFFFF",
          "backgroundColor": "#FFFFFF"
        }
        )
        .setSandboxEnvironment()
        .setLogLevel('debug')
        .setSessionId('UNIQUE_SESSION_ID')
        .build()
      webFaceRecon.initialize().then(res => {
        var promise = webFaceRecon.open()
        promise
          .then(image_key => {
            console.log(image_key)
          })
          .catch(err => {
            console.log(err)
          })
      })
</script>