Facebook app login / authorization entirely client-side


/ Published in: JavaScript

A complete HTML page for a Facebook "app" that does login entirely on the client.
1 - Create a Facebook application (see Facebook developer docs.).
2 - Because of a Facebook "bug" the app should have Sandbox Mode disabled (App Settings - Advanced - Authentication).
3 - Uncomment the appropriate redirectUrl var.
4 - Update the appId and redirectUrl vars with your Facebook app values.
5 - Make the page available from a server.


Copy this code and paste it in your HTML
  1. <!--
  2. Thanks to http://www.guineacode.com/2011/facebook-app-authorization/
  3. for the FB.getLoginStatus example that allows all the Facebook
  4. authorization to be done client-side.
  5. -->
  6.  
  7. <!DOCTYPE HTML>
  8. <html>
  9. <head>
  10. <meta charset="utf-8" />
  11. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  12. <title>Title</title>
  13. <!--[if IE]><![endif]-->
  14. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  15. </head>
  16. <body>
  17.  
  18. <div id="fb-root"></div>
  19. <script type="text/javascript">
  20.  
  21. $(document).ready(function(){
  22.  
  23.  
  24. var appId = YOUR_APP_ID;
  25. // If logging in as a Facebook canvas application use this URL.
  26. //var redirectUrl = "http://apps.facebook.com/YOUR_APP_NAMESPACE";
  27. // If logging in as a website do this. Be sure to add the host to your application's App Domain list.
  28. //var redirectUrl = window.location.href;
  29.  
  30.  
  31. // If the user did not grant the app authorization go ahead and
  32. // tell them that. Stop code execution.
  33. if (0 <= window.location.href.indexOf ("error_reason"))
  34. {
  35. $(document.body).append ("<p>Authorization denied!</p>");
  36. return;
  37. }
  38.  
  39.  
  40. // When the Facebook SDK script has finished loading init the
  41. // SDK and then get the login status of the user. The status is
  42. // reported in the handler.
  43. window.fbAsyncInit = function(){
  44.  
  45. //debugger;
  46.  
  47. FB.init({
  48. appId : appId,
  49. status : true,
  50. cookie : true,
  51. oauth : true
  52. });
  53.  
  54. // Sandbox Mode must be disabled in the application's settings
  55. // otherwise the callback will never be invoked. Monitoring network
  56. // traffic will show an error message in the response. Change the
  57. // Sandbox Mode setting in: App Settings - Advanced - Authentication.
  58. FB.getLoginStatus (onCheckLoginStatus);
  59. };
  60.  
  61.  
  62. // Loads the Facebook SDK script.
  63. (function(d)
  64. {
  65. var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  66. js = d.createElement('script'); js.id = id; js.async = true;
  67. js.src = "//connect.facebook.net/en_US/all.js";
  68. d.getElementsByTagName('head')[0].appendChild(js);
  69. }(document));
  70.  
  71.  
  72. // Handles the response from getting the user's login status.
  73. // If the user is logged in and the app is authorized go ahead
  74. // and start running the application. If they are not logged in
  75. // then redirect to the auth dialog.
  76. function onCheckLoginStatus (response)
  77. {
  78. if (response.status != "connected")
  79. {
  80. top.location.href = "https://www.facebook.com/dialog/oauth?client_id=" + appId + "&redirect_uri=" + encodeURIComponent (redirectUrl) + "&scope=user_photos,friends_photos";
  81. }
  82. else
  83. {
  84. // Start the application (this is just demo code)!
  85. $(document.body).append ("<p>Authorized!</p>");
  86. FB.api('/me', function (response) {
  87. $(document.body).append ("<pre>" + JSON.stringify (response, null, "\t") + "</pre>");
  88. });
  89. }
  90. }
  91. });
  92.  
  93. </script>
  94. </body>
  95. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.