Laboratorium programowania internetowego Cloud Firestore

1. Przegląd

Cele

Podczas tych zajęć z programowania utworzysz aplikację internetową z rekomendacjami restauracji obsługiwaną przez Cloud Firestore .

img5.png

Czego się dowiesz

  • Odczytuj i zapisuj dane w Cloud Firestore z aplikacji internetowej
  • Słuchaj zmian w danych Cloud Firestore w czasie rzeczywistym
  • Użyj uwierzytelniania Firebase i reguł bezpieczeństwa, aby zabezpieczyć dane Cloud Firestore
  • Pisz złożone zapytania Cloud Firestore

Co będziesz potrzebował

Przed rozpoczęciem ćwiczeń z kodowania upewnij się, że zainstalowałeś:

2. Utwórz i skonfiguruj projekt Firebase

Utwórz projekt Firebase

  1. W konsoli Firebase kliknij Dodaj projekt , a następnie nadaj projektowi Firebase nazwę FriendlyEats .

Zapamiętaj identyfikator projektu dla swojego projektu Firebase.

  1. Kliknij opcję Utwórz projekt .

Aplikacja, którą będziemy budować wykorzystuje kilka usług Firebase dostępnych w sieci:

  • Uwierzytelnianie Firebase umożliwiające łatwą identyfikację użytkowników
  • Cloud Firestore do zapisywania uporządkowanych danych w chmurze i otrzymywania natychmiastowych powiadomień o aktualizacji danych
  • Hosting Firebase do hostowania i obsługi zasobów statycznych

Na potrzeby tego konkretnego ćwiczenia z programowania skonfigurowaliśmy już Hosting Firebase. Jednak w przypadku Firebase Auth i Cloud Firestore przeprowadzimy Cię przez konfigurację i włączenie usług za pomocą konsoli Firebase.

Włącz uwierzytelnianie anonimowe

Chociaż uwierzytelnianie nie jest przedmiotem tego ćwiczenia z programowania, ważne jest, aby w naszej aplikacji była dostępna jakaś forma uwierzytelniania. Zastosujemy logowanie anonimowe , co oznacza, że ​​użytkownik zostanie zalogowany w trybie cichym, bez monitu.

Musisz włączyć logowanie anonimowe.

  1. W konsoli Firebase znajdź sekcję Kompilacja w lewym panelu nawigacyjnym.
  2. Kliknij opcję Uwierzytelnianie , a następnie kliknij kartę Metoda logowania (lub kliknij tutaj , aby przejść bezpośrednio tam).
  3. Włącz dostawcę logowania anonimowego , a następnie kliknij Zapisz .

img7.png

Umożliwi to aplikacji ciche logowanie użytkowników, gdy uzyskują oni dostęp do aplikacji internetowej. Aby dowiedzieć się więcej, przeczytaj dokumentację dotyczącą uwierzytelniania anonimowego .

Włącz Cloud Firestore

Aplikacja korzysta z Cloud Firestore do zapisywania i odbierania informacji oraz ocen restauracji.

Musisz włączyć Cloud Firestore. W sekcji Kompilacja konsoli Firebase kliknij Baza danych Firestore . Kliknij opcję Utwórz bazę danych w panelu Cloud Firestore.

Dostęp do danych w Cloud Firestore jest kontrolowany przez reguły bezpieczeństwa. Więcej o regułach porozmawiamy w dalszej części tego ćwiczenia z kodowania, ale najpierw musimy ustawić kilka podstawowych reguł dotyczących naszych danych, aby rozpocząć. Na karcie Reguły konsoli Firebase dodaj następujące reguły, a następnie kliknij Publikuj .

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

Powyższe zasady ograniczają dostęp do danych do zalogowanych użytkowników, co uniemożliwia nieuwierzytelnionym użytkownikom czytanie i pisanie. Jest to lepsze niż zezwolenie na publiczny dostęp, ale nadal jest dalekie od bezpieczeństwa. Poprawimy te zasady w dalszej części zajęć z programowania.

3. Pobierz przykładowy kod

Sklonuj repozytorium GitHub z wiersza poleceń:

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

Przykładowy kod powinien zostać sklonowany do katalogu 📁 friendlyeats-web . Odtąd pamiętaj, aby uruchamiać wszystkie polecenia z tego katalogu:

cd friendlyeats-web/vanilla-js

Zaimportuj aplikację startową

Używając swojego IDE (WebStorm, Atom, Sublime, Visual Studio Code...) otwórz lub zaimportuj katalog 📁 friendlyeats-web . Ten katalog zawiera kod startowy dla laboratorium programistycznego, które składa się z jeszcze nie działającej aplikacji rekomendującej restauracje. Sprawimy, że będzie on funkcjonalny podczas zajęć z programowania, więc wkrótce będziesz musiał edytować kod w tym katalogu.

4. Zainstaluj interfejs wiersza poleceń Firebase

Interfejs wiersza poleceń Firebase (CLI) umożliwia lokalne udostępnianie aplikacji internetowej i wdrażanie aplikacji internetowej w hostingu Firebase.

  1. Zainstaluj interfejs CLI, uruchamiając następującą komendę npm:
npm -g install firebase-tools
  1. Sprawdź, czy interfejs CLI został poprawnie zainstalowany, uruchamiając następującą komendę:
firebase --version

Upewnij się, że wersja Firebase CLI to v7.4.0 lub nowsza.

  1. Autoryzuj interfejs CLI Firebase, uruchamiając następujące polecenie:
firebase login

Skonfigurowaliśmy szablon aplikacji internetowej, aby pobrać konfigurację aplikacji dla Hostingu Firebase z lokalnego katalogu i plików aplikacji. Aby to jednak zrobić, musimy powiązać Twoją aplikację z projektem Firebase.

  1. Upewnij się, że wiersz poleceń uzyskuje dostęp do lokalnego katalogu aplikacji.
  2. Powiąż swoją aplikację z projektem Firebase, uruchamiając następujące polecenie:
firebase use --add
  1. Po wyświetleniu monitu wybierz identyfikator projektu , a następnie nadaj projektowi Firebase alias.

Alias ​​jest przydatny, jeśli masz wiele środowisk (produkcyjnych, testowych itp.). Jednak w tym ćwiczeniu z kodowania użyjmy po prostu aliasu default .

  1. Postępuj zgodnie z pozostałymi instrukcjami w wierszu poleceń.

5. Uruchom serwer lokalny

Jesteśmy gotowi, aby faktycznie rozpocząć pracę nad naszą aplikacją! Uruchommy naszą aplikację lokalnie!

  1. Uruchom następujące polecenie CLI Firebase:
firebase emulators:start --only hosting
  1. Twój wiersz poleceń powinien wyświetlić następującą odpowiedź:
hosting: Local server: http://localhost:5000

Używamy emulatora Firebase Hosting do lokalnego udostępniania naszej aplikacji. Aplikacja internetowa powinna być teraz dostępna pod adresem http://localhost:5000 .

  1. Otwórz aplikację pod adresem http://localhost:5000 .

Powinieneś zobaczyć swoją kopię FriendlyEats, która została połączona z Twoim projektem Firebase.

Aplikacja automatycznie połączyła się z Twoim projektem Firebase i po cichu zalogowała Cię jako anonimowy użytkownik.

img2.png

6. Zapisz dane w Cloud Firestore

W tej sekcji zapiszemy pewne dane w Cloud Firestore, abyśmy mogli wypełnić interfejs użytkownika aplikacji. Można to zrobić ręcznie za pomocą konsoli Firebase , ale zrobimy to w samej aplikacji, aby zademonstrować podstawowy zapis w Cloud Firestore.

Model danych

Dane Firestore są podzielone na kolekcje, dokumenty, pola i podkolekcje. Każdą restaurację będziemy przechowywać jako dokument w kolekcji najwyższego poziomu zwanej restaurants .

img3.png

Później będziemy przechowywać każdą recenzję w podkolekcji zwanej ratings pod każdą restauracją.

img4.png

Dodaj restauracje do Firestore

Głównym obiektem modelowym w naszej aplikacji jest restauracja. Napiszmy kod, który doda dokument restauracji do kolekcji restaurants .

  1. Z pobranych plików otwórz scripts/FriendlyEats.Data.js .
  2. Znajdź funkcję FriendlyEats.prototype.addRestaurant .
  3. Zastąp całą funkcję następującym kodem.

FriendlyEats.Data.js

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

Powyższy kod dodaje nowy dokument do kolekcji restaurants . Dane dokumentu pochodzą ze zwykłego obiektu JavaScript. Robimy to, najpierw uzyskując odniesienie do restaurants z kolekcji Cloud Firestore, a następnie add dane.

Dodajmy restauracje!

  1. Wróć do aplikacji FriendlyEats w przeglądarce i odśwież ją.
  2. Kliknij opcję Dodaj próbne dane .

Aplikacja automatycznie wygeneruje losowy zestaw obiektów restauracji, a następnie wywoła funkcję addRestaurant . Jednak nie zobaczysz jeszcze danych w swojej rzeczywistej aplikacji internetowej, ponieważ nadal musimy zaimplementować pobieranie danych (następna sekcja ćwiczeń z programowania).

Jeśli jednak przejdziesz do karty Cloud Firestore w konsoli Firebase, powinieneś teraz zobaczyć nowe dokumenty w kolekcji restaurants !

img6.png

Gratulacje, właśnie zapisałeś dane do Cloud Firestore z aplikacji internetowej!

W następnej sekcji dowiesz się, jak pobrać dane z Cloud Firestore i wyświetlić je w swojej aplikacji.

7. Wyświetl dane z Cloud Firestore

W tej sekcji dowiesz się, jak pobrać dane z Cloud Firestore i wyświetlić je w swojej aplikacji. Dwa kluczowe kroki to utworzenie zapytania i dodanie odbiornika migawek. Ten słuchacz zostanie powiadomiony o wszystkich istniejących danych pasujących do zapytania i będzie otrzymywać aktualizacje w czasie rzeczywistym.

Na początek skonstruujmy zapytanie, które będzie obsługiwało domyślną, niefiltrowaną listę restauracji.

  1. Wróć do pliku scripts/FriendlyEats.Data.js .
  2. Znajdź funkcję FriendlyEats.prototype.getAllRestaurants .
  3. Zastąp całą funkcję następującym kodem.

FriendlyEats.Data.js

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

  this.getDocumentsInQuery(query, renderer);
};

W powyższym kodzie konstruujemy zapytanie, które z najwyższego zbioru o nazwie restaurants wyszuka aż 50 restauracji ułożonych według średniej oceny (obecnie wszystkie zerowe). Po zadeklarowaniu tego zapytania przekazujemy je do metody getDocumentsInQuery() , która odpowiada za ładowanie i renderowanie danych.

Zrobimy to, dodając słuchacza migawek.

  1. Wróć do pliku scripts/FriendlyEats.Data.js .
  2. Znajdź funkcję FriendlyEats.prototype.getDocumentsInQuery .
  3. Zastąp całą funkcję następującym kodem.

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

W powyższym kodzie query.onSnapshot uruchomi wywołanie zwrotne za każdym razem, gdy nastąpi zmiana wyniku zapytania.

  • Za pierwszym razem wywoływane jest wywołanie zwrotne z całym zestawem wyników zapytania – czyli całą kolekcją restaurants z Cloud Firestore. Następnie przekazuje wszystkie poszczególne dokumenty do funkcji renderer.display .
  • Kiedy dokument zostanie usunięty, change.type jest równa removed . Zatem w tym przypadku wywołamy funkcję, która usunie restaurację z interfejsu użytkownika.

Teraz, gdy zaimplementowaliśmy obie metody, odśwież aplikację i sprawdź, czy restauracje, które widzieliśmy wcześniej w konsoli Firebase, są teraz widoczne w aplikacji. Jeśli pomyślnie ukończyłeś tę sekcję, oznacza to, że Twoja aplikacja odczytuje i zapisuje dane w Cloud Firestore!

Gdy Twoja lista restauracji ulegnie zmianie, ten słuchacz będzie aktualizował się automatycznie. Spróbuj przejść do konsoli Firebase i ręcznie usunąć restaurację lub zmienić jej nazwę – zmiany natychmiast pojawią się na Twojej stronie!

img5.png

8. Pobierz() dane

Do tej pory pokazaliśmy, jak używać onSnapshot do pobierania aktualizacji w czasie rzeczywistym; jednak nie zawsze tego chcemy. Czasami rozsądniej jest pobrać dane tylko raz.

Będziemy chcieli zaimplementować metodę, która będzie uruchamiana, gdy użytkownik kliknie konkretną restaurację w Twojej aplikacji.

  1. Wróć do swojego pliku scripts/FriendlyEats.Data.js .
  2. Znajdź funkcję FriendlyEats.prototype.getRestaurant .
  3. Zastąp całą funkcję następującym kodem.

FriendlyEats.Data.js

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

Po wdrożeniu tej metody będziesz mógł przeglądać strony każdej restauracji. Po prostu kliknij restaurację na liście, a powinna wyświetlić się strona ze szczegółami restauracji:

img1.png

Na razie nie można dodawać ocen, ponieważ musimy je wdrożyć w dalszej części zajęć z programowania.

9. Sortuj i filtruj dane

Obecnie nasza aplikacja wyświetla listę restauracji, ale użytkownik nie ma możliwości filtrowania według swoich potrzeb. W tej sekcji użyjesz zaawansowanych zapytań Cloud Firestore, aby włączyć filtrowanie.

Oto przykład prostego zapytania umożliwiającego pobranie wszystkich restauracji Dim Sum :

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

Jak sama nazwa wskazuje, metoda where() sprawi, że nasze zapytanie pobierze tylko elementy kolekcji, których pola spełniają ustawione przez nas ograniczenia. W tym przypadku pobrane zostaną tylko restauracje, których category to Dim Sum .

W naszej aplikacji użytkownik może połączyć wiele filtrów, aby utworzyć określone zapytania, np. „Pizza w San Francisco” lub „Owoce morza w Los Angeles zamówione według popularności”.

Stworzymy metodę, która zbuduje zapytanie, które będzie filtrować nasze restauracje na podstawie wielu kryteriów wybranych przez naszych użytkowników.

  1. Wróć do swojego pliku scripts/FriendlyEats.Data.js .
  2. Znajdź funkcję FriendlyEats.prototype.getFilteredRestaurants .
  3. Zastąp całą funkcję następującym kodem.

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

Powyższy kod dodaje wiele filtrów where i pojedynczą klauzulę orderBy , aby zbudować zapytanie złożone na podstawie danych wprowadzonych przez użytkownika. Nasze zapytanie zwróci teraz tylko restauracje spełniające wymagania użytkownika.

Odśwież aplikację FriendlyEats w przeglądarce, a następnie sprawdź, czy możesz filtrować według ceny, miasta i kategorii. Podczas testowania zobaczysz błędy w konsoli JavaScript swojej przeglądarki, które wyglądają następująco:

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

Te błędy wynikają z tego, że Cloud Firestore wymaga indeksów dla większości zapytań złożonych. Wymaganie indeksów w zapytaniach zapewnia szybką skalowalność Cloud Firestore.

Otwarcie linku z komunikatu o błędzie spowoduje automatyczne otwarcie interfejsu tworzenia indeksu w konsoli Firebase z wypełnionymi poprawnymi parametrami. W następnej sekcji napiszemy i wdrożymy indeksy potrzebne dla tej aplikacji.

10. Wdróż indeksy

Jeśli nie chcemy eksplorować każdej ścieżki w naszej aplikacji i podążać za każdym z linków do tworzenia indeksu, możemy łatwo wdrożyć wiele indeksów jednocześnie, korzystając z interfejsu CLI Firebase.

  1. W katalogu lokalnym pobranej aplikacji znajdziesz plik firestore.indexes.json .

Plik ten opisuje wszystkie indeksy potrzebne dla wszystkich możliwych kombinacji filtrów.

firestore.indexes.json

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

   ...

 ]
}
  1. Wdróż te indeksy za pomocą następującego polecenia:
firebase deploy --only firestore:indexes

Po kilku minutach indeksy będą aktywne, a komunikaty o błędach znikną.

11. Zapisz dane w transakcji

W tej sekcji dodamy możliwość przesyłania przez użytkowników recenzji restauracjom. Jak dotąd wszystkie nasze zapisy były atomowe i stosunkowo proste. Jeśli którykolwiek z nich popełni błąd, prawdopodobnie po prostu poprosimy użytkownika o ponowienie próby lub nasza aplikacja automatycznie ponowi próbę zapisu.

Z naszej aplikacji będzie korzystać wielu użytkowników chcących dodać ocenę restauracji, dlatego będziemy musieli skoordynować wiele odczytów i zapisów. Najpierw należy przesłać samą recenzję, następnie zaktualizować count ocen restauracji i average rating . Jeśli jeden z nich zawiedzie, ale drugi nie, pozostaniemy w niespójnym stanie, w którym dane w jednej części naszej bazy danych nie będą zgodne z danymi w innej.

Na szczęście Cloud Firestore zapewnia funkcjonalność transakcji, która pozwala nam wykonywać wielokrotne odczyty i zapisy w jednej niepodzielnej operacji, zapewniając spójność naszych danych.

  1. Wróć do swojego pliku scripts/FriendlyEats.Data.js .
  2. Znajdź funkcję FriendlyEats.prototype.addRating .
  3. Zastąp całą funkcję następującym kodem.

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

W powyższym bloku uruchamiamy transakcję mającą na celu aktualizację wartości liczbowych avgRating i numRatings w dokumencie restauracji. Jednocześnie dodajemy nową rating do podzbioru ratings .

12. Zabezpiecz swoje dane

Na początku tego ćwiczenia z kodowania ustawiliśmy reguły bezpieczeństwa naszej aplikacji tak, aby całkowicie otwierały bazę danych na dowolny odczyt i zapis. W prawdziwej aplikacji chcielibyśmy ustawić znacznie bardziej szczegółowe reguły, aby zapobiec niepożądanemu dostępowi do danych lub ich modyfikacjom.

  1. W sekcji Kompilacja konsoli Firebase kliknij Baza danych Firestore .
  2. Kliknij zakładkę Reguły w sekcji Cloud Firestore (lub kliknij tutaj, aby przejść bezpośrednio tam).
  3. Zastąp wartości domyślne poniższymi regułami, a następnie kliknij opcję Publikuj .

zasady Firestore

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

Reguły te ograniczają dostęp, aby zapewnić, że klienci będą wprowadzać tylko bezpieczne zmiany. Na przykład:

  • Aktualizacje dokumentu restauracji mogą zmienić jedynie oceny, a nie nazwę lub inne niezmienne dane.
  • Oceny można tworzyć tylko wtedy, gdy identyfikator użytkownika jest zgodny z identyfikatorem zalogowanego użytkownika, co zapobiega podszywaniu się.

Alternatywnie do korzystania z konsoli Firebase możesz użyć interfejsu wiersza polecenia Firebase, aby wdrożyć reguły w projekcie Firebase. Plik firestore.rules w katalogu roboczym zawiera już powyższe reguły. Aby wdrożyć te reguły z lokalnego systemu plików (zamiast korzystania z konsoli Firebase), uruchom następujące polecenie:

firebase deploy --only firestore:rules

13. Wniosek

Podczas tych zajęć z programowania nauczyłeś się wykonywać podstawowe i zaawansowane operacje odczytu i zapisu za pomocą Cloud Firestore, a także jak zabezpieczyć dostęp do danych za pomocą reguł bezpieczeństwa. Pełne rozwiązanie można znaleźć w repozytorium Quickstarts-js .

Aby dowiedzieć się więcej o Cloud Firestore, odwiedź następujące zasoby:

14. [Opcjonalnie] Wymuś kontrolę aplikacji

Firebase App Check zapewnia ochronę, pomagając weryfikować niepożądany ruch do Twojej aplikacji i zapobiegać mu. Na tym etapie zabezpieczysz dostęp do swoich usług, dodając App Check za pomocą reCAPTCHA Enterprise .

Najpierw musisz włączyć Sprawdzanie aplikacji i reCaptcha.

Włączanie reCaptcha Enterprise

  1. W konsoli Cloud znajdź i wybierz reCaptcha Enterprise w obszarze Bezpieczeństwo.
  2. Włącz usługę zgodnie z monitem i kliknij opcję Utwórz klucz .
  3. Wprowadź nazwę wyświetlaną zgodnie z monitem i wybierz opcję Witryna jako typ platformy.
  4. Dodaj wdrożone adresy URL do listy domen i upewnij się, że opcja „Użyj testu pola wyboru” nie jest zaznaczona .
  5. Kliknij opcję Utwórz klucz i przechowuj wygenerowany klucz w bezpiecznym miejscu. Będziesz go potrzebować w dalszej części tego kroku.

Włączanie sprawdzania aplikacji

  1. W konsoli Firebase znajdź sekcję Kompilacja w lewym panelu.
  2. Kliknij opcję Sprawdzanie aplikacji , a następnie kliknij przycisk Rozpocznij (lub przekieruj bezpośrednio do konsoli ).
  3. Kliknij opcję Zarejestruj i po wyświetleniu monitu wprowadź klucz reCaptcha Enterprise, a następnie kliknij przycisk Zapisz .
  4. W widoku interfejsów API wybierz opcję Pamięć i kliknij opcję Wymuszaj . Zrób to samo dla Cloud Firestore .

Kontrola aplikacji powinna zostać teraz wymuszona! Odśwież aplikację i spróbuj utworzyć/wyświetlić restaurację. Powinieneś otrzymać komunikat o błędzie:

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

Oznacza to, że Sprawdzanie aplikacji domyślnie blokuje niezweryfikowane żądania. Teraz dodajmy weryfikację do Twojej aplikacji.

Przejdź do pliku FriendlyEats.View.js i zaktualizuj funkcję initAppCheck oraz dodaj klucz reCaptcha, aby zainicjować sprawdzanie aplikacji.

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.
  );
};

Instancja appCheck jest inicjowana za pomocą ReCaptchaEnterpriseProvider z Twoim kluczem, a isTokenAutoRefreshEnabled umożliwia automatyczne odświeżanie tokenów w Twojej aplikacji.

Aby włączyć testowanie lokalne, znajdź sekcję, w której aplikacja jest inicjowana w pliku FriendlyEats.js i dodaj następujący wiersz do funkcji FriendlyEats.prototype.initAppCheck :

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

Spowoduje to zarejestrowanie tokenu debugowania w konsoli lokalnej aplikacji internetowej, podobnie jak:

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.

Teraz przejdź do widoku aplikacji sprawdzania aplikacji w konsoli Firebase.

Kliknij rozszerzone menu i wybierz opcję Zarządzaj tokenami debugowania .

Następnie kliknij Dodaj token debugowania i wklej token debugowania z konsoli zgodnie z monitem.

Gratulacje! Sprawdzanie aplikacji powinno teraz działać w Twojej aplikacji.