Some test text!
Oct 26 2022
How to Validate Digital Signatures in PDF Using JavaScript
by Heather Dinsdale
This tutorial demonstrates how to verify digital signatures and certificates using JavaScript right in your web application with just one component, PDFTron’s
At the end of the process, you’ll see your validated signature and document displayed in WebViewer:
WebViewer extracts, validates, and displays results in any web app
For more in-depth information, see our certificate authority
Additionally, there’s a full code sample on using a digital signature API to digitally sign, certify, and/or validate PDF documents. See the
Step 1: Install WebViewer
So you want to set up an environment where your users can digitally sign, validate and view documents in just a few steps, but you aren’t sure where to start. Thankfully, with PDFTron’s WebViewer, you can easily add and display digital signature verification results for the user to see.
Note: Since this component uses JavaScript and WebAssembly, signatures are validated right in the client application. No data leaves the client during validation, ensuring no sensitive information is transmitted outside of the client application.
Let's start with installing WebViewer. WebViewer supports a full range of
There are different ways to install WebViewer, but we’ll use NPM for this example.
To use WebViewer for validating digital signatures, download and install versions 8.0+ via
Since WebViewer requires static resources to be served (which cannot be bundled), an extra step involves manually copying static files into your dist directory.
Prerequisites
First, install
WebViewer does not require Node, NPM, or the node_modules directory. These tools are only required to run the samples.
1. Install via NPM
Note: The following instructions are for JavaScript.
Run the following command in your project:
npm i @pdftron/webviewerThis installs the main JS entrypoint, and downloads static assets required for WebViewer to run.
2. Copy static assets
Next, copy the static assets required for WebViewer to run into a public location that is served via HTTP/HTTPS (usually a dist or build folder). The static files are in:
node_modules/@pdftron/webviewer/publicYou can add a script to your package.json that moves the static files for you.
This copies all required files into the dist/public folder after your build is complete.
{
"scripts": {
"move-static": "cp -a ./node_modules/@pdftron/webviewer/public/. ./dist/public/webviewer",
"build": "mybuildscript && npm run move-static"
}
}3. Usage
When using WebViewer in your code, you must tell it where you copied these static files using the path parameter.
For example, if you copied the static files into dist/public/webviewer, your code would look something like this:
import WebViewer from '@pdftron/webviewer'
WebViewer(
{
path: '/public/webviewer',
},
document.getElementById('viewer'),
).then(instance => {
const { UI, Core } = instance;
const { documentViewer, annotationManager, Tools, Annotations } = Core;
documentViewer.addEventListener('documentLoaded', () => {
// call methods relating to the loaded document
});
instance.UI.loadDocument('https://fileserver/documents/test.pdf');
})For info on the next steps, visit
Digital signature properties and functions are available in the API
Step 2: Export the Trusted Certificates List into WebViewer
After installing WebViewer, the next and last step is to set up your trust list. This list tells WebViewer which digital signatures and certificates are safe and already validated by a reliable certificate authority. Since users probably want digital signature validation results similar to Adobe’s, we’ll export the
Use the following steps to export the list into WebViewer:
1. Open Adobe Reader.
2. Click the Edit menu button on the top left.
3. Go to Preferences.
4. Go to the Signatures category on the left.
5. Click the More... button under the Identities & Trusted Certificates section.
6. Go to the Trusted Certificates list on the left.
7. Highlight all the certificates on the list (click on first, hold Shift, click on last).
8. Click Export.
- Leave the default radio button options.
- Save the exported data to a file.
- Choose Acrobat FDF Data Exchange.
9. Save the .fdf file.
10. Import the .fdf file via the
import WebViewer from '@pdftron/webviewer'
WebViewer(
{
path: '/public/webviewer',
},
document.getElementById('viewer'),
).then(async instance => {
const { UI, Core } = instance;
const { documentViewer, annotationManager, Tools, Annotations } = Core;
documentViewer.addEventListener('documentLoaded', () => {
// call methods relating to the loaded document
});
// Open the signaturePanel element immediately to see Digital Signature information
instance.UI.openElements(['signaturePanel']);
// Please ensure that the PDF you load contains Digital Signature data
instance.UI.loadDocument('https://fileserver/documents/test.pdf');
const response = await fetch('https://fileserver/path/to/exported/trust-list.fdf');
instance.UI.VerificationOptions.loadTrustList(await response.blob());
})WebViewer then attempts to validate digital signatures in the PDF documents using the public certificates.
And that’s it! Once these steps are complete, you can open a digitally signed document in PDFTron’s WebViewer and view the document and its signature properties, like so:
Valid digital signature properties displayed in WebViewer
Next Steps
In this tutorial, we’ve set up an environment where users can validate digital signatures right in their web app using a single component, WebViewer. We installed WebViewer and exported a trust list, so end-users don’t need additional tools or programs.
WebViewer also supports additional security features, such as dig sig
To learn more about WebViewer, check out our
Related articles
How Can I Tell What’s Inside a PDF? Raster, Vector, Text?
Learn about the content types you find in PDFs and discover tricks & toolsfor figuring out what’s inside your PDF – raster, vector, or text?
PDF Rendering and Viewing: What is the Difference?
In this post, learn about the difference between PDF rendering and PDF viewing, and how the PDFTron PDF SDK unpacks your PDFs for display in a viewer application.
Open Source or Proprietary — What PDF Viewer Engine is Right for My Application?
A comparison of PDF viewer library options and tips on how to decide which PDF rendering and viewing alternative is best for your application. Open source or proprietary?
Related Products
PDFTron SDK
COMPANY