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.

Instalação

Nota: Antes de continuar, certifique-se de cumprir os pré-requisitos 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:

@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:

npm install @facephi/sdk-loader

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

---

Etapas de integração

1

Criar um elemento contêiner

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

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

2

Inicializar o SDK

Importe e chame loadSdk com sua configuração:

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

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

3

Gerenciar eventos do SDK

Escute os eventos emitidos pelo SDK:

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 mais abaixo.

---

Exemplo completo (React + Vite)

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

App.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 || '';

      // Cargar el SDK usando el paquete sdk-loader
      // El sdk-loader cargará @facephi/sdk-web-wc desde la CDN
      // y creará el elemento facephi-sdk-provider
      const sdkElement = await loadSdk({
        apiKey,
        containerId: 'sdk-container',
      });

      if (sdkElement) {
        // Escuchar eventos del 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:

npm run dev

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

---

Build

Gere o build do projeto para produção:

npm run build

Os artefatos do build 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: Considerações de renderização no servidor e exemplos com App Router / Pages Router.

---

Próximos passos

• Consulte as Configuração do SDK para opções de configuração avançada

• Visite os Exemplos de programação do SDK Facephi para mais exemplos de implementação