Skip to content

Commit eff1ea6

Browse files
github-actions[bot]KB Botikoevskantacheva
authored
Added new kb article pdfviewer-sign-pdfs (#1879)
* Added new kb article pdfviewer-sign-pdfs * Apply Lance's changes It seems @LanceMcCarthy has insufficient access to the repo. Committing changes on his behalf. * chore(common): update envronment markup to match our pattern --------- Co-authored-by: KB Bot <[email protected]> Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]> Co-authored-by: Nadezhda Tacheva <[email protected]>
1 parent 973e7fd commit eff1ea6

File tree

1 file changed

+155
-0
lines changed

1 file changed

+155
-0
lines changed

‎knowledge-base/pdfviewer-sign-pdfs.md

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
---
2+
title: Signing PDFs with PdfPRocessing in PdfViewer
3+
description: Learn how to use PdfProcessing to sign PDFs using the Telerik PdfViewer in a web application.
4+
type: how-to
5+
page_title: How to Sign PDFs in Telerik PDF Viewer
6+
slug: pdfviewer-sign-pdfs
7+
tags: telerik, pdf, viewer, sign, digital signature
8+
res_type: kb
9+
---
10+
11+
## Environment
12+
13+
<table>
14+
<tbody>
15+
<tr>
16+
<td>Product</td>
17+
<td>RadPdfProcessing for Document Processing, <br /> PdfViewer for Blazor</td>
18+
</tr>
19+
</tbody>
20+
</table>
21+
22+
## Description
23+
24+
I want to be able to apply a digital signature to a document in the Telerik UI for Blazor PdfViewer.
25+
26+
## Solution
27+
28+
The PdfViewer does not currently have the capability to manage digitial signatures of the document. However, this is still possible using the Telerik Document Processing Libraries PdfProcessing to programmatically manage the signature and the certificate of the document, while the PdfViewer's sole responsibility is to display the document.
29+
30+
1. Create a custom button in the Blazor PdfViewer to handle the logic for applying the digital signature to the PDF. See [PdfViewer - Custom Toolbar Button](https://docs.telerik.com/blazor-ui/components/pdfviewer/toolbar#custom-tools) for instructions.
31+
2. Use the PdfProcessing tool to add a digital signature programmatically to the PDF. See [Document Processing - Digital Signature documentation](https://docs.telerik.com/devtools/document-processing/libraries/radpdfprocessing/features/digital-signature) for instructions.
32+
3. Reload the document into the PdfViewer. See [PdfViewer - Overview](https://docs.telerik.com/blazor-ui/components/pdfviewer/overview) for instructions.
33+
34+
35+
## Example
36+
37+
```csharp
38+
<TelerikPdfViewer Data="@PdfSource">
39+
<PdfViewerToolBar>
40+
<PdfViewerToolBarOpenTool />
41+
<!-- all other buttons here -->
42+
<PdfViewerToolBarSeparator />
43+
44+
<PdfViewerToolBarCustomTool>
45+
<TelerikButton OnClick="@OnSignPdfClick">SIGN</TelerikButton>
46+
</PdfViewerToolBarCustomTool>
47+
</PdfViewerToolBar>
48+
</TelerikPdfViewer>
49+
50+
@code {
51+
private byte[] PdfSource { get; set; }
52+
53+
private async Task OnPdfDownload(PdfViewerDownloadEventArgs args)
54+
{
55+
args.FileName = "My.pdf";
56+
}
57+
58+
private async Task OnSignPdfClick()
59+
{
60+
var unsignedDocument = this.PdfSource;
61+
62+
var signedDocument = SignDocument(this.PdfSource);
63+
64+
this.PdfSource = signedDocument;
65+
}
66+
67+
private byte[] SignDocument(byte[] unsignedDocumentBytes)
68+
{
69+
// **** PHASE 1 - Get certificate **** //
70+
71+
X509Certificate2 certificate = null;
72+
73+
// OPTION 1 - BRING YOUR OWN CERTIFICATE FILE
74+
// RadPdfProcessing enables you to sign and validate signature fields using standard signature encodings
75+
// adbe.x509.rsa_sha1 (PKCS #1)
76+
// adbe.pkcs7.sha1 (PKCS #7)
77+
// adbe.pkcs7.detached (PKCS #7 Detached)
78+
79+
//certificate = new System.Security.Cryptography.X509Certificates.X509Certificate2(certificateFilePath, certificateFilePassword);
80+
81+
// OPTION 2 - USE AN EXISTING CERTIFICATE
82+
var x509Store = new X509Store("MY", StoreLocation.CurrentUser);
83+
x509Store.Open(OpenFlags.ReadOnly | OpenFlags.OpenExistingOnly);
84+
var validCerts = x509Store.Certificates.Find(X509FindType.FindByTimeValid, DateTime.Now, false);
85+
86+
// IMPORTANT: This example is taking the very first valid certificate. In a real app, you will selected the cert you want to sign the document with.
87+
certificate = validCerts.FirstOrDefault();
88+
89+
90+
// **** PHASE 2 - Add certificate to SignatureField and use certificate **** //
91+
92+
// The name of the signature must be unique.
93+
var signatureName = "John Doe";
94+
95+
// The Signature object is added to a signature field, so we can add a visualization to it.
96+
var signatureField = new SignatureField(signatureName);
97+
signatureField.Signature = new Telerik.Windows.Documents.Fixed.Model.DigitalSignatures.Signature(certificate);
98+
99+
// Close the local cert store now that you're done
100+
x509Store.Close();
101+
102+
103+
// **** PHASE 3 - IMPORT DOCUMENT and insert signature field **** //
104+
105+
var document = new PdfFormatProvider().Import(unsignedDocumentBytes);
106+
107+
// This demo adds a new page and adding a new signature field there. If your document already has a signature field, you can search for it instead.
108+
RadFixedPage page = document.Pages.AddPage();
109+
110+
// This is the Form XObject element that represents the contents of the signature field.
111+
var form = new Telerik.Windows.Documents.Fixed.Model.Objects.Form
112+
{
113+
FormSource = new FormSource { Size = new Size(220, 220) }
114+
};
115+
116+
// This demo uses the editor to fill the Form XObject.
117+
var formEditor = new FixedContentEditor(form.FormSource);
118+
form.Position.Translate(10, 10);
119+
formEditor.DrawCircle(new Point(50, 50), 20);
120+
formEditor.DrawText(signatureName);
121+
122+
// The widget contains the Form XObject and defines the appearance of the signature field.
123+
var widget = signatureField.Widgets.AddWidget();
124+
widget.Rect = new Rect(200, 600, 100, 100);
125+
widget.Border = new AnnotationBorder(10, AnnotationBorderStyle.Solid, null);
126+
widget.Content.NormalContentSource = form.FormSource;
127+
widget.RecalculateContent();
128+
129+
// Finally, add the SignatureWidget to the page's annotations.
130+
page.Annotations.Add(widget);
131+
132+
var editor = new FixedContentEditor(page);
133+
editor.Position.Translate(200, 400);
134+
editor.DrawForm(form.FormSource);
135+
document.AcroForm.FormFields.Add(signatureField);
136+
widget.RecalculateContent();
137+
widget.AppearanceCharacteristics.Background = new Telerik.Windows.Documents.Fixed.Model.ColorSpaces.RgbColor(255, 0, 0);
138+
139+
// **** PHASE 4 - EXPORT DOCUMENT **** //
140+
byte[] signedDocBytes = new PdfFormatProvider().Export(document);
141+
142+
return signedDocBytes;
143+
}
144+
}
145+
```
146+
147+
## Notes
148+
149+
- You can use Telerik PdfProcessing to digitally sign the PDF on the server side.
150+
- The web application cannot access the user's guest operating system's X509 Certificate Store due to security restrictions in modern web browsers. Your application will only have access to X509 certificates installed on the server side.
151+
152+
## See Also
153+
154+
- [PdfViewer - Overview](https://docs.telerik.com/blazor-ui/components/pdfviewer/overview)
155+
- [Document Processing Digital Signature documentation](https://docs.telerik.com/devtools/document-processing/libraries/radpdfprocessing/features/digital-signature)

0 commit comments

Comments
 (0)