Um guia para exibir PDFs protegidos por senha em um aplicativo da Web

Os PDFs são amplamente utilizados em configurações de negócios, tornando sua segurança um aspecto crucial de vários fluxos de trabalho. Ao desenvolver um aplicativo da Web que envolva a abertura de PDFs, é provável que você encontre documentos protegidos por senha. No entanto, implementar essa funcionalidade do zero pode ser demorado e incorrer em custos de manutenção significativos, que podem não estar alinhados com o roteiro atual de sua equipe.

Com Foxit's Biblioteca PDF JavaScript , apresentar PDFs em um aplicativo baseado em navegador torna-se uma tarefa fácil. Neste tutorial passo a passo, você aprenderá como configurar um aplicativo Node que aproveita o poder do Foxit PDF SDK for Web. Essa integração permite que você abra facilmente PDFs protegidos por senha diretamente no navegador, concedendo aos usuários autorizados a capacidade de visualizar os documentos. Para aqueles que preferem pular o tutorial e acessar uma versão totalmente funcional do aplicativo, você pode encontrá-lo facilmente disponível no GitHub .

Construindo um aplicativo da Web para exibir PDFs protegidos por senha

O HTML fornece recursos integrados convenientes de upload de arquivos que permitem aos usuários interagir com arquivos de suas máquinas locais no navegador. No entanto, a exibição de PDFs usando JavaScript pode ser um pouco mais complexa, principalmente quando se trata de proteção por senha. Neste tutorial abrangente, você construirá um aplicativo da Web composto por um formulário de upload em PDF e um campo de senha opcional. Quando um PDF protegido por senha é carregado e a senha correta é inserida, os usuários poderão visualizar o arquivo perfeitamente. Por outro lado, se uma senha incorreta for fornecida, uma mensagem de erro será exibida, solicitando que os usuários tentem novamente.

Para desenvolver este aplicativo, você utilizará o Expressar framework web para desenvolvimento de back-end, CSS puro para fins de estilo e SDK PDF da Foxit para integrar a funcionalidade PDF.

Pré-requisitos

• NodeJS versão 8+ e NPM versão 5+
• Foxit PDF SDK para Web ( o download da avaliação gratuita está disponível aqui )
• Sua chave de licença Foxit e número de série

Criando um novo aplicativo expresso

O gerador Express facilita a configuração de um novo aplicativo. Basta executar o seguinte comando em seu terminal:

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

Este comando criará um novo aplicativo com um arquivo .gitignore e arquivos de modelo Handlebars .

Adicione o pacote dotenv npm (use para acessar sua chave de licença Foxit e número de série) e instale as dependências do Express:

 npm i dotenv && npm i

Depois de baixar o Foxit PDF SDK for Web, você encontrará sua chave de licença e número de série no arquivo examples/license-key.js . Em seguida, crie um novo arquivo no diretório raiz do seu aplicativo da web chamado .env e adicione os dois valores:

 LICENSE_SN="" LICENSE_KEY=""

Copie a biblioteca Foxit em seu aplicativo da Web para poder acessá-la pelo front-end. Em seguida, copie o diretório lib/ do Foxit PDF SDK que você baixou e cole-o no diretório public/ do seu aplicativo da web. Agora, a biblioteca Foxit JavaScript PDF estará disponível em seu aplicativo da web.

Por fim, você não deseja que informações confidenciais ou pacotes proprietários acabem no controle de versão, então adicione o seguinte ao seu arquivo .gitignore :

 ... public/lib/ .env

Depois que seu aplicativo da Web tiver todas as dependências necessárias, você poderá criar a rota responsável por exibir a visualização do PDF usando o Foxit.

Configurando a rota

Cada página em um aplicativo Express tem uma rota, incluindo a página de upload de PDF que você criará nesta demonstração. Atualize o arquivo routes/index.js para passar a chave de licença e o número de série para a exibição:

 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;

Permitindo que você atualize facilmente suas credenciais no servidor, sem precisar de credenciais de código rígido que exijam uma alteração de código. Ao adicionar uma camada de autenticação ao seu aplicativo Express, você pode controlar o acesso às credenciais da Foxit e restringir a visibilidade a usuários autorizados.

Antes que as variáveis process.env estejam disponíveis, você precisa incluir a biblioteca dotenv que carrega variáveis de seu arquivo .env . Abra app.js e adicione o seguinte ao topo do arquivo:

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

Seu LICENSE_SN e LICENSE_KEY estão sendo armazenados com segurança e passados para o front-end somente quando necessário. Em seguida, você abordará a parte de exibição do aplicativo da web.

Carregar e exibir PDFs

O PDF SDK da Foxit cuidará da maior parte do trabalho envolvido na verificação da senha e na exibição do PDF para o usuário, mas você precisa administrar a interface do usuário para as entradas de arquivo e senha. Antes disso, você precisa atualizar o layout para incluir estilos básicos e, em seguida, dimensionar a 'janela de visualização'. Isso resultará em uma visualização do PDF dimensionada corretamente para exibição do usuário.

Abra o arquivo views/layout.hbs e substitua-o pelo seguinte:

 <!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>

Isso carregará a biblioteca de estilo PureCSS , mas você pode usar qualquer outra estrutura de estilo de front-end com a qual esteja familiarizado.

Abra o arquivo views/index.hbs e substitua-o pelo abaixo:

 <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 arquivo serve a três propósitos. Primeiro, inclui um formulário de upload em PDF com um campo de senha. O elemento de entrada de upload de arquivo tem um <label> , que funciona como um botão de upload bem estilizado. Em seguida, a tag <div id=”pdf-viewer”> agrupa o leitor Foxit PDF que é usado na função pdfViewer.init no JavaScript personalizado. A última seção desse arquivo carrega a classe PDFViewCtrl.PDFViewer do Foxit e a inicializa usando o código dentro das tags <script> .

A funcionalidade do aplicativo está quase completa, mas antes de testar, abra o arquivo public/stylesheets/style.css e substitua pelo seguinte:

 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; }

Permitindo que você estilize o botão de upload de PDF para que tenha uma aparência consistente com os outros botões PureCSS e também adicione um pouco de preenchimento ao seu aplicativo.

Para testar seu aplicativo, primeiro salve seu trabalho e execute npm start no seu terminal. O Node criará um servidor e seu aplicativo da Web estará disponível em localhost:3000 .

Para lidar com o cenário em que um usuário insere uma senha incorreta ao carregar um arquivo PDF protegido por senha, você pode aprimorar o código existente para exibir uma mensagem de erro e permitir que o usuário tente novamente. Veja como você pode implementar essa funcionalidade:

Tratamento de erros

O método pdfViewer.openPDFByFile do Foxit retorna uma promessa , se você quiser saber quando ele resolve, adicione um retorno de chamada aos métodos then ou catch .

Dentro do arquivo views/index.hbs , substitua a linha pdfViewer.openPDFByFile… pelo seguinte:

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

Adicione um novo elemento de parágrafo no topo do arquivo chamado 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 fim, você precisará adicionar algum estilo para que a mensagem de erro seja exibida apenas quando o método catch for chamado. Dentro de seu arquivo public/stylesheets/style.css , adicione o seguinte:

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

Se você digitar uma senha incorreta (ou deixar o campo de senha em branco) e um PDF protegido por senha tiver sido carregado, você verá uma mensagem de erro, como você pode ver abaixo:

Neste tutorial, você aprendeu a criar um aplicativo da web Node seguro que permite aos usuários visualizar PDFs protegidos por senha em seus navegadores. Aproveitando o Foxit PDF SDK, você pode reduzir significativamente o tempo e o esforço de desenvolvimento. Foxit PDF SDK oferece extensa documentação e uma ampla variedade de exemplos para ajudá-lo a criar vários aplicativos.

Vale a pena observar que a Foxit fornece SDKs de PDF não apenas para aplicativos da Web, mas também para outras plataformas, como aplicativos móveis e nativos . Isso significa que você pode utilizar o poder do Foxit PDF SDK em diferentes ambientes, garantindo recursos de processamento de PDF consistentes e confiáveis em todos os seus aplicativos.