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  , 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  .   Biblioteca PDF JavaScript   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  framework web para desenvolvimento de back-end,  para fins de estilo e  para integrar a funcionalidade PDF.   Expressar   CSS puro   SDK PDF da Foxit  Pré-requisitos  versão 8+ e  versão 5+   NodeJS   NPM  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   e arquivos de modelo   . .gitignore Handlebars  Adicione o pacote   npm (use para acessar sua chave de licença Foxit e número de série) e instale as dependências do Express: dotenv   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   . Em seguida, crie um novo arquivo no diretório raiz do seu aplicativo da web chamado   e adicione os dois valores: examples/license-key.js .env   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   do Foxit PDF SDK que você baixou e cole-o no diretório   do seu aplicativo da web. Agora, a biblioteca Foxit JavaScript PDF estará disponível em seu aplicativo da web. lib/ public/  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   para passar a chave de licença e o número de série para a exibição: routes/index.js   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   estejam disponíveis, você precisa incluir a biblioteca   que carrega variáveis de seu arquivo   . Abra   e adicione o seguinte ao topo do arquivo: process.env dotenv .env app.js   require('dotenv').config(); ...  Seu   e   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. LICENSE_SN LICENSE_KEY  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   e substitua-o pelo seguinte: views/layout.hbs   <!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/purecss@2.0.3/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   , mas você pode usar qualquer outra estrutura de estilo de front-end com a qual esteja familiarizado. PureCSS  Abra o arquivo   e substitua-o pelo abaixo: views/index.hbs   <h1>PDF Previewer</h1> <p>Use the form below to preview any password-protected PDF file in this web application.</p>  <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>  <div id="pdf-viewer"></div>  <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   , que funciona como um botão de upload bem estilizado. Em seguida, a tag   agrupa o leitor Foxit PDF que é usado na função   no JavaScript personalizado. A última seção desse arquivo carrega a classe   do Foxit e a inicializa usando o código dentro das tags   . <label> <div id=”pdf-viewer”> pdfViewer.init PDFViewCtrl.PDFViewer <script>  A funcionalidade do aplicativo está quase completa, mas antes de testar, abra o arquivo   e substitua pelo seguinte: public/stylesheets/style.css   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   no seu terminal. O Node criará um servidor e seu aplicativo da Web estará disponível em   .  npm start 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   do Foxit retorna uma   , se você quiser saber quando ele resolve, adicione um retorno de chamada aos métodos   ou   . pdfViewer.openPDFByFile promessa then catch  Dentro do arquivo   , substitua a linha   pelo seguinte: views/index.hbs pdfViewer.openPDFByFile…   ...    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   for chamado. Dentro de seu arquivo   , adicione o seguinte: catch public/stylesheets/style.css   ... #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  e uma ampla variedade de exemplos para ajudá-lo a criar vários aplicativos.   documentação  Vale a pena observar que a Foxit fornece SDKs de PDF não apenas para aplicativos da Web, mas também para  . 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.   outras plataformas, como aplicativos móveis e nativos  Publicado também   . aqui

This writer has a vested interest be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Free Trial

Now Hiring

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

Boost your HackerNoon story @ $159.99! 🚀

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

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Criando produtos criptográficos centrados no usuário: a importância do feedback do cliente

Telegram: a ponte da Crypto Island para o continente

Como melhorar seu fluxo de trabalho em 10 vezes: 17 aplicativos essenciais

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Criando produtos criptográficos centrados no usuário: a importância do feedback do cliente

Telegram: a ponte da Crypto Island para o continente

Como melhorar seu fluxo de trabalho em 10 vezes: 17 aplicativos essenciais

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps