Angular / Ionic 移动应用 ios 无法使用 angularfire 从 Firebase 获取

Question

我正在尝试在 iOS 模拟器上测试一些 Ionic/Angular 示例应用程序。

在网络上，所有使用 AngularFire 进行 Firestore 的请求都工作得很好。

不知何故，如果我尝试在模拟器上执行相同的应用程序，它会不断加载请求的响应（如果它是空响应，则会说无法检索到任何结果）。

到底是怎么回事？我是否需要专门设置一些内容以使模拟器能够工作并执行对 Firestore 的请求？

Answer 1

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { Capacitor } from '@capacitor/core';
import { initializeAuth, indexedDBLocalPersistence } from 'firebase/auth';
import { getAuth } from 'firebase/auth';

const firebaseApp = initializeApp({
 apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
 authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
 databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
 projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
 storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
 messagingSenderId: 
 process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID,
 appId: process.env.VUE_APP_FIREBASE_APP_ID,
});


function whichAuth() {
  let auth
  if (Capacitor.isNativePlatform()) {
    auth = initializeAuth(firebaseApp, {
      persistence: indexedDBLocalPersistence
    })
  } else {
    auth = getAuth()
  }
  return auth
}

export const auth = whichAuth()
const db = getFirestore();

export const auth = whichAuth();
export { firebaseApp, db };

然后在您的组件中，像这样校准您的方法 await signInAnonymously(auth);。不要忘记导入auth我们在顶部导出的内容。

Answer 2

[编辑：使用 Firebase JS SDK 版本 9（模块化）说明进行更新]

出现此错误的原因是 Firebase Auth 错误地将其环境检测为正常浏览器环境并尝试加载远程 Google API，这会导致您在控制台中看到错误：

TypeError: undefined is not an object (evaluating 'gapi.iframes.getContext')

幸运的是，Firebase Auth 已经具有处理 Cordova/Ionic 应用程序中运行的逻辑，您只需告诉它它所在的平台即可。

对于 Firebase JS SDK 版本 9（模块化）

只需导入 Cordova Firebase Auth 实现：

import { getAuth } from 'firebase/auth';

对于 Firebase JS SDK <9 或兼容性模块 (auth/compat)

capacitor.config集合中server: { iosScheme: "ionic" }：

// capacitor.config.json
{
  "server": {
    "iosScheme": "ionic"
  }
}

auth/compat 这里的库中有一个检查，当它看到 URL schema 时"ionic://"，会使用其 Ionic/Cordova 加载逻辑，否则会回退到正常的浏览器逻辑，该逻辑会因上述错误而失败。

Capacitor 的最新版本更改了无法通过此测试的 URL 方案，"capacitor://"但您可以在文件中覆盖它capacitor.config（请参阅配置选项iosScheme）。

（另请参阅@alistairheath 的评论）。