Защитите свои веб-приложения с помощью аутентификации по лицу
В течение последних трех десятилетий веб-технологии оставались актуальными благодаря своей универсальности и широкому спектру применения в строительных решениях. В Интернете работает практически все: от простых сайтов блогов до сложных и масштабируемых веб-систем ERP в B2B, играх и финансовых технологиях, а также в других отраслях.
Чтобы персонализировать работу пользователей в веб-приложениях, нам необходимо их аутентифицировать. За прошедшие годы аутентификация пользователей превратилась из 4-значных личных идентификационных номеров (ПИН-кодов) в многофакторную аутентификацию. Последний требует от пользователей предоставления дополнительных данных, таких как OTP-коды, которые обычно отправляются на номер мобильного телефона или электронную почту, в дополнение к имени пользователя и паролю.
Однако этих методов аутентификации недостаточно для противодействия популярным веб-атакам, таким как грубая сила, перехват учетных данных, атаки по словарю или даже фишинг. Для этого требуются расширенные инструменты аутентификации, такие как биометрия. С помощью биометрической аутентификации организации и пользователи могут исключить мошенничество с выдачей себя за другое лицо, предотвратить несанкционированный доступ, а также предотвратить кражу личных данных без необходимости запоминать пароли и другие задачи безопасности. В этой статье мы покажем, как аутентифицировать пользователей в веб-приложениях с помощью инструмента распознавания лиц, известного как Faceio.
Аутентификация пользователей в веб-приложениях с помощью распознавания лиц
Как правило, внедрение этой технологии будет дорогостоящим с точки зрения необходимых аппаратных компонентов и обучения собственных моделей искусственного интеллекта для идентификации пользователей по распознаванию лиц.
Однако PixLab разработала инструмент, известный как Faceio, который позволяет разработчикам аутентифицировать пользователей в веб-приложениях через простой REST API. С помощью Faceio вы можете просто реализовать аутентификацию без пароля с помощью нескольких строк кода.
Faceio API
FACEIO API предоставляет простой и элегантный виджет, который обеспечивает безопасную аутентификацию по лицу для ваших пользователей посредством простых вызовов методов Register() и Authenticate(). Эта утилита основана на библиотеке JavaScript fio.js, которая достаточно проста для интеграции за считанные минуты и достаточно гибка для поддержки индивидуальных конфигураций. После развертывания на вашем веб-сайте или в веб-приложении вы сможете с максимальным удобством аутентифицировать существующих пользователей и безопасно регистрировать новых пользователей в своем любимом браузере.
Шаг 1. Импортируйте файл fio.js.
Чтобы запустить fio.js, вам необходимо загрузить его из сети доставки контента Faceio. Вставьте следующий фрагмент кода в
Тег на вашей html-странице.
<div id="faceio-modal"></div>
<script src="https://cdn.faceio.net/fio.js"></script>Этот код будет асинхронно загружать fio.js, не влияя на скорость загрузки страницы.
Шаг 2. Создайте экземпляр нового объекта faceio.
Создайте экземпляр нового объекта faceio() и передайте Public ID вашего приложения следующим образом. Вы также можете вставить этот фрагмент чуть ниже кода импорта, показанного на шаге 1.
<script type="text/javascript">
/* Instantiate fio.js with your application Public ID */
const faceio = new faceIO("app-public-id");
</script>Получите Public ID вашего приложения. Он находится в Диспетчере приложений на консоли FACEIO.
Шаг 3: Вызов виджета
Чтобы начать процесс распознавания лиц, просто вызовите Register() или Authentication() — единственные два метода, экспортированные из класса faceIO(), экземпляр которого вы создали. Register() используется для регистрации новых пользователей (регистрация), а authenticate() используется для аутентификации ранее зарегистрированных пользователей.
Типичная реализация этого должна выглядеть так, как показано в фрагменте кода ниже:
<html>
<head>
<title>Sign-In or Enroll via Face Recognition</title>
</head>
<body>
<button onclick="enrollNewUser()">Enroll New User</button>
<button onclick="authenticateUser()">Authenticate User</button>
<div id="faceio-modal"></div>
<script src="https://cdn.faceio.net/fio.js"></script>
<script type="text/javascript">
// Instantiate fio.js with your application's Public ID
const faceio = new faceIO("app-public-id");
function enrollNewUser(){
// call to faceio.enroll() here will automatically trigger the on-boarding process
}
function authenticateUser(){
// call to faceio.authenticate() here will automatically trigger the facial authentication process
}
function handleError(errCode){
// Handle error here
}
</script>
</body>
</html>Метод регистрации
Метод Register() позволяет регистрировать новые пользовательские транзакции в вашем приложении. Лучший процесс называется интеграцией. Это эквивалентная реализация стандартной функции регистрации/регистрации в традиционной системе аутентификации, управляемой паролем. Эффективный вызов Register() запускает утилиту FACEIO, запрашивает у пользователя согласие (если оно еще не предоставлено), запрашивает доступ (если еще не предоставлен) к потоку веб-камеры/фронтальной камеры браузера и, наконец, извлекает и индексирует зарегистрированные черты лица пользователя для будущих целей аутентификации.
Метод принимает некоторые дополнительные параметры, такие как языковой стандарт для интерактивного языка, permissionTimeout — это количество секунд ожидания предоставления пользователем доступа к камере, но, что более важно, метод Register() принимает полезную нагрузку, которая представляет собой просто кортеж произвольных данные, которые вы можете связать с этим конкретным пользователем, такие как адрес электронной почты, имя, идентификатор и т. д. Эти полезные данные будут возвращены вам после успешной аутентификации этого конкретного пользователя в будущем.
Применение
Типичный вызов метода enroll должен выглядеть так:
// Instantiate a new faceIO object with your application's Public ID
const faceio = new faceIO("app-public-id");
function enrollNewUser(){
faceio.enroll({
"locale": "auto", // Default user locale
"payload": {
/* The payload we want to associate with this particular user which is forwarded back to us upon future authentication of this user.*/
"whoami": 123456, // Dummy ID linked to this particular user
"email": "john.doe@example.com"
}
}).then(userInfo => {
// User Successfully Enrolled!
alert(
`User Successfully Enrolled! Details:
Unique Facial ID: ${userInfo.facialId}
Enrollment Date: ${userInfo.timestamp}
Gender: ${userInfo.details.gender}
Age Approximation: ${userInfo.details.age}`
);
console.log(userInfo);
// handle success, save the facial ID (userInfo.facialId), redirect to the dashboard...
}).catch(errCode => {
// Something went wrong during enrollment, log the failure
handleError(errCode);
})
}Метод аутентификации
Метод authenticate() позволяет вам проверять существующих зарегистрированных пользователей в вашем приложении. Это эквивалентная реализация стандартной функции входа/входа в традиционную систему аутентификации, управляемую паролем. Эффективный вызов authenticate() запустит утилиту FACEIO, запросит доступ (если он еще не предоставлен) к потоку веб-камеры/передней камеры браузера и, наконец, инициирует процесс распознавания лиц. authenticate() требует для запуска только одного изображения, в среднем занимает менее 100 миллисекунд и чрезвычайно эффективна с точки зрения пропускной способности, что делает ее подходящей для использования в медленных сетях. В зависимости от конфигурации безопасности вашего приложения после того, как базовый механизм распознавания лиц успешно идентифицировал целевого пользователя, он должен подтвердить свой ПИН-код (свободно выбранный в процессе входа). знак) для успешной проверки validation() и, таким образом, обещание будет выполнено.
promise = faceio.authenticate({parameters})
promise
.then(userData => {
/* User successfully authenticated/identified */
})
.catch(errCode => {
/* handle the error */
})Применение
Ниже приведена простая реализация аутентификации зарегистрированных пользователей в Faceio с использованием распознавания лиц.
const faceio = new faceIO("app-public-id"); // Initialize with your application's Public ID
function authenticateUser(){
faceio.authenticate({
"locale": "auto" // Default user locale
}).then(userData => {
console.log("Success, user identified")
// Grab the facial ID linked to this particular user which will be same
// for each of his successful future authentication. FACEIO recommend
// that your rely on this Facial ID if you plan to uniquely identify
// all enrolled users on your backend for example.
console.log("Linked facial Id: " + userData.facialId)
// Grab the arbitrary data you have already linked (if any) to this particular user
// during his enrollment via the payload parameter of the enroll() method.
console.log("Payload: " + JSON.stringify(userData.payload)) // {"whoami": 123456, "email": "john.doe@example.com"} from the enroll() example above
}).catch(errCode => {
handleError(errCode)
})
}Authentication() возвращает Promise, обработчик реализации которого получает объект userData, когда пользователь успешно идентифицирован. Наиболее важные из них включают в себя полезную нагрузку, которая представляет собой произвольные данные, которые вы привязали (если таковые имеются) к этому конкретному пользователю, когда он зарегистрировался с помощью параметра полезной нагрузки, который принимает метод Register(), и идентификатор лица, который представляет собой уникальный идентификатор, присвоенный общему идентификатору. этого конкретного пользователя при регистрации.
Этот идентификатор лица вместе с полезными данными может выступать в качестве ключа поиска на вашем сервере для получения данных, относящихся к этому конкретному пользователю, например, при каждой успешной аутентификации. Подробности объекта userInfo описаны в разделе «Возвращаемые значения» ниже. Если пользователь отклоняет пример разрешения камеры, обещание будет отклонено с соответствующим кодом ошибки, например fioErrCode.PERMISSION_REFUSED или fioErrCode.TERMS_NOT_ACCEPTED. Полный список всех возможных кодов ошибок см. в разделе «Коды ошибок».
Подводя итог, Faceio представляет собой значительный шаг вперед в области безопасности веб-приложений. Этот инструмент распознавания лиц от PixLab упрощает аутентификацию пользователей благодаря своему бесшовному REST API, устраняя необходимость в дорогостоящем оборудовании и обучении моделей искусственного интеллекта. Всего с помощью нескольких строк кода разработчики могут реализовать аутентификацию без пароля, повышая как безопасность, так и удобство использования. Биометрическая аутентификация Faceio дает организациям и пользователям возможность бороться с мошенничеством с выдачей себя за другое лицо, несанкционированным доступом и кражей личных данных без необходимости управления паролями. Упрощая регистрацию новых пользователей и проверку существующих, Faceio устанавливает новый стандарт безопасности веб-приложений, предлагая надежную защиту от развивающихся киберугроз с помощью удобного для пользователя подхода.
