Safari 11“防止跨站点跟踪”破坏facebook登录

问题的原因

如果你使用 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;
  }
 });

解决方案

得到 accessToken 通过 code 在重定向的URL中

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

实例

第一步。打开OAuth对话框

你的重定向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

步骤二获取代码

Facebook重定向到您的页面后,您可以在URL中获取代码,如下所示:

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

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)永远不应该出现在客户端代码中。

尝试禁用cookie策略。我对谷歌API也有类似的问题,这段代码解决了这个问题。希望它也适用于Facebook登录

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

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