Cordova项目Facebook API设备端站点URL配置异常求助

兄弟，我太懂这个坑了！你遇到的问题核心原因很明确：

• PC端浏览器跑的是http://localhost:4400/，属于Facebook允许的http/https协议域名，所以能正常回调；
• 但Cordova在Android/iOS设备上是以file://协议加载本地资源的，Facebook的OAuth机制完全不允许非http/https的回调URL，自然就会抛出"域名不在应用允许列表"的错误。

下面给你两个最靠谱的解决方案，优先推荐第一个：

方案一：使用官方Cordova Facebook插件（最稳定） #

这个插件直接调用设备原生的Facebook SDK，完全绕开了web端的URL限制，是Cordova集成Facebook登录的标准做法。

步骤1：安装插件 #

打开终端，在你的Cordova项目根目录执行：

cordova plugin add cordova-plugin-facebook-connect --save --variable APP_ID="你的Facebook应用ID" --variable APP_NAME="你的应用名称"

注意替换成你自己的APP_ID和APP_NAME，这些信息在Facebook开发者后台的应用设置里能找到

步骤2：配置Facebook开发者后台 #

1. 进入你的Facebook应用后台，找到Settings > Basic；
2. 点击Add Platform，分别添加Android和iOS平台（根据你需要发布的设备类型）；
3. 针对Android：填写你的Cordova项目包名（比如com.yourcompany.yourapp，在config.xml里的id字段），并生成添加签名哈希值（Facebook有工具可以生成，跟着指引做就行）；
4. 针对iOS：填写你的Bundle ID（同样对应config.xml里的id字段）；
5. 这个方案下，之前填的Site URL只对PC web端有效，设备端不需要依赖它。

步骤3：编写登录&获取用户信息的代码 #

替换你原来的web版SDK代码，用插件提供的API来获取姓名和头像：

// 登录请求public_profile权限（包含姓名和头像）
facebookConnectPlugin.login(['public_profile'], function(loginResponse) {
  if (loginResponse.status === 'connected') {
    // 获取用户姓名和头像
    facebookConnectPlugin.api('/me?fields=name,picture', [], function(userData) {
      console.log('用户姓名:', userData.name);
      console.log('头像URL:', userData.picture.data.url);
      // 在这里处理你的业务逻辑，比如展示用户信息
    }, function(apiError) {
      console.error('获取用户信息失败:', apiError);
    });
  } else {
    console.log('用户取消登录或未授权');
  }
}, function(loginError) {
  console.error('登录失败:', loginError);
});

方案二：用InAppBrowser绕开file://限制（适合坚持用web SDK的场景） #

如果你非要用web版的Facebook SDK，可以通过InAppBrowser插件打开登录页面，把回调指向一个合法的http/https URL：

步骤1：安装InAppBrowser插件 #

cordova plugin add cordova-plugin-inappbrowser

步骤2：配置Facebook后台 #

在Settings > Basic里的Valid OAuth Redirect URIs添加一个在线的回调页面（比如你自己的网站https://yourdomain.com/fb-callback.html），或者用本地代理的http URL（不过在线的更稳定）。

步骤3：编写代码 #

// 构造Facebook登录URL
const fbLoginUrl = `https://www.facebook.com/v18.0/dialog/oauth?client_id=你的APP_ID&redirect_uri=https://yourdomain.com/fb-callback.html&scope=public_profile&response_type=token`;

// 用InAppBrowser打开登录页面
const browser = cordova.InAppBrowser.open(fbLoginUrl, '_blank', 'location=yes');

// 监听页面加载事件，捕获回调参数
browser.addEventListener('loadstart', function(event) {
  // 当URL包含access_token时，说明登录成功
  if (event.url.includes('access_token')) {
    // 解析URL中的token和用户信息
    const params = new URLSearchParams(event.url.split('#')[1]);
    const accessToken = params.get('access_token');
    
    // 用token调用Facebook API获取姓名和头像
    fetch(`https://graph.facebook.com/me?fields=name,picture&access_token=${accessToken}`)
      .then(res => res.json())
      .then(userData => {
        console.log('用户姓名:', userData.name);
        console.log('头像URL:', userData.picture.data.url);
        browser.close(); // 关闭浏览器
      })
      .catch(err => console.error('获取用户信息失败:', err));
  }
});

总结 #

优先用方案一的官方插件，它是专门为Cordova原生设备设计的，不仅解决了URL问题，还能提供更流畅的原生登录体验（比如调用系统的Facebook登录弹窗）。方案二更适合特殊场景，但需要维护在线回调页面，稳定性不如前者。

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