# Как интегрировать серверную проверку Liveness в ваше Web-приложение
Из этой статьи вы узнаете, как интегрировать Oz Liveness Web SDK в клиентское Web-приложение: для съемки видео с лицом и дальнейшей его проверки на сервере.
Преимущества Oz Liveness Web SDK:
* Готовый интерфейс для съемки видео, который легко встроить в приложение клиента.
* Высокое качество видео, которое обеспечивает точность проверки Liveness.
* Возможность обнаружения и презентационных, и инъекционных атак. Инъекционная атака – попытка выдать за свежеснятое видео другое, снятое ранее с помощью виртуальной камеры.
* Возможность использования как SaaS-модели, так и локальной установки – с теми же функциями, но без необходимости слать какие-либо данные в облако.
«Под капотом» Web SDK взаимодействует с OZ API.
Мы рекомендуем начать с SaaS-модели и затем перейти к локальной установке – чтобы настроить бесшовную интеграцию Web SDK с вашими фронтендом и бэкендом. В этой инструкции приводятся шаги, благодаря которым процесс интеграции будет простым и ясным.
{% stepper %}
{% step %}
### Получите доступ к персональной копии Web Adapter
Передайте нам информацию о доменных именах тех страниц, откуда планируется вызывать Web SDK, а также адрес электронной почты для создания аккаунта администратора. Пример:
|
Доменные имена:
[www.yourbrand.com](http://www.yourbrand.com)
[www.yourbrand2.com](http://www.yourbrand2.com)
Электронная почта:
|
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
Мы направим вам ссылки и логин с паролем для дальнейшей интеграции и использования Web SDK.
|
Логин:
Пароль: …
API:
Web-консоль:
Web Adapter:
|
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
Для локальной установки Oz API вам нужно будет [создать пользователя](https://doc.ozforensics.com/oz-knowledge-ru/rukovodstva/rukovodstvo-polzovatelya/oz-webui/webui-users#dobavlenie-polzovatelya) или запросить его создание у команды, которая поддерживает API. Задайте пользователю роль: чаще всего достаточно `CLIENT`, но если вам нужно будет, чтобы SDK работал с папками, созданными другими пользователями, роль должна быть `CLIENT ADMIN`. В конце вам потребуются логин и пароль так же, как и при сценарии SaaS.
{% endstep %}
{% step %}
### Запросите в Oz API `session_token`
Токен сессии необходим для работы [OzCapsula](https://doc.ozforensics.com/oz-knowledge-ru/obshaya-informaciya/readme/konteiner-dannykh-ozcapsula).
1. (Опционально, только при использовании Full API) Авторизуйтесь с любой ролью, кроме OPERATOR.
2. Вызовите метод `GET {{host}}/api/authorize/session_token`.
**Пример запроса**
```bash
curl -L 'https://{{host}}/api/authorize/session_token' \
-H 'X-Forensic-Access-Token: ' \
-H 'Content-Type: application/json'
```
{% endstep %}
{% step %}
### Добавьте Web Plugin на вашу страницу
В HTML-коде страницы разместите следующее. `web-adapter-url` необходимо заменить на полученную от нас ссылку.
{% endstep %}
{% step %}
### Реализуйте собственную логику для использования Web Plugin
Добавьте код, который будет запускать плагин и обрабатывать результаты:
```css
OzLiveness.open({
session_token,
lang: 'en',
action: [
// 'photo_id_front', // фото документа
'video_selfie_blank' // видео с пассивным Liveness
],
on_complete: function (result) {
// эта функция вызывается по завершении анализа
console.log('on_complete', result);
}
});
```
{% hint style="success" %}
Обратите внимание: в целях безопасности мы рекомендуем настроить логику принятия решений на стороне вашего бэкенда. Более детальную информацию и примеры кода вы можете найти [здесь](https://doc.ozforensics.com/oz-knowledge-ru/rukovodstva/rukovodstvo-razrabotchika/sdk/websdk/web-plugin/rekomendacii-po-bezopasnosti).
{% endhint %}
{% endstep %}
{% endstepper %}
Шаги выше помогут вам в базовой интеграции Web SDK в ваше веб-приложение. Чтобы получить доступ к снятым видео и результатам анализов, воспользуйтесь [веб-консолью](https://doc.ozforensics.com/oz-knowledge-ru/rukovodstva/rukovodstvo-polzovatelya/oz-webui) или API-запросами (получение [видео в MP4](https://doc.ozforensics.com/oz-knowledge-ru/rukovodstva/rukovodstvo-razrabotchika/sdk/websdk/web-plugin/zapusk-plagina/semka-video-i-opisanie-kollbeka-on_capture_complete#obratite-vnimanie) и [результатов анализов](https://doc.ozforensics.com/oz-knowledge-ru/rukovodstva/rukovodstvo-razrabotchika/api/oz-api/use-cases/liveness)).
Дальнейшие шаги описаны в [руководстве разработчика по Web Plugin](https://doc.ozforensics.com/oz-knowledge-ru/rukovodstva/rukovodstvo-razrabotchika/sdk/websdk/web-plugin):
* Настройка внешнего вида плагина
* Добавление дополнительного языка
* Настройка поведения плагина
* Настройка параметров и коллбэк-функций
* Рекомендации по безопасности
Образец кода Oz Liveness Web SDK находится [здесь](https://gitlab.com/oz-forensics/oz-liveness-sample-web/-/blob/master/OzLivenessWebSDKSample.html). Чтобы все работало корректно, нужно заменить `` на полученную от нас ссылку на Web Adapter.
Для Angular и React нужно заменить `https://web-sdk.sandbox.ohio.ozforensics.com` в index.html.
* Образец кода для [Angular](https://gitlab.com/oz-forensics/oz-liveness-sample-web-angular)
* Образец кода для [React](https://gitlab.com/oz-forensics/oz-liveness-sample-web-react/-/tree/main/public)
* Образец кода для [Vue](https://gitlab.com/oz-forensics/oz-liveness-sample-web-vue)
* Образец кода для [Svelte](https://gitlab.com/oz-forensics/oz-liveness-sample-web-svelte)
[^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.
