Facebook canvas app “redirect_uri” breaks out of i

Question

I'm upgrading my existing FB apps, and going absolutely bonkers trying to get a simple PHP iframe canvas app to authorize and authenticate (as well as use SSL). Never looked through so many examples...

Here's where I'm stuck: After the user authorizes the app, and the app authenticates the user (I am able to make a graph request with the token OK), the redirect_uri happens, and the whole page refreshes, leaving Facebook and thenjust shows me the contents of my "Canvas URL" page (with my server's domain), rather than iframed on Facebook.

I currently have this as a crude two step process...

Here's what my code looks like on the first page (index.php):

<?php
require('src/facebook.php');

$app_id = '123456789';
$app_secret = '1234secrets1234';
$canvas_page = "https://apps.facebook.com/123456789/";
$canvas_url = "https://myserver.com/apptest/";

$code = $_REQUEST['code'];

if(!$code){
$display= 'page';
$scope= 'manage_pages, offline_access, read_insights, publish_stream, user_about_me, user_likes, email'; 
$redirect_url = 'https://myserver.com/apptest/step2.php';
$oauth_url    = 'https://www.facebook.com/dialog/oauth?canvas=1&client_id='.$app_id.'&display='.$display.'&redirect_uri='.urlencode($redirect_url).'&scope='.$scope;
$config = array('appId'  => $app_id,'secret' => $app_secret,'cookie' => true,'domain' => true);
$facebook_client = new Facebook($config);

echo "<script type=\"text/javascript\">top.location.href = \"".$oauth_url."\";</script>";
}
?>

and the second page (step2.php):

<?php
require('src/facebook.php');

$app_id = '123456789';
$app_secret = '1234secrets1234';
$canvas_page = "https://apps.facebook.com/123456789/";
$canvas_url = "https://myserver.com/apptest/";


if($_REQUEST['code']){
$code=$_REQUEST['code'];
$redirect_url = 'https://myserver.com/apptest/step2.php';
$link="https://graph.facebook.com/oauth/access_token?canvas=1&client_id=".$app_id."&redirect_uri=".urlencode($redirect_url)."&client_secret=".$app_secret."&code=".$code;
$string = file_get_contents($link);
$auth_token=substr($string, 13, 150);

$graph_url = "https://graph.facebook.com/me?access_token=".$auth_token;
$user = json_decode(file_get_contents($graph_url));
echo("Hello " . $user->name);
} 

Again, once the user has authorized the app, and the app has authenticated the user, the graph call works.

Any ideas?

Answer 1

Well I did get this working. On the app > settings > basic I hadn't set a namespace, so the URL it gave me for the app on facebook was like this: https://apps.facebook.com/123456789/ and now with the namespace they changed it to: https://apps.facebook.com/myappname. So that may have been it. I tried to carefully follow the simple PHP autorization demo on this page: https://developers.facebook.com/docs/appsonfacebook/tutorial/ and it seems to work ok now.

Thanks for the help!

Answer 2

When navigating to the OAuth dialog the web page (not the frame your app is in) is navigated to the OAuth URL. To get back into the Facebook iframe after authentication you need to set the OAuth redirect URL to the canvas_page URL. The code shown above is navigating to the URL of myserver when redirected so your app takes up the entire page (because you left the Facebook iframe when navigating to the OAuth dialog). Your code at canvas_url needs to determine if it is being entered from authorization (success or failure) or if it is being entered with a valid access token after authentication.

Also your canvas_page URL appears to be comprised of the facebook apps host and your application ID. It should be the facebook apps host and your application name (the redirect URL should be the same as the "Canvas Page" URL on your app's developer page).