> 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/produtos/idv-suite/flujos-and-integraciones/configuracion-tecnica-del-cliente/solucion-web/sdk-loader-idv/integracion.md).

# Integração

Este guia oferece instruções detalhadas passo a passo para instalar e integrar o SDK Loader em sua aplicação. Para uma visão geral dos conceitos e pré-requisitos, consulte o guia de [Início rápido](/docs.facephi-pt-br/produtos/idv-suite/flujos-and-integraciones/configuracion-tecnica-del-cliente/solucion-web/sdk-loader-idv/inicio-rapido.md).

## Instalação

> **Nota**: Antes de continuar, certifique-se de cumprir os [pré-requisitos](/docs.facephi-pt-br/produtos/idv-suite/flujos-and-integraciones/configuracion-tecnica-del-cliente/solucion-web/sdk-loader-idv/inicio-rapido.md) e de ter seu token de autenticação pronto.

### Configurar o registro NPM

O pacote do SDK Loader está hospedado em um repositório NPM privado. Crie um arquivo `.npmrc` na raiz do seu projeto com a seguinte configuração:

```plaintext
@facephi:registry=https://facephicorp.jfrog.io/artifactory/api/npm/sdk-web-fphi/
//facephicorp.jfrog.io/artifactory/api/npm/sdk-web-fphi/:_password=[YOUR_TOKEN]
//facephicorp.jfrog.io/artifactory/api/npm/sdk-web-fphi/:username=[YOUR_USERNAME]
//facephicorp.jfrog.io/artifactory/api/npm/sdk-web-fphi/:email=[YOUR_EMAIL]
//facephicorp.jfrog.io/artifactory/api/npm/sdk-web-fphi/:always-auth=true
```

> Substitua `[YOUR_TOKEN]`, `[YOUR_USERNAME]` e `[YOUR_EMAIL]` pelas credenciais fornecidas pela Facephi.

### Instalar o pacote

Instale o SDK Loader com seu gerenciador de pacotes preferido:

```bash
npm install @facephi/sdk-loader
```

> **Nota**: Também podem ser usados outros gerenciadores como Bun ou Yarn.

***

## Etapas de Integração

{% stepper %}
{% step %}

### Criar um elemento contêiner

Adicione um elemento contêiner no seu HTML ou componente onde o SDK será renderizado:

```html
<div id="sdk-container"></div>
```

{% endstep %}

{% step %}

### Inicializar o SDK

Importe e chame `loadSdk` com sua configuração:

```typescript
import { loadSdk } from '@facephi/sdk-loader';

const sdkElement = await loadSdk({
  apiKey: 'YOUR_APIKEY',
  containerId: 'sdk-container',
});
```

{% endstep %}

{% step %}

### Gerenciar eventos do SDK

Ouça os eventos emitidos pelo SDK:

```typescript
if (sdkElement) {
  sdkElement.addEventListener('emitIDVIntegration', (event) => {
    console.log('emitIDVIntegration:', event);
  });
}
```

Para mais opções de configuração do SDK, consulte a seção [Configuração do SDK](/docs.facephi-pt-br/produtos/idv-suite/flujos-and-integraciones/configuracion-tecnica-del-cliente/solucion-web/sdk-loader-idv/configuracion-del-sdk.md) mais abaixo.
{% endstep %}
{% endstepper %}

***

## Exemplo completo (React + Vite)

Aqui está um exemplo completo de uma integração básica com React e Vite:

**App.tsx:**

```tsx
import { useEffect } from 'react';
import { loadSdk } from '@facephi/sdk-loader';

export default function App() {
  useEffect(() => {
    const initializeSdk = async () => {
      const apiKey = import.meta.env.VITE_API_KEY || '';

      // Carregar o SDK usando o pacote sdk-loader
      // O sdk-loader carregará @facephi/sdk-web-wc a partir da CDN
      // e criará o elemento facephi-sdk-provider
      const sdkElement = await loadSdk({
        apiKey,
        containerId: 'sdk-container',
      });

      if (sdkElement) {
        // Ouvir eventos do SDK
        sdkElement.addEventListener('emitIDVIntegration', (event) => {
          console.log('emitIDVIntegration:', event);
        });
      }
    };

    initializeSdk();
  }, []);

  return (
    <main className="main">
      <section className="sdk-section">
        <div id="sdk-container" />
      </section>
    </main>
  );
}
```

***

## Servidor de desenvolvimento

Execute o servidor de desenvolvimento:

```bash
npm run dev
```

Acesse `http://localhost:3000/`. A aplicação será recarregada automaticamente se você modificar algum dos arquivos-fonte.

***

## Compilação

Gere a compilação do projeto para produção:

```bash
npm run build
```

Os artefatos da compilação serão salvos no diretório `dist/`.

***

## Integrações por framework

O SDK Loader pode ser integrado em qualquer framework moderno. Para guias específicas por framework:

* [**Integração com Next.js**](/docs.facephi-pt-br/produtos/idv-suite/flujos-and-integraciones/configuracion-tecnica-del-cliente/solucion-web/sdk-loader-idv/integrations/nextjs.md): Considerações de renderização no servidor e exemplos com App Router / Pages Router.

***

## Próximos passos

* Consulte a [Configuração do SDK](/docs.facephi-pt-br/produtos/idv-suite/flujos-and-integraciones/configuracion-tecnica-del-cliente/solucion-web/sdk-loader-idv/configuracion-del-sdk.md) para opções de configuração avançada
* Visite os [Exemplos de programação do SDK Facephi](https://github.com/facephi/sdk-web-examples) para mais exemplos de implementação