Самая важная часть работы разработчика — это постоянное обучение. Важно быть в курсе последних технологий. В последнее время искусственный интеллект (AI) стремительно развивается, и ему суждено произвести революцию.
Одной из последних разработок в этой области является FaceAuth. В настоящее время стало намного проще бросить один взгляд на телефон и открыть его за считанные миллисекунды. Сегодня мы узнаем, как реализовать это в webapp.
Мы будем использовать API, предоставляемый FaceIO, чтобы реализовать FaceAuth в нашем webapp!
Почему FaceIO?
После долгих исследований я решил выбрать FaceIO. Он предоставляет простой API и может быть интегрирован в течение нескольких минут. Он предоставляет библиотеку fio.js, которая использует простые вызовы и методы для быстрой настройки аутентификации для вашей платформы. Самое лучшее — это то, что она дает исключительно высокие результаты без необходимости использования превосходных камер или датчиков. Кроме того, вы можете легко интегрировать свой webapp с любым фреймворком или технологией, с которой вы любите работать. (например, React, Vue, Python и другие).
Давайте рассмотрим несколько причин, почему мне понравился FaceIO:
- Легкость доступа: FaceAuth дает вам легкий доступ к вашим любимым приложениям. Я ненавижу заходить в менеджер паролей и искать пароль каждый раз, когда я его не помню. Зачем обращаться к менеджеру паролей, если я могу пройти аутентификацию, просто взглянув на экран.
- Пользовательский опыт: Как разработчик, наша главная задача — облегчить жизнь всему миру. С FaceAuth новый пользователь может практически зарегистрироваться в течение нескольких секунд, а также избавиться от необходимости запоминать пароли.
- Низкая стоимость : Разблокировка по лицу стала обычной функцией в мобильных устройствах, но они оснащены превосходными камерами и датчиками. С помощью искусственного интеллекта не требуется суперсовременная технология для реализации этой функции в таких устройствах, как ноутбуки или веб-камеры низкого класса.
- Легкая библиотека: добавить эти функции очень просто. Например, мы можем настроить FaceAuth с помощью fioJs (библиотека FaceIO) и поддерживать его в рабочем состоянии с помощью нескольких строк кода.
Учебник
Сегодня мы будем использовать Vanilla HTML и JS для реализации FaceAuth, создав очень простой webapp.
Во-первых, вам нужно создать свой публичный ключ API FaceIO.
Шаги для создания API-ключа
- Во-первых, зайдите в консоль.
- Создайте новое приложение FaceIO.
- Следуйте указаниям мастера создания приложения FaceIO. Мастер создания приложения автоматизирует и упростит процесс до нескольких кликов. Вам нужно будет выбрать название приложения, выбрать механизм распознавания лиц, регион облачного хранилища из предложенных вариантов, просмотреть параметры безопасности, настроить макет виджета и многое другое. Теперь вам нужно сохранить свой открытый ключ API.
Интеграция библиотеки
Мы будем следовать руководству по интеграции, предоставленному FaceIO. Вы можете найти его здесь.
Поскольку я использую VS Code в качестве IDE, я буду использовать расширение Live Server для локального размещения моего сайта.
Для запуска нашего проекта мы будем использовать приведенный ниже шаблон.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
Сейчас мы создадим простой пользовательский интерфейс. Мы будем использовать шаблон с одним заголовком и двумя кнопками для настройки этого базового проекта. Первая кнопка будет использоваться для регистрации нового пользователя, а вторая — для аутентификации. Мы также добавим несколько CSS для центрирования содержимого и придания ему единообразного вида на всей веб-странице.
CSS
<style>
.container {
text-align: center;
}
button {
padding: 10px 20px;
font-size: 18px;
}
</style>
HTML
<div class="container">
<h1>FaceAuth WebApp</h1>
<br />
<button title="Register a new user on the FaceIO Application">
Register User
</button>
<button
title="Authenticates a user already registered on the running FaceIO applicaiton"
>
Authenticate User
</button>
</div>
Теперь нам нужно импортировать библиотеку fio.js, предоставленную FaceIO. Это мощный движок, который позволяет нам реализовать FaceAuth за считанные минуты. Подробнее о создании объекта fio вы можете узнать здесь.
<div id="faceio-modal"></div>
<script src="https://cdn.faceio.net/fio.js"></script>
Теперь все готово, по крайней мере, визуально. Теперь, чтобы сделать кнопки реально работающими и реализовать регистрацию и аутентификацию, мы должны сначала создать объект FaceIO.
<script type="text/javascript">
const faceio = new faceIO("app-public-id"); // enter your public id
</script>
Теперь мы создадим две функции и свяжем их с кнопками.
Первой функцией будет функция register, эта функция будет реализована для регистрации новых пользователей. Для этого мы будем использовать метод enroll, предоставляемый fio.
function registerUser() {
faceio
.enroll({
locale: "auto", // Default user locale
userConsent: true, // True if user consent collected
payload: {
id: 13795, // dummy id used for demo
email: "example@example.com", // dummy email for demo
},
})
.then((userInfo) => {
// User Successfully Enrolled!
console.log(userInfo);
})
.catch((errCode) => {
console.log(errCode);
});
}
Мы можем передавать множество параметров в наших параметрах. Подробнее о параметрах здесь.
- Полезная нагрузка: Это основная информация, которую вы хотите передать. Сюда входит такая информация, как email, id, имя и т.д.
- locale : Это определяет язык для всплывающего окна регистрации/входа в систему. По умолчанию он имеет значение
auto, которое определяет язык за вас. Но вы можете присвоить значение самостоятельно, если вам это необходимо. - Согласие пользователя FaceIO обеспечивает соблюдение пользователями своих политик. Поэтому вы можете разрешить принять их условия и услуги при регистрации в fio, если это не указано явно на вашем сайте.
- enrollIntroTimeout : Время в секундах, в течение которого пользователь должен зарегистрироваться или записаться.
Теперь нам нужно связать эту функцию с кнопкой регистрации.
onclick="registerUser()"
Второй функцией будет функция authenticate, эта функция будет реализована для аутентификации существующих пользователей. Для этого мы будем использовать метод authenticate, предоставляемый библиотекой fio.
function authenticateUser() {
faceio
.authenticate({
locale: "auto", // Default user locale
})
.then((userData) => {
console.log("Success, user recognized");
// faceio generates unique faceid for each user
console.log("Linked facial Id: " + userData.facialId);
console.log(
"Associated Payload: " + JSON.stringify(userData.payload)
);
})
.catch((errCode) => {
console.log(errCode);
});
}
Теперь нам нужно связать эту функцию с кнопкой аутентификации.
onclick="authenticateUser()"
И мы закончили создание нашего первого веб-приложения FaceAuth с помощью библиотеки fiojs от FaceIO. Не стесняйтесь ознакомиться с HTML-шаблоном, предоставленным FaceIO, чтобы начать свою интеграцию.
Некоторые ссылки для начала работы
Если вы хотите и дальше строить и создавать что-то интересное из проекта, который мы сделали, вы можете ознакомиться с приведенными ниже ссылками!
Учебник по началу работы: Изучите основы. Ваши первые шаги с FACEIO.
Руководство по интеграции: Узнайте, как внедрить fio.js, библиотеку распознавания лиц на вашем сайте, прежде чем внедрять аутентификацию по лицу для вашей аудитории.
Центр разработчика: Содержит примеры кода, документацию, каналы поддержки и все ресурсы, необходимые для внедрения FACEIO на вашем сайте.
Часто задаваемые вопросы: Получите ответы на все общие вопросы в начале работы.
Центр доверия: Узнайте, как FaceIO обрабатывает ваши данные безопасно и в соответствии с требованиями конфиденциальности и законодательства.
Реализация аутентификации по лицу в вашем приложении на Vue.js: Узнайте, как реализовать faceIO с помощью такого фреймворка, как VueJS.
Заключение
Мы успешно реализовали FaceAuth на нашем простом веб-приложении. Поскольку потребители отдают предпочтение удобству и безопасности, для нас, разработчиков, очень важно быть в курсе потребностей потребителей и технологических достижений. Поскольку искусственный интеллект делает большой скачок, прыжок вместе с ним — лучший вариант. Если у вас возникли вопросы или вы почерпнули что-то интересное из сегодняшней дискуссии, вы можете связаться со мной в twitter. В следующей части мы продолжим работу над нашим веб-приложением и изучим дополнительные возможности.