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.
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.
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.
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).
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.
locale
é o idioma local do usuário.permissions timeout
corresponde ao número de segundos de espera para que o usuário conceda acesso à câmera.termsTimeout
é o número de segundos de espera para que o usuário aceite os termos e condições do FaceIO.idleTimeout
é o número total de segundos de espera ao tentar reconhecer um rosto.replyTimeout
é o número de segundos a esperar para receber dados faciais processados do nó FaceIO.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
.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.
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.
O FaceIO possui um sistema robusto de proteção de privacidade. Deixe-me listar alguns deles.
É 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.
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.
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.
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.
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
.
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.