Nuxt

Ao final deste guia o fluxo de verificação abre num app Nuxt 3, com o componente montando só no cliente e a credencial emitida por uma rota de servidor.

Pré-requisitos

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

Monte o fluxo

Carregue o SDK

Declare o script no nuxt.config.ts. Ele entra no <head> de todas as páginas e registra window.Legitimuz antes do bundle.

nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      script: [{ src: "https://sdk.legitimuz.com/v1/websdk.js" }],
    },
  },
});

Declare o global

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

Escreva o composable

composables/useLegitimuz.ts

import type { LegitimuzWidgetHandle, MountOptions } from "~/types/legitimuz";

export type UseLegitimuzOptions = Omit<MountOptions, "target">;

export function useLegitimuz(options: UseLegitimuzOptions) {
  const containerRef = ref<HTMLDivElement | null>(null);
  let handle: LegitimuzWidgetHandle | null = null;

  onMounted(() => {
    if (!containerRef.value) return;
    handle = window.Legitimuz.mount({ ...options, target: containerRef.value });
  });

  onUnmounted(() => handle?.destroy());

  return containerRef;
}

Emita a credencial numa rota de servidor

server/api/verificacoes.post.ts

export default defineEventHandler(async (event) => {
  const usuario = await autenticar(event);
  const cadastro = await db.cadastro.porUsuario(usuario.id);

  const resposta = await $fetch<{ verification: { public_id: string }; entry: { url: string } }>(
    "https://api.legitimuz.com/public/verifications",
    {
      method: "POST",
      headers: { "X-API-Key": useRuntimeConfig().legitimuzApiKey },
      body: {
        schema_version: "1.0",
        ref_id: cadastro.id,
        document: { type: "cpf", number: cadastro.cpf },
        integration_origin_public_id: useRuntimeConfig().legitimuzOriginId,
      },
    }
  );

  await db.cadastro.vincular(cadastro.id, resposta.verification.public_id);
  return { entry: resposta.entry };
});

A chave fica em runtimeConfig, que só existe no servidor.

Use na página

pages/verificacao.vue

<script setup lang="ts">
const { data } = await useFetch("/api/verificacoes", { method: "POST" });

const log = ref<string[]>([]);
const containerRef = useLegitimuz({
  sdkUrl: data.value!.entry.url,
  onReady: () => log.value.push("ready"),
  onEvent: (event) => log.value.push(`event: ${event.type}`),
  // "o fluxo terminou", não "deu certo". O desfecho chega pelo webhook.
  onComplete: (result) => log.value.push(`complete: ${result.status}`),
});
</script>

<template>
  <ClientOnly>
    <div ref="containerRef" style="height: 640px"></div>
    <pre>{{ log.join("\n") }}</pre>
  </ClientOnly>
</template>

Confira que funcionou

A primeira tela aparece dentro do container e o <pre> recebe ready. No console do servidor não há referência a window.

Boas práticas

ClientOnly em volta do container

O widget usa window e a câmera, que só existem no browser. <ClientOnly> garante que o container renderize apenas no cliente, e o onMounted do composable encontra window.Legitimuz pronto.

Guia rápido

Desenvolvedores

Web

SDKs

Pré-requisitos

Monte o fluxo

Confira que funcionou

Boas práticas

ClientOnly em volta do container

Próximo passo

Opções do mount()

Testar

​Pré-requisitos

​Monte o fluxo

​Confira que funcionou

​Boas práticas

ClientOnly em volta do container

​Próximo passo

Opções do mount()

Testar

Pré-requisitos

Monte o fluxo

Confira que funcionou

Boas práticas

Próximo passo