I am trying to apply digital signature in the pdf file in web viewer but I am getting error.
Below is my code to apply digital signature.
WebViewer({
path: “/PdfTronWebViewer/”,
enableMeasurement: true,
licenseKey: ‘key’,
backendType: ‘ems’,
fullAPI:true
}, viewer
).then(async instance => {
const { PDFNet, documentViewer } = instance.Core;
documentViewer.addEventListener(‘documentLoaded’, async () => {
const doc = await documentViewer.getDocument().getPDFDoc();
// Run PDFNet methods with memory management
await PDFNet.runWithCleanup(async () => {
doc.lock();
const page1 = await doc.getPage(1);
const sigHandlerId = await doc.addStdSignatureHandlerFromURL("/CertificatePath.pfx", 'password');
const certification_sig_field = await doc.createDigitalSignatureField("pdfSignatureField");
const widgetAnnot = await PDFNet.SignatureWidget.createWithDigitalSignatureField(doc, new PDFNet.Rect(0, 100, 200, 150), certification_sig_field);
await page1.annotPushBack(widgetAnnot);
const foundCertificationField = await doc.getField("pdfSignatureField");
const certificationSigField = await PDFNet.DigitalSignatureField.createFromField(foundCertificationField);
const img = await PDFNet.Image.createFromURL(doc, "/signature.png");
const certifySignatureWidget = await PDFNet.SignatureWidget.createWithDigitalSignatureField(
doc,
await PDFNet.Rect.init(0, 100, 200, 150),
certificationSigField
);
await certifySignatureWidget.createSignatureAppearance(img);
page1.annotPushBack(certifySignatureWidget);
certificationSigField.setDocumentPermissions(PDFNet.DigitalSignatureField.DocumentPermissions.e_no_changes_allowed);
await certificationSigField.certifyOnNextSaveWithCustomHandler(sigHandlerId);
// The actual certification signing will be done during the save operation.
const buf = await doc.saveMemoryBuffer(0);
const blob = new Blob([buf], { type: 'application/pdf' });
saveAs(blob, 'certified_doc.pdf');
});
});
});
Below is the error which I am getting in the above code:
Please let me know why am I getting this error.
Thank you for posting the incident to our forum. We will provide you with an update as soon as possible.
Hello Rahul,
Thank you for contacting Webviewer Forums.
To apply digital signatures, I recommend taking a look at the digital signature section of our Full API sample codes here: Digitalsignaturestest | Apryse Documentation
Under the CertifyPDF function of the code, you will find the necessary code implementation for your use case.
Best Regards,
Luke Dam
Web Development Support Engineer
Apryse Software Inc.
Thanks Luke…It’s working after some modification. Currently signature field is showing on the left top but I want to show on right bottom of the PDF file.
So how will we set the position of signature field.?
Thanks in advance,
Rahul Y
Hello Rahul,
To set the signature field position, you can initialize the Rect object with the desired coordinates (bottom right e.g. new PDFNet.Rect(500, 50, 550, 100) within the signature widget annotation).
Kindly refer to this API here: Apryse WebViewer Class: SignatureWidget
To see a visual on placing coordinates, please refer to this documentation: Coordinates | Apryse Documentation
Best Regards,
Luke Dam
Web Development Support Engineer
Apryse Software Inc.
Hi Luke,
I am trying to verify the digital signature through ‘.pem’ file with the help of below code.
const doc = await documentViewer.getDocument().getPDFDoc();
doc.initSecurityHandler();
doc.lock();
console.log(‘==========’);
const opts = await PDFNet.VerificationOptions.create(PDFNet.VerificationOptions.SecurityLevel.e_compatibility_and_archiving);
const aa =await doc.hasSignatures();
// Add trust root to store of trusted certificates contained in VerificationOptions.
await opts.addTrustedCertificateFromURL(
"/certificatet.pem"
);
const result = await doc.verifySignedDigitalSignatures(opts);
switch (result) {
case PDFNet.PDFDoc.SignaturesVerificationStatus.e_unsigned:
console.log('Document has no signed signature fields.');
return false;
/* e_failure == bad doc status, digest status, or permissions status (i.e. does not include trust issues, because those are flaky due to being network/config-related) */
case PDFNet.PDFDoc.SignaturesVerificationStatus.e_failure:
console.log('Hard failure in verification on at least one signature.');
return false;
case PDFNet.PDFDoc.SignaturesVerificationStatus.e_untrusted:
console.log('Could not verify trust for at least one signature.');
return false;
case PDFNet.PDFDoc.SignaturesVerificationStatus.e_unsupported:
/* If necessary, call GetUnsupportedFeatures on VerificationResult to check which unsupported features were encountered (requires verification using 'detailed' APIs) */
console.log('At least one signature contains unsupported features.');
return false;
// unsigned sigs skipped; parts of document may be unsigned (check GetByteRanges on signed sigs to find out)
case PDFNet.PDFDoc.SignaturesVerificationStatus.e_verified:
console.log('All signed signatures in document verified.');
return true;
}
}
I have implemented code as per your documentation but unable to verified digital signature as getting message ‘Could not verify trust for at least one signature.’.
Is there any other way to verify digital signature via ‘.pem’ file?
Hello Rahul,
It looks like the SignaturesVerificationStatus.e_untrusted is being returned.
Please review this guide on how to verify a document here: Verify-pdf | Apryse Documentation
You can also test against our Digital Signature demo here: https://docs.apryse.com/samples/web/samples/full-apis/ViewerDigitalSignatureValidationTest/
Best Regards,
Luke Dam
Web Development Support Engineer
Apryse Software Inc.
Hi,
I have added a signature field in the pdf file, but that field is not movable. I want to enable drag and drop functionality. Currently It is showing like that :-
Hi Rahul,
In the case of digital signatures, the fields are set so that the signatures cannot be modified. This is called a digital signature field which is in our documentation here and is standard in upholding signature integrity.
Digital field example: Certify-pdf | Apryse Documentation
Signature integrity overview: Signature | Apryse Documentation
Best Regards,
Luke Dam
Web Development Support Engineer
Apryse Software Inc.
