Ionic-Angular项目Firebase Google登录代码迁移适配Capacitor3、Firebase9求助

1 报错根源解决 #

Cannot read properties of undefined (reading 'getAuthInstance') 报错是因为@codetrix-studio/capacitor-google-auth从Capacitor 3适配版本开始，取消了自动初始化逻辑，必须手动调用初始化方法。

2 前置配置 #

2.1 配置capacitor.config.ts #

在配置文件中添加Google Auth相关参数：

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

const config: CapacitorConfig = {
  appId: '你的应用包名',
  appName: '你的应用名',
  webDir: 'www',
  bundledWebRuntime: false,
  plugins: {
    GoogleAuth: {
      scopes: ['profile', 'email'],
      serverClientId: '你的Web客户端ID', // 从Firebase控制台获取的Web客户端ID
      forceCodeForRefreshToken: true,
    },
  },
};

export default config;

2.2 全局初始化Google Auth #

在app.component.ts中添加初始化逻辑：

import { Component } from '@angular/core';
import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor() {
    // 初始化Google Auth，解决getAuthInstance报错
    GoogleAuth.initialize();
  }
}

3 改造auth.service.ts代码 #

完整修改后的代码如下：

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/compat/firestore';
import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
import { GoogleAuthProvider } from 'firebase/auth'; // Firebase 9模块化导入

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore) {}

  async googleSignup() {
    // 替换旧的Plugins调用方式
    const googleUser = await GoogleAuth.signIn() as any;
    // 适配Firebase 9的凭证生成逻辑
    const credential = GoogleAuthProvider.credential(
      googleUser.authentication.idToken
    );
    const afUser = await this.afAuth.signInWithCredential(credential);
    return this.updateUserData(
      afUser.user,
      googleUser.givenName,
      googleUser.imageUrl
    );
  }

  // 原有updateUserData逻辑直接保留即可
  private updateUserData(user: any, givenName: string, avatar: string) {
    const userRef: AngularFirestoreDocument<any> = this.afs.doc(`users/${user.uid}`);
    const data = {
      uid: user.uid,
      email: user.email,
      displayName: givenName,
      photoURL: avatar
    };
    return userRef.set(data, { merge: true });
  }
}

4 其他注意点 #

• 确保已经将Firebase控制台下载的google-services.json(Android端)和GoogleService-Info.plist(iOS端)放置在原生工程对应目录
• 依赖版本要匹配：@codetrix-studio/capacitor-google-auth版本需≥3.0.2适配Capacitor 3
• introduction.page.ts原有逻辑无需修改，可直接正常调用

内容的提问来源于stack exchange，提问作者God's Peace