Page views:
33389

In this article I’m going to explain how to integrate facebook login authentication in ASP.NET

Facebook has provided functionality that extends the Facebook Platform to any website that wants to integrate Facebook APIs for user authentication, sharing website content with friends, and publishing feed stories to generate traffic.

Here I’ll show you how to integrate Facebook login authentication for ASP.NET website. Please follow the steps given below.

 Step-1:                                                 

          First we have to create new App on Facebook. While creating New App we have to enter app name. Here we don’t need to consider about Namespace and category. Please follow the link to create new App on Facebook

 http://developers.facebook.com/setup/

 

 Step-2:

             Here we have to enter captcha text for security purpose.

 

Step-3:

             After submit security check our app would be created and it would be look like this. After we have to enter our website URL.  

 

 

Note:

            We can’t able to run Facebook login authentication on Local.        

Step-4:

          We almost ready to use Facebook login authentication in our website. You just create design source like this and you have to change App ID which is available in your facebook App.

 Designer source code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FB-Login.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Facebook login</title>

    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"> 

</script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <table align="center"><tbody> 

<tr> <td align="center" style="color: #33ccff; font-size: large; font-weight: bold; text-transform: capitalize;"></td></tr> 

<tr> <td align="center" style="margin-top: 350px;"><script type="text/javascript">

   // 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";

    ref.parentNode.insertBefore(js, ref);

} (document));

 

// Init the SDK upon load

window.fbAsyncInit = function () {

    FB.init({

        appId: 'Your App ID', // App ID 

        channelUrl: '//' + window.location.hostname + '/channel', // Path to your Channel File 

        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', function (response) {

        if (response.authResponse) {

            // user has auth'd your app and is logged into Facebook 

            FB.api('/me', function (me) {

                if (me.name) {

                    document.getElementById('auth-displayname').innerHTML = me.name;

                }

            })

            document.getElementById('auth-loggedout').style.display = 'none';

            document.getElementById('auth-loggedin').style.display = 'block';

        } else {

            // user has not auth'd your app, or is not logged into Facebook 

            document.getElementById('auth-loggedout').style.display = 'block';

            document.getElementById('auth-loggedin').style.display = 'none';

        }

    });

    $("#auth-logoutlink").click(function () { FB.logout(function () { window.location.reload(); }); });

}

</script> 

<h1> 

    Dotnetfox- Facebook login integration</h1>

<div id="auth-status"> 

<div id="auth-loggedout"> 

<div autologoutlink="true" class="fb-login-button" scope="email,user_checkins"> 

Login with Facebook</div> 

</div> 

<div id="auth-loggedin" style="display: none;"> 

Hi, <span id="auth-displayname">  Welcome to Dotnetfox </span> (<a href="#" id="auth-logoutlink">Signout</a>)</div> 

</div> 

</td> </tr> 

</tbody> </table> 

    </div>

    </form>

</body>

</html>

 


View demo Download
http://www.dotnetfox.com/Document/1058/0Demo5.gif

If you enjoyed this article, get email updates (it's free).



Comments
comments powered by Disqus

Thanks for downloading..!!

×
Subscribe via Email
    
message to display in fancybox