Adicionar FACEIO à sua página de login

Adicione autenticação facial a uma página de login existente com um fluxo claro de cadastro, o widget fio.js, gerenciamento de contas no backend e um método alternativo para recuperação.

Voltar à Central de Conhecimento
Equipe de engenharia da FACEIO Atualizado

Um fluxo prático de integração para páginas de login

A FACEIO pode ser adicionada a uma página de login sem substituir o sistema de contas existente. Mantenha cadastro, autenticação e gerenciamento de contas no backend como etapas separadas.

Use o widget do navegador para captura da câmera, detecção de vivacidade, solicitação de PIN e interação com o usuário. Mantenha as decisões finais de acesso no backend para preservar um limite de autenticação claro.

Este tutorial parte de uma página de login existente. Se estiver começando do zero, consulte o guia de primeiros passos para criar sua aplicação FACEIO e obter o App ID público na FACEIO Console ↗.

Etapas de implementação

Siga estas etapas para adicionar FACEIO a uma página de login. Cada etapa aponta para a referência correspondente:

  1. Crie uma aplicação FACEIO. Abra a FACEIO Console, crie uma aplicação e copie o App ID público. Esse identificador é usado pelo fio.js no navegador.
  2. Carregue o SDK fio.js. Adicione a tag de script do fio.js às páginas de login e cadastro. Carregue-o somente onde a captura facial for necessária, não no site inteiro.
  3. Cadastre novos usuários. Depois de criar a conta e obter o consentimento, chame enroll() para capturar o rosto e criar um Facial ID. Salve a referência do Facial ID junto à conta do usuário no backend.
  4. Autentique usuários existentes. Chame authenticate() quando o usuário escolher login facial ou quando sua aplicação exigir autenticação facial adicional. O SDK retorna o resultado ao navegador.
  5. Conclua o login no backend. Envie o Facial ID retornado e o contexto necessário ao backend, associe-o à conta esperada e aplique suas regras de sessão e autorização. Use CHECKFACIALID somente para confirmar que o Facial ID continua registrado.
  6. Trate erros e métodos alternativos. Capture os códigos de erro do fio.js e ofereça instruções para tentar novamente ou um método alternativo, como senha, OTP ou suporte.

O que incluir na página de login

Para novos usuários

Apresente o cadastro facial como uma etapa opcional ou obrigatória após a criação da conta, conforme a política do produto. Mostre o aviso de consentimento antes de solicitar a câmera e inclua um link para suas informações de privacidade.

Para usuários existentes

Ofereça autenticação facial ao lado do formulário de senha ou no lugar dele. Use um rótulo claro, como “Entrar com o rosto”, e mantenha um método alternativo para problemas de câmera ou permissão.

Para conhecer os padrões de UX, consulte o guia de práticas recomendadas de login com reconhecimento facial. Para preparar o lançamento, incluindo avisos de privacidade, consentimento e implantação, use o checklist de lançamento e o guia de práticas recomendadas de privacidade.

Padrão de conta e sessão no backend

O callback do navegador de authenticate() retorna um resultado de autenticação. O backend continua responsável por selecionar a conta e emitir a sessão:

  1. Receba o resultado de autenticação e o contexto necessário em um endpoint do servidor.
  2. Localize a conta associada ao Facial ID, não a um ID de usuário enviado pelo cliente.
  3. Verifique o estado da conta, o tenant, a ação solicitada e os demais controles exigidos pela aplicação.
  4. Emita um token de sessão de curta duração associado ao usuário.
  5. Registre data e hora, Facial ID, App ID e resultado sem manter mídia de verificação, capturas faciais ou hashes biométricos.

O checklist da API, referência da REST API, documentação de webhooks, e o guia de práticas recomendadas de segurança explicam esses controles. Não permita que o estado do cliente selecione uma conta ou conceda acesso sozinho.

Recursos para integrar o login

Use a documentação da FACEIO para implementar o login, associar Facial IDs às contas, receber eventos webhook e configurar a aplicação.

Primeiros passos Configure sua aplicação FACEIO e obtenha os identificadores necessários para o projeto web. Guia de integração Conecte cadastro e autenticação à página de login existente. Guias para desenvolvedores Conecte os resultados de autenticação aos fluxos de conta e recuperação no backend. REST API Gerencie Facial IDs, payloads, códigos PIN, exclusão e verificações do backend. Webhooks Receba no servidor eventos dos fluxos de cadastro e autenticação. FACEIO Console Crie seu App ID e gerencie as configurações de autenticação da página de login.

Perguntas frequentes

Preciso remover o login com senha existente?

Não. A FACEIO pode funcionar junto ao login existente. Ofereça o rosto como alternativa ou como fator adicional para ações sensíveis. Mantenha o acesso por senha durante a transição. Consulte login biométrico para aplicações web para avaliar os padrões de UX.

Quanto tempo leva para adicionar FACEIO a uma página de login?

A integração no cliente é curta, principalmente ao seguir o guia de primeiros passos. A preparação para produção também depende do gerenciamento de contas e sessões no backend, tratamento de erros, recuperação, consentimento e testes, cobertos pelo checklist de lançamento.

Quais frameworks o fio.js suporta?

O fio.js funciona com JavaScript puro, React, Vue, Angular, Next.js, Nuxt, Svelte e Ember. Consulte o guia de integração para ver as notas de cada framework.

Como tratar um usuário que perdeu o acesso à câmera?

Mantenha um método alternativo, como senha, OTP ou suporte. Não torne a autenticação facial a única forma de recuperar uma conta sem um processo documentado. O guia de práticas recomendadas de login explica esse processo.

Guias relacionados

Adicione login facial ao seu site

O backend associa o Facial ID retornado a uma conta e decide se emitirá uma sessão. Consulte também as práticas recomendadas de segurança, práticas recomendadas de privacidade e o checklist de implementação. Crie uma aplicação no FACEIO Console e teste o fluxo completo no seu ambiente.

Abrir FACEIO Console Começar