Google is committed to advancing racial equity for Black communities. See how.
This page was translated by the Cloud Translation API.
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, kann nicht weiter verlinkt werden. 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

Firebase bietet JavaScript-Bibliotheken für die meisten Firebase-Produkte, einschließlich Remote Config, FCM und mehr. Sie können Ihrer App jede der verfügbaren Bibliotheken hinzufügen.

Wie Sie Ihrer Web-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 Modulbündler) oder ob Sie eine Node.js konfigurieren App. Weitere Hilfe bei der Auswahl zwischen diesen Alternativen finden Sie unter Möglichkeiten zum Hinzufügen der Web-SDKs zu Ihrer App .

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

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

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

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

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

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 einzuschließen (wie Authentifizierung und 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");
      


    • Sie können ES2015 zum import Modulen verwenden

      So schließen Sie nur bestimmte Firebase-Produkte ein (wie Authentifizierung und 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. Initialisieren Sie Firebase in Ihrer App:

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

Erfahren Sie mehr über das Firebase-Konfigurationsobjekt

Um Firebase in Ihrer App zu initialisieren, müssen Sie die Firebase-Projektkonfiguration Ihrer App bereitstellen. Sie können Ihr Firebase-Konfigurationsobjekt jederzeit abrufen .

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

  • Wir empfehlen nicht manuell Config - Objekt bearbeiten, vor allem die folgenden erforderlichen „Firebase - Optionen“: apiKey , projectId und appID . Wenn Sie Ihre App mit ungültigen oder fehlenden Werten für diese erforderlichen "Firebase-Optionen" initialisieren, können bei Benutzern Ihrer App schwerwiegende Probleme auftreten.

  • Wenn Sie Google Analytics in Ihrem Firebase-Projekt aktiviert haben, enthält Ihr Konfigurationsobjekt die Feldmess- measurementId . Weitere Informationen zu diesem Feld finden Sie auf der Seite Erste Schritte mit Analytics .

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

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

Hier ist ein Konfigurationsobjekt mit Beispielwerten :

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

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 bei dieser Konfiguration von firebase.json davon firebase.json wird, 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

Nächste Schritte

Erfahren Sie mehr über Firebase:

Fügen Sie Ihrer App Firebase-Dienste hinzu: