Using Worldline FIDO WebAuthn in your Website

To make things easy for the frontend work, we provide a file wrapping the main Java APIs of the Relying Party Server in JavaScript : api.services.ts
It will provide APIs to register / authenticate with WAFL on the Relying Party server.

 

Checking availability

To avoid providing a frustrating user experience, it is recommended to check that the device used is compatible with FIDO before inviting the user to register or authenticate with it. To ensure that the Web context supports the use of FIDO, you can use

isWebAuthnSupported(): boolean

And to check that the device supports a Platform Authenticator you can use

async checkPlatformAuthenticatorAvailable(): Promise<boolean>

Note that a Cross-Device (such as Yubikey) or Roaming (mobile) authenticator cannot be used if the device doesn't have Platform Authenticator and you use this check.

OS Specific check

As mentionned in our FIDO Wording Guidelines page, when inviting the user to register or authenticate, it is recommended to show a biometric icon related to the platform. To do so, we have a simple isAppleHardware()that can be used to switch between Apple and generic icons.

Worldline FIDO enrolment

async waflRegistration(username: string, displayName: string, friendlyName: string): Promise<boolean>

To be able to provide FIDO authentication for transactions to your users, they first need to register the devices they want to use. This can be done by calling the above method with parameters :

  • username : the technical username of the user account.

  • displayName : the name that will appear in the FIDO authentication request shown by the browser.

  • friendlyName : the name of the registered authenticator, to be displayed in Self-care interface.

It will return whether the registration succeeded or not.

Worldline FIDO Authentication

async waflAuthentication(username: string): Promise<boolean>

To authenticate a user, simply call this method with :

  • username : the technical username of the user account.

It will return whether the authentication succeeded or not.

Self-care

Our small API wrapper also provides the necessary APIs to allow the users to manage their authenticators from their account settings in your website.

 

Describing an Authenticator

Our API file exposes the class AuthenticatorDescriptor which maps the data retrieved from the server to an object with following members :

id: string;  // The internal/technical ID of the authenticator
createdAt: string;  // The creation Date as a YYYY-MM-DD HH:MM:SS.XXXXXX
description: string;  // The official description of the Authenticator
                      // ex: "Windows Hello Hardware Authenticator"
friendlyName: string;  // The friendly name choosen by the user

Listing Authenticators

async getAuthenticators(username: string): Promise<AuthenticatorDescriptor[]>

Calling this method will return a all registered authenticators for the specified user as an array of AuthenticatorDescriptor.
If the user did not register at least one authenticator (ie: the user is not know on the WAFL backend yet) or if there is any issue in processing the request, it will throw an Error.

 

Renaming an authenticator

async renameAuthenticator(username: string, friendlyName: string, authId: string): Promise<boolean>

To rename an authenticator, use this method with parameters :

  • username : the technical username of the user account.

  • friendlyName : the new name of the authenticator.

  • authId: the technical ID of the authenticator, as provided by the getAuthenticators() API.

It will return whether the renaming succeeded or not.

 

Deleting an authenticator

async deleteAuthenticator(username: string, authId: string): Promise<boolean>

To delete, or unregister, un authenticator for a user, call this method with parameters :

  • username : the technical username of the user account.

  • authId: the technical ID of the authenticator, as provided by the getAuthenticators() API.

It will return whether the deletion succeeded or not.

Enable "on this page" menu on doc section
On