Search code examples
oauth-2.0facebook-php-sdkx-frame-options

How can I get a user authenticated in my page tab

In my search for answers I only found clues as to what the problem was, no working solution found, or people with similar issues.

When I surf to my app outside of facebook, I can authenticate without issue and all facebook interaction works fine. When I install my app in a page tab, I can't authenticate because of following error:

Refused to display 'https://www.facebook.com/dialog/oauth?client_id=175164365974824&redirect_ur…er%2F&state=6790b76872277c825f5bb749ed167152&scope=publish_actions%2Cemail' in a frame because it set 'X-Frame-Options' to 'DENY'.

What I can make from this is that facebook doesn't allow it's authentication page to be displayed in my page tab iframe.

How can I get a user authenticated in my page tab AND redirected to my page tab after authentication? (I do not wish to use my app as a standalone website).

Other important info: I'm using the PHP SDK for authentication and getting user data.

Solution

  • I found it's impossible to do with PHP SDK alone. I needed to combine the Javascript SDK and PHP SDK. I use the Javascript SDK to handle the Login, and the PHP SDK to get the user data and post to wall actions etc.

    I found this example in the PHP SDK Git: https://github.com/facebook/facebook-php-sdk/blob/master/examples/with_js_sdk.php

    <?php

require '../src/facebook.php';

$facebook = new Facebook(array(
'appId'  => '344617158898614',
'secret' => '6dc8ac871858b34798bc2488200e503d',
));

// See if there is a user from a cookie
$user = $facebook->getUser();

if ($user) {
  try {
    // Proceed knowing you have a logged in user who's authenticated.
    $user_profile = $facebook->api('/me');
  } catch (FacebookApiException $e) {
    echo '<pre>'.htmlspecialchars(print_r($e, true)).'</pre>';
    $user = null;
  }
}

?>
<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
  <body>
    <?php if ($user) { ?>
      Your user profile is
      <pre>
        <?php print htmlspecialchars(print_r($user_profile, true)) ?>
      </pre>
    <?php } else { ?>
      <fb:login-button></fb:login-button>
    <?php } ?>
    <div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId: '<?php echo $facebook->getAppID() ?>',
          cookie: true,
          xfbml: true,
          oauth: true
        });
        FB.Event.subscribe('auth.login', function(response) {
          window.location.reload();
        });
        FB.Event.subscribe('auth.logout', function(response) {
          window.location.reload();
        });
      };
      (function() {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol +
          '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
      }());
    </script>
  </body>
</html>