Google cam kết thúc đẩy công bằng chủng tộc cho Cộng đồng người da đen. Xem cách thực hiện.
Trang này được dịch bởi Cloud Translation API.
Switch to English

Thêm Firebase vào dự án JavaScript của bạn

Làm theo hướng dẫn này để sử dụng SDK JavaScript của Firebase trong ứng dụng web của bạn hoặc với tư cách là ứng dụng khách để người dùng cuối truy cập, ví dụ: trong máy tính để bàn Node.js hoặc ứng dụng IoT.

Điều kiện tiên quyết

  • Cài đặt trình soạn thảo hoặc IDE ưa thích của bạn.

  • Đăng nhập vào Firebase bằng tài khoản Google của bạn.

Nếu bạn chưa có dự án JavaScript và chỉ muốn dùng thử sản phẩm Firebase, bạn có thể tải xuống một trong các mẫu bắt đầu nhanh của chúng tôi.

Bước 1 : Tạo dự án Firebase

Trước khi có thể thêm Firebase vào ứng dụng JavaScript của mình, bạn cần tạo một dự án Firebase để kết nối với ứng dụng của mình.

Truy cập Tìm hiểu dự án Firebase để tìm hiểu thêm về các dự án Firebase và các phương pháp hay nhất để thêm ứng dụng vào dự án.

Bước 2 : Đăng ký ứng dụng của bạn với Firebase

Sau khi có dự án Firebase, bạn có thể thêm ứng dụng web của mình vào đó.

Truy cập Tìm hiểu các dự án Firebase để tìm hiểu thêm về các phương pháp hay nhất và cân nhắc khi thêm ứng dụng vào dự án Firebase.

  1. Ở giữa trang tổng quan dự án của bảng điều khiển Firebase , nhấp vào biểu tượng Web ( ) để khởi chạy quy trình thiết lập.

    Nếu bạn đã thêm ứng dụng vào dự án Firebase của mình, hãy nhấp vào Thêm ứng dụng để hiển thị các tùy chọn nền tảng.

  2. Nhập biệt hiệu ứng dụng của bạn.
    Biệt hiệu này là số nhận dạng nội bộ, tiện lợi và chỉ hiển thị với bạn trong bảng điều khiển Firebase.

  3. (Tùy chọn) Thiết lập Lưu trữ Firebase cho ứng dụng web của bạn.

    • Bạn có thể thiết lập Lưu trữ Firebase ngay bây giờ hoặc mới hơn . Bạn cũng có thể liên kết Ứng dụng web Firebase của mình với trang Lưu trữ bất kỳ lúc nào trong cài đặt Dự án của bạn.

    • Nếu bạn chọn thiết lập Dịch vụ lưu trữ ngay bây giờ, hãy chọn một trang web từ danh sách thả xuống để liên kết với Ứng dụng web Firebase của bạn.

      • Danh sách này hiển thị trang web Lưu trữ mặc định của dự án của bạn và bất kỳ trang web nào khác mà bạn đã thiết lập trong dự án của mình.

      • Bất kỳ trang web nào bạn đã liên kết với Ứng dụng web Firebase đều không có sẵn để liên kết bổ sung. Mỗi trang web Lưu trữ chỉ có thể được liên kết với một Ứng dụng web Firebase duy nhất.

  4. Nhấp vào Đăng ký ứng dụng .

Bước 3 : Thêm SDK Firebase và khởi chạy Firebase

Bạn có thể thêm bất kỳ sản phẩm Firebase nào được hỗ trợ vào ứng dụng của mình.

Cách bạn thêm SDK Firebase vào ứng dụng của mình tùy thuộc vào việc bạn đã chọn sử dụng Lưu trữ Firebase cho ứng dụng của mình hay chưa, bạn đang sử dụng công cụ nào với ứng dụng của mình (như gói) hay bạn đang định cấu hình ứng dụng Node.js.

Từ URL lưu trữ

Khi sử dụng Lưu trữ Firebase, bạn có thể định cấu hình ứng dụng của mình để tải động các thư viện SDK JavaScript của Firebase từ các URL dành riêng. Tìm hiểu thêm về cách thêm SDK qua URL Lưu trữ dành riêng .

Với tùy chọn thiết lập này, sau khi bạn triển khai tới Firebase , ứng dụng của bạn sẽ tự động kéo đối tượng cấu hình Firebase từ dự án Firebase mà bạn đã triển khai. Bạn có thể triển khai cùng một cơ sở mã cho nhiều dự án Firebase, nhưng bạn không phải theo dõi cấu hình Firebase mà bạn đang sử dụng cho firebase.initializeApp() .

Tùy chọn thiết lập này cũng hoạt động để kiểm tra cục bộ ứng dụng web của bạn .

  1. Để chỉ bao gồm các sản phẩm Firebase cụ thể (ví dụ: Analytics, Authentication hoặc Cloud Firestore), hãy thêm các tập lệnh sau vào cuối <body> của bạn, nhưng trước khi bạn sử dụng bất kỳ dịch vụ Firebase nào:

    <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.1.1/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="/__/firebase/8.1.1/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/8.1.1/firebase-auth.js"></script>
      <script src="/__/firebase/8.1.1/firebase-firestore.js"></script>
    </body>
    


  2. Khởi tạo Firebase trong ứng dụng của bạn (không cần bao gồm đối tượng cấu hình Firebase khi sử dụng URL lưu trữ dành riêng):

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

Từ CDN

Bạn có thể định cấu hình nhập một phần SDK JavaScript của Firebase và chỉ tải các sản phẩm Firebase mà bạn cần. Firebase lưu trữ từng thư viện của SDK JavaScript Firebase trên CDN toàn cầu của chúng tôi (mạng phân phối nội dung).

  1. Để chỉ bao gồm các sản phẩm Firebase cụ thể (ví dụ: Xác thực và Cloud Firestore), hãy thêm các tập lệnh sau vào cuối <body> của bạn, nhưng trước khi bạn sử dụng bất kỳ dịch vụ Firebase nào:

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


  2. Khởi tạo Firebase trong ứng dụng của bạn:

    <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>
    

Sử dụng gói mô-đun

Bạn có thể định cấu hình nhập một phần SDK JavaScript của Firebase và chỉ tải các sản phẩm Firebase mà bạn cần. Nếu đang sử dụng một gói (như Browserify hoặc webpack), bạn có thể import từng sản phẩm Firebase khi cần.

  1. Cài đặt SDK JavaScript của Firebase:

    1. Nếu bạn chưa có tệp package.json , hãy tạo một tệp bằng cách chạy lệnh sau từ thư mục gốc của dự án JavaScript của bạn:

      npm init

    2. Cài đặt gói firebase npm và lưu vào tệp package.json của bạn bằng cách chạy:

      npm install --save firebase

  2. Để chỉ bao gồm các sản phẩm Firebase cụ thể (như Xác thực và Cloud Firestore), hãy import các mô-đun 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. Khởi tạo Firebase trong ứng dụng của bạn:

    // 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);
    

Ứng dụng Node.js

  1. Cài đặt SDK JavaScript của Firebase:

    1. Nếu bạn chưa có tệp package.json , hãy tạo một tệp bằng cách chạy lệnh sau từ thư mục gốc của dự án JavaScript của bạn:

      npm init
    2. Cài đặt gói firebase npm và lưu vào tệp package.json của bạn bằng cách chạy:

      npm install --save firebase
  2. Sử dụng một trong các tùy chọn sau để sử dụng mô-đun Firebase trong ứng dụng của bạn:

    • Bạn có thể require mô-đun từ bất kỳ tệp JavaScript nào

      Để chỉ bao gồm các sản phẩm Firebase cụ thể (như Xác thực và 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");
      


    • Bạn có thể sử dụng ES2015 để import các mô-đun

      Để chỉ bao gồm các sản phẩm Firebase cụ thể (như Xác thực và 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. Khởi tạo Firebase trong ứng dụng của bạn:

    // 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);
    

Tìm hiểu về đối tượng cấu hình Firebase

Để khởi chạy Firebase trong ứng dụng của mình, bạn cần cung cấp cấu hình dự án Firebase của ứng dụng. Bạn có thể tải đối tượng cấu hình Firebase của mình bất kỳ lúc nào.

  • Nếu bạn sử dụng URL lưu trữ dành riêng , thì cấu hình Firebase của bạn sẽ tự động được lấy từ dự án Firebase, vì vậy bạn không cần phải cung cấp rõ ràng đối tượng cấu hình trong mã của mình.

  • Chúng tôi khuyên bạn không nên chỉnh sửa thủ công đối tượng cấu hình của mình, đặc biệt là các "tùy chọn Firebase" bắt buộc sau: apiKey , projectIdappID . Nếu bạn khởi chạy ứng dụng của mình bằng các giá trị không hợp lệ hoặc bị thiếu cho các "tùy chọn Firebase" bắt buộc này, người dùng ứng dụng của bạn có thể gặp phải sự cố nghiêm trọng.

  • Nếu bạn đã bật Google Analytics trong dự án Firebase của mình, thì đối tượng cấu hình của bạn sẽ chứa field measurementId . Tìm hiểu thêm về trường này trong trang bắt đầu Analytics .

Đây là định dạng của đối tượng cấu hình với tất cả các dịch vụ được bật (các giá trị này được tự động điền):

// 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",
};

Dưới đây là một đối tượng cấu hình với giá trị Ví dụ:

// 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"
};

Bước 4 : (Tùy chọn) Cài đặt CLI và triển khai lên Lưu trữ Firebase

Nếu bạn đã liên kết Ứng dụng web Firebase của mình với trang web Lưu trữ Firebase, bạn có thể triển khai nội dung và cấu hình trang web của mình ngay bây giờ (khi thiết lập Ứng dụng web của bạn) hoặc bất kỳ lúc nào sau đó.

Để triển khai Firebase, bạn sẽ sử dụng Firebase CLI, một công cụ dòng lệnh.

  1. Truy cập tài liệu Firebase CLI để tìm hiểu cách cài đặt CLI hoặc cập nhật lên phiên bản mới nhất của nó .

  2. Khởi tạo dự án Firebase của bạn. Chạy lệnh sau từ thư mục gốc của thư mục ứng dụng cục bộ của bạn:

    firebase init

  3. Triển khai nội dung và cấu hình lưu trữ của bạn lên Lưu trữ Firebase.

    Trang web lưu trữ mặc định

    Theo mặc định, mọi dự án Firebase đều có các miền phụ miễn phí trên các miền web.appfirebaseapp.com ( project-id .web.appproject-id .firebaseapp.com ).

    1. Triển khai trang web của bạn. Chạy lệnh sau từ thư mục gốc của ứng dụng của bạn:

      firebase deploy
    2. Xem trang web của bạn tại một trong các trang web mặc định của bạn:

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

    Trang web lưu trữ không mặc định

    Các dự án Firebase hỗ trợ nhiều trang web (đây được coi là các trang web không phải là trang web mặc định của bạn). Bạn có thể thêm các trang bổ sung vào dự án của mình trong quy trình thiết lập Ứng dụng web của bảng điều khiển hoặc từ trang Lưu trữ của bảng điều khiển.

    1. Thêm trang web của bạn vào tệp firebase.json của bạn (được tạo trong quá trình firebase init ).

      Lưu ý rằng cấu hình firebase.json này giả định rằng bạn có các kho lưu trữ riêng biệt cho từng trang web của mình.

      {
        "hosting": {
          "site": "site-name>",
          "public": "public",
      
          // ...
        }
      }
      
    2. Triển khai trang web của bạn. Chạy lệnh sau từ thư mục gốc của ứng dụng của bạn:

      firebase deploy --only hosting:site-name
    3. Xem trang web của bạn tại:

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

Bước 5 : Truy cập Firebase trong ứng dụng của bạn

SDK JavaScript của Firebase hỗ trợ các sản phẩm Firebase sau. Mỗi sản phẩm là tùy chọn và có thể được truy cập từ không gian tên firebase .

Tìm hiểu về các phương pháp có sẵn trong tài liệu tham khảo JavaScript của Firebase .

Sản phẩm Firebase Không gian tên Web Node.js
phân tích firebase.analytics()
Xác thực firebase.auth()
Cloud Firestore firebase.firestore()
Chức năng đám mây cho SDK ứng dụng Firebase firebase.functions()
Nhắn tin qua đám mây firebase.messaging()
Lưu trữ đám mây firebase.storage()
Giám sát hiệu suất ( bản beta ) firebase.performance()
Cơ sở dữ liệu thời gian thực firebase.database()
Cấu hình từ xa ( bản beta ) firebase.remoteConfig()

Thư viện có sẵn

Các tùy chọn thiết lập bổ sung

Trì hoãn tải SDK Firebase (từ CDN)

Bạn có thể trì hoãn việc đưa vào các SDK Firebase cho đến khi tải xong toàn bộ trang.

  1. Thêm cờ defer vào mỗi thẻ script cho SDK Firebase, sau đó trì hoãn việc khởi chạy Firebase bằng tập lệnh thứ hai, ví dụ:

    <script defer src="https://www.gstatic.com/firebasejs/8.1.1/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.1.1/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.1.1/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. Tạo tệp init-firebase.js , sau đó đưa vào tệp sau:

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

Sử dụng nhiều dự án Firebase trong một ứng dụng

Trong hầu hết các trường hợp, bạn chỉ phải khởi chạy Firebase trong một ứng dụng mặc định. Bạn có thể truy cập Firebase từ ứng dụng đó theo hai cách tương đương:

// 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();

Tuy nhiên, đôi khi bạn cần truy cập nhiều dự án Firebase cùng một lúc. Ví dụ: bạn có thể muốn đọc dữ liệu từ cơ sở dữ liệu của một dự án Firebase nhưng lưu trữ các tệp trong một dự án Firebase khác. Hoặc bạn có thể muốn xác thực một dự án trong khi vẫn giữ cho dự án thứ hai không được xác thực.

SDK JavaScript của Firebase cho phép bạn khởi tạo và sử dụng nhiều dự án Firebase trong một ứng dụng cùng một lúc, với mỗi dự án sử dụng thông tin cấu hình Firebase riêng.

// 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();

Chạy một máy chủ web cục bộ để phát triển

Nếu bạn đang xây dựng ứng dụng web, một số phần của SDK JavaScript Firebase yêu cầu bạn phân phối ứng dụng web của mình từ máy chủ chứ không phải từ hệ thống tệp cục bộ. Bạn có thể sử dụng Firebase CLI để chạy máy chủ cục bộ.

Nếu bạn đã thiết lập Lưu trữ Firebase cho ứng dụng của mình, bạn có thể đã hoàn thành một số bước bên dưới.

Để cung cấp ứng dụng web của bạn, bạn sẽ sử dụng Firebase CLI, một công cụ dòng lệnh.

  1. Truy cập tài liệu Firebase CLI để tìm hiểu cách cài đặt CLI hoặc cập nhật lên phiên bản mới nhất của nó .

  2. Khởi tạo dự án Firebase của bạn. Chạy lệnh sau từ thư mục gốc của thư mục ứng dụng cục bộ của bạn:

    firebase init

  3. Khởi động máy chủ cục bộ để phát triển. Chạy lệnh sau từ thư mục gốc của thư mục ứng dụng cục bộ của bạn:

    firebase serve

Bước tiếp theo

Tìm hiểu về Firebase:

Thêm các dịch vụ Firebase vào ứng dụng của bạn: