Question

我正在开发一个使用Firebase Auth处理身份验证的Flutter应用。但是，该应用程序的某些部分使用WebView来显示来自网络版本（也使用Firebase Auth）的内容。我的问题是如何确保已登录该应用程序的用户也可以在WebView中登录。

Answer 1

Firebase内置任何功能，无法自动将身份验证状态从本机代码同步到从该本机代码打开的Web视图中。

应该可以将ID令牌从本机代码传递到Web视图并在其中使用它，但我自己从未尝试过。

我找到了一些相关链接：

How to pass Firebase Auth token to webView and register for notifications on Android（描述了相同的问题，但随后出现了Android问题-不幸的是没有答案）
Is there a way to keep the user signed in between native code and a WebView using Firebase Auth on Android?（不幸的是也没有答案）
Webviews and social authentication with React Native（博客文章，描述了针对此类问题的解决方法，该问题可用于Facebook登录并进行本机响应）
How to do Authentication on native and pass to webView?（也可用于React Native，但this answer看起来很有希望）
capacitor-firebase-auth npm module（用于Capacitor框架的插件，可将令牌从本机代码传播到Web视图）

这些都不是Flutter + WebView的预构建解决方案，但是我希望将它们结合起来可以让您自己构建一些东西。如果您这样做：请分享！：）

Answer 2

面对自己的挑战，我正在考虑以下方法：

使用本机UI登录到应用程序
调用云函数为您提供一个随机令牌，其中令牌将是由云函数生成的某些文档的文档ID，以说出包含当前/webViewUserTokens的集合user.uid； ...为了提高安全性，还可以设置一个expiresTimestamp字段。
在您用来打开Web视图的URL中，在URL中传递令牌，例如：http://app.com/appPage/<token>
让HTTP端点云功能获取令牌，进行查找，如果有效，然后处理对webView UI的请求。如果无效，请显示错误请求html
用户提交HTML表单时，可以再使用同一令牌1次来保留user.uid，然后将其从集合中删除

还没有尝试过，不确定是否需要。

如果有帮助，请在此处添加参考，或者找出实际上是否有缺陷的方法

Answer 3

这是在 React Native 中使用 WebView 进行 Firebase 身份验证的解决方案：

import React from 'react'
import WebView from 'react-native-webview'

export default function HomeScreen(props) {
  // props.user represents firebase user
  const apiKey = props.user.toJSON().apiKey
  const authJS = `
        if (!("indexedDB" in window)) {
          alert("This browser doesn't support IndexedDB")
        } else {
          let indexdb = window.indexedDB.open('firebaseLocalStorageDb', 1)
          indexdb.onsuccess = function() {
            let db = indexdb.result
            let transaction = db.transaction('firebaseLocalStorage', 'readwrite')
            let storage = transaction.objectStore('firebaseLocalStorage')
            const request = storage.put({
              fbase_key: "firebase:authUser:${apiKey}:[DEFAULT]",
              value: ${JSON.stringify(props.user.toJSON())}
            });
          }
        }  
      `
  return <WebView
    injectedJavaScriptBeforeContentLoaded={authJS}
    source={{
      uri: 'http://192.168.1.102:3000',
      baseUrl: 'http://192.168.1.102:3000',
    }}
  />
}

Flutter 中可能需要类似的逻辑（JS 注入）。

使用WebView的Flutter应用中的Firebase Auth

3 个答案: