Firebase 身份验证在 iOS 上使用 Capacitor Ionic

Question

我正在使用 Angular-Fire 在 Ionic-Capacitor 上进行 Firebase 身份验证。它在网络和 Android 上运行良好，但在 IOS 上不行。

当我检查应用程序网络活动时，我意识到应用程序能够从 Firebase 成功获取身份验证响应，但它无法完成异步调用。

我的app.module.ts

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot({mode: 'ios'}), AppRoutingModule,
    HttpClientModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    AngularFirestoreModule
]})

这就是我初始化 Angular fire 的方式。

Answer 1

这是 FirebasePlugin 问题！您需要做的就是使用最新的方法初始化 AngularFire。

旧方法（错误）-

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot({mode: 'ios'}), AppRoutingModule,
    HttpClientModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    AngularFirestoreModule
]})

工作方法（新）

import {getApp, initializeApp, provideFirebaseApp} from "@angular/fire/app";
import {getAuth, initializeAuth, provideAuth, indexedDBLocalPersistence} from "@angular/fire/auth";

@NgModule({

  imports: [
    provideFirebaseApp(() =>      initializeApp(environment.firebaseConfig)),
    provideAuth(() => {
      if (Capacitor.isNativePlatform()) {
        return initializeAuth(getApp(), {
          persistence: indexedDBLocalPersistence
        })
      } else {
        return getAuth()
      }
    })]
})

修改初始化方法后，您需要删除 AngularFireAuth 的使用，而是像这样使用它：-

import {Auth, createUserWithEmailAndPassword, signInWithEmailAndPassword} from "@angular/fire/auth";

export class UserService {
 constructor(private auth : Auth) {

const user: any = await signInWithEmailAndPassword(this.auth,email,password);

}

此外，您可以访问 AngularFire 的最新文档以更好地理解它。

Answer 2

我必须严格遵循以下设置才能修复 ios 上的

capacitor://localhost

cors 问题。

import { provideFirestore } from '@angular/fire/firestore';
import { getFirestore } from 'firebase/firestore';
import { provideAuth } from '@angular/fire/auth';
import { initializeApp, getApp } from "firebase/app";
import { Capacitor } from "@capacitor/core";
import { getAuth, initializeAuth, indexedDBLocalPersistence } from "firebase/auth"

const app = initializeApp(environment.firebase);

@NgModule({
  declarations: [AppComponent], 
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    provideFirestore(() => getFirestore()),
    provideAuth(() => {
      if (Capacitor.isNativePlatform()) {        
        return initializeAuth(getApp(), {
          persistence: indexedDBLocalPersistence
        })
      } else {
        return getAuth()
      }
    })
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})

参考：