iOS 上的 Vite + Vue3 + CapacitorJS + Firebase 未通过身份验证

Question

我正在使用连接到 Firebase Web SDK 9 的 Vite+Vue3，并希望使用 Capacitor 构建移动应用程序。

Web 和 Android 上的一切都按预期工作，但是当我到达 iOS 时，我似乎无法通过身份验证（仅限 email/password）。

我的登录视图有如下登录功能；

const login = () => {
  signInWithEmailAndPassword(auth, email.value, password.value)
    .then((userCredential) => {
      console.log("First message not sent to console");
      // Signed in
      const user = userCredential.user;
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      console.log(error.message);
    });
};

然后我的 App.vue

onAuthStateChanged(auth, (user) => {
  console.log("onAuthStateChanged FIRED");
  if (user) {
    const uid = user.uid;
    console.log("⏱ State Changed");
    if (!store.user.uid) {
      store.setUser(user);

      console.log("⏱ We have an UID");
    }
  } else {
    if (store.user.uid) {
      store.clearUser();
    }
  }
});

当运行在本地或托管的 web Firebase 站点上时，一切都按预期工作，我可以看到所有这些控制台日志，正如您所期望的那样。

不过 iOS；当我在表单上单击提交时，我得到了一些 iOS 样式的错误（我将在下面粘贴），但没有别的。我真的缺乏 iOS 开发和 XCode 的经验，所以也许我只是遗漏了一些东西。

这是 iOS 模拟器的控制台输出；

2022-04-26 23:05:05.944955+1000 App[15964:3664648] DiskCookieStorage changing policy from 2 to 0, cookie file: file:///Users/chriswinfield-blum/Library/Developer/CoreSimulator/Devices/AE7A6476-24EF-4008-BD6E-BEDE553DA029/data/Containers/Data/Application/0001144C-40AF-4252-BB97-52BA69BEBA82/Library/Cookies/app.meditimer.www.binarycookies
⚡️  Loading app at capacitor://localhost...
⚡️  WebView loaded
⚡️  [log] - ⏱  Login component mounted!
objc[15964]: Class _PathPoint is implemented in both /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/System/Library/PrivateFrameworks/UIKitCore.framework/UIKitCore (0x12221f338) and /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/System/Library/PrivateFrameworks/TextInputUI.framework/TextInputUI (0x13e020fe8). One of the two will be used. Which one is undefined.
objc[15964]: Class _PointQueue is implemented in both /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/System/Library/PrivateFrameworks/UIKitCore.framework/UIKitCore (0x12221f310) and /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/System/Library/PrivateFrameworks/TextInputUI.framework/TextInputUI (0x13e021010). One of the two will be used. Which one is undefined.

我怀疑 pinia 不兼容，但我只是存储了用户集合和一个 isLoggedIn 标志，所以认为没问题（特别是考虑到我正在连接到本地存储），但我没有看到任何控制台任何输出所以暂时排除它（虽然可能是明天的问题！）

有趣的是，当我发送一个错误的 email/password 时；我确实看到了来自 firebase 的错误消息；所以至少那部分是有效的

如有任何关于如何推进的想法或建议，我们将不胜感激！

谢谢克里斯

Answer 1

好的，对于那些以后遇到这个问题的人，我发现这个问题与 Firebase SDK v9 和 Capacitor 有关。

解决方案是在 Capacitor.isNativePlatform() === true

时使用 initializeAuth 而不是 getAuth

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

const auth = whichAuth();

iOS 上的 Vite + Vue3 + CapacitorJS + Firebase 未通过身份验证

Vite + Vue3 + CapacitorJS + Firebase on iOS is not passing through Authentication

javascript

firebase

firebase-authentication

vuejs3

capacitor