Question

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

   <div class="newsletter">
        <span class="close">&times;</span>
        <header>
            <h2>Get latest updates in web technologies</h2>
            <p>I write articles related to web technologies, such as design trends, development tools, UI/UX case studies and reviews, and more. Sign up to my newsletter to get them all.</p>
        </header>
        <div class="row">
            <div class="col-12 email">
                <input class="form-control" type="email" placeholder="Email address">
            </div>
            <div class="col-12 count-me-in">
                <button class="btn btn-warning btn-block btn-count-me-in" type="submit">Count me in!</button>
            </div>
        </div>
    </div>

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

// Animated newsletter
window.onscroll = function() { slideUp() }

function slideUp() {
   let newsletter = document.querySelector(".newsletter")
   let heightEntireDocument = 0.33 * document.body.scrollHeight
   if (document.body.scrollTop > heightEntireDocument || document.documentElement.scrollTop > heightEntireDocument) {
       newsletter.style.cssText = "bottom: 0; transition: all .3s ease-out;"
   }
   else {
       console.log("FALSE")
   }
}

这一切正常，在 Dart 中我可以访问 Firebase 身份验证等。

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

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

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

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

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

Answer 1

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

Flutter Web 将 Firebase 身份验证传递给 HTML

1 个答案: