Ionic Cordova Angular5集成Facebook API：实现账号选择登录需求

嘿，我刚好处理过类似的场景，给你几个可行的方案来实现Facebook账号选择登录的功能：

1. 强制弹出账号选择界面 #

Facebook的登录SDK其实自带参数可以控制是否显示账号选择器，你在调用登录方法时，添加prompt: 'select_account'这个关键参数，就能强制让用户选择要登录的账号，不管当前有没有已登录的FB账号缓存。

给你贴一段Angular里的实际代码示例（假设你用的是cordova-plugin-facebook4插件）：

loginWithFacebook() {
  (<any>window).facebookConnectPlugin.login(
    ['public_profile', 'email'], // 请求的权限
    {
      prompt: 'select_account', // 强制显示账号选择界面
      display: 'popup'
    },
    (response) => {
      // 处理登录成功后的逻辑
      console.log('登录成功:', response);
    },
    (error) => {
      console.error('登录失败:', error);
    }
  );
}

这个prompt: 'select_account'参数会直接告诉Facebook SDK，必须展示账号列表让用户选择，完美匹配你想要的Google登录那种效果。

2. 清除本地缓存后再发起登录 #

如果上面的参数偶尔不生效（比如旧版本插件兼容问题），你可以在发起登录请求前，先调用Facebook的登出方法，清除本地缓存的登录状态，这样下次登录就会自动弹出账号选择界面：

loginWithAccountSelection() {
  // 先登出清除缓存
  (<any>window).facebookConnectPlugin.logout(() => {
    // 登出成功后发起登录
    this.initFacebookLogin();
  }, (error) => {
    console.error('登出失败:', error);
    // 即使登出失败，也直接发起登录流程
    this.initFacebookLogin();
  });
}

// 封装的登录方法
private initFacebookLogin() {
  (<any>window).facebookConnectPlugin.login(
    ['public_profile', 'email'],
    {},
    (response) => {
      console.log('登录成功:', response);
    },
    (error) => {
      console.error('登录失败:', error);
    }
  );
}

这个方法的小缺点是，如果用户本来就没登录FB，登出操作会报错，但你可以捕获错误后继续走登录流程，不影响用户体验。

3. 确保插件版本是最新的 #

旧版本的cordova-plugin-facebook4可能不支持prompt参数，所以建议你更新到最新版插件：

# 先移除旧插件
cordova plugin remove cordova-plugin-facebook4
# 重新安装最新版，记得替换成你的FB应用ID和名称
cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="你的FB应用ID" --variable APP_NAME="你的FB应用名称"

小提醒 #

• 测试的时候尽量用真实设备，模拟器有时候会有缓存残留，导致账号选择界面不弹出。
• 确保你的Facebook应用在开发者后台已经正确配置了iOS/Android平台的哈希值、包名等信息，不然可能会出现登录异常。

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