Facebook Authentication In ASP.NET MVC 5.0: Part Fifteen

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

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.

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.

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

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

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.

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.

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

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

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

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.

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.

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.

For retrieving the model property, add the user name with the model as the following 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,

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.

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

Click on to Facebook to login with it.

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

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

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

Thanks.

Connect (“Nitin Pandit”);