Tutorial: Integrar de forma segura el visor Doconut con React – De extremo a extremo
← Back to Blog7 min read

Tutorial: Integrar de forma segura el visor Doconut con React – De extremo a extremo

Integrar un visor de documentos de forma segura requiere más que copiar un fragmento de middleware en una aplicación ASP.NET Core. La integración debe definir límites claros para la autenticación, el acceso a documentos, la gestión de sesiones, la renderización, las anotaciones, la búsqueda, la impresión y el registro de auditoría.

Las empresas que construyen portales centrados en documentos —como DMS, CRM, revisión legal o aplicaciones de dibujos de ingeniería— también necesitan mantener los archivos originales detrás del límite de la aplicación. Doconut admite un modelo de visualización del lado del servidor para documentos PDF, Office, CAD e imágenes, mientras que un front‑end React puede proporcionar la interfaz de usuario.

Este tutorial se centra en una arquitectura confiable y evita deliberadamente nombres de paquetes, propiedades de opciones, firmas de métodos y rutas de endpoints que pueden variar entre versiones del SDK. Utilice la documentación oficial que coincida con su versión licenciada para los detalles exactos de registro y API.

Arquitectura segura del visor de documentos que conecta una interfaz React, la capa de servicio ASP.NET Core y el procesamiento protegido de documentos
Arquitectura segura del visor de documentos que conecta una interfaz React, la capa de servicio ASP.NET Core y el procesamiento protegido de documentos

1️⃣ Paso 1 – Preparar los proyectos ASP.NET Core y React

Antes de escribir cualquier código, asegúrese de que su entorno de desarrollo cumpla con los requisitos básicos:

RequisitoVersión recomendada
Entorno de ejecución .NET.NET 6 o posterior
ASP.NET Core6.0+
IDEUn entorno de desarrollo .NET compatible
Front‑end (opcional)Una aplicación React compatible con su proyecto
  1. Crear un nuevo proyecto ASP.NET Core Web API
 dotnet new webapi -n DocPortal
 cd DocPortal
  1. Agregar las dependencias licenciadas de Doconut – Obtenga los nombres exactos de los paquetes, versiones, dependencias nativas e instrucciones de carga de licencias de la documentación oficial de su versión de Doconut. No asuma que un paquete o wrapper mostrado en un tutorial no relacionado se aplique a su versión.

  2. Preparar la aplicación React – Si el visor se presentará a través de React, use la configuración del front‑end ya aprobada por su equipo. Mantenga la aplicación React dependiente de su propia API autenticada en lugar de wrappers de terceros no documentados.

  3. Confirmar el estado inicial – La mayoría de los equipos empresariales aplican una política de Git que requiere un commit firmado para cualquier cambio que afecte la licencia o la configuración de seguridad.

Ahora tiene una solución limpia lista para la integración del servidor Doconut documentada.


2️⃣ Paso 2 – Configurar la integración del servidor de forma segura

Registre el visor utilizando las instrucciones suministradas para la versión exacta de Doconut en su proyecto. El orden del middleware, los registros de servicios, la inicialización de licencias y los nombres de propiedades de configuración son detalles específicos de la versión y no deben copiarse de ejemplos no verificados.

Independientemente de la versión del SDK, la aplicación ASP.NET Core circundante debe aplicar estos controles:

  • Autenticar antes de abrir un documento – Una sesión del visor nunca debe eludir la capa de identidad de la aplicación.
  • Resolver los identificadores de documentos en el servidor – Aceptar un ID de documento a nivel de aplicación, no una ruta física arbitraria suministrada por el navegador.
  • Autorizar cada operación – La visualización, anotación, búsqueda, descarga e impresión pueden requerir permisos diferentes.
  • Mantener los secretos fuera del control de versiones – Almacene licencias, cadenas de conexión y material de cifrado en el mecanismo de gestión de secretos aprobado.
  • Aplicar límites de solicitud – Establezca límites apropiados de carga, tamaño de documento, tiempo de espera y tasa alrededor del flujo de trabajo del visor.
  • Registrar eventos de seguridad – Registre decisiones de acceso y acciones sobre documentos sin escribir el contenido de los documentos o tokens sensibles en los logs.

Trate todas las configuraciones del SDK como configuración versionada. Confirme su significado en la referencia oficial antes de habilitarlas en producción.


3️⃣ Paso 3 – Aislar sesiones de documentos detrás de un servicio de aplicación

Mantenga las interacciones específicas de Doconut dentro de un servicio de aplicación dedicado. Las referencias a una clase Viewer son útiles a nivel arquitectónico, pero las firmas de constructores, los métodos de apertura de documentos, los requisitos de caché y el comportamiento de descubrimiento de licencias deben provenir de la documentación de la versión instalada.

Un límite de servicio seguro debe:

  1. Recibir un usuario autenticado y un identificador de documento a nivel de aplicación.
  2. Verificar el permiso del usuario para la acción solicitada.
  3. Resolver el documento desde un almacenamiento del lado del servidor aprobado.
  4. Solicitar a la API del visor documentada que establezca una sesión de documento.
  5. Devolver solo la información mínima y opaca de la sesión requerida por el cliente.
  6. Liberar o expirar sesiones de acuerdo con sus políticas de retención y caché.

El navegador nunca debe recibir una ruta de almacenamiento física, datos de licencia, clave de caché interna o referencia sin restricciones al documento original.


4️⃣ Paso 4 – Habilitar anotaciones, búsqueda e impresión controlada

Las anotaciones, la búsqueda, OCR y la impresión controlada deben habilitarse solo cuando estén incluidas en su configuración licenciada de Doconut y sean compatibles con la versión instalada. Evite asumir nombres de métodos, formatos de persistencia o clases de opciones.

  • Anotaciones – Decida qué roles pueden crear, editar, ver o eliminar marcas. Almacene el estado de las anotaciones de acuerdo con la guía de persistencia de su versión del SDK y sus propios requisitos de auditoría.
  • Búsqueda y OCR – Establezca qué tipos de documentos requieren OCR, dónde se conserva el texto extraído y cuánto tiempo permanecen disponibles los índices. Trate los resultados de búsqueda como datos de documentos y autorícelos en consecuencia.
  • Impresión controlada – Defina límites de páginas, política de marcas de agua, reglas de aprobación y eventos de auditoría a nivel de aplicación, y luego mapee esos requisitos a las capacidades de impresión documentadas.

Mantenga estas operaciones detrás del mismo servicio de aplicación utilizado para las sesiones de documentos, de modo que los controladores permanezcan ligeros y las reglas de negocio sean testeables.


5️⃣ Paso 5 – Conectar el front‑end React

La aplicación React debe llamar a su API ASP.NET Core autenticada en lugar de aceptar rutas de almacenamiento o conectarse directamente a servicios internos de documentos. Defina su propio contrato API orientado a recursos alrededor de acciones de negocio y evite publicar nombres de endpoints específicos del SDK como parte del contrato público del cliente.

Una secuencia típica de interacción es:

  1. El usuario selecciona un documento ya visible en la aplicación.
  2. React solicita una sesión de visualización usando el ID de aplicación del documento.
  3. ASP.NET Core autentica la solicitud, autoriza el documento y coordina la sesión del visor.
  4. React recibe solo la información necesaria para mostrar el visor.
  5. Las solicitudes de anotación, búsqueda e impresión regresan a través de la API de aplicación autenticada.
  6. El servidor registra eventos de auditoría y expira la sesión cuando sea apropiado.

En la UI de React, mantenga el estado de la sesión de corta duración, maneje explícitamente los fallos de autorización, evite colocar valores sensibles en el almacenamiento persistente del navegador y proporcione estados de carga y error que no revelen rutas internas ni detalles de excepciones.

Esta separación mantiene la renderización y los controles de documentos en el servidor mientras React sigue siendo responsable de la presentación e interacción.


Conclusión

Al colocar la integración de Doconut detrás de un servicio de aplicación ASP.NET Core seguro, puede crear un portal de documentos para flujos de trabajo de PDF, Office, CAD e imágenes sin acoplar la interfaz React a detalles no documentados del SDK. La autenticación, autorización, ciclo de vida de la sesión, búsqueda, anotación, impresión y política de auditoría siguen siendo partes explícitas del diseño de su aplicación.

¿Listo para evaluar Doconut para su proyecto .NET? Utilice el paquete oficial, la licencia y la documentación API de la versión seleccionada, luego aplique la arquitectura y la lista de verificación de seguridad anterior a su implementación.

#Doconut#.NET#document viewer#React#enterprise development#visor de documentos#desarrollo empresarial