One of the great new features in v26 is the ability to add Two Factor Authentication (2FA) to your apps or sites. In this article I am going to take you through the steps to get it up and running for your site by adding it to our Social Logon demo, it is already live with these changes if you would like to test it out.

For detailed information concerning the new functions you can start with PCSOFT’s online help, here.

First we need a couple of new fields on our user table:

1. TOTPKey
   • This is a 16 character ANSI string. That stores the TOTP (Time based One Time Password) key generated by the new PCSOFT function.
2. Use2FA
   • This will be a Boolean and allow the user to enable or disable 2FA for their login. You can of course require it to always be on instead, but I hate sites that require 2FA if I don’t want to use it.

Next, on the My Account, we will add a checkbox (ckEnable2FA) so you the user can enable 2FA and link it to the new field we just added to the user record (Use2FA)

Before we look at the code behind the ckEnable2FA, we need to add a popup, this popup will display both a QR code and the actual TOTP Key so the user can use on or the other to register the site in their Authenticator app. It is simply a QR Control and a Static. The only code behind the close button is to close the popup.

So now lets look at the code behind ckEnable2FA

Line 1 is checking to see if this is a new user. We need to the user id as part of the information to setup the TOTPKey so if this is a new user (they got here by pressing the create new account button on the login screen), then we need to wait until we create the record and have the TOTPKey available.

Line 2 checks to see if they are turning it off or on, if they are turning it off Line 14 clears the TOTPKey in the user record and we are done

Line 3-7 make sure that an email has been entered, since we will need that to generate the TOTPKey as well

Line 8 is the first of our new 2FA functions (TwoFactorAuthenticationGenerateTOTPKey). It takes a string value, the online help suggest the users email concatenated with the unique id for the user, which is what I have done. It returns a 16 character string which is stored in the new TOTPKey field on the user record.

Line 9 uses another new 2FA function (TwoFactorAuthenticationGenerateLink) to generate a specially formatted URL that is used for 2FA. We are assigned the returned value to the barcode control on the popup, therefore displaying it as a QR code. Note: There appears to be an issue with the online help and intellisense for this function, they indicate only needing 2 parameters (the TOTPKey and the name of the app), but the example code provide shows 3 parameters with the middle parameter being the email address of the user. I got a compile error when I tried to use the 2 parameters as suggested by intellisense, but it worked fine when I used all 3 like the example code. I have reported this to PCSOFT.

Line 10 places the TOTPKey in a static field, this gives the user the option to register our site in their Authenticator app manually instead of scanning the QR code.

Line 11 displays the popup with the QRCode

That is all there is to creating the TOTPKey and allowing the User to register you site in an Authenticator app. I had to make some changes to the logic behind my save button, to also trigger the popup there once the user was create if they were a new user, but we won’t go over that code here as it is the same code as above and depending on how you set things up in your app the structure of how you accomplish adding new users will likely be slightly different anyway.

The only thing left for us to do is to give the user a way to enter the 6 digit code from the Authenticator app when they login. So on the log in page I added a popup, with an edit control. Note the online help says this need to be a string field as the first character could possibly be a 0

And in the login code, I added logic to trigger the popup if they have 2FA enabled.

Line 12 checks to see if the user has 2FA enabled and if so displays the popup requesting the 6 digit code

On the code behind the Continue button on the popup we find our third and final new 2FA function

TWOFactorAuthenticationCheckCode takes 2 parameters, the 6 digit code the user supplied from their Authenticator app and the TOTPKey we stored on the users record, and if they two match it returns true and we allow the user to login.

And that is it, that is all there is two setting up 2FA using the new functions provided in v26. I don’t even want to imagine how my work and code it would be to create all of this without these functions, yet again showing us how with every release PCSOFT continues to add value to the product.

Note: Although in this article and demo, everything is web based, the 2FA function can actually be used for windows and mobile applications as well.

• WX