AngularFire2集成Microsoft认证调用verifyAssertion返回400错误问询

代码遗漏项说明 #

你的实现代码存在3处需要调整的内容：

• 未给Microsoft OAuth提供方配置必要权限范围，微软身份平台要求至少申请openid、profile、email三个基础权限才能正常返回用户身份信息，缺少权限会触发身份断言校验失败
• 混用了全局firebase.auth()实例和AngularFire封装的this.afAuth实例，二者配置不一致时会导致认证请求参数错误
• 错误捕获逻辑为空，无法拿到具体错误码定位问题，400错误通常会附带回调地址不匹配、客户端ID无效等具体提示，需要打印日志排查

修正后的实现代码 #

return new Promise<any>((resolve, reject) => {
  const provider = new firebase.auth.OAuthProvider('microsoft.com');
  // 补充必要权限
  provider.addScope('openid');
  provider.addScope('profile');
  provider.addScope('email');
  // 企业租户登录需额外补充租户ID配置
  // provider.setCustomParameters({ tenant: '你的Azure AD租户ID' });
  
  // 使用AngularFire统一的auth实例
  this.afAuth.signInWithPopup(provider)
    .then(result => {
      console.log("登录结果: ", result)
      resolve(result);
    })
    .catch(error => {
      // 打印错误信息方便排查
      console.error("登录错误: ", error.code, error.message)
      reject(error);
    });
})

1. Azure AD端配置 #

• 登录Azure门户注册新应用程序，按需选择支持的账户类型（个人微软账号/企业租户账号/二者都支持）
• 重定向URI填写Firebase提供的回调地址，格式为https://<你的Firebase项目ID>.firebaseapp.com/__/auth/handler
• 注册完成后在「证书和密码」板块生成客户端密码并留存，在「概述」板块获取应用程序(客户端)ID备用

2. Firebase控制台配置 #

• 进入Firebase控制台「Authentication」→「登录方法」，开启Microsoft登录选项
• 将Azure端拿到的客户端ID、客户端密码填入对应输入框，企业租户登录还要额外填写Azure租户ID，保存配置即可

3. 业务代码实现 #

使用上述修正后的代码开发即可，需确保AngularFire初始化参数与Firebase控制台项目参数一致。

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