Facebook Canvas iFrame App - Authorizing users with new OAuth protocol

I'm developing a new Facebook Canvas application within an iFrame and trying to authorize users. The new OAuth api recommends I开发者_StackOverflow 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.

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

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

there is an other way to do it still with oAuth v2, and this is described in the facebook docs, but splitted in several pages, so not easy to understand.

First, you need to activate the "OAuth 2.0 for Canvas" flag ine the "advanced parameters" of you app.

And then, here is a PHP example explaining how to handle it :

function parse_signed_request($signed_request, $secret) {
    list($encoded_sig, $payload) = explode('.', $signed_request, 2); 

    // decode the data
    $sig = base64_url_decode($encoded_sig);
    $data = json_decode(base64_url_decode($payload), true);

    if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {
            error_log('Unknown algorithm. Expected HMAC-SHA256');
            return null;
    }

    // check sig
    $expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
    if ($sig !== $expected_sig) {
            error_log('Bad Signed JSON signature!');
            return null;
    }

    return $data;
}

function base64_url_decode($input) {
    return base64_decode(strtr($input, '-_', '+/'));
}

$data = parse_signed_request($_REQUEST["signed_request"], <your facebook app api secret>);

if (empty($data["user_id"]) && !isset($_REQUEST['redir'])) {
    // The user isn't authenticated
    $auth_url = "http://www.facebook.com/dialog/oauth?client_id=" .
            <your facebook app id> . "&redirect_uri=" .
            urlencode('http://apps.facebook.com/<yourapp>/?redir=1');
    echo("<script> top.location.href='" . $auth_url . "'</script>");
    die;
}
// Here the user is authenticated
echo ("Welcome User: " . $data["user_id"]);
// And now you have the Graph API auth token in $data["oauth_token"],
// so you can use any graph api method

Try this article http://novacoders.blogspot.com/2011/04/facebook-apps-oauth-20-authorization.html

If you don't use any web server you need to use Javascript SDK. FB.init() returns all necessary data like access_token.

Have been struggle with this for the past two days and found a hack to this problem on the Facebook developers forum.

You cannot do a simple redirect 302 or 301 within the canvas iframe as this will only redirect the content within the iframe. What Facebook recommends is to send a small bit of JavaScript that will set the top.location to the dialog/oauth page.

<script>top.location='https://www.facebook.com/dialog/oauth?client_id={0}&redirect_uri={1}&scope=publish_actions';</script>.

clientid being your AppId and redirect_uri being the page which handles the redirect from the auth dialog page.