The problem is in XFRAME
, on default F3 set the XFRAME
value as SAME-ORIGIN
, based on this doc, developer must overload the value with ALLOW-FROM uri
.
Here is the full code for index.php:
<?php
$f3=require('app/lib/base.php');
require_once 'app/lib/fb/facebook.php';
$f3->set('XFRAME', 'ALLOW-FROM https://localhost/f3-fb/');
$f3->route('POST /',
function() {
echo 'Hello';
}
);
$f3->route('GET /landing',
function() {
$app_id = 'xxxx';
$secret_key = 'yyyy';
$page_id = 'zzzz';
$config = array(
'appId' => $app_id,
'secret' => $secret_key
);
$fb = new Facebook($config);
$fbdata = $fb->getSignedRequest();
$fbInPage = false;
if(!empty($fbdata) && is_array($fbdata)
&& !empty($fbdata['page']) && is_array($fbdata['page'])
&& !empty($fbdata['page']['id'])
) {
$fbInPage = $fbdata['page']['id'];
}
// Check if user not in fb tab
if(!$fbInPage) {
// Redirect to facebook tab
echo '<script>window.location.href="https://www.facebook.com/'.
$page_id.
'?sk=app_'.
$app_id.
'"</script>';
exit;
}
// Get User ID
$user = $fb->getUser();
// Check if user not connected to facebook
if ($user) {
try {
$user_data = $fb->api("/me");
} catch (FacebookApiException $e) {
$user_data = null;
}
} else {
// Asking permission for email and user_likes
$fb_login_url = $fb->getLoginUrl(array(
'scope' => 'email, user_likes'
));
echo '<script>top.location.href = "'.$fb_login_url.'"</script>';
exit;
}
}
);
$f3->run();
Add the config $f3->set('XFRAME', 'ALLOW-FROM https://localhost/f3-fb/');
to allow this url inside on facebook iframe.
And always use POST
for the route inside the facebook iframe (still don't know why must using that with F3, but it will occur the error and asking for POST
route)