Getting Started Logging In Your Application With Facebook and Google in MVC 5

Introduction

This article explains how to login with various login options to login to 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 I introduced you to the configuration of various login options available in MVC 5 applications. Here, I am explaining how to login with your login options to login your MVC app.

In that context, you can see in the following image that there are two login options available in the sample application showing how to login.

I am using the following two login options for the login:

Google
Facebook

Google Login in MVC 5

Let's start with Google authorization for login. Since you already know the configuration, let's start with the login using the following procedure.

Step 1: Click on the "Google" button for login.

Step 2: Enter your Google Account Credentials for login.

Step 3: Authorize your app because it is requesting your permission to authorize.

Step 4: Register yourself and enter a unique user name for registration.

Step 5: You will see your user name in your MVC app.

Step 6: Please log off after finishing your work.

Facebook Login in MVC 5

I am using Facebook authorization for the login. Since you know the configuration of Facebook authorization in a MVC app, let's start using the following procedure.

Step 1: Click on the "Facebook" button to login.

Step 2: Enter your Facebook Account Credentials for login.

Step 3: Since you have already registered yourself as a developer in Facebook and configured your app in your MVC app, there is no authentication required. If you don't register your Facebook app for your MVC app then you can find it in my previous article that will help you.

Step 4: Register yourself and enter a unique user name for registration in the MVC app.

Step 5: You will see your user name in your MVC app.

Step 6: Please log off after finishing your work.

Membership Configuration

You can configure membership details in your MVC application. For membership configuration please use the following procedure.

Users Information

Step 1: Open your Server Explorer in your application.

Note: If you are using the Express version of Visual Studio then open the Database Explorer.

Step 2: Expand "Default Connection" and right-click on the "User's Table" and click "Show Table Data".

Step 3: In the Users Table, you can view all users with their unique ID.

Adding Role for Users

You can also set a role for the user, for this view use the following procedure.

Step 1: Expand "Default Connection" and right-click on the "Roles" table and click "Show Table Data".

Step 2: Enter canEdit in the id column.

Step 3: In Default Connection, right-click on the "UserRoles" and click "Show Table Data". Copy the "Id" from the "Users" table and paste it into the "UserId" column in the "UserRoles" table.

Step 4: You need to authorize. For requiring authorization open the "Controller\HomeController.cs" file and enter the code as shown in the following code:

public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[Authorize(Roles = "canEdit")]
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
}

Note: You can login with different account credentials but you need to open it in any other browser. The Log Off functionality does not exist in this release. You cannot reset your password in ASP.NET membership and it does not verify that the person who has logged in is human (for example entering a CAPTCHA in registration of any account).

Summary

So far this article will help you to login your MVC Application with various login options like Facebook and Google. You can also configure your user membership and open User Information in your MVC Application. So, just go for it.

Thanks for reading my article and don't forget the comments.