Setting Up OneSpan Sign's Event Notifier

This blog will walk you through the Event Notifier that was introduced in the 10.13.14 and 11.0.5 releases of OneSpan Sign. When embedding OneSpan Sign’s signing ceremony into an iframe, the Event Notifier can send notifications to the parent host application. This is particularly useful if you want to take actions when certain steps of the signing ceremony have been accomplished. After receiving such a notification, you can interrupt OneSpan Sign’s normal flow to perform some asynchronous task (e.g. ask the user to confirm a request), and then notify OneSpan Sign to resume its normal flow.

Starting the Event Notifier

You can write your OneSpan Sign Event Notifier in plain JavaScript. Your application must be listening to OneSpan Sign’s message events, as shown below:

window.addEventListener('message', receiveMessage, false);

To get your Event Notifier started, your listener should be something along these lines:

function receiveMessage(event) {
      var origin = event.origin || event.originalEvent.origin;
      var data = event.data;
      console.log(data, origin);

      switch (data) {
            case 'ESL:MESSAGE:REGISTER':
                  event.source.postMessage('ESL:MESSAGE:ACTIVATE_EVENTS', origin);
                  break;
            default:
                  event.source.postMessage(data, origin)
                  break;
      }
}

Upon loading a page in an iframe, OneSpan Sign will initially fire an ESL:MESSAGE:REGISTER event. In return, your application must send back to OneSpan Sign the event ESL:MESSAGE:ACTIVATE_EVENTS. If this doesn’t happen, OneSpan Sign will assume that no one is listening, and no other events will be fired.

Interrupting OneSpan Sign’s Normal Flow of Activity

Some events can be temporarily stopped (the events in question are identified in the third column of the table below). For example, you can change the listener above as follows:

switch (data) {
	case 'ESL:MESSAGE:REGISTER':
		event.source.postMessage('ESL:MESSAGE:ACTIVATE_EVENTS', origin);
		break;

	case 'ESL:MESSAGE:SUCCESS:SIGNER_COMPLETE':
		event.source.postMessage('ESL:MESSAGE:SUCCESS:SIGNER_COMPLETE', origin);
		//$("#myIframe").hide();    hide iframe
		window.location.href = "https://www.google.com"; //redirect to google
		break;

	default:
		event.source.postMessage(data, origin)
		break;
}

In the code above, the signer will be redirected to Google's homepage in the parent window (i.e. not inside the iframe) once he/she has completed signing the documents. Note: If events are not sent back as they are received, OneSpan Sign will not resume its normal activity.

Notification Event Types

The following table describes the types of notification events your event listener can listen to.

You can download a complete working example code from the Developer Community Code Share.

If you have questions regarding this blog or anything else concerning integrating OneSpan Sign into your application, visit the developer community forums: developer.esignlive.com. That's it from me. Thank you for reading! If you found this post helpful, please share it on Facebook, Twitter, or LinkedIn.

Haris Haidary
Junior Technical Evangelist
LinkedIn | Twitter 

OneSpan Developer Community

Join the OneSpan Developer Community! Forums, blogs, documentation, SDK downloads, and more.

Join Today