Facebook authentication for ASP.NET MVC Wb Application

Here we will how to use facebook login for our asp.net mvc application . Now in these days all the commercial website use external login facility means user can login to their website using facebook , , google, twitter etc. Like Flipkart,amazon.

So here will learn how to give login using facebook.

Go to visual studio and click on new project -> a window will open from here select a 'Asp.net MVC4 web application' and give the name for this project in my case I give it as “FacebookLoginMVCApplication”.

Now click ok and select a template as Internet Application and engine as Razor engine , after sleeting all these click ok. it will click a solution project this will contain .Css file ,script file and MVC application structure.

Step(2) : after creation of application let's create a database for this and give the name for this database i gave it as 'MVCApp' and then add a connection string to the database.

</connectionStrings>

if you are creating new connection string then existing connection string in web config file we have remove with we have remove a following line of code from the "InitializeSimpleMembershipAttribute.cs" which available in filter folder. because it give double connection existing run time error.

// WebSecurity.InitializeDatabaseConnection("DefaultConnection", "UserProfile", "UserId", "UserName", autoCreateTables: true);

After adding the connection string to the project now we need to create membership tables to the database but before this go to the models folder and have a look on AccountModels.cs class. this class automatically create when we select mvc application as Internet application

AccountModel.cs class contain following methods.

now for creating membership tables in database initialize the connection in globel.asax . here we will use code first approach for that we need to add following code in this class

For adding data table in database membership we need to add a line of code in Global.asax

WebSecurity.InitializeDatabaseConnection("DBConnection", "UserProfile", "UserId", "UserName", autoCreateTables: true);

Here namespace for WebSecurity is “using WebMatrix.WebData;”

WebSecurity.InitializeDatabaseConnection

Definition for the InitializeDatabaseConnection is

public static void InitializeDatabaseConnection (string connectionStringName, string userTableName, string userIdColumn, string userNameColumn, bool autoCreateTables);

connectionStringName: It the name of database table where user information stored.

userTableName: It contain user profile information.

userIdColumn: this column name of table contain user ID this should be integer.

userNameColumn: column name of table contain user name. This column is basically used to match profile data of user with membership account data.

autoCreateTables: True to indicate that user profile and membership tables should be created if they do not exist; false to indicate that tables should not be created automatically. Although the membership tables can be created automatically, the database itself must already exist.

Now globel.asax page will look like

Now after all this configuration lets run your application and see the ur hoe page and click on register link which is your page right side.

After running your application you go to database and see the table, it will generate following tables for us

AuthConfig file in Asp.net MVC application

This AuthConfig file is exist under “App_start”s folder. It is automatically created by the asp.net mvc application when we create a project.

This AuthConfig.cs file contains the entire external client as comment by default. So we need to uncomment for auth config for faceBook then the code we like following

At this time if you will run your application it will give error that you can’t be put empty value for “appID,secreted”. For that we need to register in facebook.

Register MVC application with facebook

Before run mvc application we have to pass appID and secret id so for that we need to register in facebook or login if u have account in face,after login go to the following URL and register there. There will be register button at right click side at top.

"http://developers.facebook.com/"

After register you need to create Appid for your website ,it will redirect to that page after register or you can go to following URL and fill the information which it is asking like following snapshot.

https://developers.facebook.com/apps/

From here click on create new App id it will open a window like following

There I gave display name as "dotnetmunesh" and Email and category i select as “Education and after that click on create App ID.

After click on this ,your account will be created and it will redirect to following page where it will ask security answer for selecting image

After selecting click ok then a window will open

Here you can see your app id and Appsecret on Dashboard section. Now go to setting and on basic section enter field , and app domain as empty after that click on add platform and select website.

When you will click on add flat form following window will open

From here you have to select Website.

After selecting add platform a small panel will popup asking Site URL here you will be adding your project URL like http://localhost:63695/.To see where project URL is just right click on Project then select Properties like as shown below.

After selecting Properties a new window will open inside that select Web Menu just below Build at bottom of page you will see Project URL which we highlighted in yellow here project URL like http://localhost:63695/.Just copy that URL.

After copying just paste that URL inside Site URL (http://localhost:63695/)and then click on save changes button.

After that just copy App ID and App Secret and just add in AuthConfig.cs files.

After adding just save your application then Run application. Following is our login page after adding oAuth facebook login in asp.net mvc applicaition.

Here you will see a Facebook button on right part of login page. Now just click on this Facebook button then it will redirect you to Facebook login page ,here you enter Facebook credentials and then login in to Facebook.

After login in to Facebook now new dialog will pop up for allowing App to take your all profile information which you provide in facebook (like name, profile picture, age range, gender etc). Now just click on Okay button to proceed further.

After clicking on okay button it will redirect to "ExternalLoginCallback" view and on that page we will see Username textbox which contains Username (Munesh Sharma) which we have got from Facebook Oauth service.