1004883: Digital Signature in Angular PDF Viewer

Document-Processing-toc.html

@@ -785,6 +785,14 @@
 									<li><a href="/document-processing/pdf/pdf-viewer/angular/forms/form-fields-api">APIs</a></li>
 								</ul>
 							</li>
+							<li>Digital Signature
+								<ul>
+									<li><a href="/document-processing/pdf/pdf-viewer/angular/digital-signature/add-digital-signature">Add Digital Signature</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/angular/digital-signature/customize-signature-appearance">Customize Signature Appearance</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/angular/digital-signature/validate-digital-signatures">Validate Digital Signature</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/angular/digital-signature/signature-workflow">Signature Workflow</a></li>
+								</ul>
+							</li>
 							<li><a href="/document-processing/pdf/pdf-viewer/angular/organize-pdf">Organize Pages</a>
 								<ul>
 									<li><a href="/document-processing/pdf/pdf-viewer/angular/organize-pages/overview">Overview</a></li>

Document-Processing/PDF/PDF-Viewer/angular/digital-signature/add-digital-signature.md

@@ -0,0 +1,102 @@
+---
+layout: post
+title: Add Digital Signature to PDF in Angular PDF Viewer | Syncfusion
+description: Learn how to add signature fields and apply PKI-based digital signatures using Syncfusion Angular PDF Viewer and JavaScript PDF Library.
+platform: document-processing
+control: PdfViewer
+documentation: ug
+---
+
+# Add Digital Signature to PDF in Angular
+
+This section explains how to **add signature fields** using the Syncfusion **Angular PDF Viewer** and how to apply **digital (PKI) signatures** using the **JavaScript PDF Library**.
+
+N> As instructed by team leads — use the **Angular PDF Viewer only to add & place signature fields**. Use the **JavaScript PDF Library** to apply the *actual cryptographic digital signature*.
+
+## Overview (Explanation)
+
+A **digital signature** provides:
+- **Authenticity** – confirms the signer’s identity.
+- **Integrity** – detects modification after signing.
+- **Non‑repudiation** – signer cannot deny signing.
+
+Syncfusion supports a hybrid workflow:
+- Viewer → **[Design signature fields](../forms/manage-form-fields/create-form-fields#signature-field)**, capture Draw/Type/Upload electronic signature.
+- PDF Library → **[Apply PKCS#7/CMS digital signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature)** using a certificate (PFX/P12).
+
+## Add a Signature Field (How-to)
+
+### Using the UI
+1. Open **Form Designer**.
+2. Select **Signature Field**.
+3. Click on the document to place the field.
+4. Configure Name, Tooltip, Required, etc.
+
+![Signature annotation toolbar](../../javascript-es6/images/add_sign.png)
+
+### Using the API
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+    this.pdfviewer.formDesignerModule.addFormField('SignatureField', {
+      name: 'ApproverSignature',
+      pageNumber: 1,
+      bounds: { X: 72, Y: 640, Width: 220, Height: 48 },
+      isRequired: true,
+      tooltip: 'Sign here'
+    }as any);
+{% endhighlight %}
+{% endtabs %}
+
+## Capture Electronic Signature (Draw / Type / Upload)
+Users click the field → dialog appears → they can **Draw**, **Type**, or **Upload** a handwritten signature.
+
+This creates a *visual* signature only (not cryptographically secure).
+
+## Apply PKI Digital Signature (JavaScript PDF Library)
+
+Digital signature must be applied using **@syncfusion/ej2-pdf**.
+
+```ts
+import { PdfDocument, PdfSignature, PdfSignatureField, CryptographicStandard, DigestAlgorithm } from '@syncfusion/ej2-pdf';
+
+const document = new PdfDocument(pdfBytes);
+const page = document.getPage(0);
+
+let field = new PdfSignatureField(page, 'ApproverSignature', {
+  x: 72,
+  y: 640,
+  width: 220,
+  height: 48
+});
+document.form.add(field);
+
+const signature = PdfSignature.create(
+  {
+    cryptographicStandard: CryptographicStandard.cms,
+    digestAlgorithm: DigestAlgorithm.sha256
+  },
+  pfxBytes,
+  password
+);
+
+field.setSignature(signature);
+const signedBytes = await document.save();
+document.destroy();
+```
+
+N> See the PDF Library [Digital signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature) to know more about Digital Signature in PDF Documents.
+
+## Important Notes
+- **Do all form edits first. Sign last.** Any PDF modification *after signing* invalidates the signature.
+- Self‑signed PFX will show **Unknown / Untrusted** until added to Trusted Certificates.
+
+## Best Practices
+- Place signature fields via Viewer for accurate layout.
+- Apply PKI signature using PDF Library only.
+- Use CMS + SHA‑256 for compatibility.
+- Avoid flattening after signing.
+
+## See Also
+- [Validate Digital Signatures](./validate-digital-signatures)
+- [Custom fonts for Signature fields](../../how-to/custom-font-signature-field)
+- [Signature workflows](./signature-workflow)

Document-Processing/PDF/PDF-Viewer/angular/digital-signature/customize-signature-appearance.md

@@ -0,0 +1,50 @@
+---
+layout: post
+title: Customize Signature Appearance in Angular PDF Viewer | Syncfusion
+description: Learn here all about how to customize visible PKI digital signature appearances using the Syncfusion PDF Library in Angular PDF Viewer.
+platform: document-processing
+control: PdfViewer
+documentation: ug
+---
+
+# Customize Signature Appearance in Angular
+
+This page explains how to customize the visual appearance of PKI [digital signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature) (visible signature appearance) produced with the Syncfusion PDF Library.
+
+## Overview
+
+When applying a PKI [digital signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature) you can create a visible appearance that includes text, images (logo/seal), fonts, and layout. Appearance rendering is done by composing signature appearance graphics with the PDF Library and embedding that appearance into the signature field.
+
+For implementation details and exact API usage, check the Syncfusion PDF Library references:
+
+- .NET PDF Library — [Drawing text/image in the signature appearance]( https://help.syncfusion.com/document-processing/pdf/pdf-library/net/working-with-digitalsignature#drawing-textimage-in-the-signature-appearance)
+- JavaScript PDF Library — [Drawing text/image in the signature appearance](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature#drawing-textimage-in-the-signature-appearance)
+
+## What you can customize
+
+- Text (signer name, signing reason, date, descriptive labels)
+- Fonts, sizes, and styles
+- Images (company logo, seal, signature image)
+- Layout and bounding box for the visible appearance
+- Visible vs invisible signatures
+
+## Guidance
+
+- Use the [PDF Library](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature) APIs to draw strings and images into the signature appearance graphics; attach the resulting appearance to the signature field before finalizing the PKI signature.
+- Prefer embedding high‑quality logo/seal images and use readable fonts for accessibility.
+- Keep the appearance compact to avoid overlapping form content and to preserve signature validation data.
+- Test appearances across typical page sizes and DPI settings to ensure consistent rendering.
+
+## Best Practices
+
+- Use consistent branding for signature visuals.
+- Keep appearance elements minimal and readable.
+- Avoid including data that might change after signing (dates shown should reflect signing time provided by the TSA when used).
+- When producing legally binding signatures, ensure the PKI signing process and appearance comply with your legal/operational requirements.
+
+## See Also
+
+- [Add Digital Signature](./add-digital-signature)
+- [Validate Digital Signatures](./validate-digital-signatures)
+- [Custom fonts for Signature fields](../../how-to/custom-font-signature-field)
+- [Signature workflows](./signature-workflow)