我对如何将 Firebase 包含到 html 中感到非常困惑

Question

我最近开始将 firebase 集成到我的 html 项目中，我使用 npm 安装了 firebase-tools 并初始化了项目，但是在我包含了 firebase 网站上提到的所有脚本后，我使用 firebase.auth() 登录用户，然后我收到一个错误，即 firebase 未定义，所以我将这些脚本标签插入到我的代码中：

  <script src="https://www.gstatic.com/firebasejs/7.13.1/firebase.js"></script>
  <script src="https://www.gstatic.com/firebasejs/firebase/init.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-firestore.js"></script>

在这些下面我有我的 firebase 配置：

  <script>
    // Your web app's Firebase configuration
    var firebaseConfig = {
      apiKey: "MY_API_KEY",
      authDomain: "MY_PROJECT.firebaseapp.com",
      databaseURL: "https://MY_PROJECT.firebaseio.com",
      projectId: "MY_PROJECT",
      storageBucket: "MY_PROJECT.appspot.com",
      messagingSenderId: "MESSAGER_ID",
      appId: "MY_APP_ID",
      measurementId: "MEASUREMENT_ID"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
  </script>
  <script>
    async function signIn(email, password){
      await firebase.auth().signInWithEmailAndPassword({
        email,
        password
      }).then(() => {window.location.href = "HomeScreen.html"}).catch((err) => {
        document.getElementById('FailedSignIn').style.display = "flex";
      })
    }
  </script>

然后我得到了这些错误：

[2020-03-30T17:24:20.332Z] @firebase/app: Warning: Firebase is already defined in the global scope. Please make sure Firebase library is only loaded once.
Website.htmlAccess to fetch at 'https://firebaseinstallations.googleapis.com/v1/projects/MY_PROJECT/installations' from origin 'http://localhost:63342' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
https:/…base-analytics.js:1POST https://firebaseinstallations.googleapis.com/v1/projects/MY_PROJECT/installations net::ERR_FAILED
TypeError: Failed to fetch

因此，我非常感谢您对这些脚本标签的顺序进行一些澄清，以及如何正确初始化 firebase 并在我的文件中使用它而不会出现任何错误。

Answer 1

创建帐户和 Firebase 项目后，您只需将 JavaScript 代码添加到 HTML 中，如Setup Docs中所述

    <script src="https://www.gstatic.com/firebasejs/4.0.0/firebase.js"></script>
<script>
  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);

  // Get a reference to the database service
  var database = firebase.database();

  // update the variable when the starCount is changed in the database
  var starCountRef = database.ref('posts/' + postId + '/starCount');
  starCountRef.on('value', function(snapshot) {
    updateStarCount(postElement, snapshot.val());
  });

  // update the UI
  function updateStarCount(el, val) {
    el.innerHtml(`${val} Stars!`);
  }
</script>

那你可以继续了解实时数据库here

Javascript/Node.JS SDK引入here。

Answer 2

如何在http://localhost:63342 启动本地网络服务器？
也许您只需要使用 CORS 请求标头来启动您的 Web 服务器即可。

例子：

yarn serve --cors