Использование лица для авторизации для разблокировки телефона скоро станет популярным, но в Интернете это не так часто встречается, возможно, потому, что это нетривиально реализовать. Можно ли реализовать проверку лица, используя только HTML5, Javascript и немного Go? Да! Я сделал это за час, используя Facebox, и выпустил код как проект с открытым исходным кодом под названием Web Face ID.

Какие преимущества дает использование проверки лица на веб-сайте?

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

Как реализовать это с помощью стандартов

В качестве общего подхода мы собираемся захватить веб-камеру пользователя с элементами HTML5, а с помощью Javascript мы собираемся отправить фотографию на серверную сторону.

Как только фотография окажется на сервере, мы воспользуемся Go для декодирования фотографии и проверки ее с помощью Facebox, чтобы иметь возможность отправить ответ.

Давайте разберемся по шагам.

Предпосылки

Вам необходимо запустить Facebox, для этого вам просто нужно зарегистрировать учетную запись, чтобы запустить Facebox в качестве контейнера Docker на вашем компьютере. Также убедитесь, что вы обучаете Facebox людям, которых хотите узнать, для начала нужен только один выстрел, но с несколькими примерами он может стать более точным.

Захватите веб-камеру с помощью HTML5 и Javascript

Для веб-сайта мы можем использовать элемент HTML5 video и canvas:

<div class='options'>
   <button id="snap">
   <i class='camera icon'></i>
</button>
<video id="video" width="100%" autoplay></video>
<canvas id="canvas" width="400" height="225" style="display:none;"></canvas>

Мы собираемся использовать элемент видео для захвата веб-камеры и использовать холст, чтобы сделать снимок и отправить его на сервер. Вот Javascript:

var video = document.getElementById('video');
if (navigator.mediaDevices && 
          navigator.mediaDevices.getUserMedia){
  navigator.mediaDevices.getUserMedia({video: true}).then(
      function (stream) {
         video.src = window.URL.createObjectURL(stream);
         video.play();
  });
}
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
var button = $('#snap')
button.click(function(){
   button.addClass('loading')
   context.drawImage(video, 0, 0, 400, 225);
   var dataURL = canvas.toDataURL();
   $.ajax({
       type: "POST",
       url: "/webFaceID",
       data: {
         imgBase64: dataURL
       },
       success: { // ommited }
   })
})

Приведенный выше код в основном говорит: при нажатии кнопки захватите веб-камеру на холст и отправьте фотографию на конечную точку /webFaceID. Фотография будет в формате PNG в кодировке base64.

Обработка проверки лица на стороне сервера с помощью Go

Теперь, когда у нас есть изображение с вашим лицом на стороне сервера, нам нужно только декодировать изображение, отправить его в Facebox с SDK для выполнения тяжелой работы и вернуть результат в интерфейс.

Здесь мы можем написать Go http.Handler для выполнения этой работы:

func (s *Server) handlewebFaceID(w http.ResponseWriter, r *http.Request) {
 img := r.FormValue("imgBase64")
 // remove the Data URI before decode
 b64data := img[strings.IndexByte(img, ',')+1:]
 imgDec, err := base64.StdEncoding.DecodeString(b64data)
 if err != nil {
    // omitted error handling 
 }
 // validate the face on facebox
 faces, err := s.facebox.Check(bytes.NewReader(imgDec))
 if err != nil {
   // omitted error handling
 }
 var response struct {
    FaceLen int    `json:"faces_len"`
    Matched bool   `json:"matched"`
    Name    string `json:"name"`
 }
 response.FaceLen = len(faces)
 if len(faces) == 1 {
    response.Matched = faces[0].Matched
    response.Name = faces[0].Name
 }
 w.Header().Set("Content-Type", "application/json")
 if err := json.NewEncoder(w).Encode(response); err != nil {
    http.Error(w, err.Error(), http.StatusInternalServerError)
    return
 }
}

В нескольких строках кода у нас работает проверка лица на любом веб-сайте.

А что насчет безопасности?

Что ж, любой тип биометрических данных (например, ваше лицо, радужная оболочка глаза или отпечаток пальца) следует использовать только как «имя пользователя», а не как «пароль». Поэтому, если вы реализуете это для своего веб-сайта, он будет идеальным в качестве второго фактора при аутентификации или для определенных задач с низким уровнем риска, но он не заменяет пароль.

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

Главный совет: Facebox оптимизирован для распознавания людей на любой фотографии в любых сценариях, но конечная точка /check имеет необязательный параметр tolerance, который вы можете настроить. Если ваши условия проверки лица не меняются (например, то же положение, та же камера и такое же окружающее освещение), вы можете уменьшить допуск, сделав систему более строгой при проверке.

Если вы хотите просмотреть весь код, пожалуйста, проверьте Web Face ID на github. Это открытый исходный код.

Попробуй бесплатно

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