Ionic Angular Capacitor中Firebase Google登录signInWithPopup弹窗空白问题

你遇到的问题核心在于signInWithPopup是为Web浏览器环境设计的，在Capacitor Android的WebView中，跳转后的认证回调无法被正确捕获，导致停留在空白的Auth Handler页面。以下是具体解决方法：

方法一：改用signInWithRedirect并处理回调 #

1. 修改登录方法，替换signInWithPopup为signInWithRedirect：

signInWithProvider(provider) {
  return this.angularFireAuth
    .signInWithRedirect(provider)
    .catch((error) => {
      const errorKeyTrad = error.message.split('/')[1].replace(').', '');
      this.toaster.presentErrorToast("ERROR.AUTHENTICATION." + errorKeyTrad, 15000)
      console.log(errorKeyTrad);
    });
}

2. 在App初始化逻辑（比如ngOnInit）中添加重定向回调处理，确保登录完成后回到应用：

ngOnInit() {
  this.angularFireAuth.getRedirectResult()
    .then((result) => {
      if (result.user) {
        console.log('登录成功！');
        this.router.navigateByUrl('/main', { replaceUrl: true });
      }
    })
    .catch((error) => {
      console.error('重定向回调失败:', error);
    });
}

方法二：检查Firebase控制台配置 #

• 进入Firebase控制台 → 你的项目 → 认证 → 登录方法 → Google
• 在「授权域名」中添加capacitor://localhost和http://localhost，确保Android端WebView被授权访问认证回调地址。

方法三：配置Capacitor Android的Intent Filter #

在android/app/src/main/AndroidManifest.xml的<activity>标签内添加以下intent-filter，确保系统能将认证回调路由回你的应用：

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- 替换为你的Firebase项目Auth域名 -->
    <data android:scheme="https" android:host="******.firebaseapp.com" />
</intent-filter>

可选：使用Capacitor原生Google登录插件 #

如果WebView方案仍有兼容性问题，推荐用原生插件实现登录，稳定性更高：

1. 安装插件：

npm install @capacitor-community/google-signin
npx cap sync

2. 按插件文档配置Google Cloud Console的OAuth客户端ID，然后调用原生登录方法：

import { GoogleSignin } from '@capacitor-community/google-signin';
import { GoogleAuthProvider } from '@angular/fire/auth';

async signInWithGoogle() {
  try {
    const user = await GoogleSignin.signIn();
    const credential = GoogleAuthProvider.credential(user.authentication.idToken);
    await this.angularFireAuth.signInWithCredential(credential);
    this.router.navigateByUrl('/main', { replaceUrl: true });
  } catch (error) {
    console.error('原生登录失败:', error);
  }
}

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