Como autenticar um usuário por meio de reconhecimento facial em seu aplicativo da Web

A autenticação é um aspecto muito importante do seu aplicativo da web. Se você está oferecendo um serviço ou vendendo algum produto para o usuário, você deve acompanhar o usuário para referência futura. Tudo isso só é possível se você tiver um sistema de autenticação instalado.

Mas usar a ferramenta certa para o trabalho também é muito necessário. No passado, a autenticação baseada em e-mail e senha era mais popular e amplamente usada. Mas com o tempo, um novo conceito chamado OAuth foi introduzido quando grandes tecnologias surgiram com uma enorme base de usuários. Onde você, como proprietário do site, confia no provedor OAuth para autenticar um usuário, em troca, o provedor OAuth fornece detalhes do usuário.

A autenticação baseada em OAuth é simples para o usuário. Eles só precisam manter uma conta com um provedor OAuth e usar essa conta para fazer login em todos os outros sites. Mas sempre há confiança envolvida no processo OAuth.

Depois de algum tempo, a autenticação sem senha entrou em cena. Nesse processo, quando você insere o nome de usuário ou seu e-mail, eles enviam um link para você. Se você colar o link no navegador, será automaticamente autenticado e conectado. O exemplo mais comum de autenticação sem senha é quando você clica no link de envio mágico para fazer login no hackernoon.com .

Com o avanço da Inteligência Artificial (IA) e do aprendizado de máquina (ML), as técnicas de reconhecimento facial estão ganhando enorme popularidade. Com o tempo, à medida que os conjuntos de dados aumentarem, a precisão de um modelo de IA também aumentará. Hoje em dia, também podemos usar técnicas de reconhecimento facial, para autenticar os usuários em nosso aplicativo da web.

Neste artigo, estamos construindo um aplicativo simples para demonstrar como autenticar um usuário usando o reconhecimento facial. Neste processo, vamos usar as APIs do FaceIO.

Por que precisamos de autenticação baseada em reconhecimento facial

A necessidade de reconhecimento facial é múltipla. Estou tentando colocar alguns pontos aqui de forma concisa. Certifique-se de ler o artigo até o final para obter uma compreensão conceitual completa e um passo a passo de implementação detalhado.

1. Mais rápido que os métodos tradicionais : O método de autenticação facial é muito mais rápido que os meios tradicionais de autenticação. Você só precisa clicar em um botão para iniciar o processo de autenticação e, em um milissegundo, está feito. Nos métodos tradicionais baseados em senha de e-mail, você deve adicionar seus detalhes linha por linha. Às vezes, após o login bem-sucedido, você é recebido com um captcha. Como é irritante!
2. Não requer hardware especializado : O único requisito da técnica de autenticação facial é uma câmera. Todos os smartphones hoje em dia têm uma câmera por padrão. Todos os desktops também possuem algum tipo de webcam presente. Portanto, os usuários não precisam de nenhum hardware especializado para usar este serviço.
3. Reduza a representação em plataformas sociais : o recurso mais importante da autenticação facial é que ela pode impedir a representação. Nas plataformas sociais, muitas pessoas criam contas falsas se passando por alguém. Isso pode ser muito arriscado se o titular da conta falsa cometer algum tipo de crime digital. Com a ajuda do reconhecimento facial, as plataformas sociais podem reconhecer se a conta que alguém tentou acessar realmente pertence a elas.
4. Reduza bots e scripts automatizados : Bots e scripts automatizados são introduzidos para ajudar as pessoas a se livrarem de tarefas repetitivas. Mas as pessoas também os usaram de uma maneira diferente para enviar spam a outras pessoas. Diariamente você se depara com muitos bots e scripts automatizados na sua vida digital que você nem percebe ou percebe. Para evitar isso, alguns sites usam captcha. Usando o reconhecimento facial, esse problema também pode ser resolvido, pois os bots não têm rosto para autenticar 😄.
5. Foco na privacidade: a privacidade é um assunto muito delicado para todos nós. Todos nós ficamos um pouco preocupados quando alguém pede para você se autenticar usando seus dados faciais. Mas como estamos usando o FaceIO neste tutorial, o processo de autenticação é totalmente criptografado de ponta a ponta. No back-end, eles armazenam apenas o hash de suas características faciais. Eles são totalmente compatíveis com GDPR e CCPA. Portanto, você pode confiar neles para armazenar seus dados com segurança.

Faça um projeto de autenticação facial

Agora vamos fazer um aplicativo da web de autenticação facial. Este projeto inclui todos os detalhes e tudo o que você precisa saber sobre como implementar a autenticação baseada em reconhecimento facial em seu aplicativo da web.

Estou explicando passo a passo o processo. Você pode obter um código-fonte completo aqui . Certifique-se de obter uma chave de API gratuita para acompanhar.

Instalando a dependência necessária

Crie um diretório em branco e dentro dele, faça um arquivo index.html . Você também pode adicionar um arquivo CSS separado, mas para simplificar, vou mantê-lo no mínimo.

Se você estiver usando o VSCode para desenvolvimento, poderá usar o servidor ativo para servir seus arquivos estáticos.

Dentro de seu index.html , adicione esta marcação HTML básica, para começar.

 <!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>

O FaceIO fornece uma biblioteca javascript muito útil para interagir com seus modelos de IA. Isso facilita tanto a nossa vida que podemos implementar o recurso de reconhecimento facial usando apenas algumas linhas de código. Para adicionar a biblioteca javascript FaceIO, usamos sua CDN (rede de entrega de conteúdo) dentro da tag body do nosso documento HTML.

 <body> <script src="https://cdn.faceio.net/fio.js"></script> </body>

Agora, crie um arquivo index.js e vincule o arquivo dentro da tag body após FaceIO CDN.

 <body> <script src="https://cdn.faceio.net/fio.js"></script> <script src="./index.js"></script> </body>

Agora vamos criar 2 funções auxiliares para facilitar nosso processo de desenvolvimento. Um é para registrar um usuário (como o recurso de inscrição) e o outro é para autenticação (como o recurso de login).

Inscrevendo um usuário

Registrar um usuário é muito simples por causa da biblioteca javascript que o FaceIO fornece. Dentro da marcação HTML, adicione um botão com id="enroll" . Acessamos este botão dentro do nosso arquivo javascript usando o método getElementbyID .

Agora inicialize o objeto FaceIO dentro de index.js . Você precisa adicionar o ID público do seu projeto FaceIO. Você pode obter o ID público listado no painel do seu projeto.

 const faceio = new faceIO("<Your Public ID here");

Vamos adicionar um ouvinte de evento no botão de inscrição. Quando alguém clica no botão, executamos o método de inscrição do objeto faceIO. Este método de inscrição usa uma variedade de parâmetros opcionais.

1. locale é o idioma local do usuário.
2. o permissions timeout corresponde ao número de segundos de espera para que o usuário conceda acesso à câmera.
3. termsTimeout é o número de segundos de espera para que o usuário aceite os termos e condições do FaceIO.
4. idleTimeout é o número total de segundos de espera ao tentar reconhecer um rosto.
5. replyTimeout é o número de segundos a esperar para receber dados faciais processados do nó FaceIO.
6. userConcent é um booleano que representa se os usuários dão consentimento para escanear seus rostos. Se você já obteve o consentimento do usuário, pode definir o valor como true .
7. payload : Dentro da função de registro você pode adicionar um payload de sua escolha. A carga útil deve ser um objeto de valor-chave. Você pode usar esse recurso de carga útil para anexar seu endereço de e-mail ou qualquer outra informação relacionada ao usuário.

No nosso caso, a função de registro se parece com isso.

 enroll.addEventListener("click", async () => { let response = await faceio.enroll({ locale: "auto", payload: { email: "[email protected]", pin: "12345", }, }); console.log(` Unique Facial ID: ${response.facialId} Enrollment Date: ${response.timestamp} Gender: ${response.details.gender} Age Approximation: ${response.details.age}`); });

Quando você executa esta função, um pop-up aparece na frente do usuário. Este pop-up contém termos e condições. Se o usuário aceitar os termos e condições, ele solicita o acesso à câmera. Se o usuário conceder acesso à câmera, o FaceIO digitalizará o rosto.

O modelo FaceIO procura características faciais únicas que distinguem o usuário dos demais. Depois de concluído, você deve adicionar um PIN que está anexado aos seus dados faciais. Este PIN é muito importante para o usuário e o mantém em um local mais seguro.

Quando todas essas etapas forem concluídas, o FaceIO retornará um objeto userInfo ao usuário. Este objeto contém um ID de rosto de usuário que é um identificador universalmente exclusivo, sexo e idade. Sexo e idade não são muito precisos, pois são previstos por um modelo de IA.

Você pode armazenar este faceID em seu back-end. Quando um usuário deseja fazer login, você pode corresponder a esse faceID para autenticar o usuário.

Durante o fluxo de trabalho, caso ocorra algum erro, o FaceIO possui uma extensa lista de mensagens de erro. Se o usuário não permitir o acesso à câmera, o erro fioErrCode.PERMISSION_REFUSED será lançado.

Se o usuário não aceitar o pop-up dos termos e condições, o erro fioErrCode.TERMS_NOT_ACCEPTED será lançado pelo servidor.

Autenticando um usuário

Para iniciar o fluxo de autenticação, adicione um botão em sua marcação HTML com id="authenticate" . Acesse este botão dentro de index.js com a ajuda do método getElementbyID .

Agora quando o usuário pressiona este botão, iniciamos o fluxo de autenticação. A função de autenticação é muito simples.

A função Authenticate usa permissionTimeout , idleTimeout , replyTimeout e o parâmetro locale como a função register enroll() anterior. O código se parece com isto.

 authenticate.addEventListener("click", async () => { let response = await faceio.authenticate({ locale: "auto", }); console.log(` Unique Facial ID: ${response.facialId} PayLoad: ${response.payload} `); });

Quando o usuário pressiona o botão de autenticação, uma tela semelhante ao caso da função de registro é exibida. Leva o acesso à câmera e digitaliza seu rosto. Uma vez digitalizado, ele solicita o PIN que você inseriu durante o registro.

Se você fornecer o PIN correto, o FaceIO retornará o FaceData e a carga que você especificou no processo de inscrição.

Você também pode verificar novamente o fluxo de autenticação comparando o faceID em seu servidor.

Agora nosso fluxo de autenticação está concluído. Você pode ver que é mais fácil do que implementar um fluxo de autenticação de senha de e-mail. Todo o trabalho pesado é feito pelo servidor FaceIO e seu modelo AI, como desenvolvedor, você só precisa adicionar a lógica do aplicativo para modificar o fluxo de autenticação e sua experiência.

Recursos de privacidade

O FaceIO possui um sistema robusto de proteção de privacidade. Deixe-me listar alguns deles.

1. É compatível com GDPR e CCPA : o serviço FaceIO é totalmente compatível com GDPR e CCPA. GDPR significa Regulamento Geral de Proteção de Dados. É adotado em 2018 e exige que todas as empresas protejam os dados pessoais e a privacidade do usuário.

   
   

   CCPA significa California Consumer Protection Act dá mais controle ao usuário sobre seus dados. Se você estiver operando nessas regiões, não precisa se preocupar.

   
   

2. Ele armazena apenas hashes : o FaceIO armazena apenas hashes de suas características faciais. Ele não armazena nenhum dado simples e armazena o mínimo de informações possível. A biblioteca e os widgets do lado do cliente não lidam com nenhum dado biométrico. Todo o processo é feito no back-end.

Perguntas frequentes

O navegador FaceIO é agnóstico?

O FaceIO é completamente independente de navegador. Ele pode executar qualquer navegador, incluindo chrome, firefox e safari. Como todo o processamento é feito no servidor, o FaceIO precisa apenas do acesso à sua câmera para funcionar.

Se você estiver usando algum navegador de privacidade desabilitando o javascript, certifique-se de ativá-lo. Como o FaceIO precisa usar javascript para conversar com o servidor.

Não podemos construir nosso modelo do zero?

Sim, você pode criar seu modelo do zero e implementar o recurso de autenticação facial em seu aplicativo da web. Mas, para isso, você deve ter uma compreensão profunda dos processos de inteligência artificial e aprendizado de máquina.

Como a maioria dos desenvolvedores da Web não tem esse histórico, é uma jogada inteligente usar os serviços de outras pessoas para implementar um recurso em vez de reinventar a roda.

Existem outras soluções no mercado que você pode explorar. Um deles é o AWS Rekognition. Este serviço é oferecido pela AWS e funciona de forma muito semelhante ao FaceIO. O interessante é que você pode optar pelo AWS Rekognition dentro do seu painel FaceIO.

Sim, é possível. Agora você pode escolher o que deseja e ir em frente.

Ocultar o ID público

Como podemos ver na parte de codificação, você deve fornecer seu ID público durante a inicialização do objeto FaceIO. Se desejar, você pode ocultá-lo usando variáveis de ambiente. Se você estiver usando uma estrutura de front-end ou um sistema de compilação, poderá adicionar dinamicamente esses valores no momento da compilação.

Se você estiver usando o NextJS, poderá usar o arquivo .env.local para salvar suas credenciais confidenciais.

Se você não estiver usando nenhum framework, pode usar o Vite. Vite suporta variáveis de ambiente. Ele constrói e comprime seu projeto vanilla js para implantação mais rápida. Basta criar um arquivo .env , colocar todas as suas credenciais lá e pronto. Não se esqueça de colocar seu arquivo .env dentro de sua lista .gitignore .

Conclusão

Se você leu o artigo até este ponto, acho que gostou deste artigo. Por favor, compartilhe com seus colegas. Se você quiser dar algum feedback, estou disponível no Twitter como hrishikshpathak . Continue lendo, continue aprendendo.