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.