Продолжаем рассказывать об альтернативном способе подтверждения возраста на веб-ресурсах без использования биометрии, интеграции с ЕБС и раскрытия персональных данных. О том, как это можно сделать, мы подробно писали в прошлой статье. Теперь разберемся, как реализовать подобный сценарий с помощью 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+». Тако подход позволяет гибко регулировать степень раскрытия персональных данных: от передачи минимально необходимой информации до полностью анонимного сценария, в котором сервис получает лишь подтверждение соответствия возрастному порогу без каких-либо сведений о личности пользователя.
Как видите, встроить в веб-страницу распознавание паспорта для проверки возраста действительно можно за считанные минуты. Без отдельного мобильного приложения, без биометрии, ЕБС и отправки документов в облако. Работать такой механизм будет даже на парковке без доступа к сети.
Парадоксально, но факт: интернет остается обязательным атрибутом онлайн-платформы, но перестает быть необходимым для проверки возраста.
