Firebase Authentication在Capacitor混合应用中重定向至localhost问题求助

1. 修正Firebase控制台的授权配置 #

• 进入Firebase控制台，打开项目的Authentication > 登录方法，分别找到Google、Facebook提供商：
  • 在「授权重定向URI」中添加以下地址：
    • https://myapp.com/__/auth/handler
    • capacitor://localhost/__/auth/handler
    • myapp://__/auth/handler（如果应用使用自定义URL Scheme，替换为你的实际scheme）
• 切换到Authentication > 设置 > 授权域名，添加capacitor://localhost和自定义scheme对应的域名，确保移动端WebView的请求被Firebase允许。

2. 调整Capacitor配置文件 #

修改capacitor.config.ts，配置服务器规则和自定义URL Scheme，确保应用能正确处理回调跳转：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.myapp.app',
  appName: 'MyApp',
  webDir: 'dist/my-app', // 对应Angular构建后的输出目录
  server: {
    hostname: 'myapp.com',
    allowNavigation: ['myapp.com', '*.firebaseapp.com', '*.google.com', '*.facebook.com']
  },
  androidScheme: 'myapp', // Android端自定义Scheme
  iosScheme: 'myapp'      // iOS端自定义Scheme
};

export default config;

3. 适配移动端的登录回调处理逻辑 #

移动端WebView的跳转回调无法被浏览器的onAuthStateChanged直接捕获，需要借助Capacitor的App插件监听URL打开事件，手动处理登录结果：

import { App } from '@capacitor/app';
import { getAuth, getRedirectResult } from "firebase/auth";
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.css']
})
export class AuthComponent implements OnInit {
  authUser: any;

  ngOnInit(): void {
    this.initAuthCallbackListener();
    // 保留原有的用户状态监听
    const auth = getAuth();
    auth.onAuthStateChanged((user) => {
      if (user) {
        this.authUser = user;
      }
    });
  }

  private async initAuthCallbackListener() {
    App.addListener('appUrlOpen', async (data) => {
      const auth = getAuth();
      // 匹配Firebase Auth的回调地址
      if (data.url.includes('__/auth/handler')) {
        try {
          const result = await getRedirectResult(auth);
          if (result?.user) {
            this.authUser = result.user;
            // 可添加登录成功后的页面跳转逻辑
          }
        } catch (error) {
          console.error('登录回调处理失败:', error);
        }
      }
    });
  }

  AuthLogin(provider: any) {
    const auth = getAuth();
    return auth.signInWithRedirect(provider);
  }
}

4. 确认Firebase配置的正确性 #

检查firebaseConfig中的authDomain：

• 如果自定义域名myapp.com已通过Firebase Hosting绑定并验证，当前配置无需修改；
• 若未完成域名绑定，建议先使用Firebase默认的[project-id].firebaseapp.com作为authDomain测试，功能正常后再切换自定义域名。

5. 检查Angular构建配置 #

确认Angular的环境配置文件（environment.ts/environment.prod.ts）中，生产环境的authDomain为myapp.com，而非localhost类的本地地址，避免构建时被错误替换。

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