> ## Documentation Index
> Fetch the complete documentation index at: https://docs-platform.services-valid.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Instalação

> Carregue o LivenessFacetecSDK Web via CDN com uma única tag de script

O `LivenessFacetecSDK` Web é distribuído **exclusivamente via CDN**. Você adiciona **uma única tag** `<script>` à sua aplicação e o SDK injeta dinamicamente o `FaceTecSDK.js` da FaceTec a partir de um bucket público hospedado pela Valid.

## Visão geral

<CardGroup cols={2}>
  <Card title="Integração com uma tag" icon="code">
    Carregue o SDK pelo CDN
  </Card>

  <Card title="B2B by design" icon="shield-check">
    A `x-api-key` nunca toca o navegador — vive no seu backend
  </Card>

  <Card title="Customização completa" icon="palette">
    Locales pt-BR/en-US, paleta de cores e textos editáveis
  </Card>

  <Card title="HMAC automático" icon="lock">
    Assinatura HMAC-SHA256 das capturas é feita pelo SDK
  </Card>
</CardGroup>

## Requisitos

| Requisito           | Descrição                                                                                                          |
| ------------------- | ------------------------------------------------------------------------------------------------------------------ |
| **HTTPS**           | Obrigatório em produção. A API `getUserMedia` exige contexto seguro. `localhost` é permitido para desenvolvimento. |
| **Navegadores**     | Chrome 60+, Firefox 55+, Safari 14.1+, Edge 79+. Necessita `WebCrypto`, `fetch` e `getUserMedia`.                  |
| **Câmera**          | Câmera acessível pelo navegador.                                                                                   |
| **Backend próprio** | Endpoint server-side que chama [`POST /api/v1/sessions`](/plataforma/liveness/facetec/servico) com `x-api-key`.    |

## Instalação via CDN

O SDK é distribuído exclusivamente via CDN. Não há pacote npm público.

```html Versão produção theme={"theme":"catppuccin-latte"}
<script src="https://cdn.hub-liveness-service.app/facetec/latest/prd/facetec-sdk.js"></script>
```

## Verificando o carregamento

Depois do carregamento, o objeto `LivenessFacetecSDK` está disponível globalmente:

```javascript theme={"theme":"catppuccin-latte"}
if (typeof window.LivenessFacetecSDK !== 'undefined') {
  console.log('LivenessFacetecSDK carregado:', window.LivenessFacetecSDK.SDK_VERSION);
} else {
  console.error('Falha ao carregar o SDK');
}
```

## Estrutura HTML mínima

```html theme={"theme":"catppuccin-latte"}
<!doctype html>
<html>
  <head>
    <script src="https://cdn.hub-liveness-service.app/facetec/latest/prd/facetec-sdk.js"></script>
  </head>
  <body>
    <div id="camera-container""></div>
  </body>
</html>
```

O elemento `#camera-container` é onde o SDK renderiza a UI do FaceTec.

## Backend obrigatório

O SDK **não embarca a `x-api-key`**. Você precisa expor um endpoint no seu backend que chame `POST /api/v1/sessions` na Plataforma ID e devolva apenas os tokens de sessão ao cliente.

<Warning>
  **Nunca exponha a `x-api-key` no navegador.** Mesmo ofuscada, qualquer chave embarcada no bundle JS pode ser extraída por DevTools. Veja [Serviço](/plataforma/liveness/facetec/servico) para o fluxo recomendado.
</Warning>

Exemplo mínimo (Node.js / Express):

```javascript theme={"theme":"catppuccin-latte"}
import crypto from 'node:crypto';
import express from 'express';

const app = express();
app.use(express.json());

app.post('/api/create-session', async (req, res) => {
  const { visitorId, eventId, maxAttempts } = req.body;

  const r = await fetch('https://facetec.hub-liveness-service.app/api/v1/sessions', {
    method: 'POST',
    headers: {
      'x-api-key': process.env.PLATFORM_ID_API_KEY,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      clientRequestId: crypto.randomUUID(),
      visitorId,
      eventId,
      maxAttempts, // opcional — número máximo de capturas na sessão (1–5, default 3)
    }),
  });

  if (!r.ok) return res.status(r.status).json(await r.json());

  const session = await r.json();
  res.json({
    sessionId: session.sessionId,
    sessionToken: session.sessionToken,
    facetecSessionToken: session.facetecSessionToken,
  });
});

app.listen(8080);
```

## Próximos passos

<CardGroup cols={2}>
  <Card title="Implementação" icon="code" href="/plataforma/liveness/facetec/sdk/web/implementacao">
    Inicialize o SDK e dispare uma verificação de liveness
  </Card>

  <Card title="Customização" icon="palette" href="/plataforma/liveness/facetec/sdk/web/customizacao">
    Personalize cores, textos e idioma da UI
  </Card>

  <Card title="Solução de problemas" icon="wrench" href="/plataforma/liveness/facetec/sdk/web/troubleshooting">
    Hierarquia de erros e diagnóstico
  </Card>

  <Card title="Serviço" icon="server" href="/plataforma/liveness/facetec/servico">
    Contrato HTTP do backend que emite os tokens
  </Card>
</CardGroup>
