Google 致力于为黑人社区推动种族平等。查看具体举措
本頁面由 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產品提供JavaScript庫,包括Remote Config,FCM等。您可以將任何可用的庫添加到您的應用程序。

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

使用模塊捆綁器

您可以配置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產品(例如,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="https://www.gstatic.com/firebasejs/8.2.10/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.2.10/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/8.2.10/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託管時,可以配置您的應用程序以從保留的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/8.2.10/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="/__/firebase/8.2.10/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/8.2.10/firebase-auth.js"></script>
      <script src="/__/firebase/8.2.10/firebase-firestore.js"></script>
    </body>
    


  2. 在您的應用中初始化Firebase(使用保留的託管網址時無需包括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模塊:

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

      要僅包括特定的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配置對象

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

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

  • 如果您在Firebase項目中啟用了Google Analytics(分析),則配置對象包含字段measurementId 。在Google 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.appfirebaseapp.com域( project-id .web.appproject-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參考文檔中了解可用的方法。

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

可用庫

下一步

了解有關Firebase的信息:

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