Posted By

rlmcneary2 on 11/23/11


login javascript html facebook authorization

Versions (?)

Who likes this?

18 people have marked this snippet as a favorite


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.

  1. <!--
  2. Thanks to
  3. for the FB.getLoginStatus example that allows all the Facebook
  4. authorization to be done client-side.
  5. -->
  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=""></script>
  15. </head>
  16. <body>
  18. <div id="fb-root"></div>
  19. <script type="text/javascript">
  21. $(document).ready(function(){
  24. var appId = YOUR_APP_ID;
  25. // If logging in as a Facebook canvas application use this URL.
  26. //var redirectUrl = "";
  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;
  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. }
  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(){
  45. //debugger;
  47. FB.init({
  48. appId : appId,
  49. status : true,
  50. cookie : true,
  51. oauth : true
  52. });
  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. };
  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'); = id; js.async = true;
  67. js.src = "//";
  68. d.getElementsByTagName('head')[0].appendChild(js);
  69. }(document));
  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 = "" + 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. });
  93. </script>
  94. </body>
  95. </html>

Report this snippet  


RSS Icon Subscribe to comments
Posted By: thoaionline on November 23, 2011

lovely, i didn't know that this was possible

Posted By: slashyy77 on November 25, 2011

AWESOME!!! Thank you!

Posted By: guineacode on January 2, 2012

Registered an account to say thank you for giving credit for getting help from my example over at I appreciate it and I'm glad the article was helpful for you :)

Posted By: rookie on January 17, 2012

I started work on these applications. How can i get user info seperately to use in php code.. e.g. email, username, birthday etc.. seperately... thanks for your help

Posted By: rlmcneary2 on January 20, 2012

@guineacode - You're welcome! Since software development (like all human progress) is collaborative I believe that credit should be given where it's due.
@rookie - Since this is client-side code (all happening in the web browser) no requests are ever sent to a server for processing so no PHP code is invoked. It sounds like you're building a more traditional facebook app where the user is redirected after login to a URL on your server for processing. You should probably read the Server-side Flow section of Authentication. If you still have questions you should try Facebook's Stackoverflow site.

Posted By: rlmcneary2 on January 20, 2012

Updated so that the Facebook script loaded handler is hooked up before the script tag is inserted.
Noted that if your app is in sandbox mode login will not work correctly (it's how Facebook works or a bug depending on your point of view).
Added another redirect URL as an example of hot redirect a Facebook app compared to a website that uses Facebook login.

Posted By: antoreegan on September 25, 2012

can i call any javascript function after giving the permission to my application....

Posted By: Anjuchauhan on July 7, 2019

With the easy flow of microsoft baisc learning concept now connected with of your sync microsoft easy access. Where you can easily find how much this is require every time. Thanks a lot

Posted By: kaladios on December 30, 2019

At its most fundamental, Instagram is a person to person communication application which enables its clients to impart pictures and recordings to their companions. The application can be downloaded for nothing from the standard application stores and invests wholeheartedly of spot on numerous a youngster's (and more established!) cell phone.

Posted By: kaladios on December 30, 2019

When a client snaps an image, Instagram channels – of which there are handfuls – can change pictures in a way suggestive of antiquated Polaroid prints. The application takes into consideration the making of individual profiles yet in addition can be associated with existing person to person communication profiles, for example, Facebook and Twitter, which means clients can share their photos crosswise over stages.

Posted By: saadkhan12 on January 15, 2020

thanks for sharing this is awesome How can i get user info seperately to use in php code.. e.g. email, username, birthday etc.. seperately... thanks for your help

Royal rumble 2020 live in brazil

You need to login to post a comment.