How to Configure MVC 5 App Login Options

Introduction

This article explains configuration of various login options for logging into your ASP.NET Web Application developed in MVC Project Templates. I will use Visual Studio 2013 Preview and MVC 5 in my ASP.NET Web Application. As I described in my earlier article that Visual Studio 2013 preview uses a MVC 5 project template to develop a MVC application. Here, I am telling you that there are various login options to login your MVC app.

In that context, you will see in the following image that there is no login option available in my application:

So, let's start to design and configure the MVC app. If you have not created a MVC 5 app with Visual Studio then use the procedure given below.

Step 1: Open Visual Studio 2013 Preview.

Step 2: "File" -> "New" -> "Project...".

Step 3: Select "MVC Project template for MVC application".

     

Step 4: In Solution Explorer, go to Views and open "_Layout.cshtml" to design your own app.

Step 5: Change your "_Layout.cshtml" with your own app name.

You need to change the following three lines:

<title>@ViewBag.Title - My ASP.NET Application</title>

@Html.ActionLink("Application name", "Index", "Home", null, new { @class = "brand" })

<p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>

into the following lines:

<title>@ViewBag.Title - Cricketer App</title>

@Html.ActionLink("MVC Cricketer", "Index", "Home", null, new { @class = "brand" })

<p>&copy; @DateTime.Now.Year - Cricketer Application</p>

Step 6: Debug your application.

Now you will see the changes like your Title Bar, your logo and your copyright name.

Let's proceed to the next step in which we configure the Login options. I am using two login options here. They are:

• Facebook
• Google

Configure app to Login with Facebook

Step 1: In Solution Explorer, expand "App_Start" and open the "Startup.Auth.cs" file.

Step 2: You can see in the following image that both Facebook and Google options are disabled. Uncomment the Facebook one at first.

Add your Facebook app id and app secret into the Facebook option.

You can refer to my previous article where I explained how to create a Facebook app and get the app id and app secret.

Step 3: Enter your App Id and App Secret and debug your application.

Follow the preceding image to go to the Login page.

Now you can login with your Facebook Credentials.

Configure app to Login with Google

Step 1: In Solution Explorer, expand "App_Start" and open the "Startup.Auth.cs" file.

Step 2: You can see in the following image that both Facebook and Google options are disabled. Uncomment the Google option.

After the uncomment:

Step 3: That's it. Debug your application .

Follow the preceding image to go to the Login page.

Now you can login with your Google Credentials.

Summary

So far, this article introduced you to configuring your MVC Application login with your Facebook and Google accounts. You can also refer to my previous article for the app development in Facebook and getting the app id and app secret for your application for the Facebook option. So, just go for it.