Question

我正在构建一个Facebook IFrame应用程序。我使用下面的javascript代码请求用户登录并允许应用程序的权限，之后他们应该被重定向到iframe应用程序。代码工作正常。但是，我有两个问题。

一个。只要应用加载到IFrame中，它就会重定向到一个页面（http://www.facebook.com/connect/uiserver.php?app_id=.....。）并显示一个大的Facebook图标。当我点击此图标时，它会重定向到Facebook登录页面。我希望我的应用程序直接重定向到登录页面，而不是显示中间的facebook图标页面。

湾当用户在Facebook中点击“允许”按钮获取所请求的权限时，该页面会重定向到我的主网站（http://www.mysite.com），而不是iframe应用程序（http://apps.facebook.com/myapp）。

我在下面粘贴了我的javascript，这适用于上述怪癖。

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");
    });
});

非常感谢。

Answer 1

我记得有事！

您必须在iframe应用程序中的所有链接和重定向中使用target="_top"！

希望我帮助你。

Answer 2

感谢您的回答。我使用McKAMEY发布的解决方案（Facebook API: FB.Connect.requireSession issues）进行了一些更改，它按预期工作，没有显示中间的facebook图标页面，并且在身份验证后正确地重定向到iframe应用程序。

我已经在工作解决方案下面发布了以防有人需要它。

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

关于在框架内重定向到Facebook登录页面的注意事项。您必须使用javascript重定向整个页面，因为登录页面传递了X-Frame-Options：DENY标头，现代浏览器将阻止您将用户发送到URL（如果该标头存在）。解决方法是使用javascript :: window.top.location ='';重定向整个页面

Answer 4

我不确定重定向之间的中间页面，但你的应用程序画布和连接url指向什么？登录后的重定向应该转到该页面，除非您在代码中的某处覆盖了此重定向。将fb设置中的网址更改为apps.facebook.com/myapp，如果这不是它的设置。

Answer 5

您可以使用新的Facebook Graph API（http://developers.facebook.com/docs/api）来处理身份验证。首先，您必须检查是否有access_token：

$access_token = $_REQUEST['access_token'];

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

javascript是：

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

您必须拥有这样的文件oauth_redirect.php：

<?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>

最后，您可以返回索引页面（$appurl变量）并测试用户是否有权限测试access_token。

希望它有所帮助！

Facebook登录和iframe重定向

5 个答案: