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ź stronę Omówienie projektów Firebase, aby dowiedzieć się więcej o sprawdzonych metodach i kwestiach związanych z dodawaniem 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 dynamicznie ładowała biblioteki Firebase JavaScript SDK 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 konfiguracji 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.24.0/firebase-app.js"></script>

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

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/7.24.0/firebase-auth.js"></script>
  <script src="/__/firebase/7.24.0/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.24.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.24.0/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.24.0/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
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    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 pakiet internetowy), 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 npm firebase 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
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
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 npm firebase i zapisz go w pliku package.json , uruchamiając:

      npm install --save firebase

  2. Użyj jednej z następujących 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
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Dowiedz się więcej o obiekcie konfiguracyjnym Firebase

Aby zainicjować Firebase w swojej aplikacji, musisz podać jej konfigurację projektu Firebase. W każdej chwili możesz pobrać obiekt konfiguracyjny Firebase .

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

  • Nie zalecamy ręcznej edycji obiektu konfiguracyjnego, zwłaszcza następujących wymaganych „opcji apiKey ”: apiKey , projectId i appID . Jeśli zainicjujesz aplikację z nieprawidłowymi lub brakującymi wartościami tych wymaganych „opcji Firebase”, użytkownicy Twojej aplikacji mogą napotkać poważne problemy.

  • Jeśli włączyłeś Google Analytics w projekcie Firebase, Twój obiekt konfiguracyjny zawiera pole measurementId . Dowiedz się więcej o tym polu na stronie wprowadzającej Analytics .

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

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

Oto obiekt konfiguracyjny z przykładowymi wartościami:

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

Krok 4 : (opcjonalnie) zainstaluj CLI 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 internetowej konsoli lub na stronie Hosting konsoli.

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

      Pamiętaj, że ta konfiguracja firebase.json zakłada, że ​​masz oddzielne repozytoria dla każdej witryny.

      {
  "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ę o dostępnych metodach w dokumentacji referencyjnej języka 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.24.0/firebase-app.js"></script>

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

// ...

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

  2. Utwórz plik init-firebase.js , a następnie umieść w nim 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 musisz mieć dostęp 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ć 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. 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: