Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Authentication in Facebook Canvas App using New Graph API

I am building a Facebook canvas application that loads in an iframe with Django. I would like the login process to work similarly to the way Zynga does it. In this method, if you are not logged in you are redirected to a Facebook login page and then to a permissions request page for the app (without any popups).

As far as I can tell Zynga must be using FBML and just forwarding to URL's that look like:

http://www.facebook.com/login.php?api_key=[api_key]&canvas=1&fbconnect=0&next=[return_url]

Is there anyway to achieve a similar effect in a python app that loads in an iframe?

There is a method here that shows how to achieve the correct redirects using the new php sdk, but I am trying to use the new python SDK which only has the method:

def get_user_from_cookie(cookies, app_id, app_secret):
"""
Parses the cookie set by the official Facebook JavaScript SDK.
cookies should be a dictionary-like object mapping cookie names to
cookie values.
...
"""

I have some working code that uses the Javascript SDK and the get_user_from_cookie method:

<div id="fb-root">
 <script src="http://connect.facebook.net/en_US/all.js"></script>
</div>

<script type="text/javascript">
 FB.init({ apiKey: 'apikey', status: true, cookie: true, xfbml: true});

 FB.Event.subscribe('auth.login', function(response) {
  // Reload the application in the logged-in state
  window.top.location = 'http://apps.facebook.com/myapp/';
 });
</script>
<fb:login-button>Install MyApp</fb:login-button>

The problem with this method is that it requires the user to click a button to login and then work through the popup authentication screens. (Note: a popup also occurs if I call FB.login directly)

So... is there a way to use the javascript SDK to redirect to the login page rather than loading it as a popup?

Thanks for any help! --Eric

like image 222
Eric Conner Avatar asked Jul 21 '10 19:07

Eric Conner


1 Answers

Is there a way to use the javascript SDK to redirect to the login page rather than loading it as a popup?

No. The JavaScript SDK will open a new window rather than redirect the current window.

To present the user with a full-screen version of the authorization dialog, you need to redirect them to https://graph.facebook.com/oauth/authorize?client_id={{ application_id }}&redirect_uri={{ redirect_uri }}. Note that you cannot do this from server-side code, as that would only redirect the iframe and Facebook does not allow it. You'll need an intermediate document that redirects the parent window.

<!DOCTYPE html>

<!--
This document redirects the parent window to the authorization
dialog automatically, or falls back to a link if the client does not
support JavaScript.
-->

<html>
  <head>
    <script type="text/javascript">
      window.parent.location = 'https://graph.facebook.com/oauth/authorize?client_id={{ application_id }}&redirect_uri={{ redirect_uri }}';
    </script>
  </head>

  <body> 
    You must <a target="_top" href="https://graph.facebook.com/oauth/authorize?client_id={{ application_id }}&redirect_uri={{ redirect_uri }}">authorize this application</a> in order to proceed.
  </body>
</html>

Once the user has authorized your application, he or she will be redirected to the URI you specified inredirect_uri and Facebook will populate the GET parameter signed_request with all kinds of delicious information (see the documentation on signed requests) that you can use to make requests to Facebook on the user's behalf.

Note that if you plan on saving this signed request (or anything else) to a cookie in a canvas application, you need set compact P3P policies in your headers; otherwise, all versions of Internet Explorer will ignore your cookies.

P3P: CP="IDC CURa ADMa OUR IND PHY ONL COM STA"

I've written a library that makes it really easy to make Facebook canvas applications powered by Django, which takes care of all these things for you. It's called Fandjango, and it's available on github.

like image 133
Johannes Gorset Avatar answered Sep 28 '22 07:09

Johannes Gorset