Guia rápida

Guia rápida de implementação dos componentes oferecidos pelo SDK Web.

O SDK Provider é um componente personalizado que inclui uma coleção de widgets para uso. Esses widgets também são componentes personalizados.

---

Componentes SDK Web

Com a integração do SDK Web de Facephi, é possível obter uma aplicação de Onboarding ou Autenticação totalmente personalizável por meio dos componentes que a biblioteca oferece.

No exemplo a seguir, vemos uma breve implementação de um Fluxo de Onboarding, em que o usuário começará o fluxo capturando seu documento de identidade com SelphID e finalizará com a captura do padrão facial em Selphi com uma configuração mínima.

import { TypeFamily, TrackingSteps } from '@facephi/sdk-web-wc';

<facephi-sdk-provider
  apikey={process.env.FACEPHI_SDK_APIKEY}
  type={TypeFamily.onboarding}
  steps={`${TrackingSteps.start},${TrackingSteps.selphidWidget},${TrackingSteps.selphiWidget},${TrackingSteps.finish}`}
  customerId={uniqueUserId}
  onEmitData={(event) => {
    console.log('Facephi SDK Provider:', event.detail);
    startSelphID();
  }}
/>

Se você precisar montar os widgets dinamicamente (sem JSX), atribua as propriedades em JavaScript:

const sdkProvider = document.querySelector('facephi-sdk-provider');

function startSelphID() {
  const selphidWidget = document.createElement('facephi-selphid-widget');
  selphidWidget.disableTutorial = true;
  selphidWidget.addEventListener('extractionFinish', (event) => {
    console.log('Facephi SelphID Widget', event.detail);
    startSelphi();
  });
  sdkProvider.innerHTML = '';
  sdkProvider.appendChild(selphidWidget);
}

function startSelphi() {
  const selphiWidget = document.createElement('facephi-selphi-widget');
  selphiWidget.disableTutorial = true;
  selphiWidget.addEventListener('extractionFinish', (event) => {
    console.log('Facephi Selphi Widget', event.detail);
    sdkProvider.innerHTML = 'Onboarding completed';
  });
  sdkProvider.innerHTML = '';
  sdkProvider.appendChild(selphiWidget);
}

A Facephi recomenda utilizar ferramentas como Frameworks e roteadores para uma implementação mais simples e modular.

Em uma implementação real, recomenda-se levar em conta o restante dos eventos dos widgets.

---

TypeScript

Todos os componentes da Facephi são tipados para serem usados em ambientes TypeScript (seja TypeScript puro ou integrado em frameworks).

Essa configuração será útil durante a implementação da biblioteca. Esses tipos funcionarão em qualquer framework, mas seu uso pode variar dependendo do ambiente.

Exemplo de uso

Este é um exemplo de uso simples para um ambiente TS puro. Os tipos oferecidos pelos diferentes componentes podem ser usados em qualquer framework com integração TS. Isso fornecerá correções e funções de autocompletar no IDE.

const facephiSdkProvider: HTMLFacephiSdkProviderElement = document.createElement('facephi-sdk-provider');
facephiSdkProvider.apikey = process.env.FACEPHI_SDK_APIKEY;
facephiSdkProvider.addEventListener('emitData', handleEmitData);

As dicas de tipo em um IDE podem não ser exibidas em algumas seções de HTML em frameworks. Para aproveitar esses recursos, recomenda-se implementar a configuração dos diversos componentes na seção de código.

---

Integração em frameworks

A equipe de desenvolvimento da Facephi recomenda a integração da biblioteca em frameworks para potencializar e facilitar sua implementação.

Algumas vantagens são:

• Facilidade de integração e sintaxe.

• Uso nativo de TypeScript e ambiente de testes.

• Componentização dos produtos da biblioteca para oferecer modularidade.

• Uso de ferramentas como roteadores.

Para mais informações sobre integrações em frameworks, é possível consultar a seção Frameworks e Samples.

---

Compatibilidade com iframes

O SDK Web é compatível com o uso de iframes.

Basta ativar o foco no contêiner do iframe quando for usar os componentes Facephi. Isso pode ser feito de várias formas, por exemplo:

• Fazendo com que o usuário interaja dentro do iframe antes do carregamento do SDK Web com um botão ou link.

• De forma programática, quando o iframe for carregado (útil se o usuário não for interagir com a aplicação).

  const iframe = document.getElementById('my-iframe');
  iframe.addEventListener('load', () => {
      iframe.focus();
  });

Nota: Esse processo pode ser necessário, sobretudo se forem utilizados serviços de antispoofing (Prevenção de falsificação de identidade).

---

Como usar

Os widgets devem estar contidos no componente SDK Provider e ser executados um por um em ordem.

Essa lógica pode ser implementada de várias maneiras:

• Implementação Vanilla: Uma implementação vanilla dos diferentes produtos usando código HTML e JavaScript. Essa opção é a menos recomendada.

• Componentes de framework: Usando um framework para implementar os produtos como componentes personalizados.

• Roteadores de componentes: Usando um roteador para carregar um componente específico (produto) de acordo com um parâmetro na URL.

• Métodos combinados: Implementar os produtos da Facephi usando todos os métodos anteriores. A equipe da Facephi recomenda o uso de um framework para implementar o Widget como componentes personalizados que serão carregados com um roteador.