Guia oficial de integração
Para sites e aplicativos web

fio.js funciona em navegadores modernos compatíveis com uma webcam comum ou a câmera de um smartphone, sem exigir um sensor biométrico dedicado. A biblioteca JavaScript é independente de framework e pode ser usada com React, Vue, Angular, Next.js ou JavaScript sem framework.

<div id="faceio-modal"></div>
<script src="https://cdn.faceio.net/fio.js"></script>

<script type="text/javascript">
  /* Crie uma instância de fio.js com o Public ID */
  const faceio = new faceIO("app-public-id");
</script>

<button onclick="enrollNewUser()">Cadastrar novo usuário</button>
<button onclick="authenticateUser()">Autenticar usuário</button>

<script type="text/javascript">
  const faceio = new faceIO("app-public-id");

  function enrollNewUser() {
    // faceio.enroll() inicia o fluxo de cadastro
  }

  function authenticateUser() {
    // faceio.authenticate() inicia o fluxo de autenticação
  }

  function handleError(errCode) {
    // Trate o erro aqui
  }
</script>

Inicia o Widget do FACEIO para cadastrar um novo usuário por reconhecimento facial. É o equivalente sem senha de um cadastro tradicional. Quando concluído, retorna uma Promise resolvida com um objeto userInfo que contém o Facial ID exclusivo do usuário, o timestamp do cadastro e estimativas demográficas de gênero e idade.

// Crie uma instância do fio.js com o Public ID do seu aplicativo
const faceio = new faceIO("app-public-id");
function enrollNewUser(){
faceio.enroll({
  "locale": "auto", // Idioma padrão do usuário
  "payload": {
      /* Payload que será associado a este usuário e retornado nas autenticações futuras. */
      "whoami": 123456, // ID de exemplo associado a este usuário
      "email": "john.doe@example.com"
      }
  }).then(userInfo => {
      // Usuário cadastrado com sucesso 
      alert(
          `Usuário cadastrado com sucesso. Detalhes:
           Facial ID exclusivo: ${userInfo.facialId}
           Data do cadastro: ${userInfo.timestamp}
           Gênero estimado: ${userInfo.details.gender}
           Idade aproximada: ${userInfo.details.age}`
      );
     console.log(userInfo);
     // Trate o resultado, salve o Facial ID e redirecione para o painel
  }).catch(errCode => {
     // Registre o erro ocorrido durante o cadastro
     handleError(errCode);
  })
}

Inicia o Widget do FACEIO para verificar um usuário já cadastrado. É o equivalente sem senha de um login tradicional. Quando concluído, retorna uma Promise resolvida com um objeto userData que contém o Facial ID do usuário, o timestamp da autenticação e o payload associado durante o cadastro.

const faceio = new faceIO("app-public-id"); // Inicialize com o Public ID do seu aplicativo
function authenticateUser(){
  faceio.authenticate({
      "locale": "auto" // Idioma padrão do usuário
  }).then(userData => {
      console.log("Operação concluída, usuário identificado")
      // Obtenha o Facial ID associado ao usuário. Ele será o mesmo
      // em cada autenticação futura concluída. O FACEIO recomenda 
      // usar esse Facial ID para identificar de forma exclusiva 
      // os usuários cadastrados no seu backend.
      console.log("Facial ID associado: " + userData.facialId)
      // Obtenha os dados arbitrários associados anteriormente ao usuário
      // durante o cadastro pelo parâmetro payload de enroll().
      console.log("Payload: " + JSON.stringify(userData.payload)) // Dados do exemplo de enroll() acima
  }).catch(errCode => {
      handleError(errCode)
  })
}

Reinicia a sessão atual do FACEIO para permitir uma nova chamada de enroll() ou authenticate() na mesma página sem recarregá-la. É útil em terminais compartilhados, pontos de check-in ou outros fluxos em que várias pessoas usam a mesma sessão do navegador em sequência.

Quando enroll() ou authenticate() falham, a Promise é rejeitada com um valor numérico fioErrCode. Trate os erros avaliando esse valor no manipulador .catch(). Para restartSession(), verifique o booleano retornado (true ou false).

Uma implementação de referência com enroll() e authenticate() e tratamento de erros. Use-a como ponto de partida para sua integração.

Use estes guias da comunidade para implementar fio.js com React, Vue, Angular, Next.js ou JavaScript sem framework e consultar exemplos para projetos React Native e Flutter.