Using Facebook login in ASP.NET application

Using Facebook login in ASP.NET application

Step-1: Register site in 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.

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

  2. 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.

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 faceboookfunction 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.

Comments

Popular posts from this blog

Convert HtmlToPDF in ASP.net & iTextshrap

Create Pivot Table In C#

How to Display Page Wise Total Amount & Grand Total Amount in Last page SSRS & RDLC Report