Field argument to DigitalSignatureField constructor is not valid

WebViewer Version: 8.1.0

Hi PDFTron community,

I’m trying to test out the feature to directly sign a document in PDFTron. I have a working certificate file and I tried the sample code for digitally signing a document (PDFTron). Unfortunately it’s not working as it throws this error:

ERROR Error: Uncaught (in promise): Exception:
Message: Field argument to DigitalSignatureField constructor is not valid or not a Signature field

Apparently the createFromField function does not accept the field object which is strange since I used the sample code from the documentation to create said field.

    //first create the field
   const { annotationManager, Annotations } = this.wvInstance.Core;
    const { WidgetFlags } = Annotations;

     // set flags for required
     const flags = new WidgetFlags({
       'Required': true
     });
 
     // create a form field
     const field = new Annotations.Forms.Field("some signature field name", { 
       type: 'Sig', 
       flags,
     });
 
     // create a widget annotation
     const widgetAnnot = new Annotations.SignatureWidgetAnnotation(field, {
       appearance: '_DEFAULT',
       appearances: {
         _DEFAULT: {
           Normal: {
             data:
               'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuMWMqnEsAAAANSURBVBhXY/j//z8DAAj8Av6IXwbgAAAAAElFTkSuQmCC',
             offset: {
               x: 100,
               y: 100,
             },
           },
         },
       },
     });
 
     // set position and size
     widgetAnnot.PageNumber = 1;
     widgetAnnot.X = 100;
     widgetAnnot.Y = 100;
     widgetAnnot.Width = 50;
     widgetAnnot.Height = 20;
 
     //add the form field and widget annotation
     annotationManager.getFieldManager().addField(field);
     annotationManager.addAnnotation(widgetAnnot);
     annotationManager.drawAnnotationsFromList([widgetAnnot]);


//now sign the field
const { PDFNet } = this.wvInstance.Core;
      await PDFNet.initialize();
      const doc = await this.documentViewer.getDocument().getPDFDoc();

      await PDFNet.runWithCleanup(async () => {

        const sigHandlerId = await doc.addStdSignatureHandlerFromURL(path_to_file, password);

        // Retrieve the unsigned approval signature field.
        /** * Note: Replace approvalFieldName with the field name in the document * that is being signed and approved */
        const fieldManager = this.annotationManager.getFieldManager();
        const foundApprovalField = await doc.getField("some signature field name");
        const approvalSigField = await PDFNet.DigitalSignatureField.createFromField(foundApprovalField);
  
        // Prepare the signature and signature handler for signing.
        await approvalSigField.signOnNextSaveWithCustomHandler(sigHandlerId);
  
        // The actual approval signing will be done during the save operation.
        const buf = await doc.saveMemoryBuffer(0);
        const blob = new Blob([buf], { type: 'application/pdf' });
        console.log(blob);
        saveAs(blob, 'signed_doc.pdf');

      }, licenseKey);

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Hello,

Thank you for contacting PDFTron WebViewer.

I see what your problem is, but I can not reproduce the reported behaviour.(Your code looks alright to me)

This is a comprehensive example for programmatically signing signature. Could you double check if it’s working?
Best Regards,

Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com

Hello,

I basically followed the comprehensive example. I was able to further track down the error source. If I create a digital signature field using the PDFNet.PDFDoc method createDigitalSignatureField() the code sample works.

const approval_signature_field = await doc.createDigitalSignatureField('some signature field name');
      const widgetAnnotApproval = await PDFNet.SignatureWidget.createWithDigitalSignatureField(doc, new PDFNet.Rect(300, 300, 500, 200), approval_signature_field);
      const page1 = await doc.getPage(1);
      await page1.annotPushBack(widgetAnnotApproval);

However, this only helps me to apply a digital signature field to programmatically created fields using PDFNet. But I would like to iterate through user generated fields and apply the signatureHandler to those.

Hello,

I see, would you be able to send the file to me so that I could test it on my end? My email address is jhu@pdftron.com.

Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com

Hello,

Thank you for sending the configuration file over, I was able to spot the problem.

So, new Annotations.Forms.Field() creates a Core.Annotations.Forms.Field. PDFDoc.getField() takes in a Core.PDFNet.Field, which serves different purposes.

Core.PDFNet.Field is for digital signatures, which has very strict verification rules. Digital Signatures can be considered as the electronic equivalent of a physical signature with ink on paper.

Core.Annotations.Forms.Field is for signature field, which is a type of annotation. It is part of signature widget annotation.

(You can read more about there difference here)

If you would like to use digital signature, follow this example closely. You can find examples of creating Core.PDFNet.Field here.

If you would like to use the signature tool, with signature widget annotation. Check out this guide about signature tool and this guide about signature widget annotation.

Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com

Hi Jason,

I dug deeper into the full API and found a way to parse through the annotations and create new PDFNet.Fields and style them according to their apperance in the Webviewer. However, is there an “official” and automatic approach to this?
This guide implies that the webviewer signature tool is using PDFNet.Fields under the hood.

Hello,

It’s great to hear that you are making progress.

I don’t think there is an automatic way to handle this. Based on the code base, PDFNet.Fields and Annotations.Forms.Field are two different classes, and they don’t reply on each other at all.

Like I mentioned, it all depends on what you would like to do.

Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.

Hello,

thank you for your answer. Knowing that there is no link between PDFNet and Webviewer helped me to develop a solution that translates Webviewer fields into PDFNet fields. The thread can be closed.