Added new kb article pdfviewer-sign-pdfs #1879
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=80&v=4){kind=small}
| cc @dessyordanova @dimodi This is a merge of all the concepts into one KB. We can consider duplication in the DPL docs, too. |
| @@ -0,0 +1,152 @@ | |||
| --- | |||
| title: Signing PDFs with PdfPRocessing in DdfViewer | |||
ikoevska previously requested changes Jan 24, 2024
| ## Notes | ||
| | ||
| - The Telerik Blazor PdfViewer does not currently support digital signature management in the UI. | ||
| - You can use Telerik PdfProcessing to digitally sign the PDF on the server-side. |
There was a problem hiding this comment.
Suggested change
| - You can use Telerik PdfProcessing to digitally sign the PDF on the server-side. | |
| - You can use Telerik PdfProcessing to digitally sign the PDF on the server side. |
| ## See Also | ||
| | ||
| - [PdfViewer - Overview](https://docs.telerik.com/blazor-ui/components/pdfviewer/overview) | ||
| - [Document Processing Digital Signature documentation](https://docs.telerik.com/devtools/document-processing/libraries/radpdfprocessing/features/security/digital-signatures) |
There was a problem hiding this comment.
Suggested change
| - [Document Processing Digital Signature documentation](https://docs.telerik.com/devtools/document-processing/libraries/radpdfprocessing/features/security/digital-signatures) | |
| - [Document Processing Digital Signature Documentation](https://docs.telerik.com/devtools/document-processing/libraries/radpdfprocessing/features/digital-signature) |
| ## See Also | ||
| | ||
| - [PdfViewer - Overview](https://docs.telerik.com/blazor-ui/components/pdfviewer/overview) | ||
| - [Document Processing Digital Signature documentation](https://docs.telerik.com/devtools/document-processing/libraries/radpdfprocessing/features/security/digital-signatures) |
There was a problem hiding this comment.
Double-check the link - it's a 404 for me. https://docs.telerik.com/devtools/document-processing/libraries/radpdfprocessing/features/digital-signature seems to be the correct link.
There was a problem hiding this comment.
You're correct, it is in the Features section of the documentation. I'm not sure where this one came from, could be hallucination, or that it is a last minute copy/paste mistake on my part.
| 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. | ||
| | ||
| 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. | ||
| 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/security/digital-signatures) for instructions. |
There was a problem hiding this comment.
Suggested change
| 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/security/digital-signatures) for instructions. | |
| 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. |
| x509Store.Open(OpenFlags.ReadOnly | OpenFlags.OpenExistingOnly); | ||
| var validCerts = x509Store.Certificates.Find(X509FindType.FindByTimeValid, DateTime.Now, false); | ||
| | ||
| // IMPORTANT: This example is just taking the very first valid cert. In a real app, you will selected the cert you want to sign the document with |
There was a problem hiding this comment.
Suggested change
| // IMPORTANT: This example is just taking the very first valid cert. In a real app, you will selected the cert you want to sign the document with | |
| // IMPORTANT: This example is taking the very first valid certificate. In a real app, you need to select the certificate you want to sign the document with. |
There was a problem hiding this comment.
Handled,
Except the "need to" part. The developer can/must select whatever certificate it is from the Store that they use. In most cases the first certificate will be the SSL one, and you don't want that one for the PDF document.
| var signatureField = new SignatureField(signatureName); | ||
| signatureField.Signature = new Telerik.Windows.Documents.Fixed.Model.DigitalSignatures.Signature(certificate); | ||
| | ||
| // close the local cert store now that we're done |
There was a problem hiding this comment.
Suggested change
| // close the local cert store now that we're done | |
| // Close the local cert store now that you're done. |
| | ||
| var document = new PdfFormatProvider().Import(unsignedDocumentBytes); | ||
| | ||
| // For the sake of this demo, we are adding a new page and adding a new signature field there, if your document already has a signature field, you can search for it instead |
There was a problem hiding this comment.
Suggested change
| // For the sake of this demo, we are adding a new page and adding a new signature field there, if your document already has a signature field, you can search for it instead | |
| // This demo adds a new page and a new signature field there. If your document already has a signature field, you can search for it instead. |
| FormSource = new FormSource { Size = new Size(220, 220) } | ||
| }; | ||
| | ||
| // We will use the editor to fill the Form XObject. |
There was a problem hiding this comment.
Suggested change
| // We will use the editor to fill the Form XObject. | |
| // The demo uses the editor to fill the Form XObject. |
| widget.Content.NormalContentSource = form.FormSource; | ||
| widget.RecalculateContent(); | ||
| | ||
| // Finally add the SignatureWidget to the page's annotations |
There was a problem hiding this comment.
Suggested change
| // Finally add the SignatureWidget to the page's annotations | |
| // Finally add the SignatureWidget to the page's annotations. |
dimodi reviewed Jan 25, 2024
| </PdfViewerToolBar> | ||
| </TelerikPdfViewer> | ||
| | ||
| @code { |
There was a problem hiding this comment.
The tabbing on some lines looks off.
dimodi reviewed Jan 25, 2024
| | ||
| ## Notes | ||
| | ||
| - The Telerik Blazor PdfViewer does not currently support digital signature management in the UI. |
There was a problem hiding this comment.
This repeats similar content above. Since it's the reason to create a KB, I guess the statement is unnecessary here.
| Looks like I do not have edit permissions to this branch to make the suggested changes :/
|
There was a problem hiding this comment.
Since I cannot make edits to the branch, here is the updated version of the entire file, after making all the recommended changes.
@dimodi Can you make the edit on my behalf? Or add me as a collaborator and I will update the PR. Thanks!
--- title: Signing PDFs with PdfPRocessing in PdfViewer description: Learn how to use PdfProcessing to sign PDFs using the Telerik PdfViewer in a web application. type: how-to page_title: How to Sign PDFs in Telerik PDF Viewer slug: pdfviewer-sign-pdfs tags: telerik, pdf, viewer, sign, digital signature res_type: kb --- ## Environment | Product | Version | | --- | --- | | RadPdfProcessing for Document Processing | 2023.3 | | Telerik UI for Blazor PdfViewer | 2023.3 | ## Description I want to be able to apply a digital signature to a document in the Telerik UI for Blazor PdfViewer. ## Solution 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. 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. 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. 3. Reload the document into the PdfViewer. See [PdfViewer - Overview](https://docs.telerik.com/blazor-ui/components/pdfviewer/overview) for instructions. ## Example ```csharp <TelerikPdfViewer Data="@PdfSource"> <PdfViewerToolBar> <PdfViewerToolBarOpenTool /> <!-- all other buttons here --> <PdfViewerToolBarSeparator /> <PdfViewerToolBarCustomTool> <TelerikButton OnClick="@OnSignPdfClick">SIGN</TelerikButton> </PdfViewerToolBarCustomTool> </PdfViewerToolBar> </TelerikPdfViewer> @code { private byte[] PdfSource { get; set; } private async Task OnPdfDownload(PdfViewerDownloadEventArgs args) { args.FileName = "My.pdf"; } private async Task OnSignPdfClick() { var unsignedDocument = this.PdfSource; var signedDocument = SignDocument(this.PdfSource); this.PdfSource = signedDocument; } private byte[] SignDocument(byte[] unsignedDocumentBytes) { // **** PHASE 1 - Get certificate **** // X509Certificate2 certificate = null; // OPTION 1 - BRING YOUR OWN CERTIFICATE FILE // RadPdfProcessing enables you to sign and validate signature fields using standard signature encodings // adbe.x509.rsa_sha1 (PKCS #1) // adbe.pkcs7.sha1 (PKCS #7) // adbe.pkcs7.detached (PKCS #7 Detached) //certificate = new System.Security.Cryptography.X509Certificates.X509Certificate2(certificateFilePath, certificateFilePassword); // OPTION 2 - USE AN EXISTING CERTIFICATE var x509Store = new X509Store("MY", StoreLocation.CurrentUser); x509Store.Open(OpenFlags.ReadOnly | OpenFlags.OpenExistingOnly); var validCerts = x509Store.Certificates.Find(X509FindType.FindByTimeValid, DateTime.Now, false); // 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. certificate = validCerts.FirstOrDefault(); // **** PHASE 2 - Add certificate to SignatureField and use certificate **** // // The name of the signature must be unique. var signatureName = "John Doe"; // The Signature object is added to a signature field, so we can add a visualization to it. var signatureField = new SignatureField(signatureName); signatureField.Signature = new Telerik.Windows.Documents.Fixed.Model.DigitalSignatures.Signature(certificate); // Close the local cert store now that you're done x509Store.Close(); // **** PHASE 3 - IMPORT DOCUMENT and insert signature field **** // var document = new PdfFormatProvider().Import(unsignedDocumentBytes); // 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. RadFixedPage page = document.Pages.AddPage(); // This is the Form XObject element that represents the contents of the signature field. var form = new Telerik.Windows.Documents.Fixed.Model.Objects.Form { FormSource = new FormSource { Size = new Size(220, 220) } }; // This demo uses the editor to fill the Form XObject. var formEditor = new FixedContentEditor(form.FormSource); form.Position.Translate(10, 10); formEditor.DrawCircle(new Point(50, 50), 20); formEditor.DrawText(signatureName); // The widget contains the Form XObject and defines the appearance of the signature field. var widget = signatureField.Widgets.AddWidget(); widget.Rect = new Rect(200, 600, 100, 100); widget.Border = new AnnotationBorder(10, AnnotationBorderStyle.Solid, null); widget.Content.NormalContentSource = form.FormSource; widget.RecalculateContent(); // Finally, add the SignatureWidget to the page's annotations. page.Annotations.Add(widget); var editor = new FixedContentEditor(page); editor.Position.Translate(200, 400); editor.DrawForm(form.FormSource); document.AcroForm.FormFields.Add(signatureField); widget.RecalculateContent(); widget.AppearanceCharacteristics.Background = new Telerik.Windows.Documents.Fixed.Model.ColorSpaces.RgbColor(255, 0, 0); // **** PHASE 4 - EXPORT DOCUMENT **** // byte[] signedDocBytes = new PdfFormatProvider().Export(document); return signedDocBytes; } } Notes
- You can use Telerik PdfProcessing to digitally sign the PDF on the server side.
- 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.
See Also
| @@ -0,0 +1,152 @@ | |||
| --- | |||
| title: Signing PDFs with PdfPRocessing in DdfViewer | |||
| 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. | ||
| | ||
| 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. | ||
| 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/security/digital-signatures) for instructions. |
| </PdfViewerToolBar> | ||
| </TelerikPdfViewer> | ||
| | ||
| @code { |
| x509Store.Open(OpenFlags.ReadOnly | OpenFlags.OpenExistingOnly); | ||
| var validCerts = x509Store.Certificates.Find(X509FindType.FindByTimeValid, DateTime.Now, false); | ||
| | ||
| // IMPORTANT: This example is just taking the very first valid cert. In a real app, you will selected the cert you want to sign the document with |
There was a problem hiding this comment.
Handled,
Except the "need to" part. The developer can/must select whatever certificate it is from the Store that they use. In most cases the first certificate will be the SSL one, and you don't want that one for the PDF document.
| var signatureField = new SignatureField(signatureName); | ||
| signatureField.Signature = new Telerik.Windows.Documents.Fixed.Model.DigitalSignatures.Signature(certificate); | ||
| | ||
| // close the local cert store now that we're done |
| widget.Content.NormalContentSource = form.FormSource; | ||
| widget.RecalculateContent(); | ||
| | ||
| // Finally add the SignatureWidget to the page's annotations |
| | ||
| ## Notes | ||
| | ||
| - The Telerik Blazor PdfViewer does not currently support digital signature management in the UI. |
| ## Notes | ||
| | ||
| - The Telerik Blazor PdfViewer does not currently support digital signature management in the UI. | ||
| - You can use Telerik PdfProcessing to digitally sign the PDF on the server-side. |
| ## See Also | ||
| | ||
| - [PdfViewer - Overview](https://docs.telerik.com/blazor-ui/components/pdfviewer/overview) | ||
| - [Document Processing Digital Signature documentation](https://docs.telerik.com/devtools/document-processing/libraries/radpdfprocessing/features/security/digital-signatures) |
| ## See Also | ||
| | ||
| - [PdfViewer - Overview](https://docs.telerik.com/blazor-ui/components/pdfviewer/overview) | ||
| - [Document Processing Digital Signature documentation](https://docs.telerik.com/devtools/document-processing/libraries/radpdfprocessing/features/security/digital-signatures) |
There was a problem hiding this comment.
You're correct, it is in the Features section of the documentation. I'm not sure where this one came from, could be hallucination, or that it is a last minute copy/paste mistake on my part.
It seems @LanceMcCarthy has insufficient access to the repo. Committing changes on his behalf.
| @LanceMcCarthy I applied the changes on your behalf. Please, double-check if everything's OK since there were some issues with how GitHub handled your comment with the changes. |
LanceMcCarthy approved these changes Jan 29, 2024
| @ikoevska The looks good to me. Next time, I'm going to try a Fork -> PR -> PR to see if it fixes the mess this has become :D |
ntacheva approved these changes Jan 29, 2024
| Synced with @LanceMcCarthy that we can remove product versioning as we do not normally include it unless we are targeting a specific version or if the KB applies to older versions. I updated the environment markup to follow the pattern we are using for the rest of the KBs. |
ntacheva dismissed ikoevska’s stale review All requested changes are addressed and confirmed. I am dismissing the review, so I can merge and plug this into the RC.
github-actions bot deleted the new-kb-pdfviewer-sign-pdfs-416f047ee2034e88a376296b55ae0d2c branch Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit. This suggestion is invalid because no changes were made to the code. Suggestions cannot be applied while the pull request is closed. Suggestions cannot be applied while viewing a subset of changes. Only one suggestion per line can be applied in a batch. Add this suggestion to a batch that can be applied as a single commit. Applying suggestions on deleted lines is not supported. You must change the existing code in this line in order to create a valid suggestion. Outdated suggestions cannot be applied. This suggestion has been applied or marked resolved. Suggestions cannot be applied from pending reviews. Suggestions cannot be applied on multi-line comments. Suggestions cannot be applied while the pull request is queued to merge. Suggestion cannot be applied right now. Please check back later.
No description provided.