Google is committed to advancing racial equity for Black communities. See how.
Diese Seite wurde von der Cloud Translation API übersetzt.
Switch to English

Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu

Befolgen Sie diese Anleitung, um das Firebase JavaScript SDK in Ihrer Webanwendung oder als Client für den Endbenutzerzugriff zu verwenden, z. B. in einem Node.js-Desktop oder einer IoT-Anwendung.

Voraussetzungen

Wenn Sie noch kein JavaScript-Projekt haben und nur ein Firebase-Produkt ausprobieren möchten, können Sie eines unserer Schnellstartbeispiele herunterladen.

Schritt 1 : Erstellen Sie ein Firebase-Projekt

Bevor Sie Ihrer JavaScript-App Firebase hinzufügen können, müssen Sie ein Firebase-Projekt erstellen, um eine Verbindung zu Ihrer App herzustellen.

Besuchen Sie Firebase-Projekte verstehen , um mehr über Firebase-Projekte und bewährte Methoden zum Hinzufügen von Apps zu Projekten zu erfahren.

Schritt 2 : Registrieren Sie Ihre App bei Firebase

Nachdem Sie ein Firebase-Projekt erstellt haben, können Sie Ihre Web-App hinzufügen.

Besuchen Sie Firebase-Projekte verstehen , um mehr über bewährte Methoden und Überlegungen zum Hinzufügen von Apps zu einem Firebase-Projekt zu erfahren.

  1. Im Zentrum der Projektübersichtsseite der Firebase - Konsole , klicken Sie auf das Web - Symbol ( ) , um den Setup - Workflow zu starten.

    Wenn Sie Ihrem Firebase-Projekt bereits eine App hinzugefügt haben, klicken Sie auf App hinzufügen, um die Plattformoptionen anzuzeigen.

  2. Geben Sie den Spitznamen Ihrer App ein.
    Dieser Spitzname ist eine interne Bequemlichkeitskennung und nur für Sie in der Firebase-Konsole sichtbar.

  3. (Optional) Richten Sie Firebase Hosting für Ihre Web-App ein.

    • Sie können Firebase Hosting jetzt oder später einrichten. Sie können Ihre Firebase-Webanwendung auch jederzeit in Ihren Projekteinstellungen mit einer Hosting-Site verknüpfen.

    • Wenn Sie Hosting jetzt einrichten möchten, wählen Sie eine Site aus der Dropdown-Liste aus, um eine Verknüpfung zu Ihrer Firebase-Webanwendung herzustellen.

      • In dieser Liste werden die Standard-Hosting-Site Ihres Projekts und alle anderen Sites angezeigt, die Sie in Ihrem Projekt eingerichtet haben.

      • Jede Site, die Sie bereits mit einer Firebase-Webanwendung verknüpft haben, ist für zusätzliche Verknüpfungen nicht verfügbar. Jede Hosting-Site kann nur mit einer einzelnen Firebase-Webanwendung verknüpft werden.

  4. Klicken Sie auf App registrieren .

Schritt 3 : Fügen Sie Firebase-SDKs hinzu und initialisieren Sie Firebase

Sie können Ihrer App jedes der unterstützten Firebase-Produkte hinzufügen.

Wie Sie Ihrer App Firebase-SDKs hinzufügen, hängt davon ab, ob Sie Firebase-Hosting für Ihre App verwenden, welche Tools Sie mit Ihrer App verwenden (z. B. einen Bundler) oder ob Sie eine Node.js-App konfigurieren.

Von Hosting-URLs

Wenn Sie Firebase Hosting verwenden, können Sie Ihre App so konfigurieren, dass die Firebase JavaScript SDK-Bibliotheken dynamisch von reservierten URLs geladen werden. Weitere Informationen zum Hinzufügen von SDKs über reservierte Hosting-URLs .

Mit dieser Setup-Option ruft Ihre App nach der Bereitstellung in Firebase das Firebase-Konfigurationsobjekt automatisch aus dem Firebase-Projekt ab, für das Sie es bereitgestellt haben. Sie können dieselbe Codebasis für mehrere Firebase-Projekte bereitstellen, müssen jedoch nicht die Firebase-Konfiguration verfolgen, die Sie für firebase.initializeApp() .

Diese Setup-Option funktioniert auch zum lokalen Testen Ihrer Web-App .

  1. Um nur bestimmte Firebase-Produkte (z. B. Analytics, Authentication oder Cloud Firestore) einzuschließen, fügen Sie die folgenden Skripts am unteren Rand Ihres <body> -Tags hinzu, bevor Sie Firebase-Dienste verwenden:

     <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. Initialisieren Sie Firebase in Ihrer App (Sie müssen Ihr Firebase-Konfigurationsobjekt nicht einschließen, wenn Sie reservierte Hosting-URLs verwenden):

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

Aus dem CDN

Sie können den Teilimport des Firebase JavaScript SDK konfigurieren und nur die Firebase-Produkte laden, die Sie benötigen. Firebase speichert jede Bibliothek des Firebase JavaScript SDK in unserem globalen CDN (Content Delivery Network).

  1. Um nur bestimmte Firebase-Produkte (z. B. Authentifizierung und Cloud Firestore) einzuschließen, fügen Sie die folgenden Skripts am unteren Rand Ihres <body> -Tags hinzu, bevor Sie Firebase-Dienste verwenden:

     <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. Initialisieren Sie Firebase in Ihrer App:

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

Modulbündler verwenden

Sie können den Teilimport des Firebase JavaScript SDK konfigurieren und nur die Firebase-Produkte laden, die Sie benötigen. Wenn Sie einen Bundler (wie Browserify oder Webpack) verwenden, können Sie einzelne Firebase-Produkte bei Bedarf import .

  1. Installieren Sie das Firebase JavaScript SDK:

    1. Wenn Sie noch keine package.json Datei haben, erstellen Sie eine, indem Sie den folgenden Befehl im Stammverzeichnis Ihres JavaScript-Projekts package.json :

      npm init

    2. Installieren Sie das firebase npm-Paket und speichern Sie es in Ihrer package.json Datei, indem Sie package.json :

      npm install --save firebase

  2. import Firebase-Module, um nur bestimmte Firebase-Produkte (wie Authentifizierung und Cloud Firestore) einzuschließen:

     // 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. Initialisieren Sie Firebase in Ihrer App:

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

Node.js Apps

  1. Installieren Sie das Firebase JavaScript SDK:

    1. Wenn Sie noch keine package.json Datei haben, erstellen Sie eine, indem Sie den folgenden Befehl im Stammverzeichnis Ihres JavaScript-Projekts package.json :

      npm init
    2. Installieren Sie das firebase npm-Paket und speichern Sie es in Ihrer package.json Datei, indem Sie package.json :

      npm install --save firebase
  2. Verwenden Sie eine der folgenden Optionen, um das Firebase-Modul in Ihrer App zu verwenden:

    • Sie können require Module von jeder JavaScript - Datei

      Um nur bestimmte Firebase-Produkte (wie Authentifizierung und Cloud Firestore) einzuschließen:

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


    • Sie können ES2015 zum import Modulen verwenden

      Um nur bestimmte Firebase-Produkte (wie Authentifizierung und Cloud Firestore) einzuschließen:

       // 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. Initialisieren Sie Firebase in Ihrer App:

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

Firebase-Konfigurationsobjekt

Um Firebase in Ihrer App zu initialisieren, müssen Sie die Firebase-Projektkonfiguration Ihrer App bereitstellen.

Wenn Sie reservierte Hosting-URLs verwenden , wird Ihre Firebase-Konfiguration automatisch aus Ihrem Firebase-Projekt abgerufen, sodass Sie das Objekt nicht explizit in Ihrem Code angeben müssen.

Wenn Sie nach dem Erstellen Ihrer Firebase-Webanwendung (insbesondere Cloud Storage oder Google Analytics) neue Firebase-Dienste in Ihrem Firebase-Projekt aktivieren, müssen Sie Ihr Firebase-Konfigurationsobjekt in Ihrer App aktualisieren oder, wenn Sie reservierte URLs verwenden, erneut auf Ihrer Site bereitstellen . Beziehen Sie Ihr aktualisiertes Konfigurationsobjekt in der Firebase-Konsole.

Wir empfehlen nicht manuell die Felder in der Config - Objekt bearbeiten, aber als besonders darauf achten, nicht die folgenden erforderlichen „Firebase Optionen“ zu ändern: apiKey , projectId und appID . Wenn Sie Ihre App mit ungültigen oder fehlenden Werten für eine dieser erforderlichen Firebase-Optionen initialisieren, können bei Benutzern Ihrer App schwerwiegende Probleme auftreten.

Hier ist das Format eines Konfigurationsobjekts mit allen aktivierten Diensten (diese Werte werden automatisch ausgefüllt):

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

Hier ist ein Konfigurationsobjekt, das mit Beispielwerten gefüllt ist:

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

Sie können jederzeit Ihr Firebase-Konfigurationsobjekt erhalten .

Schritt 4 : (Optional) Installieren Sie die CLI und stellen Sie sie auf Firebase Hosting bereit

Wenn Sie Ihre Firebase-Webanwendung mit einer Firebase-Hosting-Site verknüpft haben, können Sie den Inhalt und die Konfiguration Ihrer Site jetzt (beim Einrichten Ihrer Web-App) oder jederzeit später bereitstellen.

Für die Bereitstellung in Firebase verwenden Sie die Firebase-CLI, ein Befehlszeilentool.

  1. In der Firebase CLI-Dokumentation erfahren Sie, wie Sie die CLI installieren oder auf die neueste Version aktualisieren .

  2. Initialisieren Sie Ihr Firebase-Projekt. Führen Sie den folgenden Befehl im Stammverzeichnis Ihres lokalen App-Verzeichnisses aus:

    firebase init

  3. Stellen Sie Ihre Inhalte und Hosting-Konfiguration für Firebase Hosting bereit.

    Standard-Hosting-Site

    Standardmäßig hat jedes Projekt Firebase kostenlose Subdomains auf der web.app und firebaseapp.com Domänen ( project-id .web.app und project-id .firebaseapp.com ).

    1. Stellen Sie auf Ihrer Site bereit. Führen Sie den folgenden Befehl aus dem Stammverzeichnis Ihrer App aus:

      firebase deploy
    2. Zeigen Sie Ihre Site auf einer Ihrer Standard-Sites an:

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

    Nicht standardmäßige Hosting-Site

    Firebase-Projekte unterstützen mehrere Sites (diese werden als nicht standardmäßige Sites betrachtet ). Sie können Ihrem Projekt zusätzliche Websites hinzufügen, entweder während des Web App-Setup-Workflows der Konsole oder auf der Hosting-Seite der Konsole.

    1. Fügen Sie Ihre Site zu Ihrer Datei firebase.json (die während der firebase init ).

      Beachten Sie, dass diese Konfiguration von firebase.json davon ausgeht, dass Sie für jede Ihrer Sites separate Repositorys haben.

      {
        "hosting": {
          "site": " site-name> ",
          "public": "public",
      
          // ...
        }
      }
      
    2. Stellen Sie auf Ihrer Site bereit. Führen Sie den folgenden Befehl aus dem Stammverzeichnis Ihrer App aus:

      firebase deploy --only hosting: site-name 
    3. Zeigen Sie Ihre Website unter:

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

Schritt 5 : Greifen Sie in Ihrer App auf Firebase zu

Das Firebase JavaScript SDK unterstützt die folgenden Firebase-Produkte. Jedes Produkt ist optional und kann über den firebase Namespace aufgerufen werden.

Weitere Informationen zu den verfügbaren Methoden finden Sie in der Firebase JavaScript-Referenzdokumentation .

Firebase-Produkt Namespace Netz Node.js
Analytik firebase.analytics()
Authentifizierung firebase.auth()
Cloud Firestore firebase.firestore()
Cloud-Funktionen für Firebase Client SDK firebase.functions()
Cloud Messaging firebase.messaging()
Cloud-Speicher firebase.storage()
Leistungsüberwachung ( Beta- Version) firebase.performance()
Echtzeitdatenbank firebase.database()
Remote Config ( Beta- Version) firebase.remoteConfig()

Verfügbare Bibliotheken

Zusätzliche Setup-Optionen

Verzögertes Laden von Firebase-SDKs (von CDN)

Sie können die Aufnahme der Firebase-SDKs verzögern, bis die gesamte Seite geladen ist.

  1. Fügen Sie ein defer Flagge zu jedem script - Tag für die Firebase SDKs, dann verschieben die Initialisierung von Firebase ein zweites Skript, zum Beispiel:

     <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. Erstellen Sie eine Datei init-firebase.js Folgendes in die Datei ein:

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

Verwenden Sie mehrere Firebase-Projekte in einer einzigen App

In den meisten Fällen müssen Sie Firebase nur in einer einzigen Standard-App initialisieren. Sie können von dieser App aus auf zwei gleichwertige Arten auf Firebase zugreifen:

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

Manchmal müssen Sie jedoch gleichzeitig auf mehrere Firebase-Projekte zugreifen. Beispielsweise möchten Sie möglicherweise Daten aus der Datenbank eines Firebase-Projekts lesen, aber Dateien in einem anderen Firebase-Projekt speichern. Oder Sie möchten möglicherweise ein Projekt authentifizieren, während ein zweites Projekt nicht authentifiziert wird.

Mit dem Firebase JavaScript SDK können Sie mehrere Firebase-Projekte gleichzeitig in einer einzigen App initialisieren und verwenden, wobei jedes Projekt seine eigenen Firebase-Konfigurationsinformationen verwendet.

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

Führen Sie einen lokalen Webserver für die Entwicklung aus

Wenn Sie eine Web-App erstellen, müssen Sie für einige Teile des Firebase JavaScript SDK Ihre Web-App von einem Server aus und nicht vom lokalen Dateisystem aus bereitstellen. Sie können die Firebase-CLI verwenden , um einen lokalen Server auszuführen.

Wenn Sie Firebase Hosting bereits für Ihre App eingerichtet haben, haben Sie möglicherweise bereits einige der folgenden Schritte ausgeführt.

Um Ihre Web-App bereitzustellen, verwenden Sie die Firebase-CLI, ein Befehlszeilentool.

  1. In der Firebase CLI-Dokumentation erfahren Sie, wie Sie die CLI installieren oder auf die neueste Version aktualisieren .

  2. Initialisieren Sie Ihr Firebase-Projekt. Führen Sie den folgenden Befehl im Stammverzeichnis Ihres lokalen App-Verzeichnisses aus:

    firebase init

  3. Starten Sie den lokalen Server für die Entwicklung. Führen Sie den folgenden Befehl im Stammverzeichnis Ihres lokalen App-Verzeichnisses aus:

    firebase serve

Nächste Schritte

Erfahren Sie mehr über Firebase:

Fügen Sie Ihrer App Firebase-Dienste hinzu: