Перейти к основному содержимому
Версия: 1.0.0

Работа с web-компонентой

Web-компонента - это инструмент захвата изображений, с помощью которого пользователь может выполнять регистрацию и авторизацию через веб-интерфейс. Обратите внимание, что web-компонента работает только в браузерах, основанных на Chromium.

Установка web-компоненты

Web-компонента поставляется как npm-пакет в составе BAF в виде .tgz архива. Для установки web-компоненты поместите ее в корень вашего проекта рядом с файлом package.json.

В package.json в раздел dependencies добавьте строку:

"@tdv/onboarding": "tdv-onboarding-2.2.21.tgz".

Версия архива может отличаться. Пример итогового файла package.json:

img.png

После этого вызовите команду npm install, которая установит библиотеку в ваш проект.

Импорт и использование web-компоненты

Импортируйте библиотеку, а также стили для нее. При желании стилизация может быть переписана пользователем. Пример импорта библиотеки и стилей:

img.png

Теперь инициализируйте web-компоненту. Для этого заполните файл конфигурации, подробное описание которого можно посмотреть ниже:

Описание конфигурации web-компоненты
В этом разделе описаны все доступные поля конфигурации web-компоненты:
  • el (string) - id элемента на странице, куда интегрируется web-компонента (обязательное поле).

  • applicantId (string) - id аппликанта (обязательное поле).

  • domainId (string) - id домена, содержащего настройки и стили для web-компоненты (обязательное поле).

  • domainApi (string) - URL адрес для доступа к API (обязательное поле).

  • publicKey (string) - публичный ключ для доступа к API (обязательное поле).

  • isAuth (boolean) - флаг указывающий, что необходима только авторизация пользователя.

  • faceOnly (boolean) - флаг указывающий, что регистрация и авторизация должны быть только по лицу.

  • chunkPublicPath (string) - путь к папке с чанками. Укажите путь на сервере, если вам нужно переместить папку в другое место. Путь по умолчанию — 'networks'.

  • networkUrl (string) - путь к папке с нейросетями. Укажите путь на сервере, если вам нужно переместить папку в другое место. Путь по умолчанию — 'networks'.

  • useCDN (boolean) - флаг включается, если вы хотите загружать 'networks' с CDN, а не со своего домена.

  • preferApiConfig (boolean) - флаг включается, если вы предпочитаете использовать конфигурацию библиотеки TDV, отправленную из BAF API, вместо конфигурации, использованной при инициализации оболочки.

  • hideDocumentTitle (boolean) - эта опция включает/отключает отображение заголовков документов.

  • processingImageFormat (string) - эта опция переключает формат изображения, используемый для обработки изображения.

  • callbacks (object) - объект с функциями обратного вызова. Доступны следующие функции:

    • onChange - функция обратного вызова, которая будет вызываться после прохождения каждого шага. Возвращаемое значение — это объект с типом и изображением.

    • onCameraError - функция, вызываемая в случае, если камера недоступна. Значением ответа является объект с кодом ошибки и сообщением.

    • onReset - функция обратного вызова, которая будет вызываться после сброса всех шагов. Возвращаемое значение — это объект с шагами.

    • onRetakeHook - функция, которая будет вызываться перед сбросом текущего шага. Возвращаемое значение — это объект с текущим шагом.

    • onValidate - функция, которая будет вызываться после получения ответа проверки. Возвращаемое значение — это объект с информацией проверки.

    • onError - функция, которая будет вызываться в случае ошибки. Значением ответа является объект с кодом ошибки и сообщением.

    • onReloaded - функция, которая будет вызвана после завершения перезагрузки компоненты. Эта функция не возвращает значение.

    • onMounted - функция, которая будет вызываться на смонтированной компоненте. Эта функция не возвращает значение.

    • submit - функция обратного вызова, которая будет вызвана после выполнения всех шагов. Возвращаемое значение — это объект со следующим содержимым:

img.png

Пример инициализации web-компоненты:

img.png

Методы web-компоненты

Restart

Метод restart полностью перезапускает web-компоненту с той же конфигурацией, с которой она была инициализирована.

Пример использования: img.png

Set applicant

Метод setApplicant перезапускает компоненту с переданным аппликантом и с той же конфигурацией, с которой она была инициализирована.

Пример использования: img.png

Update config

Метод updateConfig перезапускает компоненту с переданной конфигурацией.

Пример использования: img.png