> For the complete documentation index, see [llms.txt](https://docs.facephi.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.facephi.com/docs.facephi-pt-br/sdks/sdk-web/ejemplos-de-integracion/uso-basico.md).

# Uso básico

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:

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

{% hint style="info" %}
Não esquecer de preparar o arquivo `.npmrc` com as credenciais para o download.
{% endhint %}

Definir os elementos customizados:

```javascript
// 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:

{% code title="App.tsx" %}

```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>
```

{% endcode %}

Lógica do SDK Provider:

{% code title="facephi-sdk-provider.ts" %}

```typescript
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);
	}
})();
```

{% endcode %}

Lógica do Widget SelphID:

{% code title="facephi-selphid-widget.ts" %}

```typescript
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);
	}
}
```

{% endcode %}

Lógica do Widget Selphi

{% code title="facephi-selphi-widget.ts" %}

```typescript
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);
	}
}
```

{% endcode %}

{% hint style="info" %}
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.
{% endhint %}

***

### 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.

***