FIDO2 Bank Demo Web App

The FIDO2 Bank Demo Web App is a stand-alone component that allows you to test and simulate basic capabilities of the FIDO2 registration and authentication ceremonies in the Sandbox environment.

This demo app provides you a simulation of the basic FIDO2 flows. To simulate the full end-to-end capabilities of FIDO2 before you implement them in your relying party web application for the Production environment, see FIDO2 Sample Relying Party Web App.

Prerequisites

Before you can start using the FIDO2 Bank Demo Web App, ensure that FIDO2 has been enabled for your tenant.

For more information about how to configure FIDO2 for the Sandbox environment, see FIDO2 in the Sandbox environment.

Once FIDO2 has been enabled, you can access the FIDO2 Bank Demo Web App via https://yourtenant.sdb.tid.onespan.cloud/v1/mybank-fido.

To use the FIDO2 Bank Demo Web App, you must load it in a browser or platform that supports WebAuthn.

The following browsers and platforms support WebAuthn:

• Chrome

• Firefox

• Edge

• Safari

• Windows 10

• Android

Set up a FIDO2 authenticator

To be able to work with the FIDO2 Bank Demo Web App you need to set up a FIDO2-compliant authenticator. Two types of authenticators can be used for the FIDO2 ceremonies:

• Platform authenticator

• Cross-platform authenticator

For a detailed list of supported FIDO2-supported authenticators, see FIDO2-supported authenticators.

Set up the authenticator

In this article, the Windows Hello platform authenticator is used to explain how to test the FIDO2 ceremonies.

To set up the Windows Hello authenticator for Windows 10 and 11

• Click the Windows Start button and navigate to Settings>Accounts>Sign-in options.

• (For Windows 10) In the Manage how you sign in to your device section, the following sign in options are available for Windows Hello:

  1. Select Windows Hello Face to set up facial recognition authentication with your device's infrared camera or an external infrared camera.

  2. Select Windows Hello Fingerprint to set up authentication with your device's fingerprint reader.

  3. Select Windows Hello PIN to set up authentication with a PIN.

• (For Windows 11) In the Ways to sign in section, the following sign in options are available for Windows Hello:

  1. Select Facial recognition (Windows Hello) to set up facial recognition sign-in with your device's infrared camera or an external infrared camera.

  2. Select Fingerprint recognition (Windows Hello) to set up authentication with your device's fingerprint reader.

  3. Select PIN (Windows Hello) to set up authentication with a PIN.

Register the Windows Hello authenticator

To register the Windows Hello authenticator

1. In your web browser, enter the URL of the FIDO2 Bank Demo Web App and click the Register button.

2. Enter a user name.

3. From the Authenticator attachment list, select Platform.

4. Click the Register button. A Windows Security dialog window opens where you need to authenticate.

5. (Optional) Enter a custom registration name for your authenticator (authenticator alias).

6. Use the authentication method that you have previously selected in Windows Hello (face, fingerprint, PIN) and press OK.

7. Confirm that you are registering with the correct tenant and user name. The authenticator is now registered.

For more information on the FIDO2 Bank Demo Web App interaction with the web browser, see Registration flow code samples. The code samples in the Registration flow code samples article demonstrate how to use the WebAuthn API for the registration flow.

Authenticate with the Windows Hello authenticator

To authenticate with the Windows Hello authenticator

1. In your web browser, enter the URL of the FIDO2 Bank Demo Web App. In the web app page, enter your user name and click the Sign in button.

2. Use the authentication method that you have previously selected in Windows Hello (face, fingerprint, PIN) and click OK.

3. Confirm that you are logging in with the correct tenant and user name. You have now successfully logged in.

For more information on the FIDO2 Bank Demo Web App interaction with the web browser, see Authentication flow code samples. The code samples in the Authentication flow code samples article demonstrate how to use the WebAuthn API for the authentication flow.

Manage authenticator registrations

After successfully registering an authenticator and logging in to the FIDO2 Bank Demo Web App, you can manage your authenticator registrations.

On the Manage Registrations page, a list of existing registrations is displayed. Here, you can add, update, or delete authenticator registrations. You can also add a new authenticator name (alias), or update an existing one. For more information about managing FIDO authenticators and registrations, see Management of FIDO Authenticators.

Troubleshooting

Authenticator not configured properly

When testing the registration flow with the FIDO2 Bank Demo Web App where:

• the Authenticator attachment field is set to Platform, and

• the No Authentication window is prompted.

the following error message can be displayed:

NotAllowedError: The operation either timed out or was not allowed. See https://www.w3.org/TR/webauthn-2/#sctn-privacy-considerations-client.

This error usually means that the platform authenticator is not enabled or properly configured. In this scenario, you need to revisit the steps in Set up the authenticator.