[英]Flutter web and Firebase authentication TypeError: Cannot read property 'app' of undefined
有人可以幫我嗎? 我嘗試使用基於 Google Firebase Auth 和 Cloud Firestore 的 Flutter 構建 web 應用程序。 Android 上的項目運行良好,我可以與用戶合作,並且可以從我的 Cloud Firestore 數據庫中獲取數據。 我已經制作了第二個應用程序(webapp)執行 Firebase 文檔中描述的所有步驟(webapp 已注冊,托管在 Firebase 上),在 pubspec.yaml 中插入了所有依賴項
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.3
firebase_core: ^0.4.4+3
firebase: ^7.3.0
firebase_auth: ^0.16.0
修改 index.html 如下:
<body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/7.14.3/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="/__/firebase/7.14.3/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-firestore.js"></script>
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script> <!-- 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 -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script>
var firebaseConfig = {
apiKey: "XXXXXXXXXX-6EL5qIBxWjurRQMcK3pf9W-o",
authDomain: "xxxxxxxx.firebaseapp.com",
databaseURL: "https://xxxxxxxx.firebaseio.com",
projectId: "xxxxxxxx",
storageBucket: "xxxxxxxx.appspot.com",
messagingSenderId: "xxxxxxxx6198",
appId: "1:xxxxxxxx16198:web:cde3457e8dc734d045d227",
measurementId: "X-XXXXXXXXXX"
};
firebase.initializeApp(firebaseConfig);
firebase.auth();
firebase.analytics();
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
但是當我嘗試登錄或注冊時,Android Studio 會拋出此錯誤消息:
TypeError: Cannot read property 'app' of undefined
at Object.app$ [as app] (http://localhost:53262/packages/firebase/src/top_level.dart.lib.js:72:56)
at firebase_auth_web.FirebaseAuthWeb.new.[_getAuth] (http://localhost:53262/packages/firebase_auth_web/firebase_auth_web.dart.lib.js:42:27)
at firebase_auth_web.FirebaseAuthWeb.new.signInWithCredential (http://localhost:53262/packages/firebase_auth_web/firebase_auth_web.dart.lib.js:197:34)
at signInWithCredential.next (<anonymous>)
at runBody (http://localhost:53262/dart_sdk.js:43135:34)
at Object._async [as async] (http://localhost:53262/dart_sdk.js:43163:7)
at firebase_auth_web.FirebaseAuthWeb.new.signInWithCredential (http://localhost:53262/packages/firebase_auth_web/firebase_auth_web.dart.lib.js:196:20)
at firebase_auth.FirebaseAuth.__.signInWithCredential (http://localhost:53262/packages/firebase_auth/firebase_auth.dart.lib.js:324:90)
at signInWithCredential.next (<anonymous>)
這個異常意味着什么? 我錯了什么? 非常感謝您的幫助!
我有同樣的問題,浪費了很多時間。 至少對我來說,這個問題的主要原因是cloud_firestore
依賴項。 對我來說,事實證明這只是 firebase 安全問題的一些問題,因為我使用 VPN 訪問互聯網,並且通常彈出的 chrome 調試瀏覽器不允許安裝擴展程序。 對我來說一切都很好,但我只是被阻止訪問一些 firebase 的東西。 要嘗試是否是這種情況,請運行flutter run -d chrome --release
並復制本地主機 url 並將其粘貼到普通瀏覽器而不是彈出窗口中。 如果一切正常,那么你和我有同樣的問題,如果沒有,那么你可能有不同的問題。 希望這可以節省某人的時間。
請記住您的index.html
文件應正確配置,還應包括您對 pubspec.yaml 的每個 firebase 依賴項。 下面是一個配置良好的index.html
的示例,只是正文標簽:
<body id="app-container">
// firebase-app.js should go first.
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-firestore.js">. </script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxx",
authDomain: "xxxxxx.firebaseapp.com",
databaseURL: "https://xxxxxx.firebaseio.com",
projectId: "xxxxx",
storageBucket: "xxxxx.appspot.com",
messagingSenderId: "xxxxxxx",
appId: "1:xxxxxxxxx:web:xxxxxxxxxx",
measurementId: "G-NYEW95QM"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
我的pubspec.yaml
文件如下所示:
cupertino_icons: ^1.0.0
firebase_auth: ^0.18.2
cloud_firestore: ^0.14.2
provider: ^4.3.2+2
flutter_spinkit: ^4.1.2+1
simple_animations: ^2.2.3
firebase_core: ^0.5.1
intl: ^0.16.1
folding_cell: ^1.0.0
charts_flutter: ^0.9.0
flip_card: ^0.4.4
progress_dialog: ^1.2.4
image_picker_web: ^0.1.0+2
url_launcher: ^5.7.8
image: ^2.1.18
animator: ^2.0.1
timeago: ^2.0.28
uuid: ^2.2.2
font_awesome_flutter: ^8.10.0
bubble: ^1.1.9+1
google_fonts: ^1.1.1
您需要修復依賴項。
dependencies:
flutter:
sdk: flutter
firebase_auth:
firebase_auth_web:
嘗試運行 flutter 醫生以查看摘要中是否有“Chrome - 為網絡開發”
[√] Flutter (Channel beta, 1.24.0-10.2.pre, on Microsoft Windows [Version 10.0.18363.1198], locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[√] Chrome - develop for the web <- THIS
[√] Android Studio (version 4.0)
[√] Connected device (3 available)
如果沒有嘗試按照此答案中的步驟切換到 flutter 測試版通道並創建正確的文件。
您可能必須為您的應用啟用 web 支持,如下所示
我最近遇到了同樣的問題,原來google在將pubspec.yaml中的package更新到最新版本后,幾天前更新了firebase_auth插件解決了這個問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.