For the complete documentation index, see llms.txt. This page is also available as Markdown.

Uso básico

Exemplo básico de integração do SDK Web.

O guia a seguir mostra um exemplo de Integração em um ambiente TypeScript + VITE. Esse mesmo processo pode ser realizado nos frameworks atuais com as diferenças que o ambiente exigir (Sintaxe, Definição de componentes, etc).

Este exemplo se baseia em uma Integração básica. É possível mudar o comportamento do Fluxo com as configurações ou alterações necessárias.

Nesta Integração serão utilizados os componentes SDK Provider, SelphID Widget, Selphi Widget e Tracking (incluído no SDK Provider).


Instalação do componente

Instalar a biblioteca SDK Web:

npm install @facephi/sdk-web-wc@latest

Não esquecer de preparar o arquivo .npmrc com as credenciais para o download.

Definir os elementos customizados:

// main.ts
import '@facephi/sdk-web-wc';
import { defineCustomElements as defineFacephiSDKCustomElements } from '@facephi/sdk-web-wc/loader';

defineFacephiSDKCustomElements(window);

Integração e configuração do SDK Provider

Integrar o SDK Provider e configurá-lo:

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

<section className="facephi-sdk-provider">
  <facephi-sdk-provider
    apikey={import.meta.env.VITE_LICENSE_KEY}
    steps={`${TrackingSteps.start},${TrackingSteps.selphidWidget},${TrackingSteps.selphiWidget},${TrackingSteps.finish}`}`
    type={TypeFamily.onboarding}
    customerId={customerId}
    language={Language.en}
  />
</section>

Lógica do SDK Provider:

Lógica do Widget SelphID:

Lógica do Widget Selphi

Isso é apenas uma aproximação. É possível usar diferentes tipos de Integração ou sintaxe.

Neste exemplo foi levado em conta apenas o caminho feliz, por isso o restante dos eventos também precisa ser integrado em implementações reais.


Integração e configuração do Fluxo de componentes

Este exemplo é uma Integração do caminho feliz para um Onboarding realizado por meio de SelphID e Selphi.

Primeiro, com a instanciação do SDK Provider, será executada a lógica interna para inicializar todos os serviços (Carregamento, Licenciamento, Inicialização de Tracking, etc).

Quando o Provider emitir o evento emitData, será carregado o primeiro Widget (SelphID) por meio da lógica de initSelphidWidget(sdkProvider).

Uma vez que o usuário tenha concluído o processo de captura, o Widget SelphID será fechado ao mesmo tempo em que emitirá o evento extractionFinish. Nesse evento, os dados serão tratados conforme necessário e o próximo componente (Selphi) será carregado com o método initSelphiWidget(sdkProvider);.

Por fim, quando o usuário terminar de realizar a extração do padrão facial, os dados obtidos serão tratados conforme necessário e o fluxo será finalizado, continuando com a lógica desejada.

Fluxo entre componentes

Em ambientes mais completos, como podem ser os frameworks atuais, é possível utilizar Componentes, Routers, Stores e todo tipo de ferramentas para realizar esse Fluxo.

A equipe da Facephi recomenda utilizar componentes e routers para uma Integração mais modular, simples e rápida no framework desejado.


Testes de comportamento

Uma vez terminada a Integração, é altamente recomendável testar no ambiente de desenvolvimento da aplicação se o funcionamento é o esperado, levando em conta as possíveis configurações e casuísticas que possam aparecer no Fluxo dos usuários finais.


Atualizado