Post
Ask Question

Login From Facebook in ASP.NET

To login from Facebook into your application you need to have a Facebook app, then use the following procedure.

  1. Click on the link: https://developers.facebook.com/apps/?action=create  It will open a window like the following image:

    Facebook1.jpg
     
  2. Click on the continue button to proceed, a window will appear as in the following:

    Facebook2.jpg
     
  3. Enter the code and click on Continue, a web page will appear having an app option; click on "app" to go to the Edit App page; it will look as in the following image:

    Facebook3.jpg
     
  4. Enter "Website with Facebook Login" and your website URL
  5. Enter Secure Canvas URL and your website URL.
  6. Click "Save changes".
  7. Now wait for the review of this app to become live and for its use, you'll get alerts/messages.

After you complete your Facebook app now create a new application in Visual Studio and write the following code in your aspx page:

  1. <html>  
  2. <head>  
  3. <title>Login from Facebook </title>  
  4. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  
  5. </head>  
  6. <body>  
  7. <script>  
  8. // Load the SDK Asynchronously  
  9.     (function (d) {  
  10.         var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];  
  11.         if (d.getElementById(id)) { return; }  
  12.         js = d.createElement('script'); js.id = id; js.async = true;  
  13.         js.src = "//connect.facebook.net/en_US/all.js";  
  14.         ref.parentNode.insertBefore(js, ref);  
  15.     }(document));  
  16.     // Init the SDK upon load  
  17.     window.fbAsyncInit = function () {  
  18.         FB.init({  
  19.             appId: 'write your app id here', // App ID  
  20.             channelUrl: '//' + window.location.hostname + '/channel', // Path to your Channel File  
  21.             status: true, // check login status  
  22.             cookie: true, // enable cookies to allow the server to access the session  
  23.             xfbml: true  // parse XFBML  
  24.         });  
  25.         // listen for and handle auth.statusChange events  
  26.         FB.Event.subscribe('auth.statusChange', function (response) {  
  27.             if (response.authResponse) {  
  28.                 // user has auth'd your app and is logged into Facebook  
  29.                 FB.api('/me', function (me) {  
  30.                     if (me.name) {  
  31.                         document.getElementById('auth-displayname').innerHTML = me.name;  
  32.                     }  
  33.                 })  
  34.                 document.getElementById('auth-loggedout').style.display = 'none';  
  35.                 document.getElementById('auth-loggedin').style.display = 'block';  
  36.             } else {  
  37.                 // user has not auth'd your app, or is not logged into Facebook  
  38.                 document.getElementById('auth-loggedout').style.display = 'block';  
  39.                 document.getElementById('auth-loggedin').style.display = 'none';  
  40.             }  
  41.         });  
  42.         $("#auth-logoutlink").click(function () { FB.logout(function () { window.location.reload(); }); });  
  43.     }  
  44. </script>  
  45. <h1>  
  46.     Login from Facebook</h1>  
  47. <div id="auth-status">  
  48. <div id="auth-loggedout">  
  49. <div class="fb-login-button" autologoutlink="true" scope="email,user_checkins">Login with Facebook</div>  
  50. </div>  
  51. <div id="auth-loggedin" style="display: none">  
  52. Hi, <span id="auth-displayname"></span>(<a href="#" id="auth-logoutlink">logout</a>)  
  53. </div>  
  54. </div>  
  55. </body>  
  56. </html>
Now hit F5, it will show you a page as in the following image:

Facebook4.jpg

When you will click on the "Login With Facebook" button it will open a window as in the following:

Facebook5.jpg

When you login from here with your Facebook credentials, it will log you into your application as well.


Similar Articles