Replacing the OTP Method UI

The App SDK provides a default UI for OTP registration and authentication that implements the IOtpLiveData interface.

The object that displays your custom UI must also implement the IOtpLiveData interface. In addition, an object of Nok Nok's default UI is created by Nok Nok's MethodUIFactory. Therefore, you must define your own factory to create an object for your custom UI.

The following steps take you through defining your custom UI and your custom factory.

Step 1: Create a custom object that displays your UI. For example, call it SampleOtpUI.

Step 2: Define the following four functions in your custom UI object: onConfirmIdentifier(), onGetCode(), onFinish(), and onGetIdentifier(). These function definitions ensure that your class implements the IOtpLiveData interface.

Step 3: Define a new factory to replace MethodUIFactory. For example, call this new factory SampleMethodUIFactory. Define your new factory to override the createMethodUI() function from MethodUIFactory.

var SampleMethodUIFactory = function() {
  // Store the reference to the current factory.
  var prevMethodUIFactory = MethodUIFactory.getInstance();
  // function definitions to implement IOtpLiveData
  this.createMethodUI = function(methodType, extras, sessionData) {
    if(methodType === AdaptiveType.SMS || 
       methodType=== AdaptiveType.EMAIL){
      // Create default methodUI.
      var otpMethodUI = new OtpMethodUI(extras, sessionData);
      // Create sample UI and pass the methodUI as controller.
      var otpLiveData = new SampleOtpUI(otpMethodUI);
      // Tell the methodUI to use the sample UI.
      otpMethodUI.setLiveData(otpLiveData);
      return otpMethodUI;
    }
    // Otherwise call the previous factory
    return prevMethodUIFactory.createMethodUI(methodType, extras, sessionData);
  }
}

Step 4: When you create an instance of your SampleMethodUIFactory, store it in the MethodUIFactory instance.

MethodUIFactory.setInstance(new SampleMethodUIFactory());

Refer to the Client API Docs for the IOtpLiveData interface for more details.

Working Examples in Tutorial Web App

• Refer to the SampleOtpUI class in the file js/samples.js for implementation of IOtpLiveData interface.

• Refer to SampleMethodUIFactory class in js/Controller.js for usage.