Ionic 6 Firebase谷歌登录移动端异常：跳转localhost/login报错

signInWithPopup是Firebase为Web环境设计的登录方式，在Android原生应用中，由于系统没有浏览器弹窗的适配机制，会导致认证流程异常，触发错误的localhost/login跳转。

1. 替换为signInWithRedirect适配原生应用 #

改用Firebase的重定向登录方式，适配Android原生环境：

更新登录函数 #

async loginWithGoogle() {
  try {
    const provider = new GoogleAuthProvider();
    const auth = getAuth();
    // 替换弹窗登录为定向登录
    await signInWithRedirect(auth, provider);
  } catch (error) {
    console.error('Google登录错误:', error);
  }
}

添加重定向回调处理 #

在App组件的初始化逻辑中，处理登录后的回调：

import { getAuth, getRedirectResult } from "firebase/auth";

ngOnInit() {
  const auth = getAuth();
  getRedirectResult(auth)
    .then(async (result) => {
      if (result && result.user) {
        // 执行原登录成功后的业务逻辑
        const googleCredentials = {
          id_token: result.user.accessToken,
          email: result.user.email,
          name: result.user.displayName
        };
        const body = JSON.stringify({
          google_credentials: googleCredentials
        });
        const headers = new HttpHeaders({
          'Authorization': result.user.accessToken
        });
        const response: any = await this.http.post(`${this.apiUrl}/login`, body, { headers }).toPromise();
        this.token.setToken(response.token);
        await this.storage.set('auth-token', response.token);
        this.router.navigate(['/principal']);
      }
    })
    .catch((error) => {
      console.error('重定向回调错误:', error);
    });
}

2. 完成Android端Firebase基础配置 #

确保Firebase控制台已正确配置：

• 上传Android应用的SHA1证书指纹（debug和release版本都需要）
• 确认应用包名与Firebase控制台注册的完全一致
• 替换项目中最新的google-services.json文件

3. 代码冗余优化 #

去掉不必要的JSON序列化再解析操作：

// 原冗余代码
const body = JSON.stringify({google_credentials: googleCredentials});
const parsedBody = JSON.parse(body);
const idToken = parsedBody.google_credentials.id_token;

// 优化后直接取值
const idToken = googleCredentials.id_token;

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

如果需要更贴合原生的登录体验，可使用@capacitor/google-auth插件，绕过Web SDK的适配问题：

1. 安装插件：npm install @capacitor/google-auth
2. 在Google Cloud控制台配置OAuth 2.0客户端ID
3. 通过插件获取原生登录凭证后，传入后端或Firebase完成认证

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