Click here to Skip to main content
Click here to Skip to main content

Using Facebook login in ASP.NET application without any third party library.

, 31 Aug 2012
Rate this:
Please Sign up or sign in to vote.
Facebook is extremely popular these days and you will hardly find anyone without Facebook profile, more and more people now want there site to use Facebook authentication in their application,  instead of using their own user database to maintain user credentials. In this article I will give you ste

Editorial Note

This article appears in the Third Party Product Reviews section. Articles in this section are for the members only and must not be used by tool vendors to promote or advertise products in any way, shape or form. Please report any spam or advertising.

Facebook is extremely popular these days and you will hardly find anyone without Facebook profile, more and more people now want there site to use Facebook authentication in their application, instead of using their own user database to maintain user credentials. In this article I will give you step by step demo on how to integrate Facebook login into you screen.

Step-1: Register site in Facebook:

In order to use Facebook login, you should must have a verified developer account in Facebook (which is very easy to create just login to http://developers.facebook.com using your Facebook credentials and follow the screen instructions) and you must register you website in the form of an App in Facebook.

So lets start with registering your site with Facebook:

  1. Open http://developers.facebook.com and login with your Facebook credentials after logging in you will get a screen like this:

  1. Click on "Build for Websites" link, you will reach to https://developers.facebook.com/docs/guides/web/ , just click on 'Apps' menu Items (the last menu Item from right side), you will reach to https://developers.facebook.com/apps. Click on button, you will get following screen.

  2. Enter the name of your website in place of App Name, rest of the fields are optional so fill them if you require to use them and click on 'Continue' button. you will be asked to fill a captcha screen and then you will get the summary screen like below screenshot (Just masked the AppID).

  3. Give the URL of you website/ application Site URL text box of the app summery screen, like below screenshot. I have given localhost address as I will be testing the app from my local build, you will have to give your website URL in this.

Now you are ready to create ASP.Net Web Application, to use Facebook integration. Step-2: Create ASP.NET application using Facebook login:

  1. Open Visual Studio.
  2. Select File --> New --> Project/Solution --> 'ASP.NET Empty Application'
  3. Now Right Click on Project Name Select Add--> New Item from the pop-up menu and click on 'Web Form' to add Default.Aspx page. (See screenshot).

  4. Most of the code we will be doing on the HTML code of ASP.NET Page.
  5. For using Facebook login, we will have to use Facebook JavaScript SDK. There are three ways of using it:
    1. Load the JavaScript SDK asynchronously.
             <script>
                // Load the SDK Asynchronously
                (function (d) {
                    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
                    if (d.getElementById(id)) { return; }
                    js = d.createElement('script'); js.id = id; js.async = true;
                    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                    ref.parentNode.insertBefore(js, ref);
                } (document));
            </script>
    2. Load the JavaScript SDK synchronously
      <script src=https://connect.facebook.net/en_US/all.js type="text/javascript"></script>
    3. Download the SDK JavaScript file in your local project folder and use it from there. Implemented in 'Default.aspx' of solution.
      <script src="scripts/all.js" type="text/javascript"></script>
  6. We will also require jquery for initializing the library. so copy following code in header section of the page.
    <script
    src="scripts/jquery-1.8.0.min.js"
    type="text/javascript"></script> <script
    src="scripts/all.js"
    type="text/javascript"></script> 7) Now to initialize the Facebook SDK copy following code in a new script section :
             $("document").ready(function () {
                // Initialize the SDK upon load
                FB.init({
                    appId: 'YOUR_APP_ID', // App ID
                    channelUrl: '//' + window.location.hostname + '/channel', // Path to your Channel File
                    scope: 'id,name,gender,user_birthday,email', // This to get the user details back from Facebook
                    status: true, // check login status
                    cookie: true, // enable cookies to allow the server to access the session
                    xfbml: true  // parse XFBML
                });
                // listen for and handle auth.statusChange events
                FB.Event.subscribe('auth.statusChange', OnLogin);
            });

    Here YOUR_APP_ID will be the App Id you will get from the Facebook App.

  7. Also copy the following code after Above code in to get the response back and fill the values.
            // This method will be called after the user login into facebook.
            function OnLogin(response) {
                if (response.authResponse) {
                    FB.api('/me?fields=id,name,gender,email,birthday', LoadValues);                    
                }
            }
    
            //This method will load the values to the labels
            function LoadValues (me) {
                if (me.name) {
                    document.getElementById('displayname').innerHTML = me.name;
                    document.getElementById('FBId').innerHTML = me.id;
                    document.getElementById('DisplayEmail').innerHTML = me.email;
                    document.getElementById('Gender').innerHTML = me.gender;
                    document.getElementById('DOB').innerHTML = me.birthday;
                    document.getElementById('auth-loggedin').style.display = 'block';
                                }
            }
  8. Copy following code in the Body tag of the Page.
        <div id="fb-root"></div> <!-- This initializes the FB controls-->   
        <div class="fb-login-button" autologoutlink="true" scope="user_birthday,email" >
          Login with Facebook
         </div> <!-- FB Login Button -->   
        <!-- Details --> 
        <div id="auth-status">    
        <div id="auth-loggedin" style="display: none">
            Hi, <span id="displayname"></span><br/>
            Your Facebook ID : <span id="FBId"></span><br/>
            Your Email : <span id="DisplayEmail"></span><br/>
            Your Sex:, <span id="Gender"></span><br/>
            Your Date of Birth :, <span id="DOB"></span><br/>        
        </div>
        </div>
  9. Your application is ready now, execute the application.

In this blog we have learned how to register an application in Facebook and the use that application for Facebook authentication in our ASP.NET website/application. Using this the user of your web site/application will be free from the hassle of registering and entering their details again if they have Facebook Id they can use that to login.

Reference Links

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

S Ravi Kumar-2012
Architect
India India
No Biography provided
Follow on   Google+

Comments and Discussions

 
QuestionNot working Pinmemberbobbybunty9-May-14 4:31 
QuestionObject doesn't support property or method '_gcb2' Pinmemberbishu_Visu7-Jan-14 0:48 
AnswerRe: Object doesn't support property or method '_gcb2' PinmemberS Ravi Kumar-20127-Jan-14 6:02 
GeneralRe: Object doesn't support property or method '_gcb2' Pinmemberbishu_Visu7-Jan-14 21:52 
GeneralRe: Object doesn't support property or method '_gcb2' Pinmemberbishu_Visu8-Jan-14 20:14 
Questionthanks PinmemberMember 97211334-Jan-14 0:24 
QuestionHow can i solve this error PingroupKM Perumal10-Nov-13 19:40 
AnswerRe: How can i solve this error PinmemberS Ravi Kumar-201210-Nov-13 20:34 
QuestionUser information doesn't display PinmemberMember 810335113-Jul-13 5:02 
QuestionPage_Load retrieve user id PinmemberMember 921312624-Jun-13 6:41 
QuestionRedirect to other page after Login PinmemberVenkatesh Yeluri11-Jun-13 15:52 
QuestionMy vote of 5 [modified] PinmemberKevinJeremy15-May-13 1:41 
Questionget city and country Pinmembershanalikhan10-Mar-13 11:43 
AnswerRe: get city and country PinmemberS Ravi Kumar-201211-Mar-13 2:06 
Questionunable to see information Pinmembershanalikhan10-Mar-13 2:04 
AnswerRe: unable to see information PinmemberS Ravi Kumar-201210-Mar-13 6:17 
GeneralRe: unable to see information Pinmembershanalikhan10-Mar-13 8:26 
GeneralRe: unable to see information PinmemberS Ravi Kumar-201210-Mar-13 8:31 
GeneralRe: unable to see information Pinmembershanalikhan10-Mar-13 8:40 
QuestionAwful tutorial and misleading title Pinmemberd-signet228-Feb-13 9:35 
GeneralRe: Awful tutorial and misleading title Pinmembermafnx14-Mar-13 5:24 
QuestionCan I do the same concept for my Windows Application? PinmemberGaneshcse13-Feb-13 7:03 
QuestionIs there any security threat for my application PinmemberSumanBiswas24-Jan-13 10:23 
Suggestionadditional help Pinmemberroger_276-Jan-13 6:24 
This article was very good. and current.   The big problem is stupid facebook keeps changing their interface so this tutorial (unless constantly updated every other month) is eventually going to have different screenshots than the real site :(
 
Anyways I just wanted to add some advice to people who (like me) wanted to populate ASP.NET SERVER SIDE controls, and not just fill a few <span> tags:
 
in the LoadValues Function, change it to look like this...
 

<pre lang="Javascript">
//This method will load the values to the labels
function LoadValues(me) {
      if (me.name) {
            document.getElementById('displayname').innerHTML = me.name;
            document.getElementById('FBId').innerHTML = me.id;
            document.getElementById('DisplayEmail').innerHTML = me.email;
            document.getElementById('Gender').innerHTML = me.gender;
            document.getElementById('DOB').innerHTML = me.birthday;
            document.getElementById('auth-loggedin').style.display = 'block';
 
         //the difference begins here. I added 3 ASP.NEt controls.
         //I also commented out the clicking of a button
         //THE CONTROLS CAN ONLY BE A TEXTBOX OR an <asp:Hidden> FIELD!!!!!!!
         //NO LABELS OR ANYTHING ELSE!!!!!
         //you can set the textbox style="display:none" or width="0"
            document.getElementById("txtFbName").value = me.name;
            document.getElementById("txtFbID").value = me.id;
            document.getElementById("txtFbEmail").value = me.email;
        
            //If you want it to automatically click an ASP.NET button
            //on login, you use this (obviously you uncomment it though).
            //   document.getElementById("btnDummy").click();
      //difference ends here
      }
}
</pre>
 

 
then on the same page but inside your ASP.NET <form> tags, make your ASP.NET controls but make sure their CLIENT ID IS STATIC. this prevents asp.net from changing the name of the control to
ctl_00txtFbName
or whatever.   Just be careful because this means if you have ANY OTHER elements that ARENT asp.net, you need to make sure they don't have the same name.
 
<pre lang="HTML">
You are currently logged in as: <asp:TextBox ID="txtFbName" runat="server" ClientIDMode="Static"></asp:TextBox> <br />
Your FacebookID is: <asp:TextBox ID="txtFbID" runat="server" ClientIDMode="Static"></asp:TextBox> <br />
Your email is: <asp:TextBox ID="txtFbEmail" runat="server" ClientIDMode="Static"></asp:TextBox> <br />
</pre>
 
now if you want a button to get clicked on login, you need to add the button to the ASPX page BUT put it in an update panel:
 
<pre lang="HTML">
      <asp:UpdatePanel ID="updaterix" runat="server">
            <ContentTemplate>
                  <asp:Button ID="btnAddReplyInFB" runat="server"
                        ClientIDMode="Static" onclick="btnTestGo_Click"
                        Text="Add Reply in FB" style="display: none;" />
            </ContentTemplate>
      </asp:UpdatePanel>
</pre>
 
notice the style="display:none;" on the button. this is going to be an INVISIBLE button that gets clicked on FB login.   You can add whatever button click code to this in the C# / VB net code click event.
 

lastly, I was noticing that the code was executing on both LOGIN and LOGOUT, so I changed this method:
 
<pre lang="Javascript">
// This method will be called after the user login into facebook.
function OnLogin(response) {
      if (response.authResponse) {
            FB.api('/me?fields=id,name,gender,email,birthday', LoadValues);
      }
}
</pre>
 
To This Method:
<pre lang="Javascript">
//I changed the method name so I don't actually
//replace the method in case I need to
//revert back. you can do whaterver you want
function getLoginStatus(response) {
      if (response.status === 'connected') {
            // the user is logged in and has authenticated your
            // app, and response.authResponse supplies
            // the user's ID, a valid access token, a signed
            // request, and the time the access token
            // and signed request each expire
            // var uid = response.authResponse.userID;
            // var accessToken = response.authResponse.accessToken;
 
            //show whatever controls you need to show
            //now that the user has successfully logged in!
            document.getElementById("btnAddReplyInFB").style.display = 'block';
            document.getElementById("pnlReplyPanel").style.display = 'block';
            FB.api('/me?fields=id,name,gender,email,birthday', LoadValues);
      } else if (response.status === 'not_authorized') {
            // the user is logged in to Facebook,
            // but has not authenticated your app
 
            //hide reply button for facebok users
            document.getElementById("btnAddReplyInFB").style.display = 'none';
            document.getElementById("pnlReplyPanel").style.display = 'none';
 
                       
      } else {
            // the user isn't logged in to Facebook.
            //hide reply button for facebok users
            document.getElementById("btnAddReplyInFB").style.display = 'none';
            document.getElementById("pnlReplyPanel").style.display = 'none';
           
 
      }
};
 
</pre>
 

 

obviously if you change the method so you dont delete the old method, you need to change
//old method
FB.Event.subscribe('auth.statusChange', OnLogin);
to
//new mthod
FB.Event.subscribe('auth.statusChange', getLoginStatus);
 

 
This is still a work in progress for me, but all of that should work so far I Think. I havent actually tested that last "else" condition in the code block above yet. but everything else is working fine for me.
 
I hope this helps someone because it took me a while to figure out.
one final thought YOU CANT TEST THIS ON LOCALHOST! I know this is answered like 10 times in the other commentso n this page but it keeps coming up. YOU CAN ONLY GET FB USER INFO WHEN YOU TEST IT ON A LIVE SERVER!
 
Thanks.
 
Hopefully you'll be able to see this in my site live in my site
http://www.WhoPostsThisStuff.com
some time after january 2013
 
It's not a bug it's a f- oh wait... no..It's a bug.
GeneralRe: additional help PinmemberGianluca SamBuca Di Pietro5-Feb-13 8:56 
GeneralRe: additional help Pinmemberroger_276-Feb-13 3:28 
GeneralRe: additional help PinmemberGianluca SamBuca Di Pietro8-Feb-13 0:03 
GeneralRe: additional help Pinmemberroger_2710-Feb-13 11:58 
GeneralMy vote of 5 PinmemberRafael Nicoletti20-Dec-12 6:18 
Questionlogin with facebook problem Pinmemberhasanbudak24-Nov-12 6:57 
AnswerRe: login with facebook problem PinmemberS Ravi Kumar-20123-Jan-13 19:55 
QuestionFb.Event.Subscribe Pinmembersafiyullah4-Sep-12 20:48 
AnswerRe: Fb.Event.Subscribe PinmemberS Ravi Kumar-20125-Sep-12 2:29 
GeneralRe: Fb.Event.Subscribe Pinmembersafiyullah5-Sep-12 18:39 
GeneralRe: Fb.Event.Subscribe PinmemberS Ravi Kumar-20126-Sep-12 15:43 
GeneralRe: Fb.Event.Subscribe Pinmembersafiyullah6-Sep-12 18:46 
GeneralRe: Fb.Event.Subscribe Pinmembersafiyullah17-Sep-12 18:41 
GeneralRe: Fb.Event.Subscribe PinmemberS Ravi Kumar-201219-Sep-12 19:08 
GeneralRe: Fb.Event.Subscribe Pinmembersafiyullah20-Sep-12 3:44 
GeneralRe: Fb.Event.Subscribe PinmemberS Ravi Kumar-201214-Nov-12 23:20 
AnswerRe: Fb.Event.Subscribe PinmemberDanko Greiner23-Jan-13 22:33 
GeneralRe: Fb.Event.Subscribe PinmemberS Ravi Kumar-201210-Mar-13 8:20 
QuestionMy vote of 3 (almost 4) PinmemberRafael Nicoletti2-Sep-12 15:28 
AnswerRe: My vote of 3 (almost 4) PinmemberS Ravi Kumar-20122-Sep-12 18:20 
GeneralMy vote of 4 PinmemberPrabhakaran Soundarapandian31-Aug-12 6:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 31 Aug 2012
Article Copyright 2012 by S Ravi Kumar-2012
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid