Thursday, August 30, 2012

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

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:


2) 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.
3) 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).
4) 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:
        a) 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>


        b) Load the JavaScript SDK synchronously
         <script src=https://connect.facebook.net/en_US/all.js type="text/javascript"></script>

        c) 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.

8) 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';
  }
        }
9) 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>
10) 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.

Download Code From Here

Reference Links :
https://developers.facebook.com/docs/guides/web/
https://developers.facebook.com/docs/reference/api/user/







13 comments:

  1. EncountersNepal.com
    Trekking in Nepal - Step into our world. It’s a world of lush green valleys, fertile terraced fields laden with fresh cultivated crops, poring into quiet pine forests of junipers, across glittering glacial lakes... & all this in the backdrops of towering silver grey peaks that speak of a world brimming with Everest base camp Trek. pure adventure... it’s a world that begins with ENCOUNTERS NEPAL.COM... & it never ends there... because it’s a wonderful world!!!
    Trekking in Nepal
    Everest base camp trekking
    Annapurna base camp trekking
    Manaslu Circuit Trekking
    Upper Mustang Trekking
    Annapurna Circuit Trekking
    Langtang Valley Trekking
    Kanchanjunga Trekking
    Upper dolpo trekking
    Tsum Valley Trekking
    Island Peak climbing
    Ghorepani Poonhill Trekking
    Mansarovar Kailash (Shiva Parbat) Yatra
    Gangajamuna Ganesh Parbat Trek
    Holiday Package in Nepal
    Mt flight in Nepal
    Expedition in Nepal
    Trekking in Bhutan

    ReplyDelete
  2. I really Enjoy the reading on this post, please continue it.


    SEO Sydney | SEO Melbourne | SEO

    ReplyDelete
  3. You have given very nice post it is very knowledgable and result oriented.

    Website is very good tool for any company.
    Asp.net development company Delhi

    ReplyDelete
  4. Ecorptrainings.com provides ASP.NET in hyderabad with best faculties on real time projects. We give the best online trainingamong the ASP.NET in Hyderabad. Classroom Training in Hyderabad India

    ReplyDelete
  5. Hi,I am getting error 'Given URL is not permitted by the application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.'
    How to resolve this?

    ReplyDelete
    Replies
    1. Hi Sneha,

      The issue seems like your app is not created/registered in Facebook. I tried to send you the code sharing link but it gave me error that your email doesn't allows outside domain URLs.

      I have wrote this blog around one year back and haven't explored it further, so I would suggest you to follow the help links given above in article and go through the code.

      Regards
      S Ravi Kumar

      Delete
  6. trekking in Nepal organized by the trekking Guide own agency and 15 years experience Guide trekking agency Mountain Air Guided Adventures(p.)Ltd. Nepal is the trekking paradise in the world, here are varieties of the hiking and trekking trail.Expereince Guide and professional service



    Everest base camp trek poon hill trek


    Everest view trek

    Nepal short trek

    Dhaulagiri trek

    dolpo trek

    Rara lake trek

    manaslu trekking
    Best and latest tea house and classical camping route. However it is both suitable for camping and tea house trekking in Nepal.


    mustang trekking

    ReplyDelete