English version
To the Oz Website Oz API Reference Contact Us

How to Integrate Server-Based Liveness into Your Web Application

This guide outlines the steps for integrating the Oz Liveness Web SDK into a customer web application for capturing facial videos and subsequently analyzing them on a server.

The SDK implements the ready-to-use face capture user interface that is essential for seamless customer experience and accurate liveness results. Under the hood, it communicates with Oz API.

Oz Liveness Web SDK detects both presentation and injection attacks. An injection attack is an attempt to feed pre-recorded video into the system using a virtual camera.

Finally, while the cloud-based service provides the fully-fledged functionality, we also offer an on-premise version with the same functions but no need for sending any data to our cloud. We recommend starting with the SaaS mode and then reconnecting your web app to the on-premise Web Adapter and Oz API to ensure seamless integration between your front end and back end. With these guidelines in mind, integrating the Oz Liveness Web SDK into your web application can be a simple and straightforward process.

1. Get your Web Adapter

Tell us domain names of the pages from which you are going to call Web SDK and email for admin access, e.g.:

In response, you’ll get URLs and credentials for further integration and usage. When using SaaS API, you get them from us:

For the on-premise Oz API, you need to create a user yourself or ask your team that manages the API. See the guide on user creation via Web Console. Consider the proper user role (CLIENT in most cases or CLIENT ADMIN, if you are going to make SDK work with the pre-created folders from other API users). In the end, you need to obtain a similar set of credentials as you would get for the SaaS scenario.

2. Add Web Plugin to your web pages

Add the following tags to your HTML code. Use Web Adapter URL received before:

3. Implement your logic around Web Plugin

Add the code that opens the plugin and handles the results:

OzLiveness.open({
  lang: 'en',
  action: [
    // 'photo_id_front', // request photo ID picture
    'video_selfie_blank' // request passive liveness video
  ],
  on_complete: function (result) {
    // This callback is invoked when the analysis is complete
    console.log('on_complete', result);
  }
});

Keep in mind that it is more secure to get your back end responsible for the decision logic. You can find more details including code samples here.

With these steps, you are done with basic integration of Web SDK into your web application. You will be able to access recorded media and analysis results in Web Console via browser or programmatically via API (please find the instructions here: retrieving an MP4 video, getting analysis results).

In the Web Plugin Developer Guide, you can find instructions for common next steps:

  • Customizing plugin look-and-feel

  • Adding custom language pack

  • Tuning plugin behavior

  • Plugin parameters and callbacks

  • Security recommendations

Please find a sample for Oz Liveness Web SDK here. To make it work, replace <web-adapter-url> with the Web Adapter URL you've received from us.

For Angular and React, replace https://web-sdk.sandbox.ohio.ozforensics.com in index.html.

PreviousServer-Based LivenessNextHow to Integrate Server-Based Liveness into Your Mobile Application

Last updated