在Facebook页面嵌入JS实现无跳转Facebook Login获取AccessToken遇阻

嘿，我来帮你搞定这个在Facebook页面里获取用户AccessToken的问题！

问题根源 #

你碰到的这个域名错误，本质是Facebook的安全校验机制在起作用：FB.login默认会要求当前页面的域名在你的应用允许的域名列表里，但你肯定没法把facebook.com加到自己应用的App Domains里，所以直接调用就触发了报错。

正确的实现步骤 #

1. 先调整应用的OAuth配置 #

先打开你的Facebook开发者后台，找到对应应用的Settings > Basic页面，然后：

• 在Valid OAuth Redirect URIs这个字段里，添加https://www.facebook.com/connect/login_success.html——这是Facebook官方专门给弹出式授权用的回调页面，不需要把facebook.com加到你的App Domains里，完全合规。
• 记得保存设置哦！

2. 修改你的FB.login调用代码 #

给FB.login加上display: 'popup'参数，强制用弹窗形式发起授权。这样授权完成后弹窗会自动关掉，用户还留在原来的Facebook页面，你也能顺利拿到AccessToken：

FB.login(function(response) {
  if (response.authResponse) {
    // 授权成功，拿到Token啦
    console.log('AccessToken:', response.authResponse.accessToken);
    alert(response.authResponse.accessToken);
  } else {
    // 用户取消了授权或者授权失败
    console.log('用户取消授权或授权失败');
  }
}, {
  display: 'popup',
  scope: 'user_profile,email' // 这里换成你需要的权限，比如要邮箱就加email
});

3. 确保JS SDK初始化正确 #

调用FB.login之前，必须先正确加载并初始化Facebook的JS SDK，别忘填你的应用ID：

window.fbAsyncInit = function() {
  FB.init({
    appId      : '你的应用ID',
    cookie     : true,
    xfbml      : true,
    version    : 'v18.0' // 建议用最新的API版本，避免兼容性问题
  });
};

// 加载SDK的脚本
(function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "https://connect.facebook.net/en_US/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

几个关键点要记牢 #

• display: 'popup'是核心：这种弹窗式授权不会让用户跳离当前Facebook页面，授权完弹窗自动关，完美符合你的需求。
• 官方回调URI的作用：https://www.facebook.com/connect/login_success.html是Facebook官方认可的，不用纠结域名的问题，直接用就行。
• 权限要按需加：scope里的权限别乱加，只加你调用Graph API实际需要的，这样用户更容易同意授权。

内容的提问来源于stack exchange，提问作者Lennie