Guía del marco: proteger la clave API

Angular es un marco frontend: todo el código de su aplicación se descarga y ejecuta en el navegador del usuario. Cualquier valor incluido en el paquete, incluida una clave API configurada como constante o environment.ts, es visible para cualquiera que abra las herramientas de desarrollo o inspeccione el tráfico de la red.

@markpdf/angular nunca debe configurarse con su API tecla Flash PDF real para Markdown apuntando directamente a https://api.markpdf.tech. Siempre pasa por su propio backend que almacena la clave del lado del servidor.

Arquitectura recomendada

Angular (navegador)  →  tu backend (Node/Nest/.NET/Django/...)  →  API de Flash PDF to Markdown
     without API key            API key in environment variable            vavalidates x-api-key

MarkpdfService está configurado con baseUrl apuntando a tu backend, no al API público:

app.config.ts

provideMarkpdf({ baseUrl: "/api/markpdf" }); // ruta relativa de TU backend

Su backend expone esa ruta y reenvía la solicitud al API real usando el SDK de Node.js (u otro SDK si su backend no es Node) con la clave guardada como secreto del servidor.

Ejemplo de backend de proxy (Express + `@markpdf/sdk`)

server/routes/markpdf.ts

import { Router } from "express";
import multer from "multer";
import { MarkpdfClient } from "@markpdf/sdk";

const router = Router();
const upload = multer();
const client = new MarkpdfClient({ apiKey: process.env.MARKPDF_API_KEY! });

router.post("/api/markpdf/convert", upload.single("file"), async (req, res) => {
  try {
    const markdown = await client.convertFile(req.file!.buffer, {
      filename: req.file!.originalname,
      mode: (req.query.mode as string) || "fast",
    });
    res.type("text/markdown").send(markdown);
  } catch (err: any) {
    res.status(err.statusCode ?? 502).json({ error: err.detail ?? String(err) });
  }
});

export default router;

Angular llama a /api/markpdf/convert, su backend Express llama al API real. El navegador nunca ve YOUR_API_KEY.

Configura `MarkpdfService` para hablar con tu backend

app.config.ts

import { provideMarkpdf } from "@markpdf/angular";

provideMarkpdf({
  baseUrl: "/api/markpdf",     // or "https://your-backend.com/api/markpdf" in production
  convertPath: "/convert",      // ruta relativa dentro de baseUrl, default "/convert"
  withCredentials: true,        // si tu backend usa cookies de sesión para autenticar al user
});

MarkpdfService construye internamente solicitudes HttpClient normales; puede combinarlas con los interceptores de autenticación propios de su aplicación (JWT, cookies de sesión) como cualquier otro servicio Angular HTTP.

Interceptor de errores

app.config.ts

import { provideHttpClient, withInterceptors } from "@angular/common/http";
import { markpdfErrorInterceptor } from "@markpdf/angular";

provideHttpClient(withInterceptors([markpdfErrorInterceptor]));

markpdfErrorInterceptor normaliza las respuestas de error de su backend (siempre que reenvíe status y el cuerpo { error: string } como en el ejemplo Express anterior) a instancias de MarkpdfClientError, consistentes con las documentadas por Manejo de errores.

Autenticar al usuario final contra su backend

MarkpdfService no administra las sesiones de los usuarios; eso es responsabilidad de su propia aplicación. Combínalo con tu interceptor de autenticación habitual:

app.config.ts

provideHttpClient(
  withInterceptors([authTokenInterceptor, markpdfErrorInterceptor])
);

Este patrón (sin interfaz secreta → backend propio con clave API → API pública) es el mismo que Next.js recomienda para los controladores de ruta, solo que en Angular el “backend propio” es explícitamente un servicio separado en lugar de estar integrado en el mismo proyecto.

Python

Node.js / TypeScript

C++

Next.js

Angular

React

React Native

Svelte

Bun

Flutter

Java

Kotlin

Guía marco: proteger la clave API

Guía del marco: proteger la clave API

Arquitectura recomendada

Ejemplo de backend de proxy (Express + `@markpdf/sdk`)

Configura `MarkpdfService` para hablar con tu backend

Interceptor de errores

Autenticar al usuario final contra su backend

​Guía del marco: proteger la clave API

​Arquitectura recomendada

​Ejemplo de backend de proxy (Express + @markpdf/sdk)

​Configura MarkpdfService para hablar con tu backend

​Interceptor de errores

​Autenticar al usuario final contra su backend

Guía del marco: proteger la clave API

Arquitectura recomendada

Ejemplo de backend de proxy (Express + `@markpdf/sdk`)

Configura `MarkpdfService` para hablar con tu backend

Interceptor de errores

Autenticar al usuario final contra su backend