Integrating Facebook Login with MVC development project in visual studio


In this article we are going to focus on the below features: 1. Registering the MVC development project with the facebook application. 2. Integrating login functionality into the MVC development project. 3. Logging in using the Facebook Login feature.

In this article we are going to focus on the below features:

1. Registering the MVC development project with the facebook application.

2. Integrating login functionality into the MVC development project.

3. Logging in using the Facebook Login feature.

Step 1: In order to use any of the features of facebook into your site. First you need to be registered with facebook. So in order to create a facebook account, if you have not got one. Please visit http://www.facebook.com and sign up your self.
1fbsignup
Now once you sign up, you need to visit http://developers.facebook.com

Step 2: click on Apps -> Click on Add New App as shown below:
add new app
Step 3: In the Add a NewApp windows -> Select Website as shown below:
website
Step 4: Then enter the name of your new application as shown below. Here I am showing how to do it for localhost. Below url you can get when you browse your webpage(Ctrl+F5). Here the port number may vary for your site.
http://localhost:5106/
website 4
Step 5: Then click on Create new Facebook App ID.
In the Create App window, answer NO for the questions "Is this a test version o another app?" and then choose the category as per your website. I have selected Education for demo as shown below. You can choose any suitable category for your project. Hit the Confirm button. confirm
Step 6: Now in your MVC project, open _Layout.cshtml page and then copy the javascript code from the script section and paste it in head section of the _layout.cshtml page. Please make a note of this app_Id which we will need when displaying facebook login button in our view.

Step 7: In the 'Tell us about your website' section, enter the Site Url(required). Mobile Site URL is optional as shown below.
sign up
Step 8: To display the like button in your site. just copy the code as shown below from the facebook site and paste it in the _Layout.cshtml page anywhere you want to display it on your site in the body tag of the html.

<div
class="fb-like"
data-share="true"
data-width="450"
data-show-faces="true">
</div>

Step 9: Now hit Ctrl + F5 and you should see the Facebook like button in your site.

Step 10: Now let us see how to integrate Facebook Login into the MVC site. Click on Facebook Login button as shown below.
fb login
Step 11: From the QuickStart section, copy the code from script section into the head section of the _layout.cshtml page. Once you copy the code, make sure that you update the app_id in this code to the app id assigned to the site when we confirmed/registered our site in the above steps.

Step 12: now copy the below code and place it in the body tag where you want to display the facebook login button to the users.


<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>

<div id="status">
</div>



Step 13: All set. Press Ctrl + F5 and now you should be able to see the facebook login button in your web application. Click on login button.
live fb login
Step 14: You will be shown below login to allow access to your profile and to login and share your info. Click on 'Edit the info you provide' option to restrict the information you would like to be shared. Then click on Okay button to login with your facebook credentials.ok

Step 15: After successful login. Your site will display a message ' Thanks for logging in' your name'.

login

Points to note
1. This code works in MVC Internet application.
2. I have used _Layout.cshtml page to display the login button because it is used in all our web pages by default something similar to master pages where the common layout is applied to all the web pages. For this code to work, please make sure that _ViewStart.cshtml page has below code:

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}

this code applies the same layout to all the pages in your site.

3. Please also make sure that below code is not used in the page where you would like to display the facebook login icon. This code indicates that it is not using _Layout.cshtml page for the layout.
@{
Layout = null;
}

4. If Layout = null is used in your view and still you need the facebook login button to be displayed then in that case you need to copy paste the above script code and facebook login button code in your view separately for each page you want to show the login button.


Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: