【问题标题】:Flutter web and Firebase authentication TypeError: Cannot read property 'app' of undefinedFlutter Web 和 Firebase 身份验证 TypeError:无法读取未定义的属性“应用程序”
【发布时间】:2020-08-26 04:43:43
【问题描述】:

有人可以帮帮我吗?我尝试使用 Flutter 基于 Google Firebase Auth 和 Cloud Firestore 构建 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>)

这个异常意味着什么?我错了什么? 非常感谢您的帮助!

【问题讨论】:

    标签: firebase flutter google-cloud-firestore


    【解决方案1】:

    我遇到了同样的问题,浪费了很多时间。 至少对我来说,这个问题的主要原因是 cloud_firestore 依赖。对我来说,事实证明这只是 firebase 安全方面的一些问题,因为我使用 VPN 访问互联网,并且通常弹出的 chrome 调试浏览器不允许安装扩展程序。 对我来说一切都很好,但我只是被阻止访问一些 firebase 的东西。要尝试是否是这种情况,请运行 flutter run -d chrome --release 并复制 localhost 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
    

    【讨论】:

    • 您好,感谢您的提示。我也有同样的问题,能不能在调试模式下解决这个问题?
    • @gbaccetta,确保您的 pubspec.yaml 文件中的 firebase 依赖项与 index.html 中的依赖项匹配,并且正在更新的也应该在调试模式下工作。
    【解决方案2】:

    你需要修复依赖关系。

    dependencies:
      flutter:
        sdk: flutter
      firebase_auth:
      firebase_auth_web:
    

    【讨论】:

      【解决方案3】:

      尝试运行 flutter doctor 以查看摘要中是否有“Chrome - 为 web 开发”

      [√] 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)
      

      如果没有尝试按照this 回答中的步骤切换到flutter beta 通道并创建正确的文件。

      您可能需要为您的应用启用网络支持,如here所示

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2021-12-05
        • 2021-02-24
        • 2021-06-24
        • 2020-08-29
        • 1970-01-01
        • 1970-01-01
        • 2021-10-30
        相关资源
        最近更新 更多