We have been busy working on our new website which is due out in October 2022, as part of this rewrite we have been looking to add extra security and features.

We internally as a business use the YubiKey authenticator where possible, along with the Google authenticator in places where YubiKey is not supported, so we thought that we would add the YubiKey OTP authenticator to our own website.

In this post we will cover how we have wired up YubiKey OTP to Umbraco 10 members, if you are interested in how to wire up Google two factor authentication, then we recommend reading the article found in the Umbraco documentation.

In this post we will be using the YubiCloud service, we do not cover the use of self hosted validation servers.

API Key

First you will need to generate an API key to allow us to check the validation with YubiCloud, to do this generate an api key here.

Make a note of the of the Client ID and Secret Key we will need these later.

YubiKey Validator Service

The first part of the process is to create and register a service which can take the OTP key generated by the YubiKey and validate it against the YubiCloud service.

The service below handles all of the requirements set out in the YubiKey OTP specifications as found on their website including applying the HMAC-SHA-1 algorithm and Base64 decoding / encoding.

Add the below json object to your appsettings.json file after the Umbraco object's closing },

Enter your Client ID and Secret Key which was generated earlier.

To make things nice, we are injecting the configuration into our service using IOptions<> so we need a class which represents our json data:

Now we can create the service which carries out the validation against the YubiCloud service, the code we used in our service is slightly modified from a reply found on StackOverflow:

We now need to register the service and configuration with the DI container:

Register YubiKey Two Factor Provider

Next we need to register the YubiKey two factor provider with Umbraco so that our members can use it.

Umbraco Member Authenticator Controller

Now we have our service to validate against YubiCloud, we need to create a controller to save the YubiKey OTP authenticator against the Umbraco Member profile.

View to Setup YubiKey Authentication

To allow the members to use the YubiKey prover, we need to create a view which they can use when logged in.

In the Razor code below we check if the member has any data for the YubiKey provider saved against their profile, if they do then we show the disable button otherwise we show the setup and validate form.

The last part required is to use the Login Partial Macro snippet.

If you have any ideas on how to improve this, or are having issues implementing it please reach out using the comment form below.