Advanced Search

Facebook app login / authorization entirely client-side

/ Published in: JavaScript
Save to your folder(s)
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.

Expand | Embed | Plain Text

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.