Front end

The sample web application requires a FIDO Client, in combination with authenticators, to work properly.

The front-end part of the application is neither a FIDO Client, nor a relying party. It simply serves to showcase the implementation of the FIDO client for demonstration purposes, and should not be considered as a viable production-grade solution.

Implementation overview

The OneSpan FIDO2 SDK also provides a front end for the web application. The purpose is not only to trigger the available actions, but also to visualize server responses and indicate which data structures are required from this server to proceed.

The front-end part of the application is a JavaScript-based application with jQuery and Ajax HTTP calls to the server back end. The user interface is HTML5-based with CSS3 and the Materialize.css framework.

Content page

The content page is divided into the following sections:

• REGISTER
• AUTHENTICATE
• DEREGISTER

Every FIDO2 action is triggered with the corresponding Send buttons, located on dedicated tabs. Some of the actions, such as registration and authentication, require two steps to complete a full process.

All responses from the server will be returned and displayed in the response section under the SEND button that triggered the action. In the case of a valid server response, the background color of the response section changes to green and the JSON response changes the status to success. For an invalid response, the background color changes to red, the response status is failed, and an appropriate error message is displayed.

Important notes

• For better visualization, the process has been split into two steps. In a productive scenario, web applications should require user input only once.
• In the first step of the Initialize registration step of the registration process, it is important to select the appropriate value from the authenticatorAttachment box (PLATFORM for an embedded TPM authenticator or CROSS_PLATFORM for external authenticators).
• Deregister is not an official part of the FIDO2 SDK; however, it is a necessary part for productive scenarios (e.g. for a service that uses FIDO2 functionality). Therefore, some example methods for deregistering registered keys have been included.