Vue

npm i @constaia/widget

import express from "express";
import multer from "multer";
import { Constaia, ConstaiaError, InvalidRequestError } from "@constaia/sdk";

const constaia = new Constaia({ apiKey: process.env.CONSTAIA_API_KEY });
const upload = multer({ storage: multer.memoryStorage(), limits: { fileSize: 20 * 1024 * 1024 } });
const app = express();

app.post("/api/constaia", upload.single("file"), async (req, res) => {
  if (!req.file) return res.status(400).json({ error: { message: "Falta el archivo." } });
  try {
    const analysis = await constaia.analyze(req.file.buffer, {
      filename: req.file.originalname,
      expect: "es_dni",
      checks: { notExpired: true, minAgeYears: 18 },
    });
    res.status(analysis.status === "completed" ? 200 : 202).json(analysis);
  } catch (err) {
    if (err instanceof InvalidRequestError) return res.status(err.status ?? 400).json({ error: { message: err.message } });
    console.error(err instanceof ConstaiaError ? err.requestId : "", err);
    res.status(502).json({ error: { message: "No se ha podido verificar el documento. Inténtalo de nuevo." } });
  }
});

app.listen(3000);

import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: { isCustomElement: (tag) => tag.startsWith("constaia-") },
      },
    }),
  ],
  server: {
    proxy: { "/api": "http://localhost:3000" },
  },
});

<script setup lang="ts">
import { ConstaiaUpload } from "@constaia/widget/vue";
import type { Analysis, WidgetErrorDetail, WidgetStatus } from "@constaia/widget/vue";
import { ref } from "vue";

const upload = ref<{ reset: () => void } | null>(null);
const verdict = ref<string | null>(null);
const status = ref<WidgetStatus>("idle");

function onResult(analysis: Analysis) {
  verdict.value = analysis.verdict?.status ?? null;
}

function onError(error: WidgetErrorDetail) {
  console.warn(error.code, error.message);
}

function retry() {
  upload.value?.reset();
  verdict.value = null;
}
</script>

<template>
  <h1>Verifica tu DNI</h1>
  <ConstaiaUpload
    ref="upload"
    endpoint="/api/constaia"
    document="es_dni"
    lang="es"
    @result="onResult"
    @error="onError"
    @status="(s: WidgetStatus) => (status = s)"
  />
  <p v-if="status === 'analyzing'">Analizando…</p>
  <a v-if="verdict === 'valid'" href="/registro/datos">Continuar</a>
  <p v-else-if="verdict === 'review'">No se lee bien. Haz otra foto con buena luz y sin reflejos.</p>
  <button v-else-if="verdict === 'invalid'" type="button" @click="retry">Probar con otro documento</button>
</template>

import { ConstaiaPlugin } from "@constaia/widget/vue";
import { createApp } from "vue";
import App from "./App.vue";

createApp(App).use(ConstaiaPlugin).mount("#app");

<script setup lang="ts">
import type { Analysis } from "@constaia/widget/vue";
import { ref } from "vue";

const verdict = ref<string | null>(null);

function onResult(event: Event) {
  verdict.value = (event as CustomEvent<Analysis>).detail.verdict?.status ?? null;
}
</script>

<template>
  <constaia-upload endpoint="/api/constaia" document="es_dni" lang="es" @constaia:result="onResult" />
  <p v-if="verdict">Resultado: {{ verdict }}</p>
</template>