Creating a User Control to Capture Signatures on a Tablet PC

  • Article

 

Leszynski Group, Inc.

March 2006

Applies to:
   Microsoft Tablet PC Platform SDK
   Microsoft Windows XP Tablet PC Edition 2005
   Microsoft Visual Studio .NET 2003

Summary: This article and sample code demonstrate how to write your own user control to collect and render ink signatures on a Tablet PC, and to how to encrypt and serialize the signatures for safe transmission and storage. (8 printed pages)

Click here to download the code for this article.

Contents

Introduction
InkSecureSignature Overview
InkSecureSignature Architecture
Using InkSecureSignature
Extending InkSecureSignature
Conclusion
Biography

Introduction

This article and sample code provide an example of how to write a custom user control to collect and store of an electronic signature created on a Tablet PC. The sample code demonstrates how to:

  • Collect an ink signature.
  • Remove attributes from the signature that would make it reusable if expropriated.
  • Serialize and encrypt the signature for safe storage in a file or a database.
  • Render the signature in bitmap form for display and printing.

A digital ink signature should not be confused with a digital signature, which generally refers to digital certificates administered by trusted third parties known as certificate authorities. To prevent such confusion, we use the term e-signature in this article to refer to a digitized signature created with a pen and ink on a Tablet PC. To learn about the conceptual, design, and legal issues related to e-signature capture and usage, see our related article Digital Ink Signatures - Concepts and Technologies.

We created the accompanying sample code by using Visual Studio .NET 2003 (.NET Framework 1.1) and wrote it in Visual Basic .NET. However, the sample includes compiled binaries that can be demonstrated with the .NET Framework version 1.1 and without Visual Studio. For installation instructions and for use cases that you can use to demonstrate capturing e-signatures with a tablet pen, see Using the InkSecureSignature Sample (UsingInkSecureSignature.doc), which is a part of the sample download.

The sample code can be converted successfully to Visual Studio 2005 without errors but has not been extensively tested with the .NET Framework 2.0.

InkSecureSignature Overview

InkSecureSignature was built to provide a simple, custom Windows Forms control for the collection and storage of e-signatures on a Tablet PC. The InkSecureSignature control is reusable in your applications as is, or with modifications.

The collection of e-signatures provides value for document and data authentication when using a Tablet PC as digital paper for the mobilized collection of data. Use cases examples for the InkSecureSignature control include:

  • Using an e-signature to approve a digital sales order.
  • Collecting e-signatures on digital petitions and surveys.
  • Using an e-signature to lock or validate data files.
  • Logging-in to applications with an e-signature.

Note   InkSecureSignature does not perform or support signature verification.

InkSecureSignature Architecture

InkSecureSignature is a user control whose primary part is an InkOverlay object:

Public Class InkSecureSignature
    Inherits System.Windows.Forms.UserControl
    Private WithEvents signatureInkOverlay As InkOverlay

Additionally, InkSecureSignature contains a TextBox control to hold the signer's name, a Clear button to erase the e-signature, and an Accept button to finalize e-signature collection and processing. Figure 1 shows the UI layout within the Windows Forms Designer.

Figure 1. InkSecureSignature control in the Designer

The underlying data structure of the InkSecureSignature control is contained in the properties of the InkSecureSignatureData class, as shown in Figure 2.

Figure 2. InkSecureSignatureData class

InkSecureSignatureData contains the following properties of the e-signature:

  • AcquiredSignatureStartOn – The timestamp from when the first stroke of the e-signature is generated.
  • BiometricEncryptionSubmittedOn – The timestamp from when the request is submitted to encrypt the e-signature. This timestamp logs when the encryption provider class is called.
  • BiometricEncryptionCompletedOn – The timestamp from when the request to encrypt the e-signature is completed. This timestamp logs when the encryption provider class completes its tasks. If you replace the encryption provider with a Web service or other encryption engine in your applications, you can use the difference between this timestamp and the BiometricEncryptionSubmittedOn timestamp to provide a measure of the encryption provider's turnaround time.
  • EncryptedBiometricData – The encrypted version of the InkSecureSignatureData class, which includes the original InkSecureSignature ink.
  • HardwareInfo – Information about the Tablet PC used to collect the e-signature; this can be used as an additional biometric. Currently, only the hardware value MachineName is provided in this property.
  • InkSecureSignature – The e-signature's Strokes collection for use by the encryption provider.
  • InkWashedSignature – The washed ink strokes from the e-signature are returned by the encryption provider in this property. Washed ink in this article refers to ink where the non-point property data, such as pressure, is removed. This leaves the e-signature data with insufficient fidelity to be used to sign other electronic documents if it is stolen.
  • SignerAcceptedOn – The timestamp from when the signer completes (accepts) the e-signature.
  • SignersName – The name of the signer as entered in the control's text box.

Using InkSecureSignature

Figure 3 shows the sample form using the InkSecureSignature control to collect an e-signature.

Figure 3. Collecting an e-signature with the InkSecureSignature control

When using the control, the signer creates an e-signature with the tablet pen, uses Tablet PC Input Panel to enter the signer's name string as text, and then taps Accept. In the Click event for the Accept button, the control passes the e-signature to the Encrypt method of the BiometricEncryptionForInk class, which:

  1. Creates a washed version of the e-signature's strokes by removing pressure and other packet information. It does so by using the GetFlattenedBezierPoints method in Microsoft.Ink.Stroke. The metadata is removed from the ink so that only points remain in the version displayed in the user interface and in printed output. This prevents the full-fidelity e-signature from being maliciously expropriated and re-used to sign other digital documents.
  2. Serializes the original e-signature and encrypts the serialized stream so that it cannot be expropriated, then destroys the e-signature's original ink so that it is not in memory.
  3. Stores the encrypted and serialized stream in the EncryptedBiometricData property where it can be accessed by code. This enables you to store the e-signature safely in a database table or file with the other data from the form.

The BiometricEncryptionForInk object is a standalone class so that you can rewrite it or replace it with the encryption provider that is most appropriate for your application. The BiometricEncryptionForInk class first washes the ink to remove Stroke information:

' Create a working copy of the SignatureData's ink.
CopyOfSourceInk.Load(signatureData.InkSecureSignature)

' Wash each stroke using GetFlattenedBezierPoints
' to remove all pressure information.
For Each Stroke As Microsoft.Ink.Stroke In CopyOfSourceInk.Strokes
    WashedInk.CreateStroke(Stroke.GetFlattenedBezierPoints(500))
Next

signatureData.InkWashedSignature = WashedInk.Save(Ink.PersistenceFormat.InkSerializedFormat, Ink.CompressionMode.Default)

Next, the BiometricEncryptionForInk class encrypts the e-signature data:

' Block sizes and buffer for stream operations.
Const SMALLEST As Integer = 86
Const BLOCK As Integer = 128
Dim Buffer(SMALLEST - 1) As Byte

' Serialized signature objects.
Dim SourceStream As New System.IO.MemoryStream
Dim EncryptedStream As New System.IO.MemoryStream

' Create a key and establish RSAKeyInfo.
Dim PublicKey As Byte() = {214, 46, 220, 83, 160, 73, 40, 39, 201, 155, _
     19, 202, 3, 11, 191, 178, 56, 74, 90, 36, 248, 103, 18, 144, 170, _
     163, 145, 87, 54, 61, 34, 220, 222, 207, 137, 149, 173, 14, 92, _
     120, 206, 222, 158, 28, 40, 24, 30, 16, 175, 108, 128, 35, 230, _
     118, 40, 121, 113, 125, 216, 130, 11, 24, 90, 48, 194, 240, 105, _
     44, 76, 34, 57, 249, 228, 125, 80, 38, 9, 136, 29, 117, 207, 139, _
     168, 181, 85, 137, 126, 10, 126, 242, 120, 247, 121, 8, 100, 12, _
     201, 171, 38, 226, 193, 180, 190, 117, 177, 87, 143, 242, 213, 11, _
     44, 180, 113, 93, 106, 99, 179, 68, 175, 211, 164, 116, 64, 148, _
     226, 254, 172, 147} 
Dim Exponent As Byte() = {1, 0, 1}
Dim RSAKeyInfo As New RSAParameters
RSAKeyInfo.Modulus = PublicKey
RSAKeyInfo.Exponent = Exponent
Dim RSA As New System.Security.Cryptography.RSACryptoServiceProvider
RSA.ImportParameters(RSAKeyInfo)

' Serialize the signature.
Dim Serializer As New System.Xml.Serialization.XmlSerializer(GetType(InkSecureSignatureData))
Serializer.Serialize(SourceStream, signatureData)

' Cycle through the in memory stream and encrypt it.
SourceStream.Position = 0

While (SourceStream.Read(Buffer, 0, SMALLEST) >= SMALLEST)
  If (SourceStream.Position < SourceStream.Length) Then
    EncryptedStream.Write(RSA.Encrypt(Buffer, True), 0, BLOCK)
  End If
End While

After encryption is complete, the control has safely locked the e-signature data. The control then renders the washed ink and fires a Signed event so that the calling form can react—for example, locking the record for edits if signing is the final step in data entry.

The control's Print method uses System.Drawing.Graphics and Microsoft.Ink.Renderer to create a printable bitmap version of the e-signature:

With graphics
...
  ' Draw header text and washed Ink.
  .DrawString("RSA Encrypted Digital Biometric Signature", _
      Me.Font, _
      New SolidBrush(Color.Blue), _
      ThisRect.Left + 3, _
      VerticalLocation + 3)

  graphics.SmoothingMode = SmoothingMode.AntiAlias
  graphics.CompositingMode = CompositingMode.SourceOver
  graphics.CompositingQuality = CompositingQuality.HighQuality
  graphics.InterpolationMode = InterpolationMode.HighQualityBilinear

  Dim da As New DrawingAttributes(Color.Black)
  da.AntiAliased = True
  da.FitToCurve = True
  da.RasterOperation = RasterOperation.Black
  For Each Stroke As Stroke In signatureInkOverlay.Ink.Strokes
      Renderer.Draw(graphics, Stroke, da)
  Next

  .DrawString("Signed By: " & _
      InkSecureSignatureDataObject.SignersName & " on " & _
      InkSecureSignatureDataObject.SignerAcceptedOn.ToShortDateString & " at " & _
      InkSecureSignatureDataObject.SignerAcceptedOn.ToShortTimeString, _
      Me.Font, _
      New SolidBrush(Color.Blue), _
      ThisRect.Left + Indentation, _
      ThisRect.Height - BottomLineY + 1)

Figure 4 shows the e-signature from Figure 3 converted to a printable bitmap. A Bitmap object does not yield a high-fidelity version of the signature, but this is by-design; corrupting the viewable and printable signature graphic lessens its value to those who would attempt to misuse it to forge other digital documents.

Figure 4. An e-signature formatted for printing

The control's Value property enables developers to get or set the data for the control. This property is structured as an XML document containing the data stream from the InkSecureSignatureData class structure that contains the e-signature as created. By using XML for the control's value, a collected e-signature may be:

  • Stored in a database.
  • Retrieved from the database for display.
  • Retrieved from the database, decrypted, and reconstructed back to full-fidelity strokes in support of e-signature verification or an audit trail.

Figure 5 shows the Value property of the e-signature from Figure 3, saved as an XML document and opened with Visual Studio.

Figure 5. The InkSecureSignature control's Value property saved as XML

Extending InkSecureSignature

The InkSecureSignature control's code can be used as the basis for writing your own e-signature component. Logical enhancements to this control include:

  • Retrieve a saved e-signature from the database, reconstruct it, and pass to an e-signature verification server.
  • Acquire additional hardware information to store in the HardwareInfo property; such information could include user login data and low-level hardware properties.
  • Create a control array wrapper to allow for multiple signers.
  • Add additional text fields for signer information, such as "Reason for Signing", "Job Title", and so forth.
  • Add graphical elements to enhance the appearance of the e-signature panel, such as a lock icon that replaces the Accept button after the user clicks it, or an eraser icon in place of the Clear button.
  • Extend the control to support additional color and layout properties, or the current Windows theme.
  • Expand printing capabilities, such as scalable printing.
  • Add save-to-file functionality.

Conclusion

The Tablet PC provides an excellent tool for data collection when used to deliver digital forms as "digital paper". However, to fully reproduce the capabilities of paper forms, you must provide a form's users with the ability to capture and store an e-signature. Using the techniques and code in this article, your custom applications can expose a control that provides ink collection specifically suited for e-signatures. The control includes basic functionality for protecting the e-signature from theft, for storing and retrieving an e-signature in a data storage medium, and for printing or saving the e-signature as a graphic. You can easily leverage the Tablet PC SDK to tune this sample's ink collection experience to fit the needs of your business.

Biography

Leszynski Group is a solution provider and independent software developer specializing in development tools, Tablet PC applications, and mobilized databases. Leszynski Group is a regular contributor of MSDN content, and the creator of popular utilities such as the Snipping Tool and Physics Illustrator.