Flutter Web 将 Firebase Auth 传递给 HTML
Posted
技术标签:
【中文标题】Flutter Web 将 Firebase Auth 传递给 HTML【英文标题】：Flutter Web pass Firebase Auth to 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，并添加任何想法。 【参考方案1】：无法在页面之间传递FirebaseApp 实例（或从数据库或身份验证等实例中获取的服务）。在浏览器中加载的每个网页都是它自己的实例，并且需要加载它使用的 Firebase 服务。
【讨论】：
我对此感到疑惑，并正在考虑解决我的问题。最后我同意你不能通过 FirebaseApp 实例。我现在使用 JavaScript 通道在视图之间进行通信，以便我必须传递给 Firebase 的数据首先返回给 FirebaseApp 实例，然后从那里执行任何操作。以上是关于Flutter Web 将 Firebase Auth 传递给 HTML的主要内容，如果未能解决你的问题，请参考以下文章
如何将 Flutter Web 与 Firebase 集成？ [关闭]
Flutter web：将 CSV 文件存储到 Firebase 存储，无需从计算机上传
当我为flutter web添加firebase时，我的应用程序将无法运行
Flutter Web 将 Firebase Auth 传递给 HTML