> 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/componentes/guia-rapida.md).

# Guia rápida

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.

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

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

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

***

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

```typescript
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](/docs.facephi-pt-br/sdks/sdk-web/frameworks-y-samples.md).

***

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

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

{% hint style="info" %}
**Nota**: Esse processo pode ser necessário, sobretudo se forem utilizados serviços de *antispoofing* (Prevenção de falsificação de identidade).
{% endhint %}

***

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