Can we implement the digital signature without pdftronSDK?

Product:pdftron

Product Version:11.3.0

Please give a brief summary of your issue:
(Think of this as an email subject)
I just want to know that if i want to implement the digital signature usb token based so is it possible to have digitally sign pdf using only pdftron without having pdftron SDK ?

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

Please provide a link to a minimal sample where the issue is reproducible:

1 Like

Hi there abhimanyu,

This is Kaden from the Apryse Support Team. I would be happy to support you, however, your question isn’t quite clear. Can you clarify what you mean by “digitally sign pdf using only pdftron without having pdftron SDK”?

Furthermore, I would ask that you answer the following quick questions so that I may become more familiar with your development environment:

  1. What language / framework are you developing with?
  2. What OS are you developing on?
  3. Can you provide more information regarding your use case with digital signatures?

Thank you,
Kaden Rettig
Associate Technical Support Engineer
Apryse Support Team

1 Like

I am developing a React.js application on Microsoft Windows and want to implement a digital signature feature on my website using a Digital Signature Certificate (DSC) via a USB token (pen drive). The objective is to allow users to view PDFs within PDFTron WebViewer, where a clearly visible and clickable “Sign Here” text is displayed. When a user clicks on “Sign Here,” a signature dialog box should appear, enabling them to apply their digital signature using the DSC, which requires password authentication to sign the document. Once signed, the document should be verifiable by any recipient to ensure its authenticity and integrity, following the standard digital signature process demonstrated in DSC implementations.

1 Like

Hi abhimanyu,

Thank you for this information regarding your environment and your intended use case. My interpretation of your original question and your most recent response is that you’re looking to digitally sign PDFs using the PDFTron WebViewer without any server-side processing (i.e. client-side signing). For digital signatures, we typically recommend that you forward the document to a server to perform the certification, as while this process can technically be done on the client-side, exposing the certificate to browser may introduce security risks.

Regardless, we have quite a bit of documentation & resources regarding implementing Digital Signatures using the Apryse SDK that you might find useful:
Digital Signature Overview
Multiple Digital Signatures on One Document
Different Types of Digital Signatures
Custom Signing with an HSM

Please let me know if you have any specific questions or issues regarding your implementation!

Thank you,
Kaden Rettig
Associate Technical Support Engineer
Apryse Support Team

2 Likes

How can I connect the frontend inputs with the WebViewer when uploading a PFX file and entering the password to display a secure, verified digital signature?

I am specifically referring to digital signatures using a DSC (USB-based). Additionally, how can the other details, such as location, reason, and contact information, be displayed when clicking on the digital signature?

I have created a sidebar in my React.js frontend that includes options to:

  • Upload a PDF
  • Upload a digital ID (PFX file)
  • Input the password
  • Provide additional details such as location, reason, and contact information for digital signing using a DSC (USB-based).

Could you guide me on how to integrate these inputs with PDFTron WebViewer to ensure the signature is securely applied and verified?

and for your reference i uploaded the video please check it out and i want to achieve this functionality in my code and i also created the side panel for that but i am not getting how i can interact with and here are my functions and code so you can see it .

useEffect(() => {
if (instance) {
loadPdfFromStorage();
}
}, [instance, loadPdfFromStorage]);

// Function to handle file upload
const handleFileUpload = (event) => {
const file = event.target.files[0];
if (file && instance) {
const reader = new FileReader();
reader.onload = function (e) {
const pdfData = arrayBufferToBase64(e.target.result);
localStorage.setItem(“uploadedPDF”, pdfData); // Save as Base64
const pdfBlob = base64ToBlob(pdfData, “application/pdf”);
const fileUrl = URL.createObjectURL(pdfBlob);
instance.UI.loadDocument(fileUrl, { filename: file.name });
};
reader.readAsArrayBuffer(file);
}
};
const fileInputRef = useRef(null);

const handleDigitalIdUpload = (event) => {
const file = event.target.files[0];
if (file) {
console.log(“File Details:”, {
name: file.name,
size: file.size,
type: file.type,
lastModified: new Date(file.lastModified).toLocaleString(),
});
}
};
const handleButtonClick = () => {
fileInputRef.current.click();
};

// Function to convert ArrayBuffer to Base64
const arrayBufferToBase64 = (buffer) => {
let binary = “”;
const bytes = new Uint8Array(buffer);
bytes.forEach((b) => (binary += String.fromCharCode(b)));
return btoa(binary);
};

// Function to convert Base64 to Blob
const base64ToBlob = (base64, mimeType) => {
const byteCharacters = atob(base64);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
return new Blob([byteArray], { type: mimeType });
};

const handleInputChange = (event) => {
const { name, value } = event.target;
setSignatureInfo((prev) => ({ …prev, [name]: value }));
};

const handleApplySignature = () => {
console.log(“Digital ID File:”, digitalIDFile);
console.log(“Password:”, digitalIDPassword);
console.log(“Signature Info:”, signatureInfo);
};

I also upload the video sample what i want, also upload the screen shot of my code output and the above is the UI code of mine so you will get better idea please help sir i am very worried about that kindly help me .


1 Like

Hello abhimanyu,

I understand that you’re looking to emulate many of the features offered by the Digital Signing demo for WebViewer, such as adding a Signature Field, signing the document itself, and embedding data such as the signing time with the signature for verification purposes. While I cannot provide code specific to your use case, it sounds like the code samples that are available in our website’s WebViewer documentation would be helpful in achieving the functionality you’re looking for.

If you haven’t already, please take a look at our Overview for a high-level description of how the WebViewer implements / handles Digital Signatures. Following this, we have a code sample that shows how to sign an existing signature here. For embedded timestamp & location information, see the Custom Signing and Embedded timestamping code samples.

You sent an image of your current implementation, but what is the current output that you’re seeing? Is part of the API not functioning as expected? If you have specific questions regarding these code samples, please let me know.

Thank you,
Kaden Rettig
Associate Technical Support Engineer
Apryse Support Team

1 Like