修改

Question

当使用fb.UI时，https托管的iframe页面会给出一个正确的模态对话框，但是同一个页面通过http给出一个弹出窗口

这是我的代码，主要来自facebook对话框帮助页面：

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:fb="https://www.facebook.com/2008/fbml">
  <head>
    <title>My Feed Dialog Page</title>
  </head>
  <body>
    <p>oh, hello.</p>
    <div id='fb-root'></div>
    <script src='//connect.facebook.net/en_US/all.js'></script>
    <p><a onclick='postToFeed(); return false;'>Post to Feed</a></p>
    <p id='msg'></p>

    <script> 
      FB.init({appId: "myappid", status: true, cookie: true});

      function postToFeed() {

        // calling the API ...
        var obj = {
          method: 'feed',
          link: 'http://www.facebook.com/testapp/app_myappid/',
          picture: 'http://fbrell.com/f8.jpg',
          name: 'Facebook Dialogs',
          caption: 'Reference Documentation',
          description: 'Using Dialogs to interact with users.',

        };

        function callback(response) {
          document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
        }

        FB.ui(obj, callback);
      }



    </script>
  </body>
</html>

所以，当我通过https://www.facebook.com/testapp/app_myappid进入页面时，我得到了一个正确的模态对话框，但http://www.facebook.com/testapp/app_myappid给出了一个可怕的弹出窗口。

Answer 1

您是否尝试过添加 display 参数，如下所示：

var obj = {
    method: 'feed',
    link: 'http://www.facebook.com/testapp/app_myappid/',
    picture: 'http://fbrell.com/f8.jpg',
    name: 'Facebook Dialogs',
    caption: 'Reference Documentation',
    description: 'Using Dialogs to interact with users.',
    display: 'iframe'
};

...

FB.ui(obj, callback);

参考：https://developers.facebook.com/docs/reference/dialogs/

修改

正如我在同一份文件中所述：

如果指定iframe，则必须具有有效的access_token。

查看您的代码，您似乎确实跳过了身份验证过程。你看，你不能只是调用 FB.init 然后开始使用api，你需要让SDK对用户进行身份验证。

有一些方法可以执行此操作，您应该查看Client-Side Authentication文档以获取更多信息。这是您修改后的代码，我添加了SDK的FB.login方法的使用，并声明：

调用FB.login会导致JS SDK尝试打开弹出窗口窗口。因此，只应在用户单击后调用此方法事件，否则大多数浏览器都会阻止弹出窗口。

因此，您可能需要授权此弹出窗口才能正常工作，您实际上应该使用另一种方法（如客户端auth doc中所述）或者在用户单击某些内容后调用此方法。这只是为了给你一个正确的方向：

function callback(response) {
    document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}

function postToFeed() {
    // calling the API ...
    var obj = {
        method: 'feed',
        link: 'http://www.facebook.com/testapp/app_myappid/',
        picture: 'http://fbrell.com/f8.jpg',
        name: 'Facebook Dialogs',
        caption: 'Reference Documentation',
        description: 'Using Dialogs to interact with users.',
    };

    FB.ui(obj, callback);
}

FB.init({
    appId: "myappid", 
    status: true, 
    cookie: true
});

FB.login(function(response) {
    if (response.authResponse) {
        postToFeed();
    }
    else {
        alert("user NOT logged in");
    }
});

第二次编辑

由于它是一个画布应用程序，并且您希望避免登录弹出窗口，因此还有另一种解决方案。

如果您收到该错误消息，则表示您（可能）缺少客户端身份验证，您可以从服务器端传递您的访问令牌并在客户端使用它，或者您可以执行类似的操作这样：

window.fbAsyncInit = function() {
    FB.init({
        appId: "myappid", 
        status: true, 
        cookie: true
    });

    FB.getLoginStatus(function(response) {
        if (response.status === "connected") {
            postToFeed();
        }
        else {
            console.log("not logged in to facebook or hasn't authorized the app");
        }
    };
};

function postToFeed() {
    // calling the API ...
    var obj = {
        method: 'feed',
        link: 'http://www.facebook.com/testapp/app_myappid/',
        picture: 'http://fbrell.com/f8.jpg',
        name: 'Facebook Dialogs',
        caption: 'Reference Documentation',
        description: 'Using Dialogs to interact with users.',
    };

    function callback(response) {
        document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
    }

    FB.ui(obj, callback);
}

这不会打开弹出窗口或任何类似的东西，只会检查用户登录状态。您可以阅读有关FB.getLoginStatus方法的更多信息。

另外，我建议在初始化js sdk时使用Channel File参数。在这种情况下它不应该有任何区别，但它更安全。

使用http访问我的facebook iframe页面时，如何获取Modal而不是弹出窗口？

1 个答案:

修改

第二次编辑