Facebook登錄和iframe重定向

Question

我正在構建一個Facebook IFrame應用程序。 我正在使用以下javascript代碼來請求用戶登錄並允許該應用程序的權限，然后應將其重定向到iframe應用程序。 該代碼正常工作。 但是，我有兩個問題。

一種。 一旦在IFrame中加載該應用程序，它就會重定向到頁面（ http：//www.facebook.com/connect/uiserver.php？app_id = ..... ），並顯示一個大的facebook圖標。 當我單擊此圖標時，它將重定向到Facebook登錄頁面。 我希望我的應用程序直接重定向到登錄頁面，而不是顯示中間的Facebook圖標頁面。

b。 當用戶單擊“允許”按鈕以獲取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的設置不是此設置，則將fb上的URL更改為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存在的權限。

希望能幫助到你！