在 Safari 的画布页面 iFrame 中使用 Facebook Graph API 和 JS SDK 已损坏答案

【问题标题】：Using Facebook Graph API with the JS SDK in a canvas page iFrame in Safari is broken在 Safari 的画布页面 iFrame 中使用 Facebook Graph API 和 JS SDK 已损坏
【发布时间】：2011-06-19 02:28:20
【问题描述】：

所以我尝试将 Graph API 与 Facebook JS SDK 一起使用，但在 Safari 中出现以下错误：

“OAuthException：必须使用活动访问令牌来查询有关当前用户的信息。”

我怀疑这与 Safari 对 x-domain cookie 设置非常严格这一事实有关，因此我在 Firefox 中尝试了它，在 FB.init() 中将 cookie 选项设置为 false。我确实发现我的 FB.api() 请求遇到了同样的错误。

FB.init({
  appId:  "<%= app_id %>",
  status: true, // check login status
  // We cannot rely on this cookie being set in an iframe. I found this
  // out because the Graph API was not working in Safari.
  // cookie: true, // enable cookies to allow the server to access the session
  xfbml:  true, // parse XFBML
  channelUrl: window.location.protocol + '//' + window.location.host + '/fb/canvas/channel.html'
});

所以我想知道...有没有一种好方法可以在FB.api() 请求中手动设置access_token 查询参数？

如果FB.init() cookie 设置正确，FB.api() 请求参数如下所示：

access_token  xxxxxxxxxxxx|1.xxxxxxxxxxxxxxxxxxxxxx__.3600.xxxxxxxxxx-xxx|xxxxxxxxxxxxxxxxxxxxxxxxxxx
callback      FB.ApiServer._callbacks.xxxxxxxxxxxxxxx
pretty        0
sdk           joey

在 Safari 中（或未设置 cookie FB.init() 选项时）FB.api() 请求参数如下所示：

callback      FB.ApiServer._callbacks.xxxxxxxxxxxxxxx
pretty        0
sdk           joey

现在...显然我的应用程序能够在服务器端生成access_token...我想知道是否有任何方法可以手动设置FB.api() 以使用我的服务器端生成的@ 987654336@.

【问题讨论】：

我认为还有另一种方法可以做到这一点。基本上，由于我们有机会在填充 iFrame 的初始发布请求上设置 cookie，我们可以利用这个机会模仿 FB JS SDK 在FB.init() 期间尝试设置的fbs_xxxxxxxxx cookie。现在... SDK 设置的 cookie 值如下所示：fbs_xxxxxxxxx="access_token=xxx&expires=xxx&secret=xxx&session_key=xxx&sig=xxx&uid=xxx"。 access_token 和 expires 部分很简单。但是我在弄清楚其他部分时遇到了一些麻烦。

标签： javascript safari facebook-graph-api facebook-iframe facebook-javascript-sdk

【解决方案1】：

Safari 的限制是，如果域与父域不同，它将不允许 iframe 的内容创建或使用 cookie...除非用户首先与其交互。这个问题是 Safari 独有的，而不是 webkit，所以 Chrome 很好。

在我自己遇到这个问题（几次痛苦的时候）之后，有一个解决方案似乎是一个很好的解决方案。该技术是使用 javascript 将表单注入页面正文，然后触发提交事件。 Safari 接受此作为用户交互并允许使用 cookie。

你可以在 Facebook 开发者论坛here找到一个很好的例子

【讨论】：

啊，不错的主意。我知道 JS 触发的表单提交是 Facebook 允许 iFrame 画布页面为 iFrame 的域设置 cookie 的方式，即使在 Safari 等通常不会在 x 域 iFrame 请求上设置 cookie (stackoverflow.com/questions/4701922/…) 的浏览器上也是如此。但是，似乎从 iFrame 中触发表单提交事件（或执行 JS 重新加载）并不是最好的用户体验。此外，Safari 团队可能会将其视为一个安全漏洞，可以绕过针对跟踪用户的广告的防御。
可以对用户屏蔽其中的大部分内容。我使用了一个实现，它在登录页面上测试用户代理服务器端，然后提供 html 来为 safari 用户执行表单技巧。转换几乎与使用位置标头重定向一样快。
有趣。好吧，我一定会记住这一点。现在我已经意识到你实际上并不需要 FB JS SDK 来设置一个 cookie 来使用FB.api()——所以不需要浏览器特定的规则。

【解决方案2】：

好的，我让它工作了。我发现你不需要FB.init() cookie: true 选项来使用FB.api()——你可以手动传递access_token：

FB.api("/me/apprequests/?access_token="+access_token, function (response) {});

access_token 是一个 JS 变量，您可以在页面加载时设置服务器端。这是一个 ERB 示例：

<script>
  var access_token = "<%= @access_token %>";
</script>

@access_token 是在初始 POST 请求中传递到画布页面的 oauth access_token。

【讨论】：