在iFrame中显示Facebook登录对话框

Question

I got a HTML page where it contain an iFrame, within the iFrame I have codes something like from the facebook example here : http://developers.facebook.com/docs/authentication/server-side/

<?php 

   $app_id = "YOUR_APP_ID";
   $app_secret = "YOUR_APP_SECRET";
   $my_url = "YOUR_URL";

   session_start();
   $code = $_REQUEST["code"];

   if(empty($code)) {
     $_SESSION['state'] = md5(uniqid(rand(), TRUE)); //CSRF protection
     $dialog_url = "http://www.facebook.com/dialog/oauth?client_id=" 
       . $app_id . "&redirect_uri=" . urlencode($my_url) . "&display=popup&state="
       . $_SESSION['state'];

     echo("<script> top.location.href='" . $dialog_url . "'</script>");
   }

   if($_SESSION['state'] && ($_SESSION['state'] === $_REQUEST['state'])) {
     $token_url = "https://graph.facebook.com/oauth/access_token?"
       . "client_id=" . $app_id . "&redirect_uri=" . urlencode($my_url)
       . "&client_secret=" . $app_secret . "&code=" . $code;

     $response = file_get_contents($token_url);
     $params = null;
     parse_str($response, $params);

     $graph_url = "https://graph.facebook.com/me?access_token=" 
       . $params['access_token'];

     $user = json_decode(file_get_contents($graph_url));
     echo("Hello " . $user->name);
   }
   else {
     echo("The state does not match. You may be a victim of CSRF.");
   }

 ?>

I am not sure if it is possible (Facebook probably prevent it?) or if I am not doing it correctly. When I am trying to change:

echo("<script> top.location.href='" . $dialog_url . "'</script>");

To

echo("<script> parent.changeIframeSrc('myIframe', '" . $dialog_url . "'); </script>");

Where my parent page (The one that shows the IFrame) will have a javascript function like below:

function changeIframeSrc(iframeName, url) {
    var $iframe = $('#' + iframeName);
    if ( $iframe.length ) {
        $iframe.attr('src',url);
    }
}

It works fine if I already login to Facebook, the problem is when it tries to redirect to Facebook login page, my Iframe just show a blank page. From Firebug I can see that it does submit a request to https://www.facebook.com/login.php?api_key=XXXXXXXX&skip_api_login=1&display=popup&cancel_url=XXXXXX&fbconnect=1&next=XXXXX&rcount=1 with http 200 in response, but my iframe is just blank.

My question is, is it because showing login page in iFrame is not allowed? or I am doing something wrong here?

Thanks!

Answer 1

Facebook does not allow for a standard iFrame call - iFrames must fully redirect, otherwise FB simply won't authorise them. Redirect to the login url using target=top , and this should allow users to authorise themselves/log in.