Google 致力于为黑人社区推动种族平等。查看具体举措

將 Firebase 添加到您的 JavaScript 項目

按照本指南在您的 Web 應用程序中使用 Firebase JavaScript SDK,或將其用作最終用戶訪問的客戶端,例如,在 Node.js 桌面或 IoT 應用程序中。

先決條件

  • 安裝您喜歡的編輯器或 IDE。

  • 使用您的 Google 帳戶登錄 Firebase

如果您還沒有 JavaScript 項目並且只想試用 Firebase 產品,您可以下載我們的快速入門示例之一

第 1 步:創建 Firebase 項目

在將 Firebase 添加到 JavaScript 應用之前,您需要創建一個 Firebase 項目以連接到您的應用。

訪問了解 Firebase 項目,詳細了解 Firebase 項目以及將應用添加到項目的最佳做法。

第 2 步:向 Firebase 註冊您的應用

擁有 Firebase 項目後,您可以向其中添加您的網絡應用。

訪問了解 Firebase 項目,詳細了解將應用添加到 Firebase 項目的最佳做法和注意事項。

  1. Firebase 控制台項目概覽頁面的中心,點擊Web圖標 ( ) 以啟動設置工作流程。

    如果您已將應用添加到 Firebase 項目,請點擊添加應用以顯示平台選項。

  2. 輸入您的應用的暱稱。
    此暱稱是一個內部的便利標識符,僅在 Firebase 控制台中對您可見。

  3. (可選)為您的網絡應用設置 Firebase 託管。

    • 您可以立即或稍後設置 Firebase 託管。您還可以隨時在項目設置中將 Firebase Web 應用鏈接到託管站點。

    • 如果您選擇立即設置託管,請從下拉列表中選擇一個站點以鏈接到您的 Firebase Web 應用。

      • 此列表顯示您項目的默認託管站點以及您在項目中設置的任何其他站點

      • 您已鏈接到 Firebase Web 應用的任何網站都無法進行額外鏈接。每個託管站點只能鏈接到一個 Firebase Web 應用程序。

  4. 點擊註冊應用程序

第 3 步:添加 Firebase SDK 並初始化 Firebase

Firebase 為大多數 Firebase 產品提供 JavaScript 庫,包括遠程配置、FCM 等。您可以將任何可用的庫添加到您的應用程序中。

您如何將 Firebase SDK 添加到您的網絡應用取決於您是否選擇為您的應用使用 Firebase 託管、您在應用中使用的工具(如模塊捆綁器),或者您是否正在配置 Node.js應用程序。有關在這些替代方案之間進行選擇的更多幫助,請參閱將 Web SDK 添加到您的應用程序的方法

如果您有興趣試用針對模塊化應用程序開發優化的新 Beta SDK ,請選擇版本 9 (Beta) 的選項。請記住,測試版中沒有技術支持義務。

使用 npm

您可以配置 Firebase JavaScript SDK 的部分導入,並僅加載您需要的 Firebase 產品。如果您使用捆綁器(如 Browserify 或 webpack),您可以在需要時import單個 Firebase 產品。

  1. 安裝 Firebase JavaScript SDK:

    1. 如果您還沒有package.json文件,請通過從 JavaScript 項目的根目錄運行以下命令來創建一個:

      npm init

    2. 通過運行以下命令安裝firebase npm 包並將其保存到您的package.json文件中:

      npm install --save firebase

  2. 要僅包含特定的 Firebase 產品(例如身份驗證和 Cloud Firestore),請import Firebase 模塊:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import firebase from "firebase/app";
    // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
    // import * as firebase from "firebase/app"
    
    // If you enabled Analytics in your project, add the Firebase SDK for Analytics
    import "firebase/analytics";
    
    // Add the Firebase products that you want to use
    import "firebase/auth";
    import "firebase/firestore";
    
  3. 在您的應用中初始化 Firebase:

    // TODO: Replace the following with your app's Firebase project configuration
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    const firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

來自 CDN

您可以配置 Firebase JavaScript SDK 的部分導入,並僅加載您需要的 Firebase 產品。 Firebase 將 Firebase JavaScript SDK 的每個庫存儲在我們的全球 CDN(內容交付網絡)上。

  1. 要僅包含特定 Firebase 產品(例如,身份驗證和 Cloud Firestore),請將以下腳本添加到<body>標記的底部,但在您使用任何 Firebase 服務之前:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-firestore.js"></script>
    </body>
    


  2. 在您的應用中初始化 Firebase:

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <script>
        // TODO: Replace the following with your app's Firebase project configuration
        // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
        var firebaseConfig = {
          // ...
        };
    
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
      </script>
    </body>
    

從託管 URL

使用 Firebase 託管時,您可以將應用配置為從保留的網址動態加載 Firebase JavaScript SDK 庫。了解有關通過保留的託管 URL 添加 SDK 的更多信息。

使用此設置選項,在您部署到 Firebase 後,您的應用會自動從您部署到的 Firebase 項目中提取 Firebase 配置對象。您可以將相同的代碼庫部署到多個 Firebase 項目,但您不必跟踪用於firebase.initializeApp()的 Firebase 配置。

此設置選項也適用於在本地測試您的 Web 應用程序

  1. 要僅包含特定 Firebase 產品(例如 Analytics、Authentication 或 Cloud Firestore),請將以下腳本添加到<body>標記的底部,但在您使用任何 Firebase 服務之前:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="/__/firebase/8.6.7/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="/__/firebase/8.6.7/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/8.6.7/firebase-auth.js"></script>
      <script src="/__/firebase/8.6.7/firebase-firestore.js"></script>
    </body>
    


  2. 在您的應用中初始化 Firebase(使用保留的託管 URL 時無需包含您的 Firebase 配置對象):

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    </body>
    

Node.js 應用程序

  1. 安裝 Firebase JavaScript SDK:

    1. 如果您還沒有package.json文件,請通過從 JavaScript 項目的根目錄運行以下命令來創建一個:

      npm init
    2. 通過運行以下命令安裝firebase npm 包並將其保存到您的package.json文件中:

      npm install --save firebase
  2. 使用以下選項之一在您的應用中使用 Firebase 模塊:

    • 你可以從任何 JavaScript 文件中require模塊

      要僅包含特定的 Firebase 產品(例如身份驗證和 Cloud Firestore):

      // Firebase App (the core Firebase SDK) is always required and
      // must be listed before other Firebase SDKs
      var firebase = require("firebase/app");
      
      // Add the Firebase products that you want to use
      require("firebase/auth");
      require("firebase/firestore");
      


    • 可以使用 ES2015 import模塊

      要僅包含特定的 Firebase 產品(例如身份驗證和 Cloud Firestore):

      // Firebase App (the core Firebase SDK) is always required and
      // must be listed before other Firebase SDKs
      import firebase from "firebase/app";
      
      // Add the Firebase services that you want to use
      import "firebase/auth";
      import "firebase/firestore";
      
  3. 在您的應用中初始化 Firebase:

    // TODO: Replace the following with your app's Firebase project configuration
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

了解 Firebase 配置對象

要在您的應用中初始化 Firebase,您需要提供應用的 Firebase 項目配置。您可以隨時獲取 Firebase 配置對象

  • 如果您使用保留的託管 URL ,您的 Firebase 配置會自動從您​​的 Firebase 項目中提取,因此您無需在代碼中明確提供您的配置對象。

  • 我們不建議手動編輯您的配置對象,尤其是以下必需的“Firebase 選項”: apiKeyprojectIdappID 。如果您使用這些必需的“Firebase 選項”的無效值或缺失值初始化您的應用程序,您的應用程序用戶可能會遇到嚴重問題。

  • 如果您在火力地堡項目啟用了谷歌分析,你的配置對象包含字段measurementId 。在Analytics 入門頁面 中了解有關此字段的更多信息。

這是啟用所有服務的配置對象的格式(這些值會自動填充):

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

這是一個帶有示例值的配置對象:

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
  measurementId: "G-8GSGZQ44ST"
};

第 4 步:(可選)安裝 CLI 並部署到 Firebase 託管

如果您將 Firebase Web 應用與 Firebase 託管站點相關聯,則可以立即(在設置 Web 應用時)或稍後部署站點的內容和配置。

要部署到 Firebase,您將使用 Firebase CLI,一種命令行工具。

  1. 訪問 Firebase CLI 文檔以了解如何安裝 CLI更新到其最新版本

  2. 初始化您的 Firebase 項目。從本地應用程序目錄的根目錄運行以下命令:

    firebase init

  3. 將您的內容和託管配置部署到 Firebase 託管。

    默認託管站點

    默認情況下,所有的火力地堡計劃對免費的子域web.appfirebaseapp.com域( PROJECT_ID .web.appPROJECT_ID .firebaseapp.com )。

    1. 部署到您的站點。從應用程序的根目錄運行以下命令:

      firebase deploy
    2. 在任一默認站點上查看您的站點:

      • PROJECT_ID .web.app
      • PROJECT_ID .firebaseapp.com

    非默認託管站點

    Firebase 項目支持多個站點(這些站點被視為您的非默認站點)。您可以在控制台的 Web 應用程序設置工作流程中或從控制台的託管頁面向項目添加其他站點。

    1. 將您的站點添加到您的firebase.json文件(在firebase init期間創建)。

      請注意,此firebase.json配置假設您的每個站點都有單獨的存儲庫。

      {
        "hosting": {
          "site": "SITE_ID",
          "public": "public",
      
          // ...
        }
      }
      
    2. 部署到您的站點。從應用程序的根目錄運行以下命令:

      firebase deploy --only hosting:SITE_ID
    3. 在以下任一位置查看您的網站:

      • SITE_ID .web.app
      • SITE_ID .firebaseapp.com

第 5 步:在您的應用中訪問 Firebase

Firebase JavaScript SDK 支持以下 Firebase 產品。每個產品都是可選的,可以如圖所示訪問。

Firebase JavaScript 參考文檔 中了解可用的方法。

Firebase 產品命名空間(v8 及更低版本)網絡節點.js
分析firebase.analytics()
驗證firebase.auth()
雲防火牆firebase.firestore()
Firebase 客戶端 SDK 的雲函數firebase.functions()
雲消息firebase.messaging()
雲儲存firebase.storage()
性能監控測試版) firebase.performance()
實時數據庫firebase.database()
遠程配置測試版) firebase.remoteConfig()

可用庫

下一步

了解 Firebase:

將 Firebase 服務添加到您的應用: