AngularFire中signInWithRedirect()与getRedirectResult()无法正常工作

核心问题分析 #

弹窗登录正常但重定向登录失败，且getRedirectResult始终返回null，排除SSL问题后，主要原因集中在调用时机错误、Angular Fire流与原生回调冲突、重定向URI配置遗漏这几点。

具体修复步骤 #

1. 调整getRedirectResult的调用时机 #

不要在onAuthStateChanged回调里调用getRedirectResult，重定向完成后Auth状态会立即更新，此时再调用该方法可能已无法捕获结果。应在应用初始化时直接调用：

修改AuthService的constructor：

constructor(
  private appService: AppService,
  private logger: NGXLogger,
) {
  this.subs.add(this.user$.subscribe(user => this.user = user));
  this.subs.add(this.idToken$.subscribe(idToken => this.idToken = idToken));

  // 页面加载完成后立即获取重定向结果
  getRedirectResult(this.auth)
    .then(result => {
      if (result) {
        console.log("重登录结果:", result);
        // 此处处理登录成功后的逻辑，比如更新本地用户状态
      }
    })
    .catch(error => {
      console.error("重定向登录失败:", error);
    });
}

2. 移除冗余的onAuthStateChanged回调 #

你已经通过Angular Fire提供的user$和idToken$流订阅了用户状态，原生onAuthStateChanged回调属于重复监听，易导致状态处理混乱，直接移除即可。

3. 检查Google Cloud Console的重定向URI配置 #

确保在Google Cloud Console的OAuth 2.0客户端ID配置中，添加了本地开发地址（如http://localhost:4200）和生产环境地址：

• 进入Google Cloud Console → 目标项目 → APIs & Services → Credentials
• 找到对应OAuth 2.0客户端ID，编辑「已授权的重定向URI」
• 添加所有需要支持的登录回调地址，包括localhost

4. 修正signInWithRedirect的返回逻辑 #

重定向登录会触发页面刷新，signInWithRedirect返回的Promise不会在当前页面生命周期内resolve，无需处理其返回值：

public signInWithGoogle() {
  if (this.appService.isMobile) {
    // 重定向登录无需处理返回，页面刷新后会在初始化阶段获取结果
    return signInWithRedirect(this.auth, new GoogleAuthProvider());
  }

  return signInWithPopup(this.auth, new GoogleAuthProvider()).then(async (userCredentials) => {
    this.user = userCredentials.user;
    this.idToken = await this.user.getIdToken();
    return of(this.user);
  });
}

额外验证点 #

• 确认本地开发服务器端口与重定向URI配置一致（如均为4200）
• 清除浏览器缓存和Cookie后重新测试，避免旧Auth状态干扰
• 检查浏览器控制台是否存在隐藏错误（如跨域、URI不匹配等）

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