Step 3 - Sign the documents

This step explains how to sign the document, provides details on the UI options available to display the document and suggests some further steps.

Topics found on this page:

Sign the document

After retrieving the sign URL, it can be presented to the signer and it will display the E-Signing service user interface (UI) with the document. The E-Signing service UI can be presented in three modes: Pop-up, Standalone or Embedded. The E-Signing service can be requested to display the UI in either of these modes.

Pop-up user interface

The pop-up option allows customers to present the E-Signing service UI in a window partly covering their own web UI. This will keep the E-Signing features in the context of the web application where it is integrated, without the technical limitations the comes with using iframe.

On mobile devices, the window will cover the entire screen.

A simple pop-up can be setup with similar JavaScript code as below. The pop-up has to be opened by a user action. The example assumes that a button with id “open-popup-button” is used to start the signing flow.

JS

<script>
  document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("open-popup-button").addEventListener("click", openCenteredPopup);
  });

  window.addEventListener("focus", keepPopupInFocus);
  window.addEventListener("click", keepPopupInFocus); // Workaround for Firefox

  let popup;

  // Get the sref (signing reference) part by first calling GetSigningProcesses. This is just an example:
  let url = "https://www.sign-preprod1.Lotus.eu/sign/index.html?sref=19E4C32A43F69E8A1D8A335B33A5A4B81E5BF632";

  function keepPopupInFocus() {
    if (popup && !popup.closed) {
      popup.focus();
    }
  }

  function openCenteredPopup() {
    let width = 700;
    let height = 950;
    let x = window.outerWidth/2 - width/2 + window.screenX;
    let y = window.outerHeight/2 - height/2 + window.screenY;
    openPopup(x, y, width, height);
  }

  function openPopup(x, y, width, height) {
    popup = window.open(url, "width=" + width + ",height=" + height + ",top=" + y + ",left=" + x);
  }
</script>

In the page given by the customer’s exit url (and other customer urls) closing the pop-up can be done with similar JavaScript code as below.

JS

<script>
  window.opener.location.href = "<confirmation page>" + window.location.search;
  window.close();
</script>

Standalone user interface

In the standalone UI, the E-Signing service renders the user interface using the IN Groupe E-Signing visual interface. Compared to the pop-up option, the standalone UI takes over the entire browser window. To access the standalone UI, the following URL can be used (for customer test):

https://www.sign-preprod1.Nets.eu/sign/index.html?sref= <sign-reference>

The sign reference is retrieved from sign URL. Refer Step 2 - Set up the E-Signing client API for details on retrieving sign URL.

The sign reference is sent through the sref parameter for standalone mode.

The resulting page from the above sign URL does not require any further styling from the customer i.e. the signer can be directly taken to the standalone user interface sign URL.

Embedded user interface

Embedded user interface is no longer recommended due to various browser security restrictions when using iframe with content from a different origins than the page itself.

If you want to use the embedded UI option, please see the User experience page.

Test users

Test user details for the different eIDs can be found at the Test users page..

Notification call back

To get information about the status and changes of a sign order, we advice to implement notification call back. This is a notification service with the possibility to send XML notification call back messages to the customers.

The notification call back messages are sent using the TrustSignNotification message protocol using the POST method. The messages sent are based on triggers defined in the sign order. Messages are transmitted as XML files of predefined structure and convey a specific type of information to the receiving system.

The signed document

After signing, an SDO (Signed Data Object) is generated by the IN Groupe E-Signing service. The SDO contains the original document, all signatures on the document and a verification seal. The SDO is contains proof of who and when the document was signed. The signed document should either be sent to the IN Groupe E-Archive service for long term archival or retrieved from IN Groupe E-Signing service.

IN Groupe E-Signing service can also provided the signed document in PAdES (PDF Advanced Electronic Signature) format. PAdES displays all signatures from an SDO in a human-readable format.

E-Archive – must be specified while sending InsertOrder XML message.
GetSDO – is the XML message for fetching SDO.
GetPAdES – is the XML message for fetching PAdES.

Suggested further steps

In E-signing Web Services overview you can find information about more functionality. Topics to consider are:

Get messages
Notifications (e-mail and SMS)
Other possible parameter settings in the sign order, such as:
1. Archival
2. Multiple documents
3. Multiple signers
4. Identification before signing

Own test and production setup

This get started guide and the IN Groupe E-Signing demo app is based on an open test setup.