Ionic 3应用Facebook登录iPhone端失效，then回调无法执行求助

首先得拆解你的问题：Web端运行正常，但iOS打包后loginWithFacebook()的then回调完全没触发，这大概率是设备端的配置缺失或者错误处理不到位导致的——毕竟移动端的Facebook登录比Web端多了不少原生层面的校验，如果有错误抛出但没被捕获，代码就会卡在那里，根本走不到成功回调。

下面是几个你需要优先排查和修复的关键点：

1. 先补全错误捕获，定位具体问题 #

你现在的代码完全没有处理catch分支，移动端登录如果遇到权限、配置类错误，会直接抛出异常但没被捕获，导致then永远不会执行。先给代码加上错误处理，看看具体是什么错误：

修改welcome.ts的代码： #

loginWithFacebook() { 
  this.loading = true; 
  this.userService.loginWithFacebook()
    .then((success) => { 
      let profile = success.additionalUserInfo.profile; 
      console.log('Successfully logged in'); 
      this.loading = false;
    })
    // 新增错误捕获分支
    .catch(error => {
      console.error('Facebook login error:', error);
      this.loading = false;
      // 可以给用户弹出错误提示，比如alert(error.message)
    });
}

修改User Provider的代码： #

loginWithFacebook(){ 
  if (this.platform.is('cordova')) { 
    console.log('Mobile login'); 
    return this.fb.login(['email', 'public_profile'])
      .then(res => { 
        console.log('entered facebook login code'); 
        const facebookCredential = firebase.auth.FacebookAuthProvider.credential(res.authResponse.accessToken); 
        return firebase.auth().signInWithCredential(facebookCredential); 
      })
      // 新增这里的错误捕获
      .catch(error => {
        console.error('Cordova FB login error:', error);
        throw error; // 把错误抛给上层处理
      });
  } else { 
    console.log('Web login'); 
    return this.afAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider())
      .catch(error => {
        console.error('Web FB login error:', error);
        throw error;
      });
  }
}

加上错误捕获后，你可以通过Xcode控制台或者Ionic DevApp的日志，看到具体的错误信息，这是排查问题的核心第一步。

2. 检查iOS端Facebook登录的核心配置 #

移动端Facebook登录需要在原生项目里配置几个关键项，大概率是这些配置出了问题：

• Facebook开发者后台的iOS配置：

  • 登录Facebook开发者平台，找到你的应用，进入Settings > Basic，确保iOS平台已添加，且Bundle ID和你Ionic项目config.xml里的id完全一致（比如com.yourcompany.yourapp）。
  • 确认Single Sign On已开启（必须开启）。
  • 若应用未上架，iOS Store ID可以暂时留空，上架后再补充。

• Xcode项目的配置：

  • 打开项目platforms/ios文件夹下的.xcworkspace文件，进入Xcode。
  • 确保Info.plist里添加了Facebook的URL Scheme，格式为fb{你的Facebook App ID}，比如fb123456789。
  • 检查Info.plist里的LSApplicationQueriesSchemes数组是否包含fbauth2和fbapi，这是iOS 9+必需的配置，否则App无法唤起Facebook登录页面。

• cordova-plugin-facebook4插件的配置：
  你用的应该是cordova-plugin-facebook4插件，确保安装时正确传入了App ID和App Name：

  ionic cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="你的AppID" --variable APP_NAME="你的App名称"
  

  如果之前安装参数错误，先卸载再重新安装：

  ionic cordova plugin remove cordova-plugin-facebook4
  # 重新安装并传入正确参数
  ionic cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="你的AppID" --variable APP_NAME="你的App名称"
  

3. 检查Firebase的iOS配置 #

因为你用Firebase Auth处理Facebook凭证，还要确认Firebase的iOS配置是否正确：

• 登录Firebase控制台，下载最新的GoogleService-Info.plist文件，替换项目platforms/ios/YourAppName/Resources下的旧文件。
• 确保Firebase控制台里的Facebook登录方法已开启，且填写的Facebook App ID和App Secret和Facebook开发者后台完全一致。

4. 测试时的注意事项 #

• 不要用模拟器测试Facebook登录，Facebook原生登录在模拟器上经常出问题，一定要用真实的iPhone设备测试。
• 测试设备上的Facebook App必须已登录账号，且该账号已添加到Facebook开发者后台的Testers列表里（否则会提示“应用未上线”的错误）。

按照上面的步骤排查，应该能找到问题所在。先从添加错误捕获开始，拿到具体的错误信息，再针对性修复配置问题。

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