Flutter Web 将 Firebase Auth 传递给 HTML

Question

在 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>

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

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

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

不过我想知道当我在应用程序中打开一个新的 HTML 文件时如何访问 Firebase Auth，例如 example.html?

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 应用程序仍在同一个选项卡上 index.html，我只是在其中打开另一个 HTML window。有什么方法可以将 Firebase 传递给 HTML?

Answer 1

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

Flutter Web 将 Firebase Auth 传递给 HTML

Flutter Web pass Firebase Auth to HTML

javascript

firebase

flutter

flutter-web