Cómo añadir firmas electrónicas a tu aplicación de Base44

Las aplicaciones de Base44 gestionan procesos de negocio reales: propuestas, acuerdos de servicio, formularios de admisión, documentación de incorporación. Nada de eso se cierra limpiamente sin una firma, y Base44 no incluye ninguna. Firma.dev cubre ese vacío con una API de firma electrónica que puedes integrar en cualquier aplicación de Base44 en una tarde, no en un sprint.

Cómo funciona (sin los detalles técnicos)

Firma.dev te ofrece dos formas de conectar una aplicación de Base44, y cuál elijas dependerá de cuántas aplicaciones estés ejecutando.

Si se trata de una sola aplicación, escribes una función backend: un pequeño fragmento de TypeScript que llama a la API REST de Firma.dev para crear una solicitud de firma, enviarla y escuchar cuando vuelva la firma. Base44 mantiene tu clave de API protegida en un secreto, por lo que nunca llega al navegador.

Si ejecutas un espacio de trabajo con múltiples aplicaciones, registras Firma.dev una sola vez como una integración personalizada utilizando su especificación OpenAPI. Después de eso, cada aplicación en el espacio de trabajo puede llamar a los endpoints de Firma.dev directamente a través del SDK de Base44, sin necesidad de una función independiente por aplicación.

Cualquier camino termina de la misma manera: el firmante abre el documento, lo firma de forma incrustada directamente dentro de tu aplicación y un webhook notifica a tu backend en el momento en que se completa.

Qué necesitas primero

• Una cuenta de Firma.dev con una clave de API

• Una aplicación de Base44 en el plan Builder o superior (necesario para funciones backend e integraciones personalizadas)

• Una plantilla de Firma.dev con los campos de firma ya configurados

Vía 1: funciones backend

Esta es la ruta más flexible, y la adecuada si vas a conectar una sola aplicación.

Almacena la clave. En el editor de Base44, ve a Dashboard → Secrets, añade un nuevo secreto y nomínalo FIRMA_API_KEY. Nunca pongas la clave en el código frontend, solo las funciones backend deberían tener acceso a ella.

Escribe la función. En Dashboard → Code → Functions, crea una nueva función (o haz que el chat de IA de Base44 genere una). Este es el ejemplo exacto de la documentación de Firma.dev, que crea y envía una solicitud de firma a partir de una plantilla en una sola llamada:

import { createClientFromRequest } from "npm:@base44/sdk";

const FIRMA_API = "https://api.firma.dev/functions/v1/signing-request-api";

Deno.serve(async (req) => {
  const base44 = createClientFromRequest(req);
  const user = await base44.auth.me();

  if (!user) {
    return Response.json({ error: "Unauthorized" }, { status: 401 });
  }

  const { template_id, signer_email, signer_first_name, signer_last_name } =
    await req.json();

  const apiKey = Deno.env.get("FIRMA_API_KEY");

  // Create and send a signing request from a template in one call
  const response = await fetch(
    `${FIRMA_API}/signing-requests/create-and-send`,
    {
      method: "POST",
      headers: {
        Authorization: apiKey,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        template_id,
        recipients: [
          {
            first_name: signer_first_name,
            last_name: signer_last_name,
            email: signer_email,
            designation: "Signer",
            order: 1,
          },
        ],
      }),
    }
  );

  const data = await response.json();

  if (!response.ok) {
    return Response.json({ error: data }, { status: response.status });
  }

  return Response.json({
    signing_request_id: data.id,
    status: "sent",
  });
});

import { createClientFromRequest } from "npm:@base44/sdk";

const FIRMA_API = "https://api.firma.dev/functions/v1/signing-request-api";

Deno.serve(async (req) => {
  const base44 = createClientFromRequest(req);
  const user = await base44.auth.me();

  if (!user) {
    return Response.json({ error: "Unauthorized" }, { status: 401 });
  }

  const { template_id, signer_email, signer_first_name, signer_last_name } =
    await req.json();

  const apiKey = Deno.env.get("FIRMA_API_KEY");

  // Create and send a signing request from a template in one call
  const response = await fetch(
    `${FIRMA_API}/signing-requests/create-and-send`,
    {
      method: "POST",
      headers: {
        Authorization: apiKey,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        template_id,
        recipients: [
          {
            first_name: signer_first_name,
            last_name: signer_last_name,
            email: signer_email,
            designation: "Signer",
            order: 1,
          },
        ],
      }),
    }
  );

  const data = await response.json();

  if (!response.ok) {
    return Response.json({ error: data }, { status: response.status });
  }

  return Response.json({
    signing_request_id: data.id,
    status: "sent",
  });
});

import { createClientFromRequest } from "npm:@base44/sdk";

const FIRMA_API = "https://api.firma.dev/functions/v1/signing-request-api";

Deno.serve(async (req) => {
  const base44 = createClientFromRequest(req);
  const user = await base44.auth.me();

  if (!user) {
    return Response.json({ error: "Unauthorized" }, { status: 401 });
  }

  const { template_id, signer_email, signer_first_name, signer_last_name } =
    await req.json();

  const apiKey = Deno.env.get("FIRMA_API_KEY");

  // Create and send a signing request from a template in one call
  const response = await fetch(
    `${FIRMA_API}/signing-requests/create-and-send`,
    {
      method: "POST",
      headers: {
        Authorization: apiKey,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        template_id,
        recipients: [
          {
            first_name: signer_first_name,
            last_name: signer_last_name,
            email: signer_email,
            designation: "Signer",
            order: 1,
          },
        ],
      }),
    }
  );

  const data = await response.json();

  if (!response.ok) {
    return Response.json({ error: data }, { status: response.status });
  }

  return Response.json({
    signing_request_id: data.id,
    status: "sent",
  });
});

Si prefieres revisar una solicitud antes de que se envíe, la documentación de Firma.dev indica la alternativa: POST /signing-requests para crear un borrador, y luego POST /signing-requests/{id}/send por separado.

Conéctalo a la interfaz de usuario. Llama a la función desde el frontend con el SDK de Base44:

import { base44 } from "@/api/base44Client";

const response = await base44.functions.invoke("sendSigningRequest", {
  template_id: "your-template-id",
  signer_email: "alice@example.com",
  signer_first_name: "Alice",
  signer_last_name: "Johnson",
});

import { base44 } from "@/api/base44Client";

const response = await base44.functions.invoke("sendSigningRequest", {
  template_id: "your-template-id",
  signer_email: "alice@example.com",
  signer_first_name: "Alice",
  signer_last_name: "Johnson",
});

import { base44 } from "@/api/base44Client";

const response = await base44.functions.invoke("sendSigningRequest", {
  template_id: "your-template-id",
  signer_email: "alice@example.com",
  signer_first_name: "Alice",
  signer_last_name: "Johnson",
});

O simplemente dile al chat de IA de Base44 lo que quieres: "Cuando el usuario haga clic en 'Enviar contrato', llama a la función sendSigningRequest con el ID de la plantilla, el correo electrónico del firmante y el nombre del formulario".

Realiza el seguimiento de las firmas completadas con un webhook. Crea una función backend para recibir el evento, luego regístrala en Firma.dev bajo Settings → Webhooks, apuntando a https://<dominio-de-tu-app>/functions/<nombre-de-la-función>.

import { createClientFromRequest } from "npm:@base44/sdk";

Deno.serve(async (req) => {
  const base44 = createClientFromRequest(req);
  const payload = await req.json();
  const { type, data } = payload;

  if (type === "signing_request.completed") {
    const signingRequestId = data.signing_request.id;

    // Update your app's database or trigger the next step
    // in your workflow using the Base44 entities SDK
  }

  return Response.json({ received: true });
});

import { createClientFromRequest } from "npm:@base44/sdk";

Deno.serve(async (req) => {
  const base44 = createClientFromRequest(req);
  const payload = await req.json();
  const { type, data } = payload;

  if (type === "signing_request.completed") {
    const signingRequestId = data.signing_request.id;

    // Update your app's database or trigger the next step
    // in your workflow using the Base44 entities SDK
  }

  return Response.json({ received: true });
});

import { createClientFromRequest } from "npm:@base44/sdk";

Deno.serve(async (req) => {
  const base44 = createClientFromRequest(req);
  const payload = await req.json();
  const { type, data } = payload;

  if (type === "signing_request.completed") {
    const signingRequestId = data.signing_request.id;

    // Update your app's database or trigger the next step
    // in your workflow using the Base44 entities SDK
  }

  return Response.json({ received: true });
});

Vía 2: integración de OpenAPI a nivel de espacio de trabajo

¿Ejecutas más de una aplicación de Base44? Configura esto una vez y cada aplicación en el espacio de trabajo lo heredará.

Desde tu icono de perfil, ve a Settings → Integrations → New Integration → From URL, y pega la URL de la especificación OpenAPI de Firma.dev (consulta el registro de cambios de la API de Firma.dev para ver la versión actual). Elige los endpoints que necesites, hasta 30, comúnmente:

• POST /signing-requests — crea una solicitud de firma a partir de una plantilla o documento

• POST /signing-requests/create-and-send — crea y envía en una sola llamada

• GET /signing-requests/{id} — comprueba el estado

• GET /signing-requests — enumera las solicitudes de firma

• POST /templates/{id}/duplicate — duplica una plantilla en una solicitud de firma

• GET /templates — enumera las plantillas disponibles

Para la autenticación, establece la URL base en https://api.firma.dev/functions/v1/signing-request-api, luego añade una cabecera personalizada llamada Authorization con tu clave de API de Firma.dev como valor. Base44 la cifra y almacena a nivel de espacio de trabajo, nunca llega al navegador.

A partir de ahí, cualquier aplicación llama directamente a Firma.dev:

const result = await base44.integrations.custom.call(
  "firma",
  "post:/signing-requests/create-and-send",
  {
    payload: {
      template_id: templateId,
      recipients: [
        {
          first_name: "Alice",
          last_name: "Johnson",
          email: "alice@example.com",
          designation: "Signer",
          order: 1,
        },
      ],
    },
  }
);

const result = await base44.integrations.custom.call(
  "firma",
  "post:/signing-requests/create-and-send",
  {
    payload: {
      template_id: templateId,
      recipients: [
        {
          first_name: "Alice",
          last_name: "Johnson",
          email: "alice@example.com",
          designation: "Signer",
          order: 1,
        },
      ],
    },
  }
);

const result = await base44.integrations.custom.call(
  "firma",
  "post:/signing-requests/create-and-send",
  {
    payload: {
      template_id: templateId,
      recipients: [
        {
          first_name: "Alice",
          last_name: "Johnson",
          email: "alice@example.com",
          designation: "Signer",
          order: 1,
        },
      ],
    },
  }
);

Pídele al chat de IA de Base44 que conecte las llamadas de Firma.dev aquí también, detectará la integración del espacio de trabajo y la usará por su cuenta.

Firma incrustada

Para aplicaciones donde quieras que el firmante complete el documento sin salir de tu interfaz de usuario, extrae el signing_request_user_id de la respuesta de la API y cárgalo en un iframe:

<iframe
  src="https://app.firma.dev/signing/{signing_request_user_id}"
  style="width:100%;height:900px;border:0;"
  allow="camera;microphone;clipboard-write"
  title="Document Signing"
></iframe>

<iframe
  src="https://app.firma.dev/signing/{signing_request_user_id}"
  style="width:100%;height:900px;border:0;"
  allow="camera;microphone;clipboard-write"
  title="Document Signing"
></iframe>

<iframe
  src="https://app.firma.dev/signing/{signing_request_user_id}"
  style="width:100%;height:900px;border:0;"
  allow="camera;microphone;clipboard-write"
  title="Document Signing"
></iframe>

Qué obtienes listo para usar

Cada solicitud de firma creada de esta manera hereda el producto real de Firma.dev, no un wrapper de API simplificado: un editor de plantillas incrustable para crear documentos, Espacios de Trabajo de Clientes si ejecutas una aplicación multiinquilino de Base44 y validez legal en más de 55 países bajo SES y AES (alineado con eIDAS; Firma.dev aún no ofrece QES).

Los precios tienen sentido para los desarrolladores

Las aplicaciones de Base44 suelen estar en fase inicial, lo que hace que las herramientas de firma por puesto no sean adecuadas antes de tener un equipo completo. Firma.dev cobra por sobre en su lugar: 0,049 € (~5 ¢), pago por uso, sin mínimo mensual ni contrato. Frente a los precios por usuario de DocuSign, esto es entre un 97 % y un 99 % más barato para cualquier volumen que puedas alcanzar mientras desarrollas.

Envía esto a tu desarrollador (o hazlo tú mismo)

Ambas vías anteriores se pueden copiar y pegar, y la mayoría de los desarrolladores de Base44 tendrán esto funcionando en menos de una hora. Si quieres que el chat de IA haga la integración, dirígelo a la guía de integración de Base44 de Firma.dev y podrá generar las funciones directamente. Firma.dev también tiene un servidor MCP de Docs que puedes añadir bajo Account Settings → MCP Connections para que el chat de IA pueda obtener detalles precisos de la API mientras desarrollas.

Empieza a usar Firma.dev gratis, sin necesidad de tarjeta de crédito.