Flutter Web 将 Firebase Auth 传递给 HTML答案

【问题标题】：Flutter Web pass Firebase Auth to HTMLFlutter Web 将 Firebase Auth 传递给 HTML
【发布时间】：2021-03-30 14:38:47
【问题描述】：

在 Flutter Web 应用程序中，我在 index.html 中初始化 Firebase，如下所示。

<body>
  <!-- Check type of device and block all mobile phone devices! Tablets should work -->
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script defer src="https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script defer src="https://www.gstatic.com/firebasejs/8.2.0/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script defer src="https://www.gstatic.com/firebasejs/8.2.0/firebase-auth.js"></script>
  <script defer src="https://www.gstatic.com/firebasejs/8.2.0/firebase-firestore.js"></script>
  <script defer src="https://www.gstatic.com/firebasejs/8.2.0/firebase-storage.js"></script>
  <script defer src="https://www.gstatic.com/firebasejs/8.2.0/firebase-functions.js"></script>
  <script src="init-firebase.js" defer></script>
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('flutter_service_worker.js?v=3005614081');
      });
    }
  </script>
  <script src="main.dart.js" type="application/javascript"></script>
</body>

此外，我有一个用于 Firebase 配置的 init-firebase.js，如下所示。

// Initialize Firebase
var firebaseConfig = {
    apiKey: "...",
    authDomain: "...",
    databaseURL: "...",
    projected: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "...",
    measurementId: "..."
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

这一切正常，在 Dart 中我可以访问 Firebase Auth 等。

我想知道当我在应用程序中打开一个新的 HTML 文件（如 example.html）时如何访问 Firebase Auth？

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  @override
  void initState() {
    _showDocument();
    super.initState();
  }

  _showDocument() async {
    await ui.platformViewRegistry.registerViewFactory(
        'ExamplePage',
        (int viewId) => IFrameElement()
          ..src = 'https://example.com'
          ..style.border = 'none');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      child: HtmlElementView(viewType: 'ExamplePage'),
    ));
  }
}

在下面的 example.html 中，我想为已在 Flutter Web App 中进行身份验证但我不能的用户访问 Firebase 数据，例如 Auth、Storage 等。调用我的 init-firebase.js 将再次初始化 Firebase。

<html>

<head>
    <link rel="shortcut icon" type="image/png" href="favicon.png" />
    <title>Example</title>
    <script defer src="https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.2.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.2.0/firebase-firestore.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.2.0/firebase-storage.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.2.0/firebase-functions.js"></script>
    <!-- <script src="init-firebase.js" defer></script> -->
</head>

<body>
    <div id="my-view" style="height: 95%; width: 100%;" oncontextmenu="return false;"></div>
    <script>
        // Access Firebase data like AUTH, Storage, Firestore here.....
    </script>
</body>

</html>

Flutter Web App 仍然在同一个选项卡和 index.html 上，我只是在其中打开另一个 HTML 窗口。有什么方法可以将 Firebase 传递给 HTML？

【问题讨论】：

嘿弗兰克。感谢您的提醒。仍在考虑解决方案，有时需要更长的时间。请在下面查看我的 cmets，并添加任何想法。

标签： javascript firebase flutter flutter-web

【解决方案1】：

无法在页面之间传递FirebaseApp 实例（或从数据库或身份验证等实例中获取的服务）。在浏览器中加载的每个网页都是它自己的实例，并且需要加载它使用的 Firebase 服务。

【讨论】：

我对此感到疑惑，并正在考虑解决我的问题。最后我同意你不能通过 FirebaseApp 实例。我现在使用 JavaScript 通道在视图之间进行通信，以便我必须传递给 Firebase 的数据首先返回给 FirebaseApp 实例，然后从那里执行任何操作。