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.

The front-end part of the application uses pre-filled demonstration data known to the server side to showcase functionality, required input data, and UAF protocol flows.

Implementation overview

The OneSpan FIDO UAF 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. All required data is pre-filled to minimize human error and indicate the successful path for the processes.

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.

Configuration menu

A configuration menu containing different scenarios is available at the top of the page. Each of these scenarios provides valid pre-defined data for every FIDO UAF action. Each scenario also contains slightly modified data to showcase different methods to perform FIDO action steps.

Content page

The content page is divided into the following sections:

• REGISTER
• AUTHENTICATE
• DEREGISTER
• TRANSACTION CONFIRMATION

Every FIDO UAF 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.

The server reports a successful operation by sending the status code 1200 in the JSON response. To provide the user with a better overview, the section containing the response is highlighted in green.

For two-step actions (authentication with and without transaction confirmation, and registration), after the first step has successfully completed, the response content is pre-filled with valid data and the second Send button is enabled to finish the process.

The TRANSACTION CONFIRMATION section serves to demonstrate an authentication with transaction confirmation. When executing the first step of an authentication, the user interface displays a PNG image that is generated based on the transaction text.

Operations that are not successfully handled by the server (e.g. calling an authentication without a previous registration) are indicated by the 14XX and 15XX status codes, and are additionally highlighted in red. For more information about the returned status codes, refer to the FIDO documentation (at https://fidoalliance.org/specs/).