Signature is not saved

[marrome]

WebViewer Version: 11.4.0

I have two signature fields in my PDF document. When I sign the fields, close the document and open it again, there is a “Sign Here” Button over the existing signature and I’m able to sign the document again, which will add a Signature over the existing one:

What do I have to do to prevent that from happening?

Also I’d like to be able to delete the Signature from the fields under certain circumstances, how do I access the Signature and delete it?

Thanks in advance!

[system]

Hello, I’m AiRon, an automated tech support bot
While you wait for one of our customer support representatives, I can help you with your question.

It sounds like you are experiencing issues with the persistence of digital signatures in your PDF document when using WebViewer. The “Sign Here” button appearing over existing signatures suggests that the signature fields are not being properly saved or locked after signing. Additionally, you may want to manage signatures programmatically to allow for deletion under certain conditions.

Some things you can try:

• Ensure that the signature fields are properly configured to lock after signing. This can prevent further modifications to the signed field.


• After signing, make sure to save the document state. This can be done by exporting the document with the applied signatures.


• To delete a signature, you can access the specific signature field, clear its contents, and update the document.

Here are some resources that might help you:

• Verify PDF Signatures: Learn how to verify and manage digital signatures in PDFs.


• Digital Signature API: Explore the API capabilities for signing, verifying, and managing signatures.


• Decrypt & Read PDF Documents: Understand how to manage security and permissions, which can relate to signature handling.


• Digital Signature Guide: Comprehensive guide on how digital signatures work and how to implement them.

Hopefully, this helps you solve your problem while you wait for a human to get back to you.

[mickael.vanstraelen]

Hello Marrome,

Could you provide the sample file you used to reproduce this issue?
Are you able to reproduce the same issue on the Showcase?

Best Regards,
Mickaël.

[marrome]

I couldn’t reproduce it in the Showcase (because I can’t close and open the file again inside the Showcase), but I attached a sample file.

Strangely, sometimes it works as it should but most times it doesn’t.

Testdokument1.pdf (17.7 KB)

[mickael.vanstraelen]

Hi Marrome,

Could you explain what you mean by “close and open the file again inside” ?

I need to be able to reproduce your issue on my side, if you could provide a screen record showing how you reproduce your issue this would greatly help.

Best Regards,
Mickaël.

[marrome]

With “close and open the file again” I ment that , in the Showcase Viewer, I can’t sign, save, close the Viewer and open it again to reproduce the problem.

Unfortunately I can’t provide a screen record because of NDA’s but I made a few more Screenshots to show you exactly what is happening:

1. I open the PDF in the Apryse Webviewer, it has two Signature fields:
   

   

2. I sign one of the fields:
   

   

3. I save the document / exit the Webviewer. Then I open the document a second time, this is what I see (the Signature field still has the “Sign Here” button):
   

   

4. If I click “Sign Here” again, I’m able to sign the field a second time, with the second signature overlaying the first one:
   

   

Hope that helps to clarify the problem.

And as I said, sometimes it works like intended and there is no “Sign Here” button after signing the field the first time. But most times it works like seen in the screenshots. I don’t know why sometimes it works and sometimes it doesn’t.

[mickael.vanstraelen]

Hello Marrome,

Thank you for your reply.

Could you tell us how you are saving the file in your project? Are you using the UI or are you doing it programmatically? If you are, could you provide code snippets?

When you sign a second time, does it show both signatures on the PDF in the end or only the latest?

Best Regards,
Mickaël.

[marrome]

This is the Listener that gets triggered when clicking on the green X in the top right corner, to close the Viewer:

this.pageButtonRef.nativeElement.addEventListener(‘click’, async () => {
const doc = documentViewer.getDocument();
const xfdfString = await annotationManager.exportAnnotations();
const options = { xfdfString };
const data = await doc.getFileData(options);
const arr = new Uint8Array(data);
this.finalBlob = new Blob([arr], { type: ‘application/pdf’ });
this.closePage(this.finalBlob);
});

It does show both signatures in the PDF when signing a second time, as you also can see in the last screenshot.

[mickael.vanstraelen]

Hello Marrome,

Thank you for providing the code snippets.

I was not able to reproduce your issue after 10 attempts, I invite you to try on this sample and let me know if you see something different: React Sample

Best Regards,
Mickaël.

[marrome]

Unfortunately I’m not allowed to download and run third-party code on my corporate machine, so I can’t test the project you provided. I looked at the code though and it seems pretty similar to mine.

Here is my implementation of the Webviewer in our Angular project (I only deleted my license key for this upload):
apryse.ts (5.5 KB)

Maybe you can check the code and test again.

It’s really strange behaviour and every now and then it suddenly works as expected. And then it doesn’t. I also tried putting a new signature field on the document using the Forms tool, but that signature field also has the same bug.

EDIT: I think I have found the cause of the problem. When I delete these two lines, the signature fields work as intended:

  const tool = instance.Core.documentViewer.getTool('AnnotationCreateSignature');
  tool['setSigningMode'](instance.Core.Tools.SignatureCreateTool.SigningModes.ANNOTATION);

I got the recommendation to put the SigningMode to “Annotation” in another thread I posted:
Check if Signature Fields are signed - Technical Support / WebViewer - Apryse Community

So, without setting the SigningMode to “Annotation”, the areRequiredFieldsFilled() API doesn’t work. But if I set the SigningMode, the previously described bug with the Signature Fields occurs…

[mickael.vanstraelen]

Hi Marrome,

Thank you for providing the file.

I was able to reproduce your issue.

I have added this issue to the backlog for the product team to review.
We will let you know when we have additional updates.

Can you give us context on how you added those signature fields? Were they added by Webviewer?

Thank you.

Best Regards,
Mickaël.

[marrome]

Happy to hear that you were able to reproduce the issue.

The signature fields are added to the document before opening it in the Webviewer. We use Adobe Acrobat Pro to create all of the form fields in our documents. But I also tried adding a signature field by Webviewer, however the problem remained the same.

Since signing the documents is a crucial part of why we want to implement Apryse into our App, I would be happy if there was a quick fix or workaround to this.

Thank you for your help!

[mickael.vanstraelen]

Thank you for the information.

I will give it to the product team and ask if they see a workaround.
I will let you know when I have new information.

Best Regards,
Mickaël.

[mickael.vanstraelen]

Hi Marrome,

Thank you for your patience.

After discussing this, we think the best plan would be to switch back to signing by appearance instead of annotation.

You switched to annotation signing because of an issue with this API: areRequiredFieldsFilled()

We think this workaround should work, allowing you to switch back to appearance signing which is the best way to sign documents:

You could do something like this to check if every required field are filled:

annotations.forEach(function(annot) {
if (annot instanceof Annotations.SignatureWidgetAnnotation) {
  const isRequired = annot.fieldFlags.get(WidgetFlags.REQUIRED);
  const isSigned = await annot.isSignedByAppearance()
  if(isRequired && isSigned) {
    console.log("Widget is both required and has been signed")
  }
}
})

Let us know if that works for you.

Best Regards,
Mickaël.

[marrome]

Hello Mickaël,

thanks a lot for the reply. This solution works basically, theres only a (maybe minor) problem with it:

By checking the required fields the way you suggested, isRequired and isSigned are true every time a required field is signed. So even if only one of the two signature fields are signed, I will get the console.log. But I need to check if all required fields are signed and only in that case I want my signatureAdded flag to be set to true. Do you have a suggestion how I could achieve that?

[mickael.vanstraelen]

Hello Marrome.

Yes, you could create a variable serving as memory:

let hasAllRequiredSignatures = true;

for (const annot of annotations) {
  if (annot instanceof Annotations.SignatureWidgetAnnotation) {
    const isRequired = annot.fieldFlags.get(WidgetFlags.REQUIRED);
    const isSigned = await annot.isSignedByAppearance();

    if (isRequired && !isSigned) {
      hasAllRequiredSignatures = false;
    }

    if (isRequired && isSigned) {
      console.log("Widget is both required and has been signed");
    }
  }
}

// You can now use the variable:
console.log('All required signatures signed?', hasAllRequiredSignatures);

Let me know if that’s what you meant and works for you!

Best Regards,
Mickaël.

[marrome]

That worked! Thanks a lot for the great support.

[mickael.vanstraelen]

Really glad we found a solution!

Best Regards,
Mickaël.