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

<figure><img src="https://2532558063-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5g6dgsxRbyrCvB0uAf8f%2Fuploads%2FUs2bBO0bIa8bXM2dAa8z%2Fwebsdk-scheme-v8.drawio%20(1).png?alt=media&#x26;token=ffca0d61-2d52-4234-92e3-66f714b0caee" alt=""><figcaption></figcaption></figure>

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.&#x20;

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.

{% stepper %}
{% step %}

### 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.:

| <p>Domain names from which Web SDK will be called:</p><ol><li>[www.yourbrand.com](http://www.yourbrand.com)</li><li>[www.yourbrand2.com](http://www.yourbrand2.com)</li></ol><p>Email for admin access: </p><ul><li><j.doe@yourcompany.com></li></ul> |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

In response, you’ll get URLs and credentials for further integration and usage. When using SaaS API, you get them [from us](mailto:info@ozforensics.com):

| <p>Login: <j.doe@yourcompany.com></p><p>Password: …<br><br></p><p>API: <https://sandbox.ohio.ozforensics.com/></p><p>Web Console: <https://sandbox.ohio.ozforensics.com></p><p>Web Adapter: <https://web-sdk.cdn.sandbox.ozforensics.com/your_company_name/></p> |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

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](https://doc.ozforensics.com/oz-knowledge/guides/user-guide/oz-webui/webui-users#adding-a-user). 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.
{% endstep %}

{% step %}

### Obtain a session token from Oz API

Session token is required for [OzCapsula](https://doc.ozforensics.com/oz-knowledge/guides/developer-guide/api/oz-api/ozcapsula-data-container) functionality.&#x20;

1. (Optional, only if you use stateful API) Authorize as any non-OPERATOR role.
2. Call `GET {{host}}/api/authorize/session_token`.

**Example request**

```bash
curl -L 'https://{{host}}/api/authorize/session_token' \
-H 'X-Forensic-Access-Token: <token>' \
-H 'Content-Type: application/json'
```

{% endstep %}

{% step %}

### Add Web Plugin to your web pages

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

<pre class="language-css"><code class="lang-css">&#x3C;script src="https://<a data-footnote-ref href="#user-content-fn-1">&#x3C;web-adapter-url></a>/plugin_liveness.php">&#x3C;/script>
</code></pre>

{% endstep %}

{% step %}

### Implement your logic around Web Plugin

Add the code that opens the plugin and handles the results. You'll require a session token from step 2.

```css
OzLiveness.open({
  session_token,
  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);
  }
});
```

{% hint style="info" %}
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](https://doc.ozforensics.com/oz-knowledge/guides/developer-guide/sdk/oz-liveness-websdk/web-plugin/security-recommendations).
{% endhint %}
{% endstep %}
{% endstepper %}

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](https://doc.ozforensics.com/oz-knowledge/guides/user-guide/oz-webui) via browser or programmatically via [API](https://doc.ozforensics.com/oz-knowledge/guides/developer-guide/api/oz-api) (please find the instructions here: [retrieving an MP4 video](https://doc.ozforensics.com/oz-knowledge/guides/developer-guide/sdk/oz-liveness-websdk/web-plugin/launching-the-plugin/capturing-video-and-description-of-the-on_capture_complete-callback#please-note), [getting analysis results](https://doc.ozforensics.com/oz-knowledge/guides/developer-guide/api/oz-api/basic-scenarios/liveness)).

In the [Web Plugin Developer Guide,](https://doc.ozforensics.com/oz-knowledge/guides/developer-guide/sdk/oz-liveness-websdk/configuration-and-usage/web-plugin) 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](https://gitlab.com/oz-forensics/oz-liveness-sample-web/-/blob/master/OzLivenessWebSDKSample.html). 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.

* [Angular sample](https://gitlab.com/oz-forensics/oz-liveness-sample-web-angular)
* [React sample](https://gitlab.com/oz-forensics/oz-liveness-sample-web-react/-/tree/main)
* [Vue](https://gitlab.com/oz-forensics/oz-liveness-sample-web-vue) sample
* [Svelte](https://gitlab.com/oz-forensics/oz-liveness-sample-web-svelte) sample

[^1]: Web Adapter URL that you have received  from us on the step [#id-1.-get-your-web-adapter](#id-1.-get-your-web-adapter "mention"). This URL is where the primary plugin script file is located.&#x20;