Google is committed to advancing racial equity for Black communities. See how.
Ta strona została przetłumaczona przez Cloud Translation API.
Switch to English

Dodaj Firebase do swojego projektu JavaScript

Postępuj zgodnie z tym przewodnikiem, aby używać pakietu SDK Firebase JavaScript w swojej aplikacji internetowej lub jako klient do uzyskiwania dostępu przez użytkowników końcowych, na przykład w aplikacji komputerowej Node.js. lub aplikacji IoT.

Wymagania wstępne

Jeśli nie masz jeszcze projektu JavaScript i chcesz po prostu wypróbować produkt Firebase, możesz pobrać jeden z naszych przykładów szybkiego startu .

Krok 1 : utwórz projekt Firebase

Zanim dodasz Firebase do swojej aplikacji JavaScript, musisz utworzyć projekt Firebase, aby połączyć się z aplikacją.

Odwiedź artykuł Omówienie projektów Firebase, aby dowiedzieć się więcej o projektach Firebase i sprawdzonych metodach dodawania aplikacji do projektów.

Krok 2 : zarejestruj swoją aplikację w Firebase

Po utworzeniu projektu Firebase możesz dodać do niego swoją aplikację internetową.

Odwiedź artykuł Omówienie projektów Firebase, aby dowiedzieć się więcej o sprawdzonych metodach i uwagach dotyczących dodawania aplikacji do projektu Firebase.

  1. Na środku strony przeglądu projektu konsoli kliknij ikonę sieci Web ( ), aby uruchomić przepływ pracy konfiguracji.

    Jeśli dodałeś już aplikację do projektu Firebase, kliknij Dodaj aplikację, aby wyświetlić opcje platformy.

  2. Wpisz pseudonim aplikacji.
    Ten pseudonim jest wewnętrznym, wygodnym identyfikatorem i jest widoczny tylko dla Ciebie w konsoli Firebase.

  3. (Opcjonalnie) Skonfiguruj Hosting Firebase dla swojej aplikacji internetowej.

    • Hosting Firebase możesz skonfigurować teraz lub później . W dowolnym momencie możesz również połączyć swoją aplikację internetową Firebase z witryną hostingową w ustawieniach projektu .

    • Jeśli zdecydujesz się skonfigurować Hosting teraz, wybierz witrynę z listy rozwijanej, aby połączyć się z aplikacją internetową Firebase.

      • Ta lista wyświetla domyślną witrynę hostującą projektu i wszelkie inne witryny skonfigurowane w projekcie.

      • Żadna witryna, która została już połączona z aplikacją internetową Firebase, jest niedostępna do dodatkowego połączenia. Każda witryna hostingowa może być połączona tylko z jedną aplikacją internetową Firebase.

  4. Kliknij Zarejestruj aplikację .

Krok 3 : Dodaj pakiety SDK Firebase i zainicjuj Firebase

Do swojej aplikacji możesz dodać dowolne obsługiwane produkty Firebase .

Sposób dodawania pakietów SDK Firebase do aplikacji zależy od tego, czy zdecydujesz się korzystać z Hostingu Firebase w swojej aplikacji, jakich narzędzi używasz z aplikacją (np. Pakietu), czy też konfigurujesz aplikację Node.js.

Z adresów URL hostingu

Korzystając z Hostingu Firebase, możesz skonfigurować aplikację tak, aby ładowała biblioteki Firebase JavaScript SDK dynamicznie z zarezerwowanych adresów URL. Dowiedz się więcej o dodawaniu pakietów SDK za pośrednictwem zarezerwowanych adresów URL hostingu .

W przypadku tej opcji konfiguracji po wdrożeniu w Firebase aplikacja automatycznie pobiera obiekt konfiguracyjny Firebase z projektu Firebase, w którym został wdrożony. Możesz wdrożyć tę samą bazę kodów w wielu projektach Firebase, ale nie musisz śledzić konfiguracji Firebase, której używasz dla firebase.initializeApp() .

Ta opcja konfiguracji działa również w przypadku lokalnego testowania aplikacji internetowej .

  1. Aby uwzględnić tylko określone produkty Firebase (na przykład Analytics, Uwierzytelnianie lub Cloud Firestore), dodaj następujące skrypty na dole tagu <body> , ale przed użyciem jakichkolwiek usług 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.17.2/firebase-app.js"></script>

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

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


  2. Zainicjuj Firebase w swojej aplikacji (nie musisz dołączać obiektu konfiguracyjnego Firebase, jeśli używasz zarezerwowanych adresów URL hostingu): 

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

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

Z CDN

Możesz skonfigurować częściowe importowanie pakietu Firebase JavaScript SDK i ładować tylko te produkty Firebase, których potrzebujesz. Firebase przechowuje każdą bibliotekę pakietu Firebase JavaScript SDK w naszej globalnej sieci CDN (sieci dostarczania treści).

  1. Aby uwzględnić tylko określone produkty Firebase (na przykład Uwierzytelnianie i Cloud Firestore), dodaj następujące skrypty na dole tagu <body> , ale przed użyciem jakichkolwiek usług 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.17.2/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.17.2/firebase-analytics.js"></script>

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


  2. Zainicjuj Firebase w swojej aplikacji: 

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

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

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  </script>
</body>

Korzystanie z pakietów modułów

Możesz skonfigurować częściowe importowanie pakietu Firebase JavaScript SDK i ładować tylko te produkty Firebase, których potrzebujesz. Jeśli korzystasz z pakietu (takiego jak Browserify lub webpack), możesz import poszczególne produkty Firebase, kiedy ich potrzebujesz.

  1. Zainstaluj pakiet Firebase JavaScript SDK:

    1. Jeśli nie masz jeszcze pliku package.json , utwórz go, uruchamiając następujące polecenie z katalogu głównego projektu JavaScript: 

      npm init

    2. Zainstaluj pakiet firebase npm i zapisz go w pliku package.json , uruchamiając: 

      npm install --save firebase

  2. Aby uwzględnić tylko określone produkty Firebase (takie jak Uwierzytelnianie i Cloud Firestore), import moduły 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. Zainicjuj Firebase w swojej aplikacji: 

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

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Aplikacje Node.js.

  1. Zainstaluj pakiet Firebase JavaScript SDK:

    1. Jeśli nie masz jeszcze pliku package.json , utwórz go, uruchamiając następujące polecenie z katalogu głównego projektu JavaScript: 

      npm init

    2. Zainstaluj pakiet firebase npm i zapisz go w pliku package.json , uruchamiając: 

      npm install --save firebase

  2. Użyj jednej z poniższych opcji, aby użyć modułu Firebase w swojej aplikacji:

    • Możesz require modułów z dowolnego pliku JavaScript

      Aby uwzględnić tylko określone produkty Firebase (takie jak Uwierzytelnianie i 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");


    • Możesz użyć ES2015 do import modułów

      Aby uwzględnić tylko określone produkty Firebase (takie jak Uwierzytelnianie i 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. Zainicjuj Firebase w swojej aplikacji: 

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

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Obiekt konfiguracji Firebase

Aby zainicjować Firebase w swojej aplikacji, musisz podać konfigurację projektu Firebase.

Jeśli używasz zarezerwowanych adresów URL hostingu , konfiguracja Firebase jest automatycznie pobierana z projektu Firebase, więc nie musisz jawnie podawać obiektu w kodzie.

Jeśli włączysz nowe usługi Firebase w swoim projekcie Firebase po utworzeniu aplikacji internetowej Firebase (zwłaszcza Cloud Storage lub Google Analytics), pamiętaj o zaktualizowaniu obiektu konfiguracyjnego Firebase w aplikacji lub, jeśli używasz zarezerwowanych adresów URL, przeprowadź ponowne wdrożenie w swojej witrynie . Uzyskaj zaktualizowany obiekt konfiguracyjny w konsoli Firebase.

Nie zalecamy ręcznego edytowania pól w obiekcie konfiguracyjnym, ale szczególnie apiKey , aby nie modyfikować następujących wymaganych „opcji apiKey ”: apiKey , projectId i appID . Jeśli zainicjujesz aplikację z nieprawidłowymi lub brakującymi wartościami którejkolwiek z tych wymaganych opcji Firebase, użytkownicy Twojej aplikacji mogą napotkać poważne problemy.

Oto format obiektu konfiguracyjnego z włączonymi wszystkimi usługami (te wartości są wypełniane automatycznie): 

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

Oto obiekt konfiguracyjny wypełniony przykładowymi wartościami: 

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

W każdej chwili możesz pobrać obiekt konfiguracyjny Firebase .

Krok 4 : (opcjonalnie) zainstaluj interfejs wiersza poleceń i wdróż w Hostingu Firebase

Jeśli połączyłeś swoją aplikację internetową Firebase z witryną Hosting Firebase, możesz wdrożyć zawartość i konfigurację witryny teraz (podczas konfigurowania aplikacji internetowej) lub w dowolnym momencie później.

Aby wdrożyć w Firebase, użyjesz Firebase CLI, narzędzia wiersza poleceń.

  1. Odwiedź dokumentację interfejsu wiersza polecenia Firebase, aby dowiedzieć się, jak zainstalować interfejs wiersza polecenia lub zaktualizować go do najnowszej wersji .

  2. Zainicjuj projekt Firebase. Uruchom następujące polecenie z katalogu głównego lokalnego katalogu aplikacji: 

    firebase init

  3. Wdróż zawartość i konfigurację hostingu w Hostingu Firebase.

    Domyślna witryna hostingowa

    Domyślnie każdy projekt web.app ma bezpłatne subdomeny w web.app i firebaseapp.com ( project-id .web.app project-id .firebaseapp.com project-id .web.app i project-id .firebaseapp.com ).

    1. Wdróż w swojej witrynie. Uruchom następujące polecenie z katalogu głównego aplikacji: 

      firebase deploy

    2. Wyświetl swoją witrynę w jednej z domyślnych witryn:

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

    Niedomyślna witryna hostingowa

    Projekty Firebase obsługują wiele witryn (są to witryny inne niż domyślne ). Możesz dodać dodatkowe witryny do projektu podczas przepływu pracy konfiguracji aplikacji sieci Web konsoli lub na stronie Hosting konsoli.

    1. Dodaj swoją witrynę do pliku firebase.json (utworzonego podczas firebase init ).

      Zauważ, że ta konfiguracja firebase.json zakłada, że ​​masz oddzielne repozytoria dla każdej z twoich witryn. 

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

    // ...
  }
}

    2. Wdróż w swojej witrynie. Uruchom następujące polecenie z katalogu głównego aplikacji: 

      firebase deploy --only hosting: site-name

    3. Wyświetl swoją witrynę pod adresem:

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

Krok 5 : Uzyskaj dostęp do Firebase w swojej aplikacji

Pakiet Firebase JavaScript SDK obsługuje następujące produkty Firebase. Każdy produkt jest opcjonalny i można uzyskać do niego dostęp z przestrzeni nazw firebase .

Dowiedz się więcej o dostępnych metodach w dokumentacji referencyjnej JavaScript Firebase .

Produkt Firebase Przestrzeń nazw Sieć Node.js
Analityka firebase.analytics()
Poświadczenie firebase.auth()
Cloud Firestore firebase.firestore()
Cloud Functions for Firebase Client SDK firebase.functions()
Komunikacja w chmurze firebase.messaging()
Magazyn w chmurze firebase.storage()
Monitorowanie wydajności ( wersja beta ) firebase.performance()
Baza danych czasu rzeczywistego firebase.database()
Zdalna konfiguracja ( wersja beta ) firebase.remoteConfig()

Dostępne biblioteki

Dodatkowe opcje konfiguracji

Opóźnienie ładowania pakietów SDK Firebase (z CDN)

Możesz opóźnić włączenie pakietów SDK Firebase do momentu wczytania całej strony.

  1. Dodaj flagę defer do każdego tagu script dla pakietów SDK Firebase, a następnie odrocz inicjalizację Firebase za pomocą drugiego skryptu, na przykład: 

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

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

// ...

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

  2. Utwórz plik init-firebase.js , a następnie init-firebase.js do niego następujące elementy: 

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

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Używaj wielu projektów Firebase w jednej aplikacji

W większości przypadków wystarczy zainicjować Firebase w jednej, domyślnej aplikacji. Możesz uzyskać dostęp do Firebase z tej aplikacji na dwa równoważne sposoby: 

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

Czasami jednak potrzebujesz dostępu do wielu projektów Firebase w tym samym czasie. Na przykład możesz chcieć odczytać dane z bazy danych jednego projektu Firebase, ale przechowywać pliki w innym projekcie Firebase. Lub możesz chcieć uwierzytelnić jeden projekt, jednocześnie nie uwierzytelniając drugiego projektu.

Pakiet Firebase JavaScript SDK umożliwia jednoczesne inicjowanie i używanie wielu projektów Firebase w jednej aplikacji, przy czym każdy projekt korzysta z własnych informacji konfiguracyjnych 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();

Uruchom lokalny serwer WWW do programowania

Jeśli tworzysz aplikację internetową, niektóre części pakietu Firebase JavaScript SDK wymagają, aby aplikacja była obsługiwana z serwera, a nie z lokalnego systemu plików. Możesz użyć interfejsu wiersza polecenia Firebase, aby uruchomić lokalny serwer.

Jeśli masz już skonfigurowany Hosting Firebase dla swojej aplikacji, być może wykonałeś już kilka z poniższych kroków.

Aby udostępniać swoją aplikację internetową, będziesz używać interfejsu wiersza polecenia Firebase, narzędzia wiersza poleceń.

  1. Odwiedź dokumentację interfejsu wiersza polecenia Firebase, aby dowiedzieć się, jak zainstalować interfejs wiersza polecenia lub zaktualizować go do najnowszej wersji .

  2. Zainicjuj projekt Firebase. Uruchom następujące polecenie z katalogu głównego lokalnego katalogu aplikacji: 

    firebase init

  3. Uruchom lokalny serwer do programowania. Uruchom następujące polecenie z katalogu głównego lokalnego katalogu aplikacji: 

    firebase serve

Następne kroki

Dowiedz się więcej o Firebase:

Dodaj usługi Firebase do swojej aplikacji: