Firebase + Ionic + Cordova s​​ignInWithRedirect 重定向到 Android 上的 localhost

Posted 2023-02-23

【中文标题】Firebase + Ionic + Cordova s​​ignInWithRedirect 重定向到 Android 上的 localhost

【英文标题】：Firebase + Ionic + Cordova signInWithRedirect redirects to localhost on Android

【发布时间】：2019-02-26 10:36:46

【问题描述】：

我最近重新构建了我的 Ionic 应用程序，经过一系列更新，signInWithRedirect 停止工作在 Android 上，并在登录后重定向到 localhost:8080，虽然在 ios 上没问题。

这是我的package.json：

  ...
  "dependencies": 
    ...,
    "firebase": "5.4.2",
    "@angular/fire": "5.0.0",
    "@ionic-native/firebase": "4.12.2",
    "cordova-plugin-browsertab": "^0.2.0",
    "cordova-plugin-buildinfo": "2.0.2",
    "cordova-plugin-customurlscheme": "4.3.0",
    "cordova-plugin-firebase": "2.0.0",
    "cordova-plugin-ionic-webview": "2.1.4",
    "cordova-universal-links-plugin": "git+https://github.com/andyepx/cordova-universal-links-plugin.git#b91b58fb8a7ff9f2b2de83b4adceece13e9cf2a8",
  ,
  ...
  "cordova": 
    "plugins": 
      ...
      "cordova-plugin-local-notification": ,
      "cordova-plugin-firebase": ,
      "cordova-plugin-browsertab": ,
      "cordova-universal-links-plugin": 
    ,

cordova-universal-links-plugin 我使用的版本是原始插件的一个分支，对 Cordova 8 进行了一些修复。

在config.xml

<preference name="androidLaunchMode" value="singleTask" />

<universal-links>
        <host event="openAppEvent" name="app.my.com" scheme="https" />
        <host name="myapp.page.link" scheme="https" />
        <host name="myapp.app.goo.gl" scheme="https" />
        <host name="myapp.firebaseapp.com" scheme="https">
            <path url="/__/auth/callback" />
        </host>
</universal-links>

以及我正在使用的登录 sn-p：

// this.firebaseLogin is an instance of AngularFireAuth

return this.firebaseLogin.auth.signInWithRedirect(new auth.GoogleAuthProvider())
      .then(() => 
        return this.firebaseLogin.auth.getRedirectResult()
          .then(x => authCallback(x))
      )

我找不到这个配置有什么问题，尤其是它在 iOS 上完美运行...

【问题讨论】：

对于 Cordova，Firebase Auth 期望当前 URL 的格式为 file://。对于浏览器环境来说，这似乎令人困惑。

嘿@bojeil，这就是它似乎正在发生的事情......但我无法弄清楚导致问题的 Cordova 8 中的哪些变化。

【参考方案1】：

使用这些版本：

"cordova-android": "^8.0.0",
"cordova-plugin-browsertab": "0.2.0",
"cordova-plugin-buildinfo": "2.0.3",
"cordova-plugin-compat": "1.2.0",
"cordova-plugin-device": "2.0.3",
"cordova-plugin-inappbrowser": "3.1.0",
"cordova-plugin-whitelist": "1.3.4",
"cordova-universal-links-plugin-fix": "1.2.1",
"firebase": "^5.9.4",
"cordova-universal-links-plugin": "~1.2.1",
"@angular/fire": "^5.1.2"

我可以通过将以下内容添加到我的config.xml 来解决此问题：

<allow-navigation href="http://*" />
<allow-navigation href="https://*" />

然后我得到一个 403 错误：disallowed_useragent（类似于this SO question），我通过将以下行添加到config.xml 来修复它：

<preference name="OverrideUserAgent" value="Mozilla/5.0 Google" />

【讨论】：

用简单的英语，这个答案说停止使用 Ionic webview。直到 Firebase 适应 Ionic webview 的工作方式，或者直到 Ionic webview 停止运行集成服务器。如果它发生了。

@LouisAmeline 你是什么意思，应用程序在没有 Webview 插件的情况下可以工作吗？我刚刚删除并安装了旧版本，它崩溃了（白屏）

@EmreAkkoc 在 Android 上，不要使用 Ionic 的 webview 插件，Cordova 提供的默认系统 webview 将被自动使用。仅供参考，并不完全相关，但对于 iOS，您（目前，直到 Cordova 将其设为默认值）必须在 config.xml 中指定您要使用 Cordova 的官方 WKWebview 插件。对于您的错误，我建议您删除您的插件文件夹，清理您的 package.json 并重新构建，它通常会修复一些问题。

感谢您的解释。顺便说一句，它起作用了

【参考方案2】：

经过进一步探索，并按照上面的@bojeil 建议，结果证明 cordova-plugin-ionic-webview@latest 在 http://localhost:8080 上运行一个集成的网络服务器，它不适用于 Firebase SDK 查找 Cordova/处理重定向的方式。

因此，目前有效的解决方案??是使用"cordova-plugin-ionic-webview": "1.2.1"，并希望 Firebase 将在其 JS SDK 的即将发布的版本中解决此问题。

我也在这里提出了这个问题https://github.com/firebase/firebase-js-sdk/issues/1244

【讨论】：

谢谢你！对我来说可悲的是，当我构建 apk 时插件不起作用，你知道是否还有其他解决方法？