Implementation

New in version 4.0.0

Starting from version 4.0.0, the WebFaceRecon constructor no longer receives hostComponent — the SDK manages its own DOM node. The client_session_key remains required and must be passed to the .open() method.

The implementation is done by instantiating ZaigWebFaceRecon.WebFaceRecon(), chaining configuration options and calling .build(). Initialization happens in .initialize(), and liveness capture is started with .open(clientSessionKey).

Obtaining the Client Session Key

Before calling .open(), you must generate a temporary clientSessionKey via 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

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

Complete example

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

<script>
  async function startFaceRecognition() {
    // 1. Obtain the clientSessionKey via server-to-server call
    const clientSessionKey = await fetchClientSessionKey();

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

    // 3. Initialize (validates browser/device and loads model)
    await webFaceRecon.initialize();

    // 4. Start liveness capture
    const response = await webFaceRecon.open(clientSessionKey);
    console.log(`Status: ${response.status}, Key: ${response.data}`);
  }
</script>

Previous versions

Important Warning!

Versions prior to 4.0.0 receive the hostComponent as the first constructor argument. Starting from 3.0.0, the web_token was removed from the constructor and the client_session_key flow was introduced.

<script>
  // Versions 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>