Implemente uma Autenticação por Reconhecimento Facial com React.js e TailwindCSS:Proteja seus aplicativos com autorização facial

A autenticação é a parte mais crítica de um site. Se não for tratada corretamente, pode levar a circunstâncias inimagináveis. Com os avanços tecnológicos recentes, muitos stacks de tecnologia e frameworks diferentes foram criados para construir a aplicação web mais eficiente possível. No entanto, os desenvolvedores focam muito pouco em melhorar o sistema de autenticação e construir algo novo e inovador no domínio da autenticação web.
Com o avanço das técnicas de inteligência artificial e aprendizado de máquina, o reconhecimento facial tornou-se fácil de implementar e muito confiável. A maioria dos smartphones hoje em dia vem com técnicas de reconhecimento facial óptico para desbloquear o telefone. Mas no campo do desenvolvimento web, não vemos a adoção do reconhecimento facial como um meio de autenticação de um usuário.
Neste artigo, estou discutindo os problemas dos nossos sistemas de autenticação tradicionais, como resolver esse problema usando reconhecimento facial, e um guia detalhado passo a passo para implementar o mesmo usando reactjs e TailwindCSS.

Problema com os sistemas de autenticação atuais

Atualmente, a autenticação baseada em email e senha é a mais popular na web. No entanto, a principal desvantagem desse sistema é a necessidade de memorizar senhas únicas para cada site em que você se inscreveu. Se você esquecer sua senha, precisará do seu endereço de email para redefini-la. Se você perder o controle do seu email, é quase impossível recuperar sua conta.
Para resolver todos esses problemas, o OAuth entra em cena. O OAuth é um protocolo para se inscrever em um site usando um provedor de OAuth. Você pode ver a opção de login usando Google, Facebook, GitHub, etc., em vários sites. Isso é um exemplo de OAuth. Nesse sistema, como usuário, você só precisa manter uma conta e dar permissão para usar as informações em outros sites. Como desenvolvedor, você precisa confiar no provedor de OAuth para fornecer as informações corretas.
Hoje em dia, o login sem senha ou autenticação por link mágico é muito popular. Nesse sistema, você precisa inserir seu endereço de email no site. Em seguida, você recebe um email contendo um link para login. Se você acessar esse link, estará autenticado e logado no respectivo site. Este é um sistema muito fácil de login e você não precisa memorizar senhas.
Em todos os exemplos acima, você pode encontrar um padrão comum. Todos esses processos de autenticação precisam do seu email. O email é tão crucial em todos os sistemas acima que, se você de alguma forma perder o controle sobre ele, não poderá manter o controle sobre todas as suas contas. Este é um problema importante nos sistemas de autenticação. Mas, como os problemas têm uma solução, este problema também tem algumas soluções. Vamos discutir isso na próxima seção.

Como a autenticação facial resolve o problema

Para remover o email da pilha de autenticação, temos algumas opções, como autenticação por impressão digital e reconhecimento facial.
O problema com a autenticação por impressão digital é que ela requer hardware especializado para funcionar. Leitores de impressões digitais não vêm por padrão na maioria do hardware de computador. Como não existe uma API padronizada nativa na web para interagir com leitores de impressões digitais, a autenticação por impressão digital não é viável no futuro próximo.
Devido ao rápido progresso em inteligência artificial e aprendizado de máquina, o reconhecimento facial não é muito difícil. A presença de bibliotecas de aprendizado de máquina de código aberto torna mais fácil para os desenvolvedores desenvolver rapidamente uma função de IA para suas aplicações web.
No entanto, isso requer alguma experiência prévia com aprendizado de máquina. Se você não tem essa experiência, pode usar ofertas SaaS de aprendizado de máquina, como o faceIO, para criar facilmente um sistema de autenticação por reconhecimento facial para seu site.
Neste tutorial, estamos usando a biblioteca FaceIO para demonstrar a autenticação facial em nossa aplicação web. Crie uma conta gratuita no FaceIO para seguir o tutorial.

Criando um projeto em Reactjs com Tailwind CSS

Estamos usando o Vite para criar o projeto ReactJs neste tutorial. Abra seu terminal e execute o seguinte comando para criar a estrutura do seu projeto React usando Vite.

npm create vite@latest my-project - - template react

Agora siga as instruções do terminal para criar a estrutura do seu projeto. Após concluir essa etapa, abra o projeto no seu editor de código favorito. A estrutura do projeto deve se parecer com isso.

.
├── index.html
├── package.json
├── package-lock.json
├── public
│ └── vite.svg
├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ └── main.jsx
└── vite.config.js

Agora, para instalar o Tailwind CSS no seu projeto Vite, siga estes passos cuidadosamente.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Agora abra o arquivo tailwind.config.cjse adicione o caminho-fonte do seu projeto.

Dentro do arquivo src/App.css, adicione as diretivas do Tailwind CSS.

Agora você instalou com sucesso o Tailwind CSS no seu projeto React com Vite. Vamos nos concentrar em como integrar a autenticação facial em nosso projeto na próxima seção.
Adicionando autenticação FaceIO em uma aplicação React
O grande benefício do FaceIO é que ele fornece uma biblioteca Javascript muito fácil de usar. Esta biblioteca vem com duas funções principais: enroll e authenticate. Mas antes de discutir essas funções, vamos vincular a biblioteca FaceIO à aplicação React.

Abra o arquivo index.html em seu projeto e adicione o CDN do FaceIO ao seu projeto.

Depois de vincular com sucesso o CDN do FaceIO, abra o arquivo App.jsx e delete todo o código padrão dentro do componente App. Para iniciar nossa biblioteca FaceIO, adicione o hook React useEffect. O código dentro deste hook será executado apenas uma vez quando o componente for iniciado.

Você pode ver que estamos usando um ID como argumento ao instanciar o objeto faceIO. Quando você se inscreve em uma conta no faceIO, pode acessar esses IDs dentro do console do faceIO.

Agora que toda a configuração foi concluída, vamos nos concentrar na autenticação do usuário usando o FaceIO.

Registrar Novos Usuários Usando FaceIO

O FaceIO fornece uma interface muito simples para registrar novos usuários. Usamos a função enroll para registrar um novo usuário. Como o FaceIO precisa da permissão da sua webcam, aceite o diálogo de permissão quando for solicitado.
A função enroll tem 2 aliases. Você pode usar as funções register e record como substituições para enroll.
Quando você executa essa função no seu navegador, ela inicia os widgets do faceIO. Primeiro, obtém o consentimento do usuário para escanear seu rosto e, em seguida, pede para aceitar a permissão da webcam. Se todos os requisitos forem satisfeitos, o widget do faceIO abre sua câmera e escaneia seu rosto. Ele converte seus dados faciais em uma matriz de números de ponto flutuante.

Depois de coletar os dados faciais, o faceIO pede que seja inserido um código PIN. Este código PIN é usado para distinguir usuários com rostos extremamente semelhantes. Pense nisso como uma autenticação de dois fatores para situações em que algo não saia como esperado.

Vamos adicionar a função de registro do faceIO à nossa aplicação React. Mantemos o aplicativo bem simples. Portanto, vamos criar um botão chamado register que, ao ser clicado, executará a função enroll para registrar um novo usuário.
Após adicionar o botão register e o manipulador JavaScript para o evento de clique, o arquivo App.jsx fica assim.

No código acima, você pode ver que eu envolvo o código dentro de um bloco try-catch. Se algo der errado, o FaceIO lançará alguns erros. As mensagens de erro são muito úteis, e você pode obter uma lista completa dos códigos de erro na documentação oficial.

A função enroll aceita apenas um objeto de parâmetro opcional. Esses parâmetros opcionais aceitam propriedades para configurar o processo de registro do usuário. No exemplo acima, eu defino as propriedades locale e payload dentro do parâmetro opcional da função de registro. A propriedade locale representa a linguagem de interação padrão do seu usuário. No nosso caso, fornecemos auto para detectar automaticamente o idioma.

Dentro do payload, você pode adicionar qualquer valor serializável em JSON exclusivo para seu usuário. Neste exemplo, estamos adicionando o email do usuário como um payload. Sempre que o usuário fizer login no futuro, poderemos acessar o payload de email a partir do objeto de retorno do FaceIO.

A função enroll no FaceIO retorna uma promessa. Portanto, no exemplo, estou usando a funcionalidade async/await do JavaScript. Se você não preferir async/await, pode usar .then no lugar.

Quando a promessa é concluída, ela resulta em um objeto userInfo. Usando este objeto, podemos acessar o ID facial exclusivo do usuário. Além disso, o objeto userInfo também fornece uma propriedade details, da qual podemos obter a idade e o gênero prováveis do usuário.

Autenticar Usuário Registrado Usando FaceIO

Depois de registrar o usuário com sucesso, é hora de autenticar os usuários registrados. Para isso, o FaceIO fornece a função authenticate. Esta função de authenticate também tem 3 aliases: auth, recognize, e identify.

A função de autenticação precisa apenas de um único quadro para reconhecer o usuário. Portanto, é muito eficiente em termos de largura de banda. Após uma autenticação bem-sucedida, ela retorna um objeto userData. Este userData contém o payload especificado no registro e o rosto do usuário.

Dentro do arquivo App.jsx, criamos outro botão chamado Log-in. Quando um usuário clica nesse botão, ele chama a função auxiliar handleLogIn. Essa função é responsável por chamar a função "authenticate". Vamos ver tudo isso no código.

Dentro da função handleLogIn, usamos o bloco try-catch para capturar erros caso a autenticação falhe. Como a função authenticate retorna uma promessa , usamos métodos async/await para obter o valor quando a promessa for concluída.

A função de autenticação aceita alguns parâmetros opcionais para personalizar o widget de autenticação do FaceIO. Você pode principalmente personalizar os tempos limite usando os parâmetros permissionsTimeout, idleTimeout e replyTimeout. Após a compilação, nossa aplicação web deve se parecer com isto.

FaceIO REST API

Ao criar sua conta no FaceIO, você receberá uma chave de API. Você pode encontrar essa chave de API no console do FaceIO. Usando essa chave de API, você pode interagir com o back-end do FaceIO através de uma API RESTful. A URL base da REST API é https://api.faceio.net/.

Atualmente, a FaceIO REST API suporta três funções: excluir o rosto de um usuário, definir o payload adicional para um faceID e definir o código PIN para um faceID. Lembre-se de usar esses endpoints de API em um ambiente seguro ou a partir do seu servidor back-end. Não execute essas APIs do lado do cliente.

Excluir um faceID

Para excluir um faceID, temos que fazer uma solicitação GET para o endpoint https://api.faceio.net/deletefacialid. Esse endpoint possui dois parâmetros de solicitação. Um é a key, que aceita a chave da API, e o outro é o fid, que aceita o faceID que você deseja excluir.

curl - request GET \
- url 'https://api.faceio.net/deletefacialid?key=APIkey&fid=FaceID'

Como resposta, o FaceIO retorna um código de status e um booleano payload que indica se os dados, junto com o payload, foram excluídos com sucesso ou não.

Definir Payload para FaceID

Usando este endpoint da API, você pode definir um payload para um FaceID já existente. A URL solicitada é https://api.faceio.net/setfacialidpayload. Este endpoint requer três parâmetros de solicitação: a chave (key) que é a chave da API, o fid que é o ID facial ao qual você deseja associar o payload, e o payload, onde você define seus dados personalizados.

curl - request POST \
- url 'https://api.faceio.net/setfacialidpayload?key=APIkey&fid=FaceID&payload=%22name%3AHrishikesh%22'

Como resposta, o FaceIO retorna um código de status e um booleano payload que indica se os dados, junto com o payload, foram excluídos com sucesso ou não.

Definir Código PIN para FaceID

Durante a seção de registro de faceID, discutimos a necessidade de um código PIN para distinguir entre dois rostos muito semelhantes. Se você quiser modificar seu código PIN, pode fazê-lo facilmente usando o endpoint https://api.faceio.net/setfacialidpincode.
Assim como o endpoint anterior, este também requer 3 parâmetros: a chave da API, o faceID e o PIN. A solicitação curl para o endpoint é a seguinte.

curl - request POST \
- url 'https://api.faceio.net/setfacialidpincode?key=APIkey&fid=FaceID&pin=12345'

FaceIO Webhooks

Os webhooks são usados como um método de comunicação entre servidores. O FaceIO oferece uma rica experiência de webhook que você pode usar para atualizar seu servidor back-end. O FaceIO envia um webhook em 3 eventos: enroll, quando um novo usuário se registra no seu sistema; auth, quando um usuário já registrado é autenticado usando o FaceIO; e deletion, quando um faceID é excluído usando a REST API que discutimos anteriormente.
Cada solicitação de webhook é uma solicitação POST do servidor FaceIO e contém um objeto JSON. O corpo da solicitação tem a seguinte aparência.

O nome de cada campo é autoexplicativo sobre qual valor ele contém.
Siga estas etapas para configurar o webhook com o servidor faceIO:

1. Conecte-se à sua conta pelo console do FACEIO.
2. No painel principal do console, acesse o Gerenciador de Aplicativos.
3. Selecione o aplicativo alvo para o qual deseja configurar webhooks.
4. Uma vez selecionado o aplicativo alvo, insira a URL do seu endpoint de webhook para receber eventos e salve sua modificação.
5. Tudo pronto! Quando um evento for acionado, o FACEIO fará uma solicitação HTTP POST para a URL que você configurou.

Conclusão

Este é um guia detalhado sobre como adicionar autenticação facial ao seu aplicativo React. Se você gostou deste guia e quer saber mais sobre o FaceIO, visite a página de documentação oficial. Você também pode consultar a página de perguntas frequentes (FAQ) deles se tiver dúvidas. Se você gostou do meu texto, siga-me no Twitter como @ahmedqureshi54.