advanced code snippet search

Posted By

rlmcneary2 on 11/23/11


Tagged

login javascript html facebook authorization


Versions (?)

Who likes this?

11 people have marked this snippet as a favorite

Malm
thoaionline
jbyerson
slashyy77
mmcachran
artistandalias
fchrisb
gouzou
ringo380
lookingforsome
catrinho


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.

Expand | Embed | Plain Text 
  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
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 guineacode.com. 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....

You need to login to post a comment.