Implementation

Important Warning!

Starting from version 3.0.0, integration with the web SDK requires a request to our face recognition API before starting the flow to obtain the authentication key and we changed how results are returned.

The library implementation is performed through the ZaigWebFaceRecon component instance and the .WebFaceRecon() constructor call. Its initialization occurs in the .initialize() method, where we create some elements and load the necessary components.

To start the interaction with the user and collect the liveness proof, simply call the .open() method and wait for its return.

Obtaining the Client Session Key

Before configuring the SDK, you must generate a temporary clientSessionKey through a server-to-server request to our face recognition API.

Endpoint

Environment	URL
Sandbox	https://api.sandbox.zaig.com.br/face_recognition/client_session
Production	https://api.zaig.com.br/face_recognition/client_session

Request

Method: POST

Headers:

{
  "Authorization": "YOUR_FACE_RECON_API_KEY"
}

Body (Optional, but recommended):

{
  "user_id": "unique_user_identifier"
}

Important: The user_id field is highly recommended for security and anti-fraud measures. Use a unique identifier for your application's user.

Response

The successful response will contain the client_session_key that must be passed to the SDK configuration.

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

Example

<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>

Previous versions

<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>