Svelte

Monte o widget num app Svelte ou SvelteKit, com o ciclo de vida preso ao componente.

Ao final deste guia o fluxo de verificação abre num app Svelte 5, montando quando o componente entra na tela e encerrando quando ele sai.

Pré-requisitos

• Node.js 20 ou superior.
• Uma sdkUrl emitida pelo seu backend, como em emitir a credencial.

Monte o fluxo

1. Carregue o SDK

   No SvelteKit, o script entra no app.html. Em Svelte puro, no index.html.

   src/app.html

   <script src="https://sdk.legitimuz.com/v1/websdk.js"></script>
   

   Antes do bundle. O script registra window.Legitimuz.

2. Declare o global

   O build de CDN não traz tipos. Reaproveite a declaração do guia de React; ela é a mesma.

3. Escreva o componente

   src/lib/VerificationWidget.svelte

   <script lang="ts">
     import { onMount } from "svelte";
     import type { LegitimuzWidgetHandle, WebSdkEvent } from "$lib/legitimuz";
   
     let { sdkUrl }: { sdkUrl: string } = $props();
   
     let container: HTMLDivElement;
     let log = $state<string[]>([]);
   
     onMount(() => {
       const handle: LegitimuzWidgetHandle = window.Legitimuz.mount({
         sdkUrl,
         target: container,
         onReady: () => log.push("ready"),
         onEvent: (event: WebSdkEvent) => log.push(`event: ${event.type}`),
         // "o fluxo terminou", não "deu certo". O desfecho chega pelo webhook.
         onComplete: (result) => log.push(`complete: ${result.status}`),
         onError: (error) => log.push(`error ${error.code}`),
       });
   
       return () => handle.destroy();
     });
   </script>
   
   <div bind:this={container} style="height: 640px"></div>
   <pre>{log.join("\n")}</pre>
   

   O retorno do onMount roda no desmonte e chama destroy(), que encerra a câmera.

4. Passe a sdkUrl pela rota

   No SvelteKit, a credencial vem do servidor pelo load. Assim ela nunca fica no bundle.

   src/routes/verificacao/+page.server.ts

   import type { PageServerLoad } from "./$types";
   
   export const load: PageServerLoad = async ({ fetch }) => {
     const resposta = await fetch("/api/verificacoes", { method: "POST" });
     const { entry } = await resposta.json();
     return { sdkUrl: entry.url };
   };
   

   src/routes/verificacao/+page.svelte

   <script lang="ts">
     import VerificationWidget from "$lib/VerificationWidget.svelte";
     let { data } = $props();
   </script>
   
   <VerificationWidget sdkUrl={data.sdkUrl} />
   

Confira que funcionou

A primeira tela aparece dentro do container e o <pre> recebe ready. Ao navegar para outra rota, o indicador de câmera do browser apaga.

Boas práticas

Monte no cliente, emita no servidor

onMount só roda no browser, então window.Legitimuz está disponível quando o componente monta. A sdkUrl vem do load do servidor, e a chave de API fica só lá.

Próximo passo

Opções do mount()

Aparência, idioma, timeout e todos os callbacks.

Testar

Rode a jornada ponta a ponta e veja a decisão chegar.