Una guía para mostrar archivos PDF protegidos con contraseña en una aplicación web

Los archivos PDF se utilizan ampliamente en entornos comerciales, lo que hace que su seguridad sea un aspecto crucial de numerosos flujos de trabajo. Al desarrollar una aplicación web que implique abrir archivos PDF, es probable que encuentre documentos protegidos con contraseña. Sin embargo, implementar esta funcionalidad desde cero puede llevar mucho tiempo e incurrir en costos de mantenimiento significativos, que podrían no alinearse con la hoja de ruta actual de su equipo.

con Foxit Biblioteca PDF JavaScript , presentar archivos PDF en una aplicación basada en navegador se convierte en una tarea sencilla. En este tutorial paso a paso, aprenderá cómo configurar una aplicación Node que aprovecha el poder de Foxit PDF SDK para Web. Esta integración le permite abrir sin esfuerzo archivos PDF protegidos con contraseña directamente en el navegador, otorgando a los usuarios autorizados la posibilidad de obtener una vista previa de los documentos. Para aquellos que prefieran saltarse el tutorial y acceder a una versión completamente funcional de la aplicación, pueden encontrarla fácilmente disponible en GitHub .

Creación de una aplicación web para mostrar archivos PDF protegidos con contraseña

HTML proporciona prácticas funciones integradas de carga de archivos que permiten a los usuarios interactuar con archivos desde sus máquinas locales dentro del navegador. Sin embargo, mostrar archivos PDF usando JavaScript puede ser un poco más complicado, especialmente cuando se trata de protección con contraseña. En este completo tutorial, construirá una aplicación web que comprende un formulario de carga de PDF y un campo de contraseña opcional. Cuando se carga un PDF protegido con contraseña y se ingresa la contraseña correcta, los usuarios podrán obtener una vista previa del archivo sin problemas. Por otro lado, si se proporciona una contraseña incorrecta, se mostrará un mensaje de error que solicitará a los usuarios que vuelvan a intentarlo.

Para desarrollar esta aplicación, utilizará el Expresar framework web para desarrollo backend, CSS puro con fines de estilo, y SDK PDF de Foxit para integrar la funcionalidad PDF.

requisitos previos

• NodoJS versión 8+ y MNP versión 5+
• Foxit PDF SDK para Web ( la descarga de prueba gratuita está disponible aquí )
• Su clave de licencia y número de serie de Foxit

Creación de una nueva aplicación Express

El generador Express facilita la configuración de una nueva aplicación. Simplemente ejecute el siguiente comando en su terminal:

 npx express-generator --git --view=hbs

Este comando creará una nueva aplicación con un archivo .gitignore y archivos de plantilla de Handlebars .

Agregue el paquete dotenv npm (úselo para acceder a su clave de licencia y número de serie de Foxit) e instale las dependencias de Express:

 npm i dotenv && npm i

Después de descargar Foxit PDF SDK for Web, encontrará su clave de licencia y número de serie en el archivo examples/license-key.js . Luego, cree un nuevo archivo en el directorio raíz de su aplicación web llamado .env y agregue los dos valores:

 LICENSE_SN="" LICENSE_KEY=""

Copie la biblioteca de Foxit en su aplicación web para que pueda acceder a ella desde el front-end. A continuación, copie el directorio lib/ de Foxit PDF SDK que descargó y péguelo en el directorio public/ de su aplicación web. Ahora la biblioteca PDF de JavaScript de Foxit estará disponible en su aplicación web.

Por último, no desea que la información confidencial o los paquetes propietarios terminen en el control de versiones, así que agregue lo siguiente a su archivo .gitignore :

 ... public/lib/ .env

Una vez que su aplicación web tenga todas las dependencias necesarias, puede proceder a crear la ruta responsable de mostrar la vista previa de PDF usando Foxit.

Configuración de la ruta

Cada página de una aplicación Express tiene una ruta, incluida la página de carga de PDF que creará en esta demostración. Actualice el archivo routes/index.js para pasar la clave de licencia y el número de serie a la vista:

 var express = require('express'); var router = express.Router(); router.get('/', function(req, res, next) { res.render('index', { licenseSN: process.env.LICENSE_SN, licenseKey: process.env.LICENSE_KEY, }); }); module.exports = router;

Permitiéndole actualizar fácilmente sus credenciales en el servidor, sin necesidad de credenciales de código duro que requieran un cambio de código. Al agregar una capa de autenticación a su aplicación Express, puede controlar el acceso a las credenciales de Foxit y restringir la visibilidad a los usuarios autorizados.

Antes de que las variables process.env estén disponibles, debe incluir la biblioteca dotenv que carga las variables de su archivo .env . Abra app.js y agregue lo siguiente en la parte superior del archivo:

 require('dotenv').config(); ...

Su LICENSE_SN y LICENSE_KEY se almacenan de forma segura y se pasan al front-end solo cuando es necesario. A continuación, abordará la parte de visualización de la aplicación web.

Carga y visualización de archivos PDF

El PDF SDK de Foxit se encargará de la mayor parte del trabajo relacionado con la verificación de la contraseña y la visualización del PDF al usuario, pero debe administrar la interfaz de usuario para las entradas de archivos y contraseñas. Antes de esto, debe actualizar el diseño para que incluya estilos básicos y luego pueda escalar la 'ventana gráfica'. Esto dará como resultado una vista previa en PDF con el tamaño correcto para la pantalla del usuario.

Abra el archivo views/layout.hbs y reemplácelo con lo siguiente:

 <!DOCTYPE html> <html lang="en"> <head> <title>Foxit PDF Previewer</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous"> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <div class="container"> {{{body}}} </div> </body> </html>

Esto cargará la biblioteca de estilo PureCSS , pero puede usar cualquier otro marco de estilo de front-end con el que esté familiarizado.

Abra el archivo views/index.hbs y reemplácelo con lo siguiente:

 <h1>PDF Previewer</h1> <p>Use the form below to preview any password-protected PDF file in this web application.</p> <!-- PDF Upload form --> <form class="pure-form"> <fieldset>   <input type="password" id="password" placeholder="Enter PDF Password" />   <input class="original-pdf-upload-button" type="file" name="file" id="file" accept=".pdf,.fdf,.xfdf" multiple="multiple" />   <label class="pure-button new-pdf-upload-button" for="file">Select a PDF file</label> </fieldset> </form> <!-- PDF Display Div --> <div id="pdf-viewer"></div> <!-- Foxit and custom JavaScript --> <script src="/lib/PDFViewCtrl.full.js"></script> <script> var PDFViewer = PDFViewCtrl.PDFViewer; var pdfViewer = new PDFViewer({    libPath: '/lib',    jr: {      licenseSN: "{{ licenseSN }}",      licenseKey: "{{ licenseKey }}",   }, });  pdfViewer.init('#pdf-viewer');  document.getElementById('file').onchange = function (e) {   if (!this.value) {      return;   }   var pdf,fdf;   for (var i = e.target.files.length; i--;) {     var file = e.target.files[i];     var filename = file.name;     if (/\.pdf$/i.test(filename)) {       pdf = file     } else if (/\.(x)?fdf$/i.test(filename)) {        fdf = file     }   }   var options = {password: '', fdf: {file: fdf}};   if (document.getElementById('password').value) {      options.password = document.getElementById('password').value;      document.getElementById('password').value = '';   }    pdfViewer.openPDFByFile(pdf, options);    this.value = ''; }; </script>

Este archivo tiene tres propósitos. Primero, incluye un formulario de carga de PDF con un campo de contraseña. El elemento de entrada de carga de archivos tiene un <label> , que actúa como un botón de carga con un estilo agradable. A continuación, la etiqueta <div id=”pdf-viewer”> envuelve el lector de PDF Foxit que se usa en la función pdfViewer.init en el JavaScript personalizado. La última sección de este archivo carga la clase PDFViewCtrl.PDFViewer de Foxit y la inicializa usando el código dentro de las etiquetas <script> .

La funcionalidad de la aplicación está casi completa, pero antes de realizar la prueba, abra el archivo public/stylesheets/style.css y reemplácelo con lo siguiente:

 body { background-color: #f7f7f7; color: #333333; } .container { background-color: #ffffff; margin: 0 auto; padding: 30px; } /* File upload button styling */ .original-pdf-upload-button { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .new-pdf-upload-button { top: -2px; position: relative; }

Permitiéndole diseñar el botón de carga de PDF para que tenga una apariencia consistente con los otros botones de PureCSS, y también agrega un poco de relleno a su aplicación.

Para probar su aplicación, primero guarde su trabajo y luego ejecute npm start desde su terminal. Node activará un servidor y su aplicación web estará disponible en localhost:3000 .

Para manejar el escenario en el que un usuario ingresa una contraseña incorrecta mientras carga un archivo PDF protegido con contraseña, puede mejorar el código existente para mostrar un mensaje de error y permitir que el usuario intente nuevamente. Así es como puede implementar esta funcionalidad:

Manejo de errores

El método pdfViewer.openPDFByFile de Foxit devuelve una promesa , si desea saber cuándo se resuelve, agregue una devolución de llamada a los métodos then o catch .

Dentro de su archivo views/index.hbs , reemplace la línea pdfViewer.openPDFByFile… con lo siguiente:

 ...    pdfViewer.openPDFByFile(pdf, options)      .catch(error => {        console.error(error);        document.getElementById('wrong-password').style.display = 'block';     }); ...

Agregue un nuevo elemento de párrafo en la parte superior del archivo llamado id=”wrong-password” :

 <p id="wrong-password" class="error"><strong>Whoops!</strong> It looks like the password you entered was incorrect. Please enter a password and try uploading your file again. </p> ...

Por último, deberá agregar algo de estilo para que el mensaje de error solo se muestre y luego se llame al método catch . Dentro de su archivo public/stylesheets/style.css , agregue lo siguiente:

 ... #wrong-password { display: none; } .error { background-color: #f5c0c0; color: #792525; padding: 10px; }

Si ingresa una contraseña incorrecta (o deja el campo de contraseña en blanco) y se ha subido un PDF protegido con contraseña, verá un mensaje de error, como puede ver a continuación:

En este tutorial, ha aprendido a crear una aplicación web segura de Node que permite a los usuarios obtener una vista previa de archivos PDF protegidos con contraseña en su navegador. Al aprovechar Foxit PDF SDK, puede reducir significativamente el tiempo y el esfuerzo de desarrollo. Foxit PDF SDK ofrece una amplia documentación y una amplia gama de ejemplos para ayudarlo a crear varias aplicaciones.

Vale la pena señalar que Foxit proporciona SDK de PDF no solo para aplicaciones web sino también para otras plataformas, como aplicaciones móviles y nativas . Esto significa que puede utilizar el poder de Foxit PDF SDK en diferentes entornos, lo que garantiza capacidades de procesamiento de PDF consistentes y confiables en todas sus aplicaciones.