Распознавание лиц стало проще: как внедрить FaceIO за 5 минут

Нужна ли нам вообще аутентификация пользователя?

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

Другой метод аутентификации — через OAuth или с использованием стороннего поставщика аутентификации, такого как Google. Однако в этой статье я познакомлю вас с передовой технологией аутентификации под названием FaceIO аутентификация с распознаванием лиц. Этот инновационный подход — отличный способ входа пользователей в ваши системы, и я покажу, как интегрировать эту технологию в приложение React посредством разработки простого приложения.

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

Почему распознавание лиц?

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

Еще одна веская причина рассмотреть возможность распознавания лиц заключается в том, насколько просто включить эту технологию в ваше приложение. Чтобы проиллюстрировать это, мы создадим приложение React, использующее FaceIOтехнологию распознавания лиц, которая теперь возможна благодаря fio. js. Эта библиотека берет на себя всю сложную работу за нас, упрощая использование распознавания лиц.

Третья причина рассмотреть возможность аутентификации по распознаванию лиц — это удобство для пользователя. При использовании этого метода пользователям не нужно запоминать пароли или любые другие сложные учетные данные для входа. В случае FaceIO можно добавить двухуровневую защиту пользователя с помощью PIN-кода. Все, что требуется от пользователя, — разрешить камере сканировать его лицо, и процесс аутентификации завершен. Эта простота и легкость использования являются важными факторами в улучшении общего пользовательского опыта.

Безопасность пользователя с аутентификацией по распознаванию лиц

Для пользователя безопасность данных имеет первостепенное значение, и каким бы отличным ни было приложение, если данные не защищены, пользователям может быть неудобно их использовать. Однако распознавание лиц — чрезвычайно безопасный способ аутентификации пользователей. Почему это? Причин несколько:

Во-первых, FaceIOсоблюдает применимые законы о конфиденциальности, такие как GDPR, CCPA и другие стандарты конфиденциальности. Эти законы могут налагать на предприятия значительные финансовые санкции, которые могут составлять до 4% от их годового дохода, за нарушение прав пользователей на неприкосновенность частной жизни. Более того, FaceIO очень серьезно относится к конфиденциальности и безопасности данных и не хранит изображения пользователей. Вместо этого он хранит только хешированный ключ изображения, гарантируя, что фотографии останутся безопасными и конфиденциальными.

Во-вторых, FaceIO славится своей высокой точностью. Точность движка FaceIO составляет невероятные 99,8%, что действительно является исключительным. Как человек, имеющий опыт работы в области искусственного интеллекта, я могу подтвердить, что достижение такого высокого уровня точности чрезвычайно сложно и требует огромного количества данных, которые могут быть очень дорогостоящими.

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

Создание системы входа с помощью FaceIO

Давайте погрузимся прямо в реализацию приложения, так как действия говорят громче, чем слова.

Приложение, которое мы будем создавать, простое. Он состоит из трех кнопок: одной для регистрации, одной для войти и третья кнопка, чтобы выйти. Приложение работает по простому принципу: вы сначала регистрируетесь, а затем входите в систему. В этот момент появится кнопка выхода, которая ранее была скрыта, а остальные кнопки исчезнут. Готовая версия приложения, которое мы собираемся создать, доступна для просмотра по следующей ссылке: https://housseinbadra.github.io/FaceIodemo.github.io/.

Теперь, чтобы начать, вам нужно создать собственную учетную запись FaceIO. Регистрация учетной записи проста, если у вас ее еще нет. Если у вас есть учетная запись, войдите в систему и будьте готовы продолжить. Чтобы зарегистрироваться в FaceIO, нажмите здесь: https://console.faceio.net/.

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

Когда ваша учетная запись настроена, пришло время начать кодирование. Как я упоминал ранее, это приложение будет создано для мобильного телефона. Все, что вам нужно, это три файла: index.html, index.css и index.js. Вы можете загрузить любой редактор кода или даже использовать CodePen, если хотите. Я выбрал редактор SPCK, который является отличным инструментом. Создайте папку, а затем создайте эти три файла.

Ваша файловая структура должна выглядеть так:

Добавление этих стилей завершит вашу работу с CSS, так что давайте начнем.

body{
  width:100vw;
  height:100vh;
  box-sizing:border-box;
  font-size:10vh !important;
}
.app{
  width:100%;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

Чтобы начать интегрировать технологию распознавания лиц в ваше приложение, вам необходимо выполнить несколько шагов. Во-первых, вам нужно добавить React, React Dom и CDN Babel в заголовок вашего HTML. страница. Затем добавьте на свою страницу CDN Bootstrapтолько для CSS и свяжите его с файлом CSS.

Затем создайте два элемента div с идентификаторами «root» и «Faceio-modal». Вы можете добавить эти div в любом месте на вашей HTML-странице. Раздел «root» будет содержать ваше приложение React, а раздел «Faceio-modal» будет использоваться. для отображения модального окна распознавания лиц.

Чтобы связать свой файл JavaScript, добавьте тег script с типом «text/babel» в конец вашего тела. Обязательно свяжите этот тег скрипта с вашим файлом index.js.

Наконец добавьте CDN fio.js в конец вашего тела. Это позволит вам использовать технологию распознавания лиц FaceIO в вашем приложении. Выполнив эти шаги, вы готовы начать использовать распознавание лиц в своем приложении.

Ваш HTML-файл должен выглядеть так:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>FaceIO demo</title>
  <script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href='./index.css'>
  
</head>

<body>
<div id='root'></div>
<div id="faceio-modal"></div> 
<script src="https://cdn.faceio.net/fio.js"></script>
<script src="index.js" type='text/babel'></script>
</body>

</html>

Переходя к файлу JavaScript, мы можем получить доступ к React, React Dom и FaceIO в качестве глобальных переменных, так как мы использовали CDN. Однако одним из недостатков этого подхода является то, что мы не можем использовать операторы импорта. Чтобы обойти это ограничение, мы устанавливаем тип индексного файла text/babel. Это необходимо для того, чтобы редактор кода правильно распознавал синтаксис JSX и избегал ошибок. В более сложных проектах рекомендуется использовать сборщик, например Webpack или Parcel, для эффективного управления зависимостями и импортом.

const {createRoot , render} = ReactDOM
const {useEffect,useState}=React

const [user,setuser]=React.useState('')
 const io=new faceIO('your public key')

function logout(){
    setuser('')
    window.location='./'
  }
  function register(){
    io.enroll({ "locale": "auto", 
    "payload": { UID: Date.now() } }
    ).then(userInfo => {
    alert( `User Successfully Enrolled!
    Details: Unique Facial ID: ${userInfo.facialId}
    Enrollment Date: ${userInfo.timestamp}
    Gender: ${userInfo.details.gender}
    Age Approximation: ${userInfo.details.age}` );
   ;}).catch(errCode => {
   console.log(errCode) })
  }

  function login(){
    io.authenticate({ "locale": "auto" })
    .then(userData => { console.log("Success, user identified") 
                        console.log("Linked facial Id: " + userData.facialId)
                        setuser(userData.payload.UID) })
    .catch(errCode => { console.log(errCode) })

  return(
    <div className='app'>
    {!user? <div>
<button type="button" className="btn btn-outline-primary m-5" onClick={register} >Register</button>
<button type="button" onClick={login} className="btn btn-outline-info m-5">Login</button></div> : 
<button type="button" onClick={logout} className="btn btn-outline-primary">Logout</button>}
</div>)

const root = createRoot( document.getElementById('root')); 
root.render(<App/>);