Replacing the Non-FIDO Registration UI

The App SDK provides a default UI for registering OTP and Photo ID authentication methods implemented as a view.

This registration uses the Model-View-Controller (MVC) architecture, which makes it easy to replace the UI without having to reimplement the core logic. To provide your own UI, you need to provide your own implementation of the view. Your view (View or Fragment in the sequence diagram below) uses the RegistrationController (Controller) object, which responds to the user input from your UI and calls the internal SDK functions (Model) to trigger the required functionality. The RegistrationController calls back to your view to show the updates.

The following diagram illustrates the MVC flow when the user registers a new authentication method. The yellow boxes represent your code. This flow assumes that your application has already called AdaptiveRegistrationUIFactory.setInstance() to provide an instance of your custom implementation of the AdaptiveRegistrationUIFactory base class.

The steps in this diagram are described below:

1. Your application calls AdaptiveUI.getRegistrationView() to obtain the instance of your custom BaseAdaptiveRegistrationView implementation.

2. AdaptiveUI calls the createView() method of your custom AdaptiveRegistrationUIFactory implementation to obtain the instance of your custom BaseAdaptiveRegistrationView implementation.

3. Your application calls the BaseAdaptiveRegistrationView.show() method on the obtained View.

4. Once your View is initialized, it calls the Controller's onRefresh().

5. The Controller calls the Server to get the list of authenticators for the user.

6. The Controller calls the Live Data's setMethods() with the list of authenticators.

7. The Live Data object calls your View's setMethods() with the list.

8. Your View displays the list of authenticators.

9. The user selects an authenticator to add.

10. Your View calls the Controller's onAdd() with the selected authenticator.

11. The Controller performs the registration on the selected authenticator.

12. On completion of the registration, the Controller calls the Live Data's onOperationCompleted().

13. The Live Data object calls your View's onOperationCompleted().

To replace the default Non-FIDO Registration UI:

Step 1: Define a UI factory as a subclass of the AdaptiveRegistrationUIFactory class.

var CustomAdaptiveRegistrationUIFactory = function() {
  this.createView = function(registrationController) {
    return new CustomAdaptiveRegistrationView(registrationController);
  }
}

Step 2: Initialize the SDK to use your custom UI factory

AdaptiveRegistrationUIFactory.setInstance(new
                                          CustomAdaptiveRegistrationUIFactory());

Step 3: Define a View that implements the BaseAdaptiveRegistrationView and IRegistrationLiveData interfaces:

var CustomAdaptiveRegistrationView = function(registrationController) {
  // BaseAdaptiveRegistrationView methods
  this.show = function(container) {}
  this.getController = function() {return registrationController;}
  // IRegistrationLiveData methods
  this.setMethods = function(regs, outcome, message) {}
  this.onOperationCompleted = function(outcome, message) {}
  // This instance is the LiveData.
  var liveData = this;
}

Step 4: Retrieve the View and show it.

// Create AdaptiveUI instance.
var appSdkConfig = {
  "regEndpoint": regEndpoint,
  "authEndpoint": authEndpoint
}
var adaptiveUI = new AdaptiveUI(appSdkConfig);
var view = adaptiveUI.getRegistrationView(sessionData);
// Get a reference to an existing HTML element.
var container = document.getElementById('my-container');
view.show(container);

When your custom implementation of BaseAdaptiveRegistrationView.show() method displays the custom UI, call registrationController.onRefresh().

registrationController.onRefresh(liveData);

RegistrationController calls setMethods() and passes a list of non-FIDO authentication methods that can be registered, together with a list of existing registrations. It is possible to have multiple registrations for each authentication method. For example, for email OTP you could have 3 different emails, each of these is a different registered authentication method under email OTP.

To register a new authentication method, your custom UI calls RegistrationController.onAdd():

registrationController.onAdd(methodRegDisplay, liveData);

To delete registered authentication methods, your custom UI calls RegistrationController.onDelete():

registrationController.onDelete(methodRegDisplay, liveData);

The parameter methodRegDisplay is passed to your setMethods() in the regs array parameter. For both onAdd() and onDelete(), RegistrationController calls liveData.onOperationCompleted() with the result of the operation.

onDelete() deletes all registrations for the specified authentication method. For example, if you have multiple email OTP methods registered, they are all deleted.

Refer to the Client API Docs for the RegistrationController class, the MethodRegDisplay class, the AdaptiveRegistrationUIFactory class, the BaseAdaptiveRegistrationView and the IRegistrationLiveData interface for more details.

Working Examples in Tutorial Web App

• Refer to the SampleAdaptiveRegistrationUIFactory and SampleAdaptiveRegistrationView classes in the file js/samples.js for implementation.

• Refer to initialize() and showRegistrationFragment() functions in js/Controller.js for usage.