Google is committed to advancing racial equity for Black communities. See how.
本頁面由 Cloud Translation API 翻譯而成。
Switch to English

將Firebase添加到您的JavaScript項目

請遵循本指南以在您的Web應用程序中或作為客戶端（例如，在Node.js桌面或IoT應用程序中）作為最終用戶訪問的客戶端使用Firebase JavaScript SDK。

先決條件

  • 安裝您的首選編輯器或IDE。

  • 使用您的Google帳戶登錄Firebase 。

如果您還沒有JavaScript項目，而只想試用Firebase產品，則可以下載我們的快速入門樣本之一 。

步驟1 ：建立Firebase專案

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

訪問“ 了解Firebase項目”以了解有關Firebase項目以及向項目添加應用程序的最佳做法的更多信息。

第2步 ：在Firebase中註冊您的應用

在擁有Firebase項目之後，可以將Web應用程序添加到其中。

請訪問了解Firebase項目，以了解有關將應用程序添加到Firebase項目的最佳實踐和注意事項的更多信息。

  1. 在Firebase控制台的項目概述頁面的中心 ，單擊Web圖標（ ）以啟動設置工作流程。

    如果您已經將應用程序添加到Firebase項目中，請單擊“ 添加應用程序”以顯示平台選項。

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

  3. （可選）為您的Web應用設置Firebase Hosting。

    • 您可以現在或以後設置Firebase Hosting。您還可以隨時在“ 項目”設置中將Firebase Web App鏈接到託管站點。

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

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

      • 您已經鏈接到Firebase Web App的任何網站均無法進行其他鏈接。每個託管網站只能鏈接到一個Firebase Web App。

  4. 點擊註冊應用 。

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

您可以將任何受支持的Firebase產品添加到您的應用程序。

如何將Firebase SDK添加到您的應用程序取決於您是否選擇為應用程序使用Firebase Hosting，與該應用程序一起使用的工具（如捆綁程序），或者是否配置了Node.js應用程序。

從託管URL

使用Firebase託管時，您可以配置應用程序以從保留的URL動態加載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/7.21.0/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="/__/firebase/7.21.0/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/7.21.0/firebase-auth.js"></script>
  <script src="/__/firebase/7.21.0/firebase-firestore.js"></script>
</body>


  2. 在您的應用中初始化Firebase（使用保留的託管網址時無需包括Firebase配置對象）： 

    <body>
  <!-- Previously loaded Firebase SDKs -->

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

從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/7.21.0/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.21.0/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.21.0/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>

使用模塊捆綁器

您可以配置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 * 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);

Node.js應用

  1. 安裝Firebase JavaScript SDK：

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

      npm init

    2. 安裝firebase npm軟件包並通過運行將其保存到package.json文件中： 

      npm install --save firebase

  2. 使用以下選項之一在您的應用程序中使用Firebase模塊：

    • 您可以require任何JavaScript文件中的模塊

      僅包括特定的Firebase產品 （例如Authentication和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 * as 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配置對象 。

  • 如果您使用保留的Hosting URL ，則Firebase配置將自動從Firebase項目中拉出，因此您無需在代碼中顯式提供配置對象。

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

  • 如果您在Firebase項目中啟用了Google Analytics（分析），則配置對象包含字段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 Hosting

如果您將Firebase Web App與Firebase託管站點鏈接，則可以立即（在設置Web App時）或以後的任何時間部署站點的內容和配置。

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

  1. 請訪問Firebase CLI文檔，以了解如何安裝CLI或更新至最新版本 。

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

    firebase init

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

    默認託管網站

    默認情況下，所有的火力地堡計劃對免費的子域web.app和firebaseapp.com域（ project-id .web.app和project-id .firebaseapp.com ）。

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

      firebase deploy

    2. 在兩個默認站點中查看您的站點：

      • project-id .web.app
      • project-id .firebaseapp.com

    非默認託管站點

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

    1. 將您的網站添加到firebase.json文件 （該文件是在firebase init期間創建的）。

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

      {
  "hosting": {
    "site": "site-name>",
    "public": "public",

    // ...
  }
}

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

      firebase deploy --only hosting:site-name

    3. 在以下任一位置查看您的網站：

      • site-name .web.app
      • site-name .firebaseapp.com

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

Firebase JavaScript SDK支持以下Firebase產品。每個產品都是可選的，可以從firebase命名空間進行訪問。

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

Firebase產品 命名空間 網頁 Node.js
分析工具 firebase.analytics()
認證方式 firebase.auth()
Cloud Firestore firebase.firestore()
Firebase Client SDK的雲功能 firebase.functions()
雲消息傳遞 firebase.messaging()
雲儲存 firebase.storage()
性能監控 （ 測試版） firebase.performance()
實時數據庫 firebase.database()
遠程配置 （ 測試版） firebase.remoteConfig()

可用庫

其他設置選項

延遲加載Firebase SDK（來自CDN）

您可以延遲Firebase SDK的包含，直到整個頁面加載完畢。

  1. 為Firebase SDK的每個script標籤添加一個defer標誌，然後使用第二個腳本來延遲Firebase的初始化，例如： 

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

<script defer src="https://www.gstatic.com/firebasejs/7.21.0/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/7.21.0/firebase-firestore.js"></script>

// ...

<script defer src="./init-firebase.js"></script>

  2. 創建一個init-firebase.js文件，然後在文件中包括以下內容： 

    // TODO: Replace the following with your app's Firebase project configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

在單個應用程序中使用多個Firebase項目

在大多數情況下，您只需要在一個默認應用程序中初始化Firebase。您可以通過兩種等效的方式從該應用訪問Firebase： 

// Initialize Firebase with a "default" Firebase project
var defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
var defaultStorage = defaultProject.storage();
var defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();

但是，有時您需要同時訪問多個Firebase項目。例如，您可能想從一個Firebase項目的數據庫中讀取數據，但將文件存儲在另一個Firebase項目中。或者，您可能想對一個項目進行身份驗證，而使第二個項目未經身份驗證。

Firebase JavaScript SDK允許您在一個應用程序中同時初始化和使用多個Firebase項目，每個項目都使用自己的Firebase配置信息。 

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
var otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
var defaultStorage = firebase.storage();
var defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
var otherStorage = otherProject.storage();
var otherFirestore = otherProject.firestore();

運行本地Web服務器進行開發

如果要構建Web應用程序，則Firebase JavaScript SDK的某些部分要求您從服務器而不是本地文件系統提供Web應用程序。您可以使用Firebase CLI運行本地服務器。

如果您已經為您的應用設置了Firebase Hosting，則可能已經完成了以下幾個步驟。

要提供您的Web應用程序，您將使用命令行工具Firebase CLI。

  1. 請訪問Firebase CLI文檔，以了解如何安裝CLI或更新至最新版本 。

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

    firebase init

  3. 啟動本地服務器進行開發。從本地應用程序目錄的根目錄運行以下命令： 

    firebase serve

下一步

了解有關Firebase的信息：

將Firebase服務添加到您的應用程序：