Facebook Login And Iframe Redirection

I am building an Facebook IFrame App. I am using the below javascript code to request user to login and allow permissions for the application, after which they are supposed to be r

Solution 1:

I have remembered something!

You must use target="_top" in all your links and redirections in a iframe application!

Hope I help you.

Solution 2:

Thanks for your answers. I used the solution posted by McKAMEY(Facebook API: FB.Connect.requireSession issues) with few changes, and it works as intended, without showing the intermediate facebook icon page, and also it redirects after authentication to the iframe app correctly.

I have posted below the working solution in case someone needs it.

var api_key = 'xxxxxxxxxxxx';
var channel_path = './xd_receiver.htm';
var canvas_url = "http://apps.facebook.com/myappxxxx/"// ensure your canvasurl has a '/' at the end!

function Initialize() {
    FB_RequireFeatures(["Api"], function () {
        FB.Facebook.init(api_key, channel_path);
        FB.ensureInit(function () {
            FB.Connect.ifUserConnected(
        function () {
            var uid = FB.Connect.get_loggedInUser();
            if (!uid) {
                authRedirect();
                return;
            }
        },
        authRedirect);
        });

    });
}
function authRedirect() {
    //This is the Sample URL Structure for redirecting to facebook 
    //http://www.facebook.com/connect/uiserver.php?
    //app_id=XXXXXXXXXXXXX&
    //next=xxxxxxxxxx_success_url_here_XXXXXXX&
    //display=page&
    //perms=XXXXXX_comma_seperated_permissions_list_hereXXXXXX&
    //fbconnect=1&
    //method=permissions.request

    window.top.location.href = "http://www.facebook.com/connect/uiserver.php?app_id=" +  encodeURIComponent(api_key) + "&next=" + encodeURIComponent(canvas_url) + "&display=page&perms=publish_stream&fbconnect=1&method=permissions.request";
}

Initialize();

Solution 3:

Note on redirecting within a frame to the Facebook login page. You have to use javascript to redirect the entire page since the login page passed the X-Frame-Options:DENY header and modern browsers will prevent you from sending the user to the URL if that header is present. Solution is to use javascript::window.top.location = ''; to redirect the whole page

Solution 4:

I'm not sure on the middle page between redirection but what does your apps canvas and connect url point to? The redirection after login should go to that page unless you have this overridden somewhere in your code. Change the urls in the settings on fb to apps.facebook.com/myapp if that's not what its set to.

Solution 5:

You may use the new Facebook Graph API (http://developers.facebook.com/docs/api) to handle authentication. First, you must check if you have the access_token:

$access_token = $_REQUEST['access_token'];

if($access_token != NULL) { 
  ...
}
else {
  // the following javascript
}

And the javascript is:

<script type="text/javascript">
    top.location.href = '<?= "https://graph.facebook.com/oauth/authorize?client_id=".$appid."&redirect_uri=".$appurl."oauth_redirect" ?>'
</script>

You must have a file oauth_redirect.php like this:

<?php
  $code=$_REQUEST['code'];
  $url = "http://graph.facebook.com/oauth/access_token?client_id=".$appid."&redirect_uri=".$appurl."oauth_redirect&client_secret=".$appsecret."&code=$code";
  $curl = curl_init();

  // SET URL FOR THE POST FORM LOGIN
  curl_setopt($curl, CURLOPT_URL,$url);
  curl_setopt($curl, CUPROPT_SSL_VERIFYPEER, true);
  curl_setopt($curl, CUPROPT_SSL_VERIFYHOST, true);
  curl_setopt($curl, CURLOPT_FOLLOWLOCATION  ,1);
  curl_setopt($curl, CURLOPT_HEADER      ,0);
  curl_setopt($curl, CURLOPT_RETURNTRANSFER  ,1);

  // EXECUTE 1st REQUEST (LOGIN)
  $response = curl_exec ($curl);
?>
  <script type="text/javascript">
    top.location.href = '<?= $appurl."?".$response ?>';
  </script>

Finally, you can return to your index page (the $appurl variable) and test if the user has permission testing access_token presence.

Hope it helps!