Client-Side Facebook App Login/Authorization

Here’s a nice JavaScript snippet that I’m certain quite a number of Facebook app developers might find useful. The script’s been around for a while, and has been last updated for about a year already. Nonetheless, it has been quite a popular snippet not to be re-shared. It’s originally shared by Brandon from GuineaCode and what it does is that lets you create a complete HTML page for your [Facebook] app that does the login process entirely on the client side.

ScreenHunter 1877 Mar. 11 14.35 Client Side Facebook App Login/Authorization

Here are the steps you need to do to get it done.

Create a Facebook application (see Facebook developer docs.).

Because of a Facebook bug the app should have Sandbox Mode disabled (App Settings > Advanced > Authentication).

Uncomment the appropriate redirectUrl var.

Update the appId and redirectUrl vars with your Facebook app values.

Make the page available from a server.

<!--
 Thanks to http://www.guineacode.com/2011/facebook-app-authorization/
 for the FB.getLoginStatus example that allows all the Facebook
 authorization to be done client-side.
-->
 ML>
<html>
 <head>
<!DOCTYPE HT
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 <title>Title</title>
 <!--[if IE]><![endif]-->
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 </head>
 <body>
 <div id="fb-root"></div>
 <script type="text/javascript">
 $(document).ready(function(){
 var appId = YOUR_APP_ID;
 // If logging in as a Facebook canvas application use this URL.
 //var redirectUrl = "http://apps.facebook.com/YOUR_APP_NAMESPACE";
 // If logging in as a website do this. Be sure to add the host to your application's App Domain list. 
 //var redirectUrl = window.location.href;
 // If the user did not grant the app authorization go ahead and
 // tell them that. Stop code execution.
 if (0 <= window.location.href.indexOf ("error_reason"))
 {
 $(document.body).append ("<p>Authorization denied!</p>");
 return;
 }
 // When the Facebook SDK script has finished loading init the
 // SDK and then get the login status of the user. The status is
 // reported in the handler.
 window.fbAsyncInit = function(){
 //debugger;
 FB.init({
 appId : appId,
 status : true,
 cookie : true,
 oauth : true
 });
 // Sandbox Mode must be disabled in the application's settings
 // otherwise the callback will never be invoked. Monitoring network
 // traffic will show an error message in the response. Change the
 // Sandbox Mode setting in: App Settings - Advanced - Authentication.
 FB.getLoginStatus (onCheckLoginStatus);
 };
 // Loads the Facebook SDK script.
 (function(d)
 {
 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js";
 d.getElementsByTagName('head')[0].appendChild(js);
 }(document));
 // Handles the response from getting the user's login status.
 // If the user is logged in and the app is authorized go ahead
 // and start running the application. If they are not logged in
 // then redirect to the auth dialog.
 function onCheckLoginStatus (response)
 {
 if (response.status != "connected")
 {
 + appId + "&redirect_uri=" + encodeURIComponent (redirectUrl) + "&scope=user_photos,friends_photos";
 }
 else
 {
 // Start the application (this is just demo code)!
 $(document.body).append ("<p>Authorized!</p>");
 FB.api('/me', function (response) {
 $(document.body).append ("<pre>" + JSON.stringify (response, null, "\t") + "</pre>");
 });
 }
 }
 });
 </script>
 </body>
</html>

Incoming search terms for the article:

Comments
Trackbacks

1 Comment

Abdul Qoyyuum

03.21.2013

Does this mean that they can login to my membership site with their Facebook account with this Javascript? That’s interesting. I always thought we need to use Python or something to get the Facebook’s API to work.

Does this also mean that after they successfully login to my membership site with Facebook, will I get their little contact details? Like emails, phone numbers and their country? i.e. of course, with their permission.

There are no trackbacks to display at this time.