Posted By

rlmcneary2 on 11/23/11

Tagged

Versions (?)

Last Edited at 11/23/11 03:19pm

Statistics

Viewed 1564 times

Favorited by 8 user(s)

Related snippets

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.

Highlighted TextExpand

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>Title</title>
  
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 </head>
 <body>

$(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")
     {
      top.location.href = "https://www.facebook.com/dialog/oauth?client_id=" + 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>

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.