Продолжаем рассказывать об альтернативном способе подтверждения возраста на веб-ресурсах без использования биометрии, интеграции с ЕБС и раскрытия персональных данных. О том, как это можно сделать, мы подробно писали в прошлой статье. Теперь разберемся, как реализовать подобный сценарий с помощью WebAssembly и какие возможности это открывает для веб-платформ. В этом материале показываем код, ищите под катом. 

Веб-распознавание как альтернатива биометрии и внешним сервисам

Распознавание паспорта с локальной обработкой на стороне пользователя позволяет решить задачу проверки возраста без сбора биометрии, ЕБС и раскрытия персональных данных. Такой сценарий ближе всего к привычной офлайн-проверке, а при грамотной реализации для него не требуется ни мощное железо, ни даже сторонние приложения.

Мы в Smart Engines уже давно развиваем технологии распознавания в веб-среде – на сегодняшний день они работают в интернет-версиях многих российских банков при распознавании платежных баркодов, банковских карт и документов. Перенести распознавание в браузер нам удалось с помощью WebAssembly – технологии, позволяющей создавать “продвинутые” веб-приложения (PWA), в том числе с возможностью локального распознавания. Фактически современные PWA по скорости работы, отзывчивости интерфейса и доступному функционалу уже вплотную приблизились к нативным решениям. При этом в ряде сценариев они оказываются даже удобнее.

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

Во-вторых, PWA существенно сокращают доставку. Вместо переходов между сервисами, получения SMS-кодов или авторизации через сторонние сайты платформа получает проверку возраста непосредственно в собственном интерфейсе. Это влияет на CJM и позволяет встроить возрастную верификацию в существующий пользовательский сценарий практически бесшовно.

С точки зрения пользователя процесс выглядит предельно просто: открыть страницу и показать паспорт в камеру. Для пресечения попыток обойти проверку – с чужим документом или с помощью дипфейков и других видов подделок – распознавание паспорта можно дополнить антифрод-анализом и небиометрической сверкой лиц. При этом все вычисления выполняются локально на устройстве, поэтому изображения и персональные данные не покидают пользовательский контур и не раскрываются ни самой платформе, ни другим внешним сторонам. 

Для пользователей это гарантия конфиденциальности и отсутствие риска утечки. Для бизнеса это означает отсутствие факта передачи персональных данных и зависимости от внешних сервисов. Для разработчиков же WebAssembly открывает возможность добавить проверку возраста в любой необходимый веб-интерфейс – от интернет-магазинов и маркетплейсов до онлайн-кинотеатров, социальных платформ и мессенджеров.

Причем встроить распознавание документов для проверки возраста в веб-страницу можно хоть за пять минут. Ниже рассмотрим практическую реализацию такого решения.

Как встроить систему распознавания и проверки возраста в веб-страницу

Перейдем от бизнес-формулировок к технической части и разберемся, как можно быстро интегрировать продукты Smart Engines в любой цифровой сервис – мобильное приложение, веб-платформу или даже интерфейс мессенджера.

Мы реализовали PWA, которое хранит все необходимые ресурсы (включая Wasm-модули) в локальном кеше благодаря Service worker. В отличие от браузерного кеша, Service worker при повторном обращении к ресурсу не создает HTTP- запросов, а отдает файлы сразу. Это позволяет значительно ускорить отзывчивость приложения. Для кэширования ресурсов вы регистрируете Service Worker по простому примеру из MDN и добавляете все необходимые ресурсы при регистрации. Это стили, скрипты и wasm-файлы.

Для внедрения распознавания необходимо создать worker.js - файл, который будет производить вычисления, не нагружая UI браузера.

let SEWorker = new Worker("./worker.js"));

Внутри воркера мы загружаем скрипт и создаем инстанс библиотеки распознавания

// Import the relevant global Engine object
importScripts(bin/simd.nothreads/idengine_wasm.js);

// Init WASM module
const SE = await SmartIDEngine({});

// Init engine
const ENGINE = new SE.seIdEngine(true, 1, true);

Теперь нам необходимо создать и настроить сессию распознавания.

let sessionSettings = engine.CreateSessionSettings();

Указываем режим распознавания и маску документа. Можно указать маску как rus.passport.* тогда поиск будет осуществляться как национального паспорта так и биометрического заграничного (“rus.passport.biometric”)

sessionSettings.SetCurrentMode(“default”);
sessionSettings.AddEnabledDocumentTypes(“rus.passport.national”);

Следующей настройкой мы просим вернуть в результате изображение документа, исправленное по перспективе.

sessionSettings.SetOption("common.extractTemplateImages", "true");

Теперь мы инициализируем сессию:

spawnedSession = engine.SpawnSession(sessionSettings, signature);

В вебе для захвата изображений с камеры необходимо сначала отрисовать видеопоток на canvas и после этого мы получаем доступ к пикселям, которые передаем в специальный объект Image.

let image = new SE.seImageFromBuffer(rawData, width, height, stride, channels);

Теперь мы можем передать его на распознавание.

const result = spawnedSession.Process(image);

Объект result содержит в себе всю информацию о документе: текстовые поля, координаты шаблона и полей документа, изображения (подписи, печати, изображение документа).

Мы рекомендуем не закрывать сессию после первого распознавания, а продолжать подавать в нее изображения, то есть рекомендуем использовать распознавание документа в видеопотоке. У этого подхода есть большое преимущество в виде устойчивости к бликам ламинированных документов и другим артефактам распознавания, поскольку их результаты комбинируются.

Если система больше не ожидает получить более качественное изображение на вход, она переводит флаг терминальности сессии в true и вы можете забрать результат.

if (result.GetIsTerminal()) {
  // Можно забирать результат
}

Распознавание на клиенте не ограничивается только камерой. Документ может быть прикреплен из галереи или быть упакован в многостраничный PDF. Все эти форматы можно отрисовать на canvas и передать на распознавание.

Как это выглядит?

По итогам распознавания система возвращает структурированный результат.

Состав результатов распознавания полностью настраивается под требования заказчика. Платформа может получать как отдельные поля документа – например, только дату рождения, – так и готовый возрастной атрибут или токен вида «18+». Тако подход позволяет гибко регулировать степень раскрытия персональных данных: от передачи минимально необходимой информации до полностью анонимного сценария, в котором сервис получает лишь подтверждение соответствия возрастному порогу без каких-либо сведений о личности пользователя.

Как видите, встроить в веб-страницу распознавание паспорта для проверки возраста действительно можно за считанные минуты. Без отдельного мобильного приложения, без биометрии, ЕБС и отправки документов в облако. Работать такой механизм будет даже на парковке без доступа к сети.

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