Facebook Canvas iFrame App - Authorizing users with new OAuth protocol

Question

Hi,

I'm developing a new Facebook Canvas application within an iFrame and trying to authorize users. The new OAuth api recommends I do a redirect to the following to authorize a user in my app:

https://graph.facebook.com/oauth/authorize? client_id=...& redirect_uri=http://www.example.com/oauth_redirect

However this produces a weird problem where a full Facebook page requesting permissions from the user is rendered within the iFrame itself (i.e. facebook within Facebook). Does anyone know how to solve this with the new OAuth API as I don't want to start using old REST API methods.

Thanks, Rick

Answer 1

Even I had the same issue and I posted it in facebook forum. The moderator informed me that it is an issue for which there is no solution as of now. Take a look at this thread - http://forum.developers.facebook.com/viewtopic.php?id=56590

Answer 2

On the contrary, I have found a solution to this problem that I have outlined in my blog post here. Check it out.

Answer 3

Have been struggle with this for the past two days and found a hack to this problem: http://bit.ly/9p0TgA

Answer 4

did you find an answer? I see some fb apps have it working, like frontiersville, but could they be fbml apps?

Answer 5

Here is the solution:

• Here is a walkthrough of the oAuth protocol and how to implement the single sign on "correctly"
• Here is how you get rid of the grayed out effect you get on canvas/iframe pages when using the oAuth protocol

General summary of what you have to do get rid of the grayed out effect

1. Configure: You have to go to your application configuration in Facebook and enable oAuth 2.0 for Canvas Apps
2. Landing: Your landing page for your Facebook app will receive a query string paramenter called signed_request...by extension your controller will receive this query string parameter also.
3. Validation: the signed_request query string paramenter is a digitally signed json serialization of the currently authenticated user. You need to validate that the query string parameter actually came from Facebook and not some haxor.
4. Deserialization: Once you have validated that the request did indeed come from Facebook, you can then deserialize the JSON object.
5. Authorization (not authorized/not logged in): If the oAuth property is empty (the source being the deserialized JSON object, which is contained in the signed_request query string parameter), then redirect the user (via javascript) to the GraphAPI authorization for your application.
6. Authorization (logged in and authorized): If the oAuth property is populated (the source being the deserialized JSON object, which is contained in the signed_request query string parameter), then you can pull out the oAuth (and Facebook User ID) for later use with Facebook's Graph API.