> ## Documentation Index
> Fetch the complete documentation index at: https://docs.markpdf.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# Guía marco: proteger la clave API

> Por qué Angular necesita un backend intermediario y cómo estructurarlo.

# 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.

<Warning>
  `@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.
</Warning>

## 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:

```ts app.config.ts theme={null}
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](/docs/public/es/sdks/nodejs/installation) (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`)

```ts server/routes/markpdf.ts theme={null}
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

```ts app.config.ts theme={null}
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

```ts app.config.ts theme={null}
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](/docs/public/es/sdks/angular/error-handling).

## 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:

```ts app.config.ts theme={null}
provideHttpClient(
  withInterceptors([authTokenInterceptor, markpdfErrorInterceptor])
);
```

<Tip>
  Este patrón (sin interfaz secreta → backend propio con clave API → API pública) es el mismo que [Next.js](/docs/public/es/sdks/nextjs/framework-guide) 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.
</Tip>