1. Przegląd
Cele
Podczas tych zajęć z programowania utworzysz aplikację internetową z rekomendacjami restauracji obsługiwaną przez Cloud Firestore .
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
- W konsoli Firebase kliknij Dodaj projekt , a następnie nadaj projektowi Firebase nazwę FriendlyEats .
Zapamiętaj identyfikator projektu dla swojego projektu Firebase.
- 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.
- W konsoli Firebase znajdź sekcję Kompilacja w lewym panelu nawigacyjnym.
- Kliknij opcję Uwierzytelnianie , a następnie kliknij kartę Metoda logowania (lub kliknij tutaj , aby przejść bezpośrednio tam).
- Włącz dostawcę logowania anonimowego , a następnie kliknij Zapisz .
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.
- Zainstaluj interfejs CLI, uruchamiając następującą komendę npm:
npm -g install firebase-tools
- 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.
- 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.
- Upewnij się, że wiersz poleceń uzyskuje dostęp do lokalnego katalogu aplikacji.
- Powiąż swoją aplikację z projektem Firebase, uruchamiając następujące polecenie:
firebase use --add
- 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
.
- 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!
- Uruchom następujące polecenie CLI Firebase:
firebase emulators:start --only hosting
- 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 .
- 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.
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
.
Później będziemy przechowywać każdą recenzję w podkolekcji zwanej ratings
pod każdą restauracją.
Dodaj restauracje do Firestore
Głównym obiektem modelowym w naszej aplikacji jest restauracja. Napiszmy kod, który doda dokument restauracji do kolekcji restaurants
.
- Z pobranych plików otwórz
scripts/FriendlyEats.Data.js
. - Znajdź funkcję
FriendlyEats.prototype.addRestaurant
. - 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!
- Wróć do aplikacji FriendlyEats w przeglądarce i odśwież ją.
- 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
!
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.
- Wróć do pliku
scripts/FriendlyEats.Data.js
. - Znajdź funkcję
FriendlyEats.prototype.getAllRestaurants
. - 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.
- Wróć do pliku
scripts/FriendlyEats.Data.js
. - Znajdź funkcję
FriendlyEats.prototype.getDocumentsInQuery
. - 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 funkcjirenderer.display
. - Kiedy dokument zostanie usunięty,
change.type
jest równaremoved
. 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!
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.
- Wróć do swojego pliku
scripts/FriendlyEats.Data.js
. - Znajdź funkcję
FriendlyEats.prototype.getRestaurant
. - 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:
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.
- Wróć do swojego pliku
scripts/FriendlyEats.Data.js
. - Znajdź funkcję
FriendlyEats.prototype.getFilteredRestaurants
. - 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.
- 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" } ] }, ... ] }
- 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.
- Wróć do swojego pliku
scripts/FriendlyEats.Data.js
. - Znajdź funkcję
FriendlyEats.prototype.addRating
. - 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.
- W sekcji Kompilacja konsoli Firebase kliknij Baza danych Firestore .
- Kliknij zakładkę Reguły w sekcji Cloud Firestore (lub kliknij tutaj, aby przejść bezpośrednio tam).
- 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
- W konsoli Cloud znajdź i wybierz reCaptcha Enterprise w obszarze Bezpieczeństwo.
- Włącz usługę zgodnie z monitem i kliknij opcję Utwórz klucz .
- Wprowadź nazwę wyświetlaną zgodnie z monitem i wybierz opcję Witryna jako typ platformy.
- Dodaj wdrożone adresy URL do listy domen i upewnij się, że opcja „Użyj testu pola wyboru” nie jest zaznaczona .
- 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
- W konsoli Firebase znajdź sekcję Kompilacja w lewym panelu.
- Kliknij opcję Sprawdzanie aplikacji , a następnie kliknij przycisk Rozpocznij (lub przekieruj bezpośrednio do konsoli ).
- Kliknij opcję Zarejestruj i po wyświetleniu monitu wprowadź klucz reCaptcha Enterprise, a następnie kliknij przycisk Zapisz .
- 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.