Facebook Authentication In ASP.NET MVC 5.0: Part Fifteen

In this article you will learn about Facebook Authentication in ASP.NET MVC 5.0.

Before reading this article, I highly recommend reading the previous parts of the series on ASP.NET:

In this article, I’m going to explain about how we can authenticate with Facebook from ASP.NET MVC.

For this go to this link, where we can create our own app, make sure before this you must login to your Facebook account.

Expand My Apps panel, where you can see Add a New App option of Facebook for developers.

app

In the following screenshot, click on to website panel because I’m going to work on website platform.

platform

Give a name to your Facebook app, and hit on Create New Facebook App ID.

name

After that it will ask for your Email, give a contact email for your app, and finally create an App.

create

The App will be created; there will be App Id and App secret key of that App generated.

app

In the “Settings” panel, add a platform for this App. For the platform you have to choose your application’s development server URL in the Visual Studio where your application is. This is to specify that you are adding a website application.

application

We want to add a URL for the website and you need to select platform for this, so as in the following screenshot, click on Website.

Website

Enter the site URL of that application. For finding URL of the particular application flick to Visual Studio.

url

Open the Visual Studio and select the “File”menu, New, then click Project.

new

In the following figure as you can see the default MVC will be selected, select MVC and then click “OK” button. By which we can get all code by default of model, view and controller in our project.

project

Create a New project, Under Installed, Templates, Visual C#, select "ASP.NET Web Application".

Give a name to your project, here I have given it “FacebookAuthMVC”.

Create a project by clicking on to “OK” button.

ok

Our project has been successfully created, in the solution explorer, select your project and go to its property by pressing F4 key.

key

In the property of the existing project, select and copy the URL of this project.

url

Paste the copied URL in the website URL, as shown in the following figure, and click on to “Save Changes” button.

save

Now again go to your project, in the App Start folder select the Startup.Auth.cs file, there will be the default code of the Facebook, Microsoft Account Authentication and Twitter Authentication in that file. Uncomment the code of Facebook as shown in red rectangle, where you can see the appId and appSecret.

For the appId and appSecret, go in to your Facebook Development App page, where you can find your created App and copy the appId and appSecret, and paste into the Facebook authentication section as in following screenshot.

authentication

Now we need to make some changes into our model, so go to Models folder and select AccountViewModel.

By default, here are two properties; one for Username and another for Email, let’s make some changes over here.

properties

In the Controllers folder, extend it, go into account controller action of the controller, where you’ll find the ExternalLoginCallback(string), click on to it , scroll down and you can find a method ExternalLoginCallback, finally add some code over there for the UserName.

method

For retrieving the model property, add the user name with the model as the following section.

section

Now let’s make some changes over into our View, go to Views folder and select ExternalLogin Confirmation.

Create a new label for the Email as well as Username as shown in the following screenshot,

create

Now all is set for the use, now compile and run your project, it will give a popup of your Facebook profile confirmation at the time of running, so just click on to okay button to proceed it.

login

Finally, click on to Log In to login with Facebook account.

login

Click on to Facebook to login with it.

login

So, finally you’ve successfully authenticated with Facebook, now you can fill all the details like username and email.

login

After clicking on to Register button, you’ll find that you successfully login with your Facebook.

login

I hope you enjoyed this article. Stay tuned with me for more articles on all other Microsoft technologies.

Thanks.

Connect (“Nitin Pandit”);

Read more articles on ASP.NET: