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

Question

因此，我尝试将 Graph API 与 Facebook JS SDK 结合使用，但在 Safari 中收到以下错误：

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

我怀疑这与 Safari 对 x 域 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() 以使用我的服务器端生成的 <代码>access_token。

Answer 1

好吧，我已经开始工作了。我发现你不需要 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。

Answer 2

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

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

您可以在 Facebook 开发者论坛此处找到一个很好的示例