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:

facephi-sdk-provider.ts

import { initSelphidWidget } from './facephi-selphid-widget';
import { ErrorData } from '@facephi/sdk-web-wc';

(async () => {
	await customElements.whenDefined('facephi-sdk-provider');

	// manipuladores de eventos do SDK Provider
	function handleEmitData(event: CustomEvent<{ operationId: string; sessionId: string; extraData: string }>) {
		const result = event.detail;
		console.log('[FACEPHI SDK PROVIDER] onEmitData', result);
	}

	function handleEmitError(event: CustomEvent<ErrorData>) {
		const result = event.detail;
		console.error('[FACEPHI SDK PROVIDER] onEmitError', result);
	}

	const sdkProvider = document.querySelector('facephi-sdk-provider');
	if (sdkProvider) {
		sdkProvider.addEventListener('emitData', handleEmitData);
		sdkProvider.addEventListener('emitError', handleEmitError);
		
		// Inicializa o Widget SelphID
		initSelphidWidget(sdkProvider);
	}
})();

Lógica do Widget SelphID:

facephi-selphid-widget.ts

import {
	Language,
	type ExtractionFinishEvent,
} from '@facephi/selphid-web-component';
import { initSelphiWidget } from './facephi-selphi-widget';

export function initSelphidWidget(sdkProvider: HTMLElement) {
	sdkProvider.innerHTML = '';
	const selphidWidget = document.createElement('facephi-selphid-widget');
	selphidWidget.country = 'GB';
	sdkProvider.appendChild(selphidWidget);

	// EVENTOS SELPHID
	function handleExtractionFinish(event: CustomEvent<ExtractionFinishEvent>) {
		const result = event.detail.detail;
		Logger.printLog(LoggerType.SELPHID, 'extractionFinish', result);

		// Inicializar Selphi
		initSelphiWidget(sdkProvider);
	}
	
	// outros eventos

	if (selphidWidget) {
		selphidWidget.addEventListener('extractionFinish', handleExtractionFinish);
	}
}

Lógica do Widget Selphi

facephi-selphi-widget.ts

import {
	Language,
	type ExtractionFinishEvent,
} from '@facephi/selphi-web-component';

export function initSelphiWidget(sdkProvider: HTMLElement) {
	sdkProvider.innerHTML = '';
	const selphiWidget = document.createElement('facephi-selphi-widget');
	selphiWidget.stabilization = true;
	selphiWidget.interactible = true;
	selphiWidget.previewImage = true;
	selphiWidget.timeout = 30000;
	selphiWidget.showLog = false;
	sdkProvider.appendChild(selphiWidget);

	//EVENTOS SELPHI
	function handleExtractionFinish(event: CustomEvent<ExtractionFinishEvent>) {
		const result = event.detail.detail;
		console.log('[FACEPHI SELPHI] extractionFinish', result);

		// Finalizar o processo de Onboarding com qualquer lógica
		sdkProvider.innerHTML = '<div class="onboarding-finished">ONBOARDING FINALIZADO</div>';
	}
	
	// Outros eventos

	if (selphiWidget) {
		selphiWidget.addEventListener('extractionFinish', handleExtractionFinish);
	}
}

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.

---