javascript - Facebook AppRunner 如何运作？-6ren

javascript - Facebook AppRunner 如何运作？

转载作者：行者123 更新时间：2023-11-29 19:57:17

我们正在为我们的服务实现 OAuth API，并将支持应用程序。

我想做的第一件事 - 允许应用 iframe 自动调整大小。

卡住了。

在父文档中，如果 iframe 在其他域上，我无法获取 iframe 内容的大小。
我无法通过我的 iframe 与父文档/脚本交互，因为 iframe 在其他域上。

但 Facebook 以某种方式做到了？？

我试图破解他们的应用加载流程，但没有成功。

他们在 iframe 中加载 page_proxy.php，然后以某种方式将来自应用程序的代码放入该 iframe 中。

当然，他们可能只是从应用程序中获取 html 内容，然后将所有 url 路径转换为绝对路径.. 但是。那么 Ajax 调用是如何工作的(如果它们只是加载我们的 html 内容——那么任何 ajax 调用都会变成跨域调用)？但它在 FB 上确实有效，就好像我的应用程序作为真正的 iframe 加载并且没有任何跨域调用..!但话又说回来.. 调整大小是如何工作的，为什么我在 Facebook 上看不到我的 iframe 而只看到 pageproxy？？

这里真的需要一些光。

谢谢。

最佳答案

终于找到了 FB 是怎么做到的:)

page_proxy.php#frameName - 加载一个表单，然后使用 POST 方法加载带有签名请求的 iframe。

为什么没有直接调用app加载iframe？防止第 3 方脚本获得签名请求(其中包含所有用户信息)。

fb 是怎么做的(我采用的代码):

<form method="post" id="proxy_form"><input type="hidden" autocomplete="off" id="signed_request" name="signed_request" /></form>
<script>
  var frameName = window.location.href.split('#')[1];
  function submitForm(appTabUrl, signedRequest) {
    var proxyForm = document.getElementById("proxy_form");
    proxyForm.setAttribute("action", appTabUrl);
    proxyForm.setAttribute("target", frameName);
    var input = document.getElementById("signed_request");
    input.setAttribute("value", signedRequest);
    proxyForm.submit();
  }
  function waitForParams() {
    submitForm('$url_with_app', 'signed_request_goes_here');
  }
  waitForParams();</script>

iFrame 中的应用程序正常加载，但我们在 DOM 浏览器中看不到我们的应用程序的 iframe，因为它是使用 POST 请求加载的。
我们在我们的应用程序中初始化 facebook 并告诉我们的应用程序自动增长。
Facebook 完成初始化，等待 DOM 准备好并计算应用程序的高度。
现在是扩大我们的 iframe 的时候了。这是他们使用的技巧:

Source from FB

_sendMessageToFacebook: function(message) {
    var url = FB._domain.staticfb + 'connect/canvas_proxy.php#' +
      FB.QS.encode({method: message.method,
                    params: FB.JSON.stringify(message.params)});

     var root = FB.Content.appendHidden('');
     FB.Content.insertIframe({
       url: url,
       root: root,
       width: 1,
       height: 1,
       onload: function() {
         setTimeout(function() {
           root.parentNode.removeChild(root);
         }, 10);
       }
     });
  }