Facebook Tab with Fat Free Framework

Question

Is there some limitation with Fat Free Framework when we try to output the page into facebook tab?

I already try it with this below code, and unfortunately in the facebook tab iframe always empty blank page.

<?php

$f3=require('app/lib/base.php');

require_once 'app/lib/fb/facebook.php';

$f3->route('GET /',
    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();

First when user try to access GET /landing it will redirect to facebook tab and show the page GET /. But somehow it always return empty page, already inspect it with firebug on firefox and there is no error, on the response tab always shows Reload the page to get source for: https://localhost/f3-fb/. Already try it with my office framework and works perfectly.

If anybody ever get this problem please advise.

Answer 1

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)