Tuesday, August 13, 2013

TOTP for ASP.Net Web Forms

Ok, so following my previous post (Two-Factor Authentication - What's the right way) I decided to go on and create a Proof of Concept on how to implement RFC 422 (the way a lot of web services implement 2 Factor Authentication, including Google, Microsoft, DropBox, LastPass etc) using ASP.Net with the Membership Provider.

Although I managed to find a lot of sample code to implement the RFC in .Net code, I failed to find anything that implements this using ASP.Net Membership Provider (MP). In just a few words, MP is a solution built in to .Net Framework that allows for user and credential management in .Net applications (more here). Please note that the same concept can be applied in different frameworks.

I will not go into detail of how to set-up MP for an ASP.Net application and the reader can find more information about configuration here and configuration of the Membership database here. If you create an ASP.Net 4.0 Web Site using the available template in Visual Studio 2010, the resulting project is actually configured to use Membership with Forms Authentication. All that is needed is to create the database and change the connection string.

After doing this, then the fun begins. I should add that I actually utilized ASP.Net AJAX integration in the final solution to create a more user-friendly result. You can find the complete solution hosted on CodePlex as TOTP.Net here. Comments are encouraged.

As a first step, the user registers an account (the functionality here is preserved as provided by the template and MP). After this, the user can edit their profile, with one of the available options the "Enable One-Time Password Support".

Enabling TOTP
Once the user presses the "Save Changes" button, they are redirected to the OTP setup page.

TOTP Setup

This page provides the user with a QR code image (allows to easily add an entry to applications like Google Authenticator by scanning the image) and the equivalent secret code for manual entry (in case the user's phone does not have a camera or they might be enabling this in the phone's browser). After adding the entry to their authenticator app, the user needs to enter the generated TOTP key, so that the site verifies that the user has indeed correctly set-up the mechanism. QR-Code generation is done utilizing the Messaging Toolkit Barcode project that can be found here.

If the code is correct, a success message is displayed to the user. Please note that TOTP is time sensitive and requires that the time of the server generating the codes is in sync with the time of the client (phone). If not, you may get a lot of authentication failures.

After this, when a user attempts to logon, they will be asked for their credentials. The system will then see that they have enabled TOTP and challenge them for the TOTP code in order for the authentication process to proceed and ultimately succeed.

TOTP Challenge

The challenge is issued using an AJAX Modal Popup Extender for better usability. This also ensures that TOTP authentication cannot be bypassed, since in order for the credentials to be evaluated, the TOTP code must first be accepted.

No comments: