Facebook Login and Iframe redirection

Question

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 redirected to the iframe app. The code works correctly. But, I have two issues with it.

a. as soon as the app loads in IFrame, it redirects to a page ( http://www.facebook.com/connect/uiserver.php?app_id=..... .) and displays a large facebook icon. When I click this icon it redirects to facebook login page. I want my app to redirect to the login page directly instead of showing the inbetween facebook icon page.

b. When the user clicks 'Allow' button for the requested permission in facebook, the page redirects to my main site ( http://www.mysite.com ) instead of the iframe application( http://apps.facebook.com/myapp ).

I have pasted my javascript below, this works with above quirks.

var api_key = 'xxxxxxxxxxxxxxx';
var channel_path = 'xd_receiver.htm';

FB_RequireFeatures(["Api"], function () {
    FB.Facebook.init(api_key, channel_path);
    var api = FB.Facebook.apiClient;
    // require user to login
    api.requireLogin(function (exception) {
        FB.Connect.showPermissionDialog("publish_stream");
    });
});

Help much appreciated.

Answer 1

I have remembered something!

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

Hope I help you.

Answer 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();

Answer 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

Answer 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.

Answer 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!