Documentação

Instalação e configuração

Configure o SDK uma única vez no seu app e use os componentes em qualquer página cliente.

1. Instale o pacote

npm install techface-sdk

2. Importe o CSS global

O SDK depende de estilos próprios (incluindo os do detector de liveness). Importe o CSS no layout raiz do seu app (ou no _app.tsx em Pages Router). Em Next.js App Router, prefira o app/layout.tsx para garantir a ordem correta com o CSS do seu projeto:

app/layout.tsx

import "./globals.css";
import "techface-sdk/styles.css";

3. Configure a apiKey

Obtenha sua chave em Chaves de API e configure antes de renderizar qualquer componente do SDK:

providers/TechfaceProvider.tsx

"use client";

import { Techface } from "techface-sdk";

Techface.configure({ apiKey: process.env.NEXT_PUBLIC_TECHFACE_API_KEY! });

Nunca exponha a apiKey em repositórios públicos. Em Next.js, use NEXT_PUBLIC_* apenas se o SDK rodar no navegador — o que é o caso dos componentes de verificação. Restrinja domínios autorizados na chave quando possível (veja Autenticação).

4. Next.js App Router

Todos os componentes do SDK usam APIs do navegador (câmera, fetch). Envolva-os em arquivos com a diretiva "use client":

app/verificacao/page.tsx

"use client";

import { FaceMatchCheck } from "techface-sdk";

export default function VerificacaoPage() {
  return (
    <FaceMatchCheck
      liveness
      referenceImage={{ url: "https://exemplo.com/documento.jpg" }}
      onResult={(result) => console.log(result.approved)}
      onError={(error) => console.error(error.code, error.message)}
    />
  );
}

5. React (Vite, CRA, etc.)

O setup é o mesmo: importe o CSS no entry point, chame Techface.configure() antes do primeiro uso e renderize os componentes normalmente.

src/main.tsx

import "techface-sdk/styles.css";
import { Techface } from "techface-sdk";

Techface.configure({ apiKey: import.meta.env.VITE_TECHFACE_API_KEY });

// … render do App

Variáveis de ambiente sugeridas

.env.local

# Next.js
NEXT_PUBLIC_TECHFACE_API_KEY=tf_live_sua_chave_aqui

# Vite
VITE_TECHFACE_API_KEY=tf_live_sua_chave_aqui