> For the complete documentation index, see [llms.txt](https://doc.ozforensics.com/oz-knowledge-ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.ozforensics.com/oz-knowledge-ru/obshaya-informaciya/kratkie-rukovodstva-po-integracii/proverka-liveness-na-servere/kak-integrirovat-servernuyu-proverku-liveness-v-vashe-web-prilozhenie.md).

# Как интегрировать серверную проверку Liveness в ваше Web-приложение

Из этой статьи вы узнаете, как интегрировать Oz Liveness Web SDK в клиентское Web-приложение: для съемки видео с лицом и дальнейшей его проверки на сервере.

<figure><img src="/files/fNUJpoCg803cLnfYJ5Ce" alt=""><figcaption></figcaption></figure>

Преимущества Oz Liveness Web SDK:

* Готовый интерфейс для съемки видео, который легко встроить в приложение клиента.
* Высокое качество видео, которое обеспечивает точность проверки Liveness.
* Возможность обнаружения и презентационных, и инъекционных атак. Инъекционная атака — попытка выдать за свежеснятое видео другое, снятое ранее с помощью виртуальной камеры.
* Возможность использования как SaaS-модели, так и локальной установки — с теми же функциями, но без необходимости слать какие-либо данные в облако.

«Под капотом» Web SDK взаимодействует с OZ API.

Мы рекомендуем начать с SaaS-модели и затем перейти к локальной установке — чтобы настроить бесшовную интеграцию Web SDK с вашими фронтендом и бэкендом. В этой инструкции приводятся шаги, благодаря которым процесс интеграции будет простым и ясным.

{% stepper %}
{% step %}

### Получите доступ к персональной копии Web Adapter

Передайте нам информацию о доменных именах тех страниц, откуда планируется вызывать Web SDK, а также адрес электронной почты для создания аккаунта администратора. Пример:

| <p>Доменные имена:</p><ol><li>[www.yourbrand.com](http://www.yourbrand.com)</li><li>[www.yourbrand2.com](http://www.yourbrand2.com)</li></ol><p>Электронная почта:</p><ul><li><ivan.ivanov@yourcompany.com></li></ul> |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

Мы направим вам ссылки и логин с паролем для дальнейшей интеграции и использования Web SDK.

| <p>Логин: <ivan.ivanov@yourcompany.com></p><p>Пароль: …</p><p>API: <https://sandbox.ohio.ozforensics.com></p><p>Web-консоль: <https://sandbox.ohio.ozforensics.com></p><p>Web Adapter: <https://web-sdk.cdn.sandbox.ozforensics.com/your_company_name/></p> |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

Для локальной установки Oz API вам нужно будет [создать пользователя](/oz-knowledge-ru/rukovodstva/rukovodstvo-polzovatelya/oz-webui/webui-users.md#dobavlenie-polzovatelya) или запросить его создание у команды, которая поддерживает API. Задайте пользователю роль: чаще всего достаточно `CLIENT`, но если вам нужно будет, чтобы SDK работал с папками, созданными другими пользователями, роль должна быть `CLIENT ADMIN`. В конце вам потребуются логин и пароль так же, как и при сценарии SaaS.
{% endstep %}

{% step %}

### Запросите в Oz API `session_token`

Токен сессии необходим для работы [OzCapsula](/oz-knowledge-ru/obshaya-informaciya/opisanie-sistemy-oz-forensics/konteiner-dannykh-ozcapsula.md).

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: <token>' \
-H 'Content-Type: application/json'
```

{% endstep %}

{% step %}

### Добавьте Web Plugin на вашу страницу

В HTML-коде страницы разместите следующее. `web-adapter-url` необходимо заменить на полученную от нас ссылку.

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

### Реализуйте собственную логику для использования 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" %}
Обратите внимание: в целях безопасности мы рекомендуем настроить логику принятия решений на стороне вашего бэкенда. Более детальную информацию и примеры кода вы можете найти [здесь](/oz-knowledge-ru/rukovodstva/rukovodstvo-razrabotchika/sdk/websdk/web-plugin/rekomendacii-po-bezopasnosti.md).
{% endhint %}
{% endstep %}
{% endstepper %}

Шаги выше помогут вам в базовой интеграции Web SDK в ваше веб-приложение. Чтобы получить доступ к снятым видео и результатам анализов, воспользуйтесь [веб-консолью](/oz-knowledge-ru/rukovodstva/rukovodstvo-polzovatelya/oz-webui.md) или API-запросами (получение [видео в MP4](/oz-knowledge-ru/rukovodstva/rukovodstvo-razrabotchika/sdk/websdk/web-plugin/zapusk-plagina/semka-video-i-opisanie-kollbeka-on_capture_complete.md#obratite-vnimanie) и [результатов анализов](/oz-knowledge-ru/rukovodstva/rukovodstvo-razrabotchika/api/oz-api/use-cases/liveness.md)).

Дальнейшие шаги описаны в [руководстве разработчика по Web Plugin](/oz-knowledge-ru/rukovodstva/rukovodstvo-razrabotchika/sdk/websdk/web-plugin.md):

* Настройка внешнего вида плагина
* Добавление дополнительного языка
* Настройка поведения плагина
* Настройка параметров и колбэк-функций
* Рекомендации по безопасности

Образец кода Oz Liveness Web SDK находится [здесь](https://gitlab.com/oz-forensics/oz-liveness-sample-web/-/blob/master/OzLivenessWebSDKSample.html). Чтобы все работало корректно, нужно заменить `<web-adapter-url>` на полученную от нас ссылку на 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://doc.ozforensics.com/oz-knowledge-ru/obshaya-informaciya/kratkie-rukovodstva-po-integracii/proverka-liveness-na-servere/kak-integrirovat-servernuyu-proverku-liveness-v-vashe-web-prilozhenie.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.