Safari 11“阻止跨站点跟踪”打破Facebook登录

Question

当用户打开Safari的“阻止跨站点跟踪”时，Facebook登录response.status是unknown，有什么办法可以获取登录信息吗？

相同的代码在Chrome中运行良好

Answer 1

问题的原因

如果你使用FB.getLoginStatus来获取accessToken，它就无法在Safari上运行它可以防止跨站点跟踪

https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/?locale=en_US

FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
    ...
    var uid = response.authResponse.userID;
    var accessToken = response.authResponse.accessToken;
  }
 });

---

解

通过重定向的URL中的accessToken获取code

https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/v2.2?locale=en_us

例

第1步。打开OAuth对话框

你的redirect_uri是https://www.sample.com.tw/login

 GET https://www.facebook.com/dialog/oauth?
    client_id={app-id}
    &redirect_uri=https://www.sample.com.tw/login

第2步。得到代码

Facebook重定向到您的页面后，您可以在URL中获取代码，它将类似于：

https://www.sample.com.tw/login?code=ABCDEFG

第3步。通过服务器端API获取访问令牌

GET https://graph.facebook.com/oauth/access_token?
   client_id={app-id}
   &redirect_uri=https://www.sample.com.tw/login
   &client_secret={app-secret}
   &code=ABCDEFG

你的应用秘密（client_secret）应该永远不会以客户端代码结束。

Answer 2

尝试禁用cookie策略。我在使用Google API时遇到了类似问题，这段代码解决了这个问题。希望它也适用于Facebook登录

auth2 = window.gapi.auth2.init({
    client_id: 'xxx',
    cookiepolicy: 'none',
  });

参考：https://github.com/google/google-api-javascript-client/issues/342