Facebook tab app refuse to display in a frame

205 views Asked by At

I've made a little Christmas themed Facebook app which I want to add on a page as a tab but I am running into some issues which makes the app unusable.

The site URL is the following: https://mariusvaduva.com/bradbattle/

If I do the first login there I run into no issues but unfortunately when I test it directly on the Facebook Page Tab, as a new user, after the login I receive a blank page instead of the iframe and the following error:

Refused to display in a frame because it set 'X-Frame-Options' to 'DENY'.

This is how I get the login URL:

session_start();
require_once 'php/Facebook/autoload.php';
$fb = new Facebook\Facebook([
    'app_id' => 'XXXXXX',
    'app_secret' => 'XXXXXX',
    'default_graph_version' => 'v2.8'
]);
$helper = $fb->getRedirectLoginHelper();
$loginUrl = $helper->getLoginUrl('https://mariusvaduva.com/bradbattle/callback.php');

And this is how I display the link:

<div id="login_container">
    <?php echo '<a href="' . htmlspecialchars($loginUrl) . '"><img id="login_btn" src="img/login.png"></a>'; ?>
</div>

I've tried few suggestions including adding an .htaccess file with X-Frame-Options: ALLOW-FROM https://www.facebook.com/ but with no success.

What am I doing wrong? Is there another way of handling this? I really wanted to have this ready by this weekend. Any help or guidance is more than welcomed.

P.S. This is my callback file in case it helps:

session_start();
require_once 'php/Facebook/autoload.php';
require_once 'php/classes/class.database.php';
$fb = new Facebook\Facebook([
  'app_id' => 'XXXXXX',
  'app_secret' => 'XXXXXX',
  'default_graph_version' => 'v2.8'
]);
$helper = $fb->getRedirectLoginHelper();
try {
  $accessToken = $helper->getAccessToken();
} catch(Facebook\Exceptions\FacebookResponseException $e) {
  echo 'Graph returned an error: ' . $e->getMessage();
  exit;
} catch(Facebook\Exceptions\FacebookSDKException $e) {
  echo 'Facebook SDK returned an error: ' . $e->getMessage();
  exit;
}
if (!isset($accessToken)) {
  if ($helper->getError()) {
    header('HTTP/1.0 401 Unauthorized');
    echo "Error: " . $helper->getError() . "\n";
    echo "Error Code: " . $helper->getErrorCode() . "\n";
    echo "Error Reason: " . $helper->getErrorReason() . "\n";
    echo "Error Description: " . $helper->getErrorDescription() . "\n";
  } else {
    header('HTTP/1.0 400 Bad Request');
    echo 'Bad request';
  }
  exit;
}
echo '<h3>Access Token</h3>';
var_dump($accessToken->getValue());
$oAuth2Client = $fb->getOAuth2Client();
$tokenMetadata = $oAuth2Client->debugToken($accessToken);
echo '<h3>Metadata</h3>';
var_dump($tokenMetadata);
$tokenMetadata->validateAppId('1849207942031149');
$tokenMetadata->validateExpiration();
if (!$accessToken->isLongLived()) {
  try {
    $accessToken = $oAuth2Client->getLongLivedAccessToken($accessToken);
  } catch (Facebook\Exceptions\FacebookSDKException $e) {
    echo "<p>Error getting long-lived access token: " . $helper->getMessage() . "</p>\n\n";
    exit;
  }
  echo '<h3>Long-lived</h3>';
  var_dump($accessToken->getValue());
}
$_SESSION['fb_access_token'] = (string)$accessToken;
try {
  $response = $fb->get('/me?fields=id,name', $_SESSION['fb_access_token']);
} catch(Facebook\Exceptions\FacebookResponseException $e) {
  echo 'Graph returned an error: ' . $e->getMessage();
  exit;
} catch(Facebook\Exceptions\FacebookSDKException $e) {
  echo 'Facebook SDK returned an error: ' . $e->getMessage();
  exit;
}
$user = $response->getGraphUser();
$db = new Database();
$sql = 'SELECT id FROM users WHERE id = "%s" LIMIT 1';
$db->prepare($sql,array($user['id']));
$data = $db->execute();
if (empty($data)) {
  $sql = 'INSERT INTO users (id, name) VALUES ("%s","%s")';
  $db->prepare($sql,array($user['id'],$user['name']));
  $data = $db->execute();
}
$_SESSION['user_id'] = (string)$user['id'];
$_SESSION['user_name'] = (string)$user['name'];
header('Location: https://mariusvaduva.com/bradbattle/bradbattle.php');
exit;
0

There are 0 answers