The signature soft pad, which is included with the Document Viewer, is used to capture a signer's graphic signature. This SVG image is patched into the signature field and digitally signed.

This process is already secure because the data is added, the signature is added and the document is digitally signed and therefore tamper-proof. However, there are some legal requirements that make it necessary to prove that a signature belongs to a particular person. Therefore, the raw signature data will be available in a future version of the Document Viewer.

Signature Points

An array of SignaturePoint arrays is included in the SignatureData object passed by the viewer. The location of each captured signature point and a timestamp are stored in the SignaturePoint class.

Learn More

Learn how to handle signature requests server-side. The most common server-side Web API methods for handling electronic signatures are described in this article.

Common Web API Methods for Handling E-Signature Workflows in ASP.NET Core C#

Calculate the Duration

For example, you can use this jagged array to calculate the total time of signature capture.

[HttpPost]
public string HandleSignature([FromBody] SignatureData data) {

  var signatureLines = data.SignatureLines;

  var startTime = DateTimeOffset.FromUnixTimeMilliseconds(signatureLines[0][0].CreationTimeStamp).DateTime;
  var endTime = DateTimeOffset.FromUnixTimeMilliseconds(signatureLines[0][signatureLines[0].Length - 1].CreationTimeStamp).DateTime;

  var duration = endTime - startTime;

  //...
}

This array could be serialized and stored in a database or encrypted in the document for later comparison with the actual signature stored for the signer. In the event that the signer doesn't have a specific signature stored, the way in which the signer creates his or her own signature can be played back and compared.

Replay the Signature

Based on the timestamps, the following JavaScript code replays the array, including the write speed.

async function handleSignature() {
    const canvas = document.getElementById("signature");
    const ctx = canvas.getContext("2d");
    const signature = JSON.parse(json);

    ctx.beginPath();
    ctx.strokeStyle = "blue";
    ctx.lineWidth = 5;

    for (let i = 0; i < signature[0].length; i++) {
        const { x, y, creationTimeStamp } = signature[0][i];

        if (i === 0) {
            ctx.moveTo(x, y);
        } else {
            const duration = creationTimeStamp - signature[0][i - 1].creationTimeStamp;
            await drawLine(ctx, x, y, duration);
            ctx.stroke();
        }
    }
}

function drawLine(ctx, x, y, duration) {
    return new Promise((resolve) => {
        setTimeout(() => {
            ctx.lineTo(x, y);
            resolve();
        }, duration);
    });
}

This can be used to compare a signer's actual signing with stored signature data.

The new feature adds an extra layer of security to the process of signing electronic documents.

Stay tuned for more features!