How to Sign PDF Documents in JavaScript Using a Client-Side API
Tags: webdev, devops, javascript, tutorial
Published: 2023-06-22 16:08:51

---
canonical_url: https://developer.mescius.com/blogs/how-to-sign-pdf-documents-in-javascript-using-client-side-api
description: Learn how to sign PDF documents in JavaScript using a client-side API. See more from GrapeCity Documents today.
---
PDF documents are a thing of past, present, and future based on all the significant features offered by this document format. Digital signatures are one feature that lets users add this document format to the legal process. Adding a digital signature to a document validates the document by an authorized signatory.

Usually, a UI tool is required to apply signatures to PDF documents like Adobe Acrobat. [**GrapeCity Documents PDF Viewer**](https://developer.mescius.com/document-solutions/javascript-pdf-viewer) supports signing a PDF document using a UI and a client-side API. You can add graphical signatures using the Signature tool as depicted [here](https://developer.mescius.com/document-solutions/javascript-pdf-viewer/demos/signatures/graphical-signature/edit-signature-tool/purejs) or digital signatures using client-side API.

This blog will describe signing a PDF document using client-side API.

Let’s start by understanding a basic scenario to be considered in the blog ahead. The image below depicts an employee’s timesheet in PDF format. This document must be signed by both the employee and supervisor to be considered valid. Because this can be a weekly or monthly task, it would be very convenient if the process could be automated and the signatures could be applied through API.

![Sign PDF JavaScript](https://files.grapecity.com/gc-website-media/0sidbxul/image1.png?width=500&height=434.4073647871116)

Here is a quick view of the signed version of the timesheet, wherein the signatures have been applied using GcPdfViewer client-side API:

![Sign PDF JavaScript](https://files.grapecity.com/gc-website-media/y0khilyj/image2.png?width=500&height=439.8907103825137)

## How to sign PDF documents using client-side API

Grapecity Documents PDF Viewer client-side API enhances the functionality the Save method offers to apply a digital signature. This method now includes an optional save settings parameter of type **SaveSettings**which can be used to specify signature settings for saving a document with a signature.

The SaveSettings type has a **Sign** property of type **SignatureInfo** which lets you specify the signature settings. The sample code snippet below depicts the same:

```
    viewer.save("test.pdf", { sign: { signatureField: "field1", signerName: "John Doe" } } );
```

When invoking this method, it sends a request to the server to apply the digital signature and send back the signed document, which is then loaded in GcPdfViewer.

Now, let's move on to understanding how to implement the scenario described using the Save method. The steps below will guide you ahead.

### Step 1: Configure Application

1\. Open Visual Studio 2022 and create a new ASP. NET Core Web Application, choosing the appropriate project template.

![Sign PDF JavaScript](https://files.grapecity.com/gc-website-media/owgbjd4j/image3.png?width=500&height=342.12840809146877)

2\. Choose .NET Core 6.0 as the project's target framework.

![Sign PDF JavaScript](https://files.grapecity.com/gc-website-media/lpmjnbbx/image4.png?width=500&height=352.30352303523034)

3\. Open Package Manager Console choosing Tools → NuGet Package Manager → Package Manager Console. Run the following command to install GcDocs PDF Viewer. Ensure that the directory location in the command prompt is set to the lib folder in the project.

```
    npm install @grapecity/gcpdfviewer
```

The GcDocs PDF Viewer will be installed in _<app_name>\<app_name>\wwwroot\lib\node_modules_ folder.

![Sign PDF JavaScript](https://files.grapecity.com/gc-website-media/tbkoggzw/image5.png?width=500&height=311.3342898134864)

### Step 2: Add SupportApi to the Project

The SupportApi package, when configured for the project, provides the edit features for GcPdfViewer. Hence, it must be configured to add digital signatures too.

The steps ahead will provide the details.

1\. To add SupportApi to the project, install **GrapeCity.Documents.Pdf.ViewerSupportApi** package using NuGet Package Manager.

![Sign PDF JavaScript](https://files.grapecity.com/gc-website-media/lt4n5kne/image6.png?width=500&height=310.61692969870876)

**GrapeCity.Documents.Pdf.ViewerSupportApi** package is added to your project dependencies under the **Dependencies** → **Packages** folder and can be observed in your project’s solution explorer window as depicted below.

![Sign PDF JavaScript](https://files.grapecity.com/gc-website-media/kuynqqnf/image7.png?width=464.1472868217054&height=500)

2\. Create a **'Controllers'** folder in the project folder and add a class file **'SupportApiController.cs**' to it as shown below:

![Sign PDF JavaScript](https://files.grapecity.com/gc-website-media/rh0fdhok/image8.png?width=500&height=311.51079136690646)

3\. Replace the code in **'SupportApiController.cs'** with the following code snippet:

```
    using GrapeCity.Documents.Pdf.ViewerSupportApi.Controllers;
    using Microsoft.AspNetCore.Mvc;

    namespace SignPDF.Controllers
    {
    	[Route("api/pdf-viewer")]
    	[ApiController]
    	public class SupportApiController : GcPdfViewerController
    	{

    	}
    }
```

4\. Modify the default content of <app_name>\<app_name>\Pages\Index.cshtml with the following code, which connects the server-side SupportApi to the client-side viewer using the **SupportApi** property.

The code also defines a method to configure the viewer UI to add two buttons, one for applying the employee's signature and another for applying the supervisor's signature. When clicked, these buttons invoke the save method of GcPdfViewer to apply and save the PDF file with the specified signatures. The sign property has multiple fields to define the signature, including signatureField, signerName, and location, as used in the example code below:

```
    @page
    @model IndexModel
    @{
    	ViewData["Title"] = "Home page";
    }

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Sign document using digital signature</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="./src/styles.css">
    <style>
    	#viewer {
    		height: 600px;
    		width: 100%;
    	}
    </style>
    <script src="~/lib/node_modules/@@grapecity/gcpdfviewer/gcpdfviewer.js"></script>
    <script>
    	window.onload = function () {
    		//Initialize GcPdfViewer
    		var viewer = new GcPdfViewer("#viewer", getViewerOptions());

    		//Invoke method to configure viewer UI
    		configureViewerUI(viewer);

    		//Load the sample PDF file containing signature fields
    		viewer.open("pdf/sign-with-digital-signature.pdf");
    	}

    	//Define GcPdfViewer options
    	function getViewerOptions() {
    		return {
    			workerSrc: "//node_modules/@@grapecity/gcpdfviewer/gcpdfviewer.worker.js",
    			supportApi: {
    				apiUrl: "api/pdf-viewer",
    				token: "support-api-demo-net-core-token-2023",
    				webSocketUrl: false
    			},
    			restoreViewStateOnLoad: false
    		};
    	}

    	//Define method to configure viewer UI
    	//It defines the buttons used to sign PDF document and add them to viewer toolbar 
    	function configureViewerUI(viewer) {
    		viewer.toggleSidebar(false);
    		viewer.toolbar.addItem({
    			text: "Apply employee signature", key: 'employee-signature',
    			title: 'Apply employee signature', enabled: false,
    			action: function () {
    				const locationName = location.hostname || "Unknown";
    				viewer.save(undefined, { sign: { signatureField: "Employee", signerName: "Employee Name", location: locationName }, reload: true });
    			},
    			onUpdate: function () {
    				return {
    					enabled: viewer.hasDocument,
    					title: 'Apply employee signature'
    				};
    			}
    		});
    		viewer.toolbar.addItem({
    			text: "Apply supervisor signature", key: 'supervisor-signature',
    			title: 'Apply supervisor signature', enabled: false,
    			action: function () {
    				const locationName = location.hostname || "Unknown";
    				viewer.save(undefined, { sign: { signatureField: "Supervisor", signerName: "Supervisor Name", location: locationName }, reload: true });
    			},
    			onUpdate: function () {
    				return {
    					enabled: viewer.hasDocument,
    					title: 'Apply supervisor signature'
    				};
    			}
    		});
    		viewer.toolbarLayout.viewer.default.mobile = viewer.toolbarLayout.viewer.default = ["employee-signature", "supervisor-signature", "$split", "download", "zoom", "$split", "about"];
    	}
    </script>

    <body>
    	<div id="viewer" style="height:700px;"></div>
    </body>
```

### Step 3: Server-side Signing Implementation

In this step, we will learn how to implement server-side signing using the steps described below:

1\. Modify **Program.cs** by adding the following lines of code to the default code available on the page. The code below also binds the **VerifyToken** and **Sign** events to their respective event handlers::

```
    using GrapeCity.Documents.Pdf.ViewerSupportApi.Connection;
    using GrapeCity.Documents.Pdf.ViewerSupportApi.Controllers;
    using GrapeCity.Documents.Pdf.ViewerSupportApi.Models;
    using ProtoBuf.Meta;
    using System.Reflection;
    using System.Security.Cryptography.X509Certificates;

    var builder = WebApplication.CreateBuilder(args);

    // Add services to the container.
    builder.Services.AddRazorPages();
    builder.Services.AddCors();
    GcPdfViewerHub.ConfigureServices(builder.Services);

    //Server side signing implementation
    var app = builder.Build();
    app.UseCors("WebCorsPolicy");
    GcPdfViewerController.Settings.VerifyToken += VerifyAuthToken;
    GcPdfViewerController.Settings.Sign += OnSign;

    // Configure the HTTP request pipeline.
    if (!app.Environment.IsDevelopment())
    {
        app.UseExceptionHandler("/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }
    app.UseHttpsRedirection();
    app.UseStaticFiles();
    app.UseRouting();
    app.UseAuthorization();

    #pragma warning disable ASP0014 // Suggest using top level route registrations
    IApplicationBuilder applicationBuilder = app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });

    #pragma warning restore ASP0014 // Suggest using top level route registrations
    app.MapRazorPages();
    app.Run();
```

2\. Download and place the [signing certificate](https://gccontent.blob.core.windows.net/gccontent/blogs/gcdocuments/2023065-sign-pdf-document-using-clientside-api/GcPdfTest.pfx) in the project folder → assets folder.

3\. Define event handlers for VerifyToken and Sign events:

```
    //Event handler for VerifyToken event
    private void VerifyAuthToken(object sender, VerifyTokenEventArgs e)
    {
    	// Here is an example of how you can validate the authentication token
    	// provided during viewer initialization - new GcPdfViewer(selector, { supportApi: { token: "support-api-demo" }});.
    	string token = e.Token;
    	if (string.IsNullOrEmpty(token) || !token.StartsWith("support-api-demo"))
    	{
    		e.Reject = true;
    	}
    }

    //Event handler for Sign event
    private void OnSign(object sender, SignEventArgs e)
    {
    	// Example: Implement PDF document signing
        var signatureProperties = e.SignatureProperties;

    	string projectRootPath = Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location);
    	string certificatePath = Path.Combine(projectRootPath, "assets/GcPdfTest.pfx");
    	byte[] certificateBytes = File.ReadAllBytes(certificatePath);
    	if (certificateBytes == null)
    	{
    		e.Reject = true;
    		return;
    	}
    	X509Certificate2 certificate = new X509Certificate2(
    	   certificateBytes, "qq", X509KeyStorageFlags.MachineKeySet | X509KeyStorageFlags.PersistKeySet | X509KeyStorageFlags.Exportable);
    	   signatureProperties.SignatureBuilder = new GrapeCity.Documents.Pdf.Pkcs7SignatureBuilder()
    	    {
    		   CertificateChain = new X509Certificate2[] { certificate },
    		   HashAlgorithm = GrapeCity.Documents.Pdf.Security.OID.HashAlgorithms.SHA512,
    		   Format = GrapeCity.Documents.Pdf.Pkcs7SignatureBuilder.SignatureFormat.adbe_pkcs7_detached
    		};
    }
```

### Step 4: Build and Run the Application

In this final step, we add the sample PDF file to the project folder and execute the application to see the implementation in action.

1\. Download and place the [sample PDF file](https://gccontent.blob.core.windows.net/gccontent/blogs/gcdocuments/2023065-sign-pdf-document-using-clientside-api/sign-with-digital-signature.pdf) in the wwwroot → pdf folder.

2\. Build and run the application to view GcDocs PDF Viewer in your browser, which contains the options to apply digital signatures to PDF documents on the client side.

Head to the [original blog](https://developer.mescius.com/blogs/how-to-sign-pdf-documents-in-javascript-using-client-side-api) to see the implementation in action.

Download the [sample](https://gccontent.blob.core.windows.net/gccontent/blogs/gcdocuments/2023065-sign-pdf-document-using-clientside-api/SignPDF.zip) to explore the implementation in detail.

Refer to the [demo](https://developer.mescius.com/document-solutions/javascript-pdf-viewer/demos/signatures/digital-signature/sign-with-digital-signature/purejs) to explore the same implementation in a pure javascript application.