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

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 尝试打开一个弹出窗口 窗户。因此，这个方法应该只在用户点击后调用 事件，否则弹出窗口将被大多数浏览器阻止。

因此，您可能需要授权此弹出窗口才能使其正常工作，实际上您应该使用另一种方法（如该客户端身份验证文档中所述）或仅在用户单击某些内容后调用此方法。 这只是为了让您朝着正确的方向轻推：

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 参数。在这种情况下应该没有任何区别，但它更安全。