Replacing the OOB method UI

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

The object that displays your custom UI must also implement the IOobLiveData interface. In addition, an object of Digipass S3's default UI is created by Digipass S3'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 SampleOobUI.

Step 2: Define the following four functions in your custom UI object: onOperationStarted(), onOobReceived(), onOperationCompleted(), and onFinish(). These method definitions ensure that your class implements the IOobLiveData 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 IOobLiveData
  this.createMethodUI = function(methodType, extras, sessionData) {
    if(methodType === AdaptiveType.FIDO_OOB) {
        // Create default MethodUI
        var oobMethodUI = new OOBMethodUI(extras, sessionData);
        // Create sample UI and pass the methodUI as controller
        var oobLiveData = new SampleOobUI(oobMethodUI);
        // Tell the methodUI to use the sample UI 
        oobMethodUI.setLiveData(oobLiveData);
        return oobMethodUI;
    }
    // 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 IOobLiveData interface for more details.

Working examples in Tutorial web app

• Refer to the SampleOobUI class in the file js/samples.js for implementation of IOobLiveData interface.

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

You can also change the text displayed on the default OOB UI using JS App SDK's setUIDisplayString() function in class AppSdk. See the Client API Docs for more details.