Ćwiczenie z programowania w Cloud Firestore

1. Omówienie

Cele

Dzięki tym ćwiczeniom w Codelabs utworzysz aplikację internetową z rekomendacjami restauracji wykorzystywaną przez Cloud Firestore.

Czego się nauczysz

• Odczytywanie i zapisywanie danych w Cloud Firestore z poziomu aplikacji internetowej
• Nasłuchuj zmian w danych Cloud Firestore w czasie rzeczywistym
• Zabezpieczanie danych Cloud Firestore za pomocą reguł zabezpieczeń i uwierzytelniania Firebase
• Zapisywanie złożonych zapytań Cloud Firestore

Czego potrzebujesz

Zanim rozpoczniesz to ćwiczenia w programie, sprawdź, czy masz zainstalowane:

• npm, który zwykle zawiera Node.js – zalecamy korzystanie z węzła w wersji 16 lub nowszej
• wybrany edytor IDE/tekst, np. WebStorm, VS Code lub Sublime;

Uwaga: chociaż środowisko Node.js jest wymagane do uruchamiania i testowania aplikacji w fazie programowania, ostateczna aplikacja nie będzie zależna od środowiska Node.js.

2. Tworzenie i konfigurowanie projektu Firebase

Tworzenie projektu Firebase

1. W konsoli Firebase kliknij Dodaj projekt, a potem nazwij projekt Firebase FriendsEats.

Zapamiętaj identyfikator projektu Firebase.

2. Kliknij Utwórz projekt.

Ważne: projekt Firebase będzie nosił nazwę friendlyEats, ale Firebase automatycznie przypisze mu unikalny identyfikator w formacie friendeats-1234. Ten unikalny identyfikator jest identyfikowany przez projekt (również w interfejsie wiersza poleceń), a friendlyEats to po prostu wyświetlana nazwa.

Aplikacja, którą utworzymy, korzysta z kilku usług Firebase dostępnych w internecie:

• Uwierzytelnianie Firebase do łatwej identyfikacji użytkowników.
• Cloud Firestore, aby zapisywać uporządkowane dane w chmurze i otrzymywać natychmiastowe powiadomienia o aktualizacji danych.
• Hosting Firebase do hostowania i wyświetlania zasobów statycznych.

Na potrzeby tego ćwiczenia w Codelabs skonfigurowaliśmy już Hosting Firebase. Jeśli jednak korzystasz z Uwierzytelniania Firebase i Cloud Firestore, pokażemy Ci, jak konfigurować i włączać usługi za pomocą konsoli Firebase.

Włącz anonimowe uwierzytelnianie

Chociaż uwierzytelnianie nie jest głównym tematem tego ćwiczenia z programowania, ważne jest, by w aplikacji umieścić jakąś formę uwierzytelniania. Używamy logowania anonimowego, co oznacza, że użytkownik jest zalogowany dyskretnie i nie jest o to pytany.

Musisz włączyć Logowanie anonimowe.

1. W konsoli Firebase w panelu nawigacyjnym po lewej stronie znajdź sekcję Kompilacja.
2. Kliknij Uwierzytelnianie, a następnie kartę Metoda logowania (lub kliknij tutaj, aby przejść bezpośrednio do tej sekcji).
3. Włącz Anonimowego dostawcę logowania, a następnie kliknij Zapisz.

Dzięki temu aplikacja będzie mogła dyskretnie logować użytkowników, którzy korzystają z aplikacji internetowej. Więcej informacji znajdziesz w dokumentacji dotyczącej uwierzytelniania anonimowego.

Włączanie Cloud Firestore

Aplikacja używa Cloud Firestore do zapisywania i odbierania informacji o restauracjach oraz ocen.

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

Dostęp do danych w Cloud Firestore jest kontrolowany przez reguły zabezpieczeń. Reguły omówimy bardziej szczegółowo w dalszej części tego ćwiczenia z programowania, ale najpierw musimy ustalić podstawowe reguły dotyczące naszych danych. Na karcie Reguły w konsoli Firebase dodaj poniższe reguły i kliknij Opublikuj.

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 reguły ograniczają dostęp do danych tylko zalogowanym użytkownikom, co uniemożliwia nieuwierzytelnionym użytkownikom odczytywanie i zapisy. To lepsze rozwiązanie niż zezwalanie na dostęp publiczny, ale nadal nie jest bezpieczne. Ulepszymy te reguły później w ramach ćwiczeń z programowania.

3. Pobieranie przykładowego kodu

Skopiuj repozytorium GitHub, korzystając z wiersza poleceń:

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

Przykładowy kod powinien zostać skopiowany do katalogu 📁friendlyeats-web. Pamiętaj, aby od tej pory uruchamiać wszystkie polecenia z tego katalogu:

cd friendlyeats-web/vanilla-js

Importowanie aplikacji startowej

W swoim IDE (WebStorm, Atom, Sublime, Visual Studio Code...) otwórz lub zaimportuj katalog 📁friendlyeats-web. Ten katalog zawiera kod początkowy do ćwiczenia w Codelabs obejmującego jeszcze niedziałającą aplikację z rekomendacjami restauracji. Wykorzystamy go w trakcie tego ćwiczenia z programowania, więc wkrótce trzeba będzie edytować kod w tym katalogu.

4. Instalowanie interfejsu wiersza poleceń Firebase

Interfejs wiersza poleceń Firebase (CLI) pozwala udostępniać aplikację internetową lokalnie i wdrażać ją w Hostingu Firebase.

Uwaga: aby zainstalować interfejs wiersza poleceń, musisz zainstalować interfejs npm, który zwykle zawiera NodeJS.

1. Zainstaluj interfejs wiersza poleceń, uruchamiając to polecenie npm:

npm -g install firebase-tools

Nie działa? Może być konieczna zmiana uprawnień npm.

2. Sprawdź, czy interfejs wiersza poleceń został prawidłowo zainstalowany, uruchamiając to polecenie:

firebase --version

Upewnij się, że interfejs wiersza poleceń Firebase jest w wersji 7.4.0 lub nowszej.

3. Autoryzuj interfejs wiersza poleceń Firebase, uruchamiając następujące polecenie:

firebase login

Skonfigurowaliśmy szablon aplikacji internetowej tak, aby pobierał z lokalnego katalogu i plików jej konfigurację na potrzeby Hostingu Firebase. Aby to zrobić, musisz powiązać aplikację z projektem Firebase.

4. Upewnij się, że wiersz poleceń ma dostęp do lokalnego katalogu aplikacji.
5. Powiąż aplikację z projektem Firebase, uruchamiając to polecenie:

firebase use --add

6. Gdy pojawi się odpowiedni komunikat, wybierz identyfikator projektu, a potem nadaj projektowi Firebase alias.

Alias jest przydatny, jeśli masz wiele środowisk (produkcyjnych, przejściowych itp.). Jednak w tym ćwiczeniu z programowania użyjemy aliasu default.

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

5. Uruchamianie serwera lokalnego

Możemy zaczynać pracę nad naszą aplikacją! Uruchommy naszą aplikację lokalnie!

1. Uruchom to polecenie interfejsu wiersza poleceń Firebase:

firebase emulators:start --only hosting

2. W wierszu poleceń powinna pojawić się odpowiedź:

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

Do udostępniania naszej aplikacji lokalnie używamy emulatora Hostingu Firebase. Aplikacja internetowa powinna być teraz dostępna w adresie http://localhost:5000.

3. Otwórz aplikację na stronie http://localhost:5000.

Powinna wyświetlić się kopia pliku FriendsEats, która została połączona z Twoim projektem Firebase.

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

6. Zapisywanie danych w Cloud Firestore

W tej sekcji zapiszemy pewne dane w Cloud Firestore, co pozwoli nam wypełnić interfejs użytkownika aplikacji. Można to zrobić ręcznie za pomocą konsoli Firebase, ale wykorzystamy 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ę zapiszemy jako dokument w kolekcji najwyższego poziomu o nazwie restaurants.

Później każdą opinię zapiszemy w podkolekcji o nazwie ratings pod każdą restauracją.

Wskazówka: aby dowiedzieć się więcej o modelu danych Firestore, zapoznaj się z informacjami o dokumentach i kolekcjach w dokumentacji.

Dodawanie restauracji do Firestore

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

1. Z pobranych plików otwórz scripts/FriendlyEats.Data.js.
2. Odszukaj funkcję FriendlyEats.prototype.addRestaurant.
3. Zastąp całą funkcję poniższym kodem.

PrzyjaznyEats.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. Aby to zrobić, najpierw uzyskujemy odwołanie do kolekcji restaurants Cloud Firestore, a następnie addzawierające dane.

Dodajmy restauracje.

1. Wróć do aplikacji FriendsEats w przeglądarce i odśwież ją.
2. Kliknij Dodaj pozorne dane.

Aplikacja automatycznie wygeneruje losowy zbiór obiektów restauracji, a następnie wywoła funkcję addRestaurant. Jednak dane nie będą jeszcze widoczne w rzeczywistej aplikacji internetowej, ponieważ musimy zaimplementować pobieranie danych (następna sekcja ćwiczeń z programowania).

Jeśli jednak otworzysz w konsoli Firebase kartę Cloud Firestore, w kolekcji restaurants powinny pojawić się nowe dokumenty.

Gratulacje! Udało Ci się właśnie zapisać dane z aplikacji internetowej w Cloud Firestore.

W następnej sekcji dowiesz się, jak pobrać dane z Cloud Firestore i wyświetlić je w 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 detektora zrzutów. Ten detektor będzie powiadamiany o wszystkich istniejących danych pasujących do zapytania i będzie otrzymywać aktualizacje w czasie rzeczywistym.

Najpierw utwórzmy zapytanie, które wyświetli domyślną, niefiltrowaną listę restauracji.

1. Wróć do pliku scripts/FriendlyEats.Data.js.
2. Odszukaj funkcję FriendlyEats.prototype.getAllRestaurants.
3. Zastąp całą funkcję poniższym kodem.

PrzyjaznyEats.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 tworzymy zapytanie, które pobiera maksymalnie 50 restauracji ze zbioru najwyższego poziomu o nazwie restaurants, które są uporządkowane według średniej oceny (obecnie wszystkie są zerowe). Po zadeklarowaniu tego zapytania przekazujemy je do metody getDocumentsInQuery(), która odpowiada za wczytywanie i renderowanie danych.

Zrobimy to, dodając detektor zrzutu.

1. Wróć do pliku scripts/FriendlyEats.Data.js.
2. Odszukaj funkcję FriendlyEats.prototype.getDocumentsInQuery.
3. Zastąp całą funkcję poniższym kodem.

PrzyjaznyEats.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 funkcja query.onSnapshot będzie wywoływać wywołanie zwrotne za każdym razem, gdy w wyniku zapytania zaistnieje zmiana.

• Za pierwszym razem wywołanie zwrotne jest aktywowane wraz 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.
• Po usunięciu dokumentu change.type równa się removed. W tym przypadku wywołamy funkcję, która usuwa restaurację z interfejsu.

Po zaimplementowaniu obu metod odśwież aplikację i sprawdź, czy restauracje, które widzieliśmy wcześniej w konsoli Firebase, są teraz widoczne w aplikacji. Jeśli udało Ci się wykonać tę sekcję, oznacza to, że aplikacja odczytuje i zapisuje dane w Cloud Firestore.

Gdy lista restauracji się zmieni, detektor będzie się aktualizować automatycznie. Otwórz konsolę Firebase i ręcznie usuń restaurację lub zmień jej nazwę – zmiany pojawią się od razu w Twojej witrynie.

Uwaga: przy użyciu metody Query.get() można też pobrać dokumenty z Cloud Firestore, zamiast nasłuchiwać aktualizacji w czasie rzeczywistym.

8. Dane Get()

Do tej pory pokazaliśmy, jak za pomocą onSnapshot pobierać aktualizacje w czasie rzeczywistym. ale nie zawsze jest to zgodne z oczekiwaniami. Czasami lepiej pobrać dane tylko raz.

Chcemy wdrożyć metodę, która jest wywoływana, gdy użytkownik kliknie w Twojej aplikacji określoną restaurację.

1. Wróć do pliku scripts/FriendlyEats.Data.js.
2. Odszukaj funkcję FriendlyEats.prototype.getRestaurant.
3. Zastąp całą funkcję poniższym kodem.

PrzyjaznyEats.Data.js

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

Po zaimplementowaniu tej metody możesz wyświetlać strony każdej restauracji. Wystarczy kliknąć restaurację na liście, aby wyświetlić stronę z informacjami o niej:

Na razie nie możesz dodawać ocen, ponieważ będziemy musieli zaimplementować tę funkcję w późniejszym czasie w ramach ćwiczeń z programowania.

9. Sortowanie i filtrowanie danych

Obecnie aplikacja wyświetla listę restauracji, ale użytkownik nie ma możliwości filtrowania według potrzeb. W tej sekcji włączysz filtrowanie przy użyciu zaawansowanych zapytań Cloud Firestore.

Oto przykład prostego zapytania, które pozwala pobrać wszystkie restauracje (Dim Sum):

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

Jak sama nazwa wskazuje, metoda where() powoduje, że zapytanie pobiera tylko elementy kolekcji, których pola spełniają ustawione przez nas ograniczenia. Pobierze ona tylko te restauracje, w których category ma wartość Dim Sum.

W naszej aplikacji użytkownik może połączyć kilka filtrów, aby utworzyć konkretne zapytania, takie jak „pizza w Krakowie”. lub „Owoce morza w Los Angeles wg popularności”.

Utworzymy metodę pozwalającą tworzyć zapytanie filtrujące nasze restauracje na podstawie wielu kryteriów wybranych przez użytkowników.

1. Wróć do pliku scripts/FriendlyEats.Data.js.
2. Odszukaj funkcję FriendlyEats.prototype.getFilteredRestaurants.
3. Zastąp całą funkcję poniższym kodem.

PrzyjaznyEats.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 kilka filtrów where i pojedynczą klauzulę orderBy, aby na podstawie danych wejściowych użytkownika utworzyć zapytanie złożone. Nasze zapytanie zwróci teraz tylko te restauracje, które spełniają wymagania użytkownika.

Odśwież aplikację FriendsEats w przeglądarce, a potem sprawdź, czy można ją filtrować według ceny, miasta i kategorii. Podczas testowania w konsoli JavaScript w przeglądarce zobaczysz takie błędy:

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 w przypadku większości zapytań złożonych. Dzięki wymaganiu indeksów w zapytaniach usługa Cloud Firestore działa szybko na dużą skalę.

Otwarcie linku z komunikatu o błędzie spowoduje automatyczne otwarcie interfejsu tworzenia indeksów w konsoli Firebase z wpisanymi prawidłowymi parametrami. W następnej sekcji napiszemy i wdrożymy indeksy potrzebne tej aplikacji.

10. Wdrażanie indeksów

Jeżeli nie chcemy poznawać każdej ścieżki w aplikacji i korzystać z linków tworzenia indeksów, możemy łatwo wdrożyć wiele indeksów jednocześnie za pomocą interfejsu wiersza poleceń Firebase.

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

Ten plik opisuje wszystkie indeksy wymagane dla wszystkich możliwych kombinacji filtrów.

firestore.indexes.json

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

   ...

 ]
}

2. Wdróż te indeksy za pomocą tego polecenia:

firebase deploy --only firestore:indexes

Po kilku minutach indeksy zostaną uruchomione, a komunikaty o błędach znikną.

Wskazówka: więcej informacji o indeksach w Cloud Firestore znajdziesz w dokumentacji.

11. Zapisywanie danych w transakcji

W tej sekcji dodamy możliwość przesyłania opinii o restauracjach przez użytkowników. Do tej pory wszystkie nasze teksty były bardzo szczegółowe i stosunkowo proste. Jeśli w którymś przypadku nastąpi błąd, prawdopodobnie poprosimy użytkownika o ponowne wykonanie próby lub nasza aplikacja automatycznie ponowi próbę zapisu.

Wielu użytkowników będzie chciało dodać ocenę restauracji, dlatego będziemy musieli przeprowadzić kilka spotkań. Najpierw musisz przesłać opinię, a potem musisz zaktualizować ocenę restauracji count i average rating. Jeśli w jednej z tych usług wystąpi błąd, a w drugiej nie, powstanie niespójność – dane w jednej części bazy danych nie będą zgodne z danymi w innej.

Na szczęście Cloud Firestore udostępnia funkcję transakcji, która pozwala na wykonywanie wielu odczytów i zapisów w ramach jednej nieporządkowej operacji, co zapewnia spójność danych.

1. Wróć do pliku scripts/FriendlyEats.Data.js.
2. Odszukaj funkcję FriendlyEats.prototype.addRating.
3. Zastąp całą funkcję poniższym kodem.

PrzyjaznyEats.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ę, by zaktualizować wartości liczbowe avgRating i numRatings w dokumencie dotyczącym restauracji. W tym samym czasie dodajemy nową kolekcję rating do podkolekcji ratings.

Uwaga: dodawanie ocen jest dobrym przykładem użycia transakcji w przypadku tego konkretnego ćwiczenia z programowania. Jednak w przypadku aplikacji produkcyjnej należy obliczać średnią ocenę na zaufanym serwerze, by uniknąć manipulowania użytkownikami. Najlepiej jest napisać dokument oceny bezpośrednio z klienta, a potem użyć Cloud Functions do zaktualizowania nowej średniej oceny restauracji.

Ostrzeżenie: gdy transakcja na serwerze zakończy się niepowodzeniem, wywołanie zwrotne jest też wielokrotnie wykonywane. Nigdy nie umieszczaj logiki, która zmienia stan aplikacji, wewnątrz wywołania zwrotnego transakcji.

12. Zabezpieczanie danych

Na początku tego ćwiczenia w programowaniu ustanowiliśmy reguły zabezpieczeń aplikacji tak, aby całkowicie otworzyć bazę danych dla każdego odczytu lub zapisu. W praktyce powinniśmy ustawić znacznie bardziej szczegółowe reguły, aby zapobiegać niepożądanym dostępom do danych lub ich modyfikacjom.

1. W sekcji Tworzenie konsoli Firebase kliknij Baza danych Firestore.
2. Kliknij kartę Reguły w sekcji Cloud Firestore (lub kliknij tutaj, aby przejść bezpośrednio do tej sekcji).
3. Zastąp wartości domyślne poniższymi regułami, a potem kliknij Opublikuj.

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

Te reguły ograniczają dostęp, aby mieć pewność, że klienci wprowadzają tylko bezpieczne zmiany. Przykład:

• Zmiany w dokumencie dotyczącym restauracji mogą powodować tylko zmianę ocen, a nie nazwy ani innych stałych danych.
• Oceny można tworzyć tylko wtedy, gdy identyfikator użytkownika jest zgodny z zalogowanym użytkownikiem. Zapobiega to podszywaniu się.

Możesz też skorzystać z konsoli Firebase, aby wdrożyć reguły w projekcie Firebase za pomocą interfejsu wiersza poleceń Firebase. Plik firestore.rules w katalogu roboczym zawiera już powyższe reguły. Aby wdrożyć te reguły w lokalnym systemie plików (a nie w konsoli Firebase), uruchom to polecenie:

firebase deploy --only firestore:rules

Ważne: więcej informacji o regułach zabezpieczeń znajdziesz w dokumentacji reguł zabezpieczeń.

13. Podsumowanie

Dzięki tym ćwiczeniom w programie omówiliśmy, jak wykonywać podstawowe i zaawansowane odczyty oraz zapisy w Cloud Firestore, a także jak zabezpieczyć dostęp do danych za pomocą reguł zabezpieczeń. Pełne rozwiązanie znajdziesz w repozytoriumquickstarts-js.

Więcej informacji o Cloud Firestore znajdziesz w tych materiałach:

• Wprowadzenie do Cloud Firestore
• Wybór struktury danych
• Próbki sieciowe Cloud Firestore

14. [Opcjonalnie] Egzekwuj za pomocą Sprawdzania aplikacji

Sprawdzanie aplikacji Firebase zapewnia ochronę, pomagając w weryfikowaniu niechcianego ruchu w aplikacji i zapobieganiu mu. W tym kroku zabezpieczysz dostęp do swoich usług, dodając Sprawdzanie aplikacji za pomocą reCAPTCHA Enterprise.

Zależy to od ukończenia poprzednich kroków. Upewnij się, że interfejs FriendsEats działa lokalnie za pomocą emulatorów lub jest wdrożony w usługach Firebase.

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

Włączanie reCaptcha Enterprise

1. W sekcji Zabezpieczenia w konsoli Cloud znajdź i wybierz reCaptcha Enterprise.
2. Włącz usługę zgodnie z instrukcjami i kliknij Utwórz klucz.
3. Wpisz wyświetlaną nazwę zgodnie z wyświetlaną prośbą i jako typ platformy wybierz Witryna.
4. Dodaj wdrożone adresy URL do listy domen i upewnij się, że jest zaznaczone pole wyboru „Użyj testu zabezpieczającego”. ta opcja jest odznaczona.
5. Kliknij Utwórz klucz i przechowuj wygenerowany klucz w bezpiecznym miejscu. Będzie Ci ona potrzebna na późniejszym etapie.

Włączanie Sprawdzania aplikacji

1. W konsoli Firebase znajdź w panelu po lewej stronie sekcję Kompilacja.
2. Kliknij Sprawdzanie aplikacji, a następnie przycisk Rozpocznij (lub przekieruj bezpośrednio do konsoli).
3. Kliknij Zarejestruj i wpisz klucz reCaptcha Enterprise, gdy pojawi się taka prośba, a potem kliknij Zapisz.
4. W widoku interfejsów API wybierz Miejsce na dane i kliknij Egzekwuj. Wykonaj te same czynności z Cloud Firestore.

Sprawdzanie aplikacji powinno być teraz egzekwowane. Odśwież aplikację i spróbuj utworzyć lub wyświetlić restaurację. Powinien pojawić się 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 przy użyciu klucza ReCaptchaEnterpriseProvider za pomocą Twojego klucza, a isTokenAutoRefreshEnabled umożliwia automatyczne odświeżanie tokenów w aplikacji.

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

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

Spowoduje to zarejestrowanie tokena debugowania w konsoli lokalnej aplikacji internetowej podobnego do:

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 w konsoli Firebase otwórz widok aplikacji w sekcji Sprawdzanie aplikacji.

Kliknij rozszerzone menu i wybierz Zarządzaj tokenami debugowania.

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

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