Diese Seite wurde von der Cloud Translation API übersetzt.

Switch to English

Cloud Firestore Web Codelab

1. Übersicht

Ziele

In diesem Codelab erstellen Sie eine Web-App für Restaurantempfehlungen, die auf Cloud Firestore basiert.

Was Sie lernen werden

Lesen und schreiben Sie Daten aus einer Web-App in Cloud Firestore
Hören Sie Änderungen in Cloud Firestore-Daten in Echtzeit
Verwenden Sie die Firebase-Authentifizierung und Sicherheitsregeln, um Cloud Firestore-Daten zu sichern
Schreiben Sie komplexe Cloud Firestore-Abfragen

Was du brauchen wirst

Bevor Sie mit diesem Codelab beginnen, stellen Sie sicher, dass Sie Folgendes installiert haben:

npm , das normalerweise mit Node.js geliefert wird – Node 16+ wird empfohlen
Der IDE/Texteditor Ihrer Wahl, z. B. WebStorm , VS Code oder Sublime

2. Erstellen und richten Sie ein Firebase-Projekt ein

Erstellen Sie ein Firebase-Projekt

Klicken Sie in der Firebase-Konsole auf Projekt hinzufügen und nennen Sie dann das Firebase-Projekt FriendlyEats .

Merken Sie sich die Projekt-ID für Ihr Firebase-Projekt.

Klicken Sie auf Projekt erstellen .

Die Anwendung, die wir erstellen werden, nutzt einige im Web verfügbare Firebase-Dienste:

Firebase-Authentifizierung zur einfachen Identifizierung Ihrer Benutzer
Cloud Firestore , um strukturierte Daten in der Cloud zu speichern und sofortige Benachrichtigungen zu erhalten, wenn die Daten aktualisiert werden
Firebase Hosting zum Hosten und Bereitstellen Ihrer statischen Assets

Für dieses spezielle Codelab haben wir Firebase Hosting bereits konfiguriert. Für Firebase Auth und Cloud Firestore führen wir Sie jedoch durch die Konfiguration und Aktivierung der Dienste mithilfe der Firebase-Konsole.

Aktivieren Sie die anonyme Authentifizierung

Obwohl die Authentifizierung nicht der Schwerpunkt dieses Codelabs ist, ist es wichtig, dass unsere App über eine Form der Authentifizierung verfügt. Wir verwenden die anonyme Anmeldung . Das bedeutet, dass der Benutzer ohne Aufforderung automatisch angemeldet wird.

Sie müssen die anonyme Anmeldung aktivieren.

Suchen Sie in der Firebase-Konsole im linken Navigationsbereich den Abschnitt „Build“ .
Klicken Sie auf Authentifizierung und dann auf die Registerkarte Anmeldemethode (oder klicken Sie hier , um direkt dorthin zu gelangen).
Aktivieren Sie den Anbieter für anonyme Anmeldung und klicken Sie dann auf Speichern .

Dadurch kann die Anwendung Ihre Benutzer stillschweigend anmelden, wenn sie auf die Web-App zugreifen. Lesen Sie gerne die Dokumentation zur anonymen Authentifizierung , um mehr zu erfahren.

Aktivieren Sie Cloud Firestore

Die App nutzt Cloud Firestore, um Restaurantinformationen und Bewertungen zu speichern und zu empfangen.

Sie müssen Cloud Firestore aktivieren. Klicken Sie im Abschnitt „Erstellen“ der Firebase-Konsole auf „Firestore-Datenbank“ . Klicken Sie im Cloud Firestore-Bereich auf Datenbank erstellen .

Der Zugriff auf Daten in Cloud Firestore wird durch Sicherheitsregeln gesteuert. Wir werden später in diesem Codelab noch mehr über Regeln sprechen, aber zunächst müssen wir einige Grundregeln für unsere Daten festlegen, um loszulegen. Fügen Sie auf der Registerkarte „Regeln“ der Firebase-Konsole die folgenden Regeln hinzu und klicken Sie dann auf „Veröffentlichen“ .

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      //
      // WARNING: These rules are insecure! We will replace them with
      // more secure rules later in the codelab
      //
      allow read, write: if request.auth != null;
    }
  }
}

Die oben genannten Regeln beschränken den Datenzugriff auf angemeldete Benutzer, wodurch nicht authentifizierte Benutzer am Lesen oder Schreiben gehindert werden. Das ist besser, als den öffentlichen Zugriff zu erlauben, ist aber noch lange nicht sicher. Wir werden diese Regeln später im Codelab verbessern.

3. Holen Sie sich den Beispielcode

Klonen Sie das GitHub-Repository über die Befehlszeile:

git clone https://github.com/firebase/friendlyeats-web

Der Beispielcode sollte in das Verzeichnis 📁 friendlyeats-web geklont worden sein. Stellen Sie von nun an sicher, dass Sie alle Ihre Befehle in diesem Verzeichnis ausführen:

cd friendlyeats-web/vanilla-js

Importieren Sie die Starter-App

Öffnen oder importieren Sie mit Ihrer IDE (WebStorm, Atom, Sublime, Visual Studio Code...) das Verzeichnis 📁 friendlyeats-web . Dieses Verzeichnis enthält den Startcode für das Codelab, das aus einer noch nicht funktionsfähigen Restaurantempfehlungs-App besteht. Wir werden es im gesamten Codelab funktionsfähig machen, sodass Sie bald Code in diesem Verzeichnis bearbeiten müssen.

4. Installieren Sie die Firebase-Befehlszeilenschnittstelle

Mit der Firebase Command Line Interface (CLI) können Sie Ihre Web-App lokal bereitstellen und Ihre Web-App auf Firebase Hosting bereitstellen.

Installieren Sie die CLI, indem Sie den folgenden npm-Befehl ausführen:

npm -g install firebase-tools

Überprüfen Sie, ob die CLI korrekt installiert wurde, indem Sie den folgenden Befehl ausführen:

firebase --version

Stellen Sie sicher, dass die Version der Firebase-CLI v7.4.0 oder höher ist.

Autorisieren Sie die Firebase-CLI, indem Sie den folgenden Befehl ausführen:

firebase login

Wir haben die Web-App-Vorlage so eingerichtet, dass sie die Konfiguration Ihrer App für Firebase Hosting aus dem lokalen Verzeichnis und den Dateien Ihrer App abruft. Dazu müssen wir Ihre App jedoch mit Ihrem Firebase-Projekt verknüpfen.

Stellen Sie sicher, dass Ihre Befehlszeile auf das lokale Verzeichnis Ihrer App zugreift.
Verknüpfen Sie Ihre App mit Ihrem Firebase-Projekt, indem Sie den folgenden Befehl ausführen:

firebase use --add

Wenn Sie dazu aufgefordert werden, wählen Sie Ihre Projekt-ID aus und geben Sie Ihrem Firebase-Projekt dann einen Alias.

Ein Alias ist nützlich, wenn Sie über mehrere Umgebungen verfügen (Produktion, Staging usw.). Für dieses Codelab verwenden wir jedoch einfach den Alias default .

Befolgen Sie die restlichen Anweisungen in Ihrer Befehlszeile.

5. Führen Sie den lokalen Server aus

Wir sind bereit, tatsächlich mit der Arbeit an unserer App zu beginnen! Lassen Sie uns unsere App lokal ausführen!

Führen Sie den folgenden Firebase-CLI-Befehl aus:

firebase emulators:start --only hosting

Ihre Befehlszeile sollte die folgende Antwort anzeigen:

hosting: Local server: http://localhost:5000

Wir verwenden den Firebase Hosting -Emulator, um unsere App lokal bereitzustellen. Die Web-App sollte jetzt unter http://localhost:5000 verfügbar sein.

Öffnen Sie Ihre App unter http://localhost:5000 .

Sie sollten Ihre Kopie von FriendlyEats sehen, die mit Ihrem Firebase-Projekt verbunden wurde.

Die App hat automatisch eine Verbindung zu Ihrem Firebase-Projekt hergestellt und Sie stillschweigend als anonymen Benutzer angemeldet.

6. Daten in Cloud Firestore schreiben

In diesem Abschnitt schreiben wir einige Daten in Cloud Firestore, damit wir die Benutzeroberfläche der App füllen können. Dies kann manuell über die Firebase-Konsole erfolgen, wir machen es jedoch in der App selbst, um einen einfachen Cloud Firestore-Schreibvorgang zu demonstrieren.

Datenmodell

Firestore-Daten sind in Sammlungen, Dokumente, Felder und Untersammlungen unterteilt. Wir speichern jedes Restaurant als Dokument in einer Sammlung auf oberster Ebene namens restaurants .

Später speichern wir jede Bewertung in einer Untersammlung mit dem Namen ratings für jedes Restaurant.

Fügen Sie Restaurants zu Firestore hinzu

Das Hauptmodellobjekt in unserer App ist ein Restaurant. Schreiben wir einen Code, der der restaurants Sammlung ein Restaurantdokument hinzufügt.

Öffnen Sie in Ihren heruntergeladenen Dateien scripts/FriendlyEats.Data.js .
Suchen Sie die Funktion FriendlyEats.prototype.addRestaurant .
Ersetzen Sie die gesamte Funktion durch den folgenden Code.

FriendlyEats.Data.js

FriendlyEats.prototype.addRestaurant = function(data) {
  var collection = firebase.firestore().collection('restaurants');
  return collection.add(data);
};

Der obige Code fügt der restaurants ein neues Dokument hinzu. Die Dokumentdaten stammen von einem einfachen JavaScript-Objekt. Dazu erhalten wir zunächst einen Verweis auf eine Cloud Firestore- restaurants und add dann die Daten hinzu.

Fügen wir Restaurants hinzu!

Gehen Sie in Ihrem Browser zurück zu Ihrer FriendlyEats-App und aktualisieren Sie sie.
Klicken Sie auf Scheindaten hinzufügen .

Die App generiert automatisch einen zufälligen Satz von Restaurantobjekten und ruft dann Ihre addRestaurant Funktion auf. Sie sehen die Daten jedoch noch nicht in Ihrer eigentlichen Web-App, da wir den Abruf der Daten noch implementieren müssen (nächster Abschnitt des Codelabs).

Wenn Sie jedoch in der Firebase-Konsole zur Registerkarte „Cloud Firestore“ navigieren, sollten Sie jetzt neue Dokumente in der restaurants Sammlung sehen!

Herzlichen Glückwunsch, Sie haben gerade Daten aus einer Web-App in Cloud Firestore geschrieben!

Im nächsten Abschnitt erfahren Sie, wie Sie Daten aus Cloud Firestore abrufen und in Ihrer App anzeigen.

7. Daten aus Cloud Firestore anzeigen

In diesem Abschnitt erfahren Sie, wie Sie Daten aus Cloud Firestore abrufen und in Ihrer App anzeigen. Die beiden wichtigsten Schritte sind das Erstellen einer Abfrage und das Hinzufügen eines Snapshot-Listeners. Dieser Listener wird über alle vorhandenen Daten benachrichtigt, die der Abfrage entsprechen, und erhält Aktualisierungen in Echtzeit.

Erstellen wir zunächst die Abfrage, die die standardmäßige, ungefilterte Liste von Restaurants bedient.

Gehen Sie zurück zur Datei scripts/FriendlyEats.Data.js .
Suchen Sie die Funktion FriendlyEats.prototype.getAllRestaurants .
Ersetzen Sie die gesamte Funktion durch den folgenden Code.

FriendlyEats.Data.js

FriendlyEats.prototype.getAllRestaurants = function(renderer) {
  var query = firebase.firestore()
      .collection('restaurants')
      .orderBy('avgRating', 'desc')
      .limit(50);

  this.getDocumentsInQuery(query, renderer);
};

Im obigen Code erstellen wir eine Abfrage, die bis zu 50 Restaurants aus der obersten Sammlung mit dem Namen „ restaurants abruft, sortiert nach der durchschnittlichen Bewertung (derzeit alle Null). Nachdem wir diese Abfrage deklariert haben, übergeben wir sie an die Methode getDocumentsInQuery() , die für das Laden und Rendern der Daten verantwortlich ist.

Wir tun dies, indem wir einen Snapshot-Listener hinzufügen.

Gehen Sie zurück zur Datei scripts/FriendlyEats.Data.js .
Suchen Sie die Funktion FriendlyEats.prototype.getDocumentsInQuery .
Ersetzen Sie die gesamte Funktion durch den folgenden Code.

FriendlyEats.Data.js

FriendlyEats.prototype.getDocumentsInQuery = function(query, renderer) {
  query.onSnapshot(function(snapshot) {
    if (!snapshot.size) return renderer.empty(); // Display "There are no restaurants".

    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        renderer.remove(change.doc);
      } else {
        renderer.display(change.doc);
      }
    });
  });
};

Im obigen Code löst query.onSnapshot seinen Rückruf jedes Mal aus, wenn sich das Ergebnis der Abfrage ändert.

Beim ersten Mal wird der Rückruf mit dem gesamten Ergebnissatz der Abfrage ausgelöst – also mit der gesamten restaurants aus Cloud Firestore. Anschließend werden alle einzelnen Dokumente an die Funktion renderer.display übergeben.
Wenn ein Dokument gelöscht wird, ist change.type gleich removed . In diesem Fall rufen wir also eine Funktion auf, die das Restaurant aus der Benutzeroberfläche entfernt.

Nachdem wir nun beide Methoden implementiert haben, aktualisieren Sie die App und überprüfen Sie, ob die Restaurants, die wir zuvor in der Firebase-Konsole gesehen haben, jetzt in der App sichtbar sind. Wenn Sie diesen Abschnitt erfolgreich abgeschlossen haben, liest und schreibt Ihre App jetzt Daten mit Cloud Firestore!

Wenn sich Ihre Restaurantliste ändert, wird dieser Listener automatisch aktualisiert. Versuchen Sie, in der Firebase-Konsole ein Restaurant manuell zu löschen oder seinen Namen zu ändern. Die Änderungen werden sofort auf Ihrer Website angezeigt!

8. Get()-Daten

Bisher haben wir gezeigt, wie man onSnapshot verwendet, um Updates in Echtzeit abzurufen; Das ist jedoch nicht immer das, was wir wollen. Manchmal ist es sinnvoller, die Daten nur einmal abzurufen.

Wir möchten eine Methode implementieren, die ausgelöst wird, wenn ein Benutzer in Ihrer App auf ein bestimmtes Restaurant klickt.

Gehen Sie zurück zu Ihrer Datei scripts/FriendlyEats.Data.js .
Suchen Sie die Funktion FriendlyEats.prototype.getRestaurant .
Ersetzen Sie die gesamte Funktion durch den folgenden Code.

FriendlyEats.Data.js

FriendlyEats.prototype.getRestaurant = function(id) {
  return firebase.firestore().collection('restaurants').doc(id).get();
};

Nachdem Sie diese Methode implementiert haben, können Sie Seiten für jedes Restaurant anzeigen. Klicken Sie einfach auf ein Restaurant in der Liste und Sie sollten die Detailseite des Restaurants sehen:

Im Moment können Sie keine Bewertungen hinzufügen, da wir das Hinzufügen von Bewertungen später im Codelab noch implementieren müssen.

9. Daten sortieren und filtern

Derzeit zeigt unsere App eine Liste von Restaurants an, aber es gibt für den Benutzer keine Möglichkeit, nach seinen Bedürfnissen zu filtern. In diesem Abschnitt verwenden Sie die erweiterte Abfrage von Cloud Firestore, um die Filterung zu aktivieren.

Hier ist ein Beispiel für eine einfache Abfrage zum Abrufen aller Dim Sum Restaurants:

var filteredQuery = query.where('category', '==', 'Dim Sum')

Wie der Name schon sagt, sorgt die Methode where() dafür, dass unsere Abfrage nur Mitglieder der Sammlung herunterlädt, deren Felder den von uns festgelegten Einschränkungen entsprechen. In diesem Fall werden nur Restaurants heruntergeladen, deren category Dim Sum ist.

In unserer App kann der Benutzer mehrere Filter verketten, um spezifische Abfragen zu erstellen, z. B. „Pizza in San Francisco“ oder „Meeresfrüchte in Los Angeles, sortiert nach Beliebtheit“.

Wir erstellen eine Methode, die eine Abfrage aufbaut, die unsere Restaurants basierend auf mehreren von unseren Benutzern ausgewählten Kriterien filtert.

Gehen Sie zurück zu Ihrer Datei scripts/FriendlyEats.Data.js .
Suchen Sie die Funktion FriendlyEats.prototype.getFilteredRestaurants .
Ersetzen Sie die gesamte Funktion durch den folgenden Code.

FriendlyEats.Data.js

FriendlyEats.prototype.getFilteredRestaurants = function(filters, renderer) {
  var query = firebase.firestore().collection('restaurants');

  if (filters.category !== 'Any') {
    query = query.where('category', '==', filters.category);
  }

  if (filters.city !== 'Any') {
    query = query.where('city', '==', filters.city);
  }

  if (filters.price !== 'Any') {
    query = query.where('price', '==', filters.price.length);
  }

  if (filters.sort === 'Rating') {
    query = query.orderBy('avgRating', 'desc');
  } else if (filters.sort === 'Reviews') {
    query = query.orderBy('numRatings', 'desc');
  }

  this.getDocumentsInQuery(query, renderer);
};

Der obige Code fügt mehrere where Filter und eine einzelne orderBy Klausel hinzu, um eine zusammengesetzte Abfrage basierend auf Benutzereingaben zu erstellen. Unsere Abfrage gibt jetzt nur Restaurants zurück, die den Anforderungen des Benutzers entsprechen.

Aktualisieren Sie Ihre FriendlyEats-App in Ihrem Browser und überprüfen Sie dann, ob Sie nach Preis, Stadt und Kategorie filtern können. Während des Tests werden in der JavaScript-Konsole Ihres Browsers Fehler angezeigt, die wie folgt aussehen:

The query requires an index. You can create it here: https://console.firebase.google.com/project/project-id/database/firestore/indexes?create_composite=...

Diese Fehler sind darauf zurückzuführen, dass Cloud Firestore für die meisten zusammengesetzten Abfragen Indizes benötigt. Durch die Anforderung von Indizes für Abfragen bleibt Cloud Firestore schnell und skalierbar.

Wenn Sie den Link in der Fehlermeldung öffnen, wird automatisch die Benutzeroberfläche zur Indexerstellung in der Firebase-Konsole mit den richtigen ausgefüllten Parametern geöffnet. Im nächsten Abschnitt werden wir die für diese Anwendung benötigten Indizes schreiben und bereitstellen.

10. Stellen Sie Indizes bereit

Wenn wir nicht jeden Pfad in unserer App erkunden und jedem Link zur Indexerstellung folgen möchten, können wir mithilfe der Firebase-CLI problemlos viele Indizes gleichzeitig bereitstellen.

Im heruntergeladenen lokalen Verzeichnis Ihrer App finden Sie die Datei firestore.indexes.json .

Diese Datei beschreibt alle Indizes, die für alle möglichen Filterkombinationen benötigt werden.

firestore.indexes.json

{
 "indexes": [
   {
     "collectionGroup": "restaurants",
     "queryScope": "COLLECTION",
     "fields": [
       { "fieldPath": "city", "order": "ASCENDING" },
       { "fieldPath": "avgRating", "order": "DESCENDING" }
     ]
   },

   ...

 ]
}

Stellen Sie diese Indizes mit dem folgenden Befehl bereit:

firebase deploy --only firestore:indexes

Nach ein paar Minuten sind Ihre Indizes aktiv und die Fehlermeldungen verschwinden.

11. Daten in eine Transaktion schreiben

In diesem Abschnitt fügen wir Benutzern die Möglichkeit hinzu, Bewertungen an Restaurants zu übermitteln. Bisher waren alle unsere Schreibvorgänge atomar und relativ einfach. Wenn bei einem von ihnen ein Fehler aufgetreten wäre, würden wir den Benutzer wahrscheinlich nur auffordern, es noch einmal zu versuchen, oder unsere App würde den Schreibvorgang automatisch wiederholen.

Unsere App wird viele Benutzer haben, die eine Bewertung für ein Restaurant hinzufügen möchten, daher müssen wir mehrere Lese- und Schreibvorgänge koordinieren. Zuerst muss die Bewertung selbst abgegeben werden, dann müssen die count und average rating des Restaurants aktualisiert werden. Wenn eines davon fehlschlägt, das andere jedoch nicht, befinden wir uns in einem inkonsistenten Zustand, in dem die Daten in einem Teil unserer Datenbank nicht mit den Daten in einem anderen Teil übereinstimmen.

Glücklicherweise bietet Cloud Firestore Transaktionsfunktionen, die es uns ermöglichen, mehrere Lese- und Schreibvorgänge in einem einzigen atomaren Vorgang durchzuführen und so sicherzustellen, dass unsere Daten konsistent bleiben.

Gehen Sie zurück zu Ihrer Datei scripts/FriendlyEats.Data.js .
Suchen Sie die Funktion FriendlyEats.prototype.addRating .
Ersetzen Sie die gesamte Funktion durch den folgenden Code.

FriendlyEats.Data.js

FriendlyEats.prototype.addRating = function(restaurantID, rating) {
  var collection = firebase.firestore().collection('restaurants');
  var document = collection.doc(restaurantID);
  var newRatingDocument = document.collection('ratings').doc();

  return firebase.firestore().runTransaction(function(transaction) {
    return transaction.get(document).then(function(doc) {
      var data = doc.data();

      var newAverage =
          (data.numRatings * data.avgRating + rating.rating) /
          (data.numRatings + 1);

      transaction.update(document, {
        numRatings: data.numRatings + 1,
        avgRating: newAverage
      });
      return transaction.set(newRatingDocument, rating);
    });
  });
};

Im obigen Block lösen wir eine Transaktion aus, um die numerischen Werte von avgRating und numRatings im Restaurantdokument zu aktualisieren. Gleichzeitig fügen wir die neue rating der Untersammlung ratings hinzu.

12. Sichern Sie Ihre Daten

Zu Beginn dieses Codelabs legen wir die Sicherheitsregeln unserer App so fest, dass die Datenbank vollständig für alle Lese- und Schreibvorgänge geöffnet ist. In einer realen Anwendung möchten wir viel detailliertere Regeln festlegen, um unerwünschte Datenzugriffe oder -änderungen zu verhindern.

Klicken Sie im Abschnitt „Erstellen“ der Firebase-Konsole auf „Firestore-Datenbank“ .
Klicken Sie im Abschnitt „Cloud Firestore“ auf die Registerkarte „Regeln“ (oder klicken Sie hier, um direkt dorthin zu gelangen).
Ersetzen Sie die Standardeinstellungen durch die folgenden Regeln und klicken Sie dann auf „Veröffentlichen“ .

firestore.rules

rules_version = '2';
service cloud.firestore {

  // Determine if the value of the field "key" is the same
  // before and after the request.
  function unchanged(key) {
    return (key in resource.data) 
      && (key in request.resource.data) 
      && (resource.data[key] == request.resource.data[key]);
  }

  match /databases/{database}/documents {
    // Restaurants:
    //   - Authenticated user can read
    //   - Authenticated user can create/update (for demo purposes only)
    //   - Updates are allowed if no fields are added and name is unchanged
    //   - Deletes are not allowed (default)
    match /restaurants/{restaurantId} {
      allow read: if request.auth != null;
      allow create: if request.auth != null;
      allow update: if request.auth != null
                    && (request.resource.data.keys() == resource.data.keys()) 
                    && unchanged("name");
      
      // Ratings:
      //   - Authenticated user can read
      //   - Authenticated user can create if userId matches
      //   - Deletes and updates are not allowed (default)
      match /ratings/{ratingId} {
        allow read: if request.auth != null;
        allow create: if request.auth != null
                      && request.resource.data.userId == request.auth.uid;
      }
    }
  }
}

Diese Regeln beschränken den Zugriff, um sicherzustellen, dass Clients nur sichere Änderungen vornehmen. Zum Beispiel:

Durch Aktualisierungen eines Restaurantdokuments können nur die Bewertungen geändert werden, nicht jedoch der Name oder andere unveränderliche Daten.
Bewertungen können nur erstellt werden, wenn die Benutzer-ID mit dem angemeldeten Benutzer übereinstimmt, was Spoofing verhindert.

Alternativ zur Verwendung der Firebase-Konsole können Sie die Firebase-CLI verwenden, um Regeln für Ihr Firebase-Projekt bereitzustellen. Die Datei „firestore.rules“ in Ihrem Arbeitsverzeichnis enthält bereits die Regeln von oben. Um diese Regeln von Ihrem lokalen Dateisystem aus bereitzustellen (anstatt die Firebase-Konsole zu verwenden), führen Sie den folgenden Befehl aus:

firebase deploy --only firestore:rules

13. Fazit

In diesem Codelab haben Sie gelernt, wie Sie mit Cloud Firestore grundlegende und erweiterte Lese- und Schreibvorgänge durchführen und wie Sie den Datenzugriff mit Sicherheitsregeln sichern. Die vollständige Lösung finden Sie im Quickstarts-js-Repository .

Um mehr über Cloud Firestore zu erfahren, besuchen Sie die folgenden Ressourcen:

14. [Optional] Mit App Check erzwingen

Firebase App Check bietet Schutz, indem es dabei hilft, unerwünschten Datenverkehr zu Ihrer App zu validieren und zu verhindern. In diesem Schritt sichern Sie den Zugriff auf Ihre Dienste, indem Sie App Check mit reCAPTCHA Enterprise hinzufügen.

Zuerst müssen Sie App Check und reCaptcha aktivieren.

Aktivieren von reCaptcha Enterprise

Suchen Sie in der Cloud-Konsole unter Sicherheit nach reCaptcha Enterprise und wählen Sie es aus.
Aktivieren Sie den Dienst nach Aufforderung und klicken Sie auf Schlüssel erstellen .
Geben Sie nach Aufforderung einen Anzeigenamen ein und wählen Sie Website als Plattformtyp aus.
Fügen Sie Ihre bereitgestellten URLs zur Domänenliste hinzu und stellen Sie sicher, dass die Option „Kontrollkästchen-Herausforderung verwenden“ deaktiviert ist.
Klicken Sie auf Schlüssel erstellen und speichern Sie den generierten Schlüssel an einem sicheren Ort. Sie werden es später in diesem Schritt benötigen.

App Check aktivieren

Suchen Sie in der Firebase-Konsole im linken Bereich den Abschnitt „Build“ .
Klicken Sie auf „App Check“ und dann auf die Schaltfläche „Erste Schritte “ (oder leiten Sie direkt zur Konsole weiter).
Klicken Sie auf Registrieren und geben Sie Ihren reCaptcha Enterprise-Schlüssel ein, wenn Sie dazu aufgefordert werden. Klicken Sie dann auf Speichern .
Wählen Sie in der API-Ansicht „Speicher“ aus und klicken Sie auf „Erzwingen“ . Machen Sie dasselbe für Cloud Firestore .

App Check sollte jetzt erzwungen werden! Aktualisieren Sie Ihre App und versuchen Sie, ein Restaurant zu erstellen/anzuzeigen. Sie sollten die Fehlermeldung erhalten:

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

Das bedeutet, dass App Check standardmäßig nicht validierte Anfragen blockiert. Jetzt fügen wir Ihrer App eine Validierung hinzu.

Navigieren Sie zur Datei FriendlyEats.View.js , aktualisieren Sie die Funktion initAppCheck und fügen Sie Ihren reCaptcha-Schlüssel hinzu, um App Check zu initialisieren.

FriendlyEats.prototype.initAppCheck = function() {
    var appCheck = firebase.appCheck();
    appCheck.activate(
    new firebase.appCheck.ReCaptchaEnterpriseProvider(
      /* reCAPTCHA Enterprise site key */
    ),
    true // Set to true to allow auto-refresh.
  );
};

Die appCheck Instanz wird mit einem ReCaptchaEnterpriseProvider mit Ihrem Schlüssel initialisiert, und isTokenAutoRefreshEnabled ermöglicht die automatische Aktualisierung von Token in Ihrer App.

Um lokale Tests zu aktivieren, suchen Sie in der Datei FriendlyEats.js den Abschnitt, in dem die App initialisiert wird, und fügen Sie der Funktion FriendlyEats.prototype.initAppCheck die folgende Zeile hinzu:

if(isLocalhost) {
  self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

Dadurch wird ein Debug-Token in der Konsole Ihrer lokalen Web-App protokolliert, ähnlich wie:

App Check debug token: 8DBDF614-649D-4D22-B0A3-6D489412838B. You will need to add it to your app's App Check settings in the Firebase console for it to work.

Gehen Sie nun zur Apps-Ansicht von App Check in der Firebase-Konsole.

Klicken Sie auf das Überlaufmenü und wählen Sie Debug-Tokens verwalten aus .

Klicken Sie dann auf Debug-Token hinzufügen und fügen Sie das Debug-Token aus Ihrer Konsole ein, wenn Sie dazu aufgefordert werden.

Glückwunsch! App Check sollte jetzt in Ihrer App funktionieren.