This article shows how to use the Document Viewer to acquire an electronic signature and to digitally sign the signature fields by routing the request to a custom controller method.

Redirect URL

In version 31, a redirect URL can be provided using the RedirectUrlAfterSignature property that is used to forward the signature data from the integrated DocumentViewer server-side controller. The following code shows how to attach the custom controller method Home/SignDocument:

@Html.TXTextControl().DocumentViewer(settings => {
  settings.DocumentPath = "App_Data/template.docx";
  settings.Dock = DocumentViewerSettings.DockStyle.Fill;
  settings.ShowThumbnailPane = false;
  settings.SignatureSettings = new SignatureSettings() {
    ShowSignatureBar = true,
    OwnerName = "Paul Paulsen",
    SignerName = "Tim Typer",
    SignerInitials = "TT",
    RedirectUrlAfterSignature = this.Url.Action("SignDocument", "Home", null, Context.Request.Scheme, null),
    SignatureBoxes = new SignatureBox[] { 
      new SignatureBox("txsign") { 
      SigningRequired = true, Style = SignatureBox.SignatureBoxStyle.Signature }
  }};
}).Render()

The following screenshot shows the Document Viewer that is used to acquire the electronic signature (drawing) from the user:

Custom Processing

After the user signed the document, the electronic signature is patched to the document and forwarded to the given URL including signature data such as the signature image and timestamp information. The following sequence diagram shows this workflow:

The implemented HttpPost endpoint SignDocument is requested by the Document Viewer after the signing process. In this method, a digital certificate is applied to the signed electronic signature representation using the SignatureFields property. This property specifies an array of DigitalSignature objects, each of which defines an X.509 certificate and is associated with a SignatureField in the document. These certificates can be used to digitally sign a PDF or a PDF/A file.

[HttpPost]
public string SignDocument([FromBody] TXTextControl.Web.MVC.DocumentViewer.Models.SignatureData data) {

  byte[] bPDF;

  // create temporary ServerTextControl
  using (TXTextControl.ServerTextControl tx = new TXTextControl.ServerTextControl()) {
    tx.Create();

    // load the document
    tx.Load(Convert.FromBase64String(data.SignedDocument.Document),
      TXTextControl.BinaryStreamType.InternalUnicodeFormat);

    // create a certificate
    X509Certificate2 cert = new X509Certificate2("App_Data/textcontrolself.pfx", "123");

    // assign the certificate to the signature fields
    TXTextControl.SaveSettings saveSettings = new TXTextControl.SaveSettings() {
      CreatorApplication = "TX Text Control Sample Application",
      SignatureFields = new DigitalSignature[] {
        new TXTextControl.DigitalSignature(cert, null, "txsign")
      }
    };

    // save the document as PDF
    tx.Save(out bPDF, TXTextControl.BinaryStreamType.AdobePDFA, saveSettings);
  }

  // return as Base64 encoded string
  return Convert.ToBase64String(bPDF);
}

Return Signed PDF

In this sample project, the created PDF document is returned as a Base64 encoded string. Whatever is returned by this endpoint is automatically forwarded to the client-side method specified through the setSubmitCallback method.

window.addEventListener("documentViewerLoaded", function () {
        TXDocumentViewer.signatures.setSubmitCallback(signatureComplete);
});

function signatureComplete(e) {
    var element = document.createElement('a');
    element.setAttribute('href','data:application/pdf;;base64,' + e);
    element.setAttribute('download', "results.pdf");
    document.body.appendChild(element);
    element.click();
}