ASP.NET MVC Two Factor Authentication using Google Authenticator

Hi….. In this tutorial, we will learn how to build an ASP.NET MVC application with Two Factor Authentication using Google Authenticator. Using Google Authenticator you can secure your application. You can also verify your user accounts before granting them access to your website.

What is Google Authenticator?

Basically, Google authenticator is a mobile application based two factor authentication. It works with two step verification for your google account to provide an additional layer of security when signing in. It has some features such as automatic setup via QR code, support for multiple accounts, and support for time-based and counter based code generation. iOS, Android, and BlackBerry operating system provide support for Google Authenticator.

ASP.NET MVC Two Factor Authentication using Google Authenticator.

So, follow these following steps in order to implement Tow Factor Authentication in ASP.NET MVC Application using Google Authenticator.

Step # 1 – Create a new project.

Go to file => New => ASP.NET Web Application.

Enter application Name (E.g. TwoFactorAuthenticationDemo) in Name Field => Click Ok. It will open new dialoag.

Choose Empty project => check the MVC checkbox under “Add folders and references for” => click Ok button.

Step # 2 – Add Reference of Google Authenticator.

Go to solution explorer (from right pane) => Right click on References => Manage NuGet Packages… => Search “Google Authenticator” in the search field => then click install button => then close it.

Step # 3 – Add new Model Class.

Go to Solution explorer => right click on model folder => Add => New Item … => Select class under code => Enter class name (E.g. LoginModel.cs) => Click Add button.

Now add the following code to LoginModel.cs class.

Step # 4 – Create a Controller

Go to Solution explorer (From left pane) => Right click on the Controllers folder => Choose Add => controller => Select “MVC 5 Controller – Empty” => Click Add. It will create a new dialog.

Enter the name (E.g. HomeController) in the name field and then click Add button. It will create a new HomeController.cs class under the Controller folder in the solution explorer from the right pane.

Step # 5 – Add the following code to HomeController.cs class.

Step # 6 – Add View for Login Action Method

Go to login action method => Right click on the Login action method => Add View. It will create Add View dialog.

Choose Empty template under the Template drop-down menu => choose model class under the Model Class drop-down => then click Add button.

This will add the Login View in the view folder. Now add the following HTML code into the Login.cshtml View page.

Step # 7 – Add another action method Login().

This method will be HttpPost. In this method, we will first verify user-provided credential from the database. Then if the user is valid, then we will generate Two Factor authentication setup code for use in the Google Authenticator mobile app for setup account.

Step # 8 – Add an another action method UserProfile().

In this action method, authorized user will be redirected to a page after successful login.

Step # 9 – Add view for UserProfile action method.

Step # 10 – Add an another action method “TwoFactorAuthenticate()”

This action method will verify two factor authentication token generated by Google Authenticator mobile application. And then the user will be redirected to the authorized area of the application.

Step # 11 – Run your application.

Now run your application with this URL “http://localhost:57913/Home/login ” and see the following output page.

Note: – you can also set the Login page as default page of your application. To do this just go to App_Start folder (Solution Explorer) => RoutConfig.cs => Edit MapRout => replace “Login” action with the “Index” action. Now login page is your default page when you run your application.

Now enter the username “Admin” in the username field and Password “12345” in the password field. And then click Login. Then a new page will open and will ask you for 6 digit Google Authenticator code.

Step # 12 – Install Google Authenticator mobile app.

Download it for Android phone.

Download it for Windows phone.

Open your Google Authenticator mobile app => option => Setup account => Scan a barcode or Enter a provided key => then scan the bar code from our application bar code web page or Manually enter the setup code from our application webpage => then you will get a six digit code on your mobile app => now enter this code into the text box of your application login page and finally click on ‘Submit Query’ button.

Summary

Finally, you will get a new successful login page with the message of  “Welcome to Mr. Admin”.

I hope it will be useful for you and don’t forget to like and share it.

[download id=”952″]