How to Configure MVC 5 App Login Options

Nimit Joshi

13y87.2k9100Article

Facebook Configuration in MVC 5Google Configuration in MVC 5

9 Comments

Join the conversation! Your thoughts help the community grow.

JULIE JOHN11y ago
I'm getting [ProtocolException: No OpenID endpoint found.] exception for Google login..
- Nimit Joshi11y ago
  JULIE JOHN Now google started app id and secret. Please create google app and select app id and secret.
Avichay Grafi11y ago
thanks alot
Avichay Grafi11y ago
thanks for the article, what about retriving more data from facebook?
- Nimit Joshi11y ago
  http://www.c-sharpcorner.com/UploadFile/4b0136/social-provider-access-in-web-application-with-mvc-5/
- Nimit Joshi11y ago
  Hope it helps Avichay Grafi
vijay Nelson12y ago
Welcome Nimit Joshi ;)
vijay Nelson12y ago
Nice Article for Newbies
- Nimit Joshi12y ago
  Thanks vijay Nelson for reading and comment.

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>© @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>© @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.