Replacing the suggest registration UI

The App SDK provides a default UI for Suggest Registration implemented as a view object.

Suggest 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 objects. Your objects (View or Fragment in the sequence diagram below) use the SuggestRegistrationController (Controller) object, which responds to the user input from your UI and calls the internal SDK functions (Model) to trigger the required functionality such as displaying candidate registration sequences or performing registration with a method in the sequence. The SuggestRegistrationController calls back to your objects to show the updates.

The following diagram illustrates the MVC flow when the user interacts with Suggest Registration and agrees to register an authentication method. This flow assumes that your application has already called SuggestRegistrationUIFactory.setInstance() to provide an instance of the custom implementation of the SuggestRegistrationUIFactory base class.

The steps in this diagram are described below:

1. The App SDK calls the createView() method of your custom SuggestRegistrationUIFactory implementation to obtain the instance of your custom BaseSuggestRegistrationView implementation.

2. The App SDK calls the BaseSuggestRegistrationView.show() method.

3. After your View is initialized, it calls the Controller's processAnswer().

4. The Controller calls the Live Data's askPermission().

5. The Live Data object calls your View's askPermission().

6. Your View asks the user if they would like to try to register a passwordless authenticator.

7. The user responds yes.

8. Your View calls the Controller's processAnswer().

9. The Controller calls the Server to get the list of passwordless authenticators.

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

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

12. Your View displays the list of passwordless authenticators.

13. The user selects a method.

14. Your View calls the Controller's doRegister() with the selected method.

15. The Controller registers the selected authentication method.

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

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

Refer to the Client API Docs for the SuggestRegistrationController and SuggestRegistrationUIFactory classes and the BaseSuggestRegistrationView and ISuggestRegistrationLiveData interfaces for more details.

Working examples in Tutorial web app

• Refer to the SampleSuggestRegistrationUIFactory and SampleSuggestRegistrationView classes in the file js/samples.js for implementation.

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