1. Omówienie
Cele
W tym laboratorium programistycznym utworzysz internetową aplikację do rekomendowania restauracji, która korzysta z Cloud Firestore.
Czego się nauczysz
- Odczytywanie i zapisywanie danych w Cloud Firestore z aplikacji internetowej
- Słuchanie zmian w danych Cloud Firestore w czasie rzeczywistym
- Zabezpieczanie danych w Cloud Firestore za pomocą uwierzytelniania i reguł zabezpieczeń Firebase
- Tworzenie złożonych zapytań Cloud Firestore
Czego potrzebujesz
Zanim zaczniesz korzystać z tego laboratorium kodu, upewnij się, że masz zainstalowane:
2. Tworzenie i konfigurowanie projektu Firebase
Tworzenie projektu Firebase
- W konsoli Firebase kliknij Dodaj projekt, a potem nadaj projektowi Firebase nazwę FriendlyEats.
Zapamiętaj identyfikator projektu Firebase.
- Kliknij Utwórz projekt.
Aplikacja, którą zamierzamy tworzyć, korzysta z kilku usług Firebase dostępnych w internecie:
- Uwierzytelnianie Firebase do łatwego identyfikowania użytkowników
- Cloud Firestore do zapisywania ustrukturyzowanych danych w chmurze i otrzymywania natychmiastowych powiadomień o ich aktualizacji.
- Hosting Firebase do hostowania i przesyłania zasobów statycznych.
W tym przypadku Hosting Firebase jest już skonfigurowany. W przypadku Firebase Auth i Cloud Firestore poprowadzimy Cię przez konfigurowanie i włączanie tych usług za pomocą konsoli Firebase.
Włączanie uwierzytelniania anonimowego
Chociaż uwierzytelnianie nie jest tematem tego Codelab, warto zastosować w aplikacji jakąś formę uwierzytelniania. Użyjemy logowania anonimowego, co oznacza, że użytkownik będzie logowany bez wyświetlania prośby.
Musisz włączyć logowanie anonimowe.
- W konsoli Firebase na pasku nawigacyjnym po lewej stronie odszukaj sekcję Kompilacja.
- Kliknij Uwierzytelnianie, a następnie kartę Metoda logowania (lub kliknij tutaj, aby przejść bezpośrednio do tej karty).
- Włącz dostawcę logowania Anonimowy, a następnie kliknij Zapisz.
Umożliwi to aplikacji automatyczne logowanie użytkowników, gdy ci otworzą aplikację internetową. Aby dowiedzieć się więcej, przeczytaj dokumentację dotyczącą uwierzytelniania anonimowego.
Włączanie Cloud Firestore
Aplikacja korzysta z Cloud Firestore do zapisywania i odbierania informacji o restauracji oraz ocen.
Musisz włączyć Cloud Firestore. W konsoli Firebase w sekcji Kompilacja 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ń. Więcej o regułach dowiesz się później w tym ćwiczeniu, ale na początek musimy ustawić kilka podstawowych reguł dotyczących naszych danych. Na karcie Reguły w konsoli Firebase dodaj te reguły, a potem kliknij Opublikuj.
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;
}
}
}
}
Omówimy te reguły i sposób ich działania w ramach tego ćwiczenia.
3. Pobieranie przykładowego kodu
Sklonuj repozytorium GitHub z poziomu wiersza poleceń:
git clone https://github.com/firebase/friendlyeats-web
Przykładowy kod powinien zostać sklonowany do katalogu 📁friendlyeats-web. Od teraz wszystkie polecenia musisz wykonywać z tego katalogu:
cd friendlyeats-web/vanilla-js
Importowanie aplikacji startowej
W swojej IDE (WebStorm, Atom, Sublime, Visual Studio Code itp.) otwórz lub zaimportuj katalog 📁friendlyeats-web. Ten katalog zawiera kod początkowy tego ćwiczenia, który składa się z niedziałającej jeszcze aplikacji do rekomendowania restauracji. W ramach tego ćwiczenia sprawimy, że będzie ona działać, więc wkrótce będziesz musiał/a edytować kod w tym katalogu.
4. Instalowanie interfejsu wiersza poleceń Firebase
Interfejs wiersza poleceń Firebase (CLI) umożliwia obsługę aplikacji internetowej lokalnie i wdrażanie jej w Hostingu Firebase.
- Zainstaluj interfejs wiersza poleceń, wykonując to polecenie npm:
npm -g install firebase-tools
- Aby sprawdzić, czy interfejs wiersza poleceń został prawidłowo zainstalowany, uruchom to polecenie:
firebase --version
Upewnij się, że wersja wiersza poleceń Firebase to 7.4.0 lub nowsza.
- Autoryzuj interfejs wiersza poleceń Firebase, uruchamiając to polecenie:
firebase login
Skonfigurowaliśmy szablon aplikacji internetowej, aby pobrać konfigurację Twojej aplikacji w Hostingu Firebase z katalogu lokalnego i plików aplikacji. Aby to zrobić, musimy powiązać Twoją aplikację z projektem Firebase.
- Upewnij się, że wiersz poleceń ma dostęp do katalogu lokalnego aplikacji.
- Połącz aplikację z projektem Firebase, uruchamiając to polecenie:
firebase use --add
- Gdy pojawi się taka prośba, wybierz identyfikator projektu, a potem nadaj projektowi Firebase alias.
Alias jest przydatny, jeśli masz wiele środowisk (produkcyjnych, przejściowych itp.). W tym ćwiczeniu użyjemy jednak aliasu default.
- Postępuj zgodnie z dalszymi instrukcjami wyświetlanymi w wierszu poleceń.
5. Uruchamianie serwera lokalnego
Jesteśmy gotowi do rozpoczęcia pracy nad aplikacją. Uruchom aplikację lokalnie.
- Uruchom to polecenie w wierszu poleceń Firebase:
firebase emulators:start --only hosting
- W wierszu poleceń powinna pojawić się taka odpowiedź:
hosting: Local server: http://localhost:5000
Do obsługi aplikacji lokalnie używamy emulatora Hostingu Firebase. Aplikacja internetowa powinna być teraz dostępna pod adresem http://localhost:5000.
- Otwórz aplikację pod adresem http://localhost:5000.
Powinieneś/powinnaś zobaczyć swoją kopię aplikacji FriendlyEats, która została połączona z Twoim projektem Firebase.
Aplikacja została automatycznie połączona z Twoim projektem Firebase i bezgłośnie zalogowała Cię jako anonimowego użytkownika.
6. Zapisywanie danych w Cloud Firestore
W tej sekcji zapiszemy w Cloud Firestore pewne dane, aby wypełnić interfejs aplikacji. Można to zrobić ręcznie w konsoli Firebase, ale my zrobimy to w samej aplikacji, aby zademonstrować podstawowe zapisywanie 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 o nazwie restaurants.
Później każdą opinię zapiszemy w podkolekcji o nazwie ratings w ramach każdej restauracji.
Dodawanie restauracji do Firestore
Głównym obiektem modelu w naszej aplikacji jest restauracja. Napiszemy kod, który doda dokument restauracji do kolekcji restaurants.
- Wśród pobranych plików otwórz
scripts/FriendlyEats.Data.js. - Znajdź funkcję
FriendlyEats.prototype.addRestaurant. - Zastąp całą funkcję tym 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ą z zwykłego obiektu JavaScriptu. Najpierw uzyskujemy odwołanie do kolekcji Cloud Firestore restaurants, a potem add dane.
Dodajmy restauracje.
- Wróć do aplikacji FriendlyEats w przeglądarce i odśwież ją.
- Kliknij Dodaj dane testowe.
Aplikacja automatycznie wygeneruje losowy zestaw obiektów restauracji, a potem wywoła funkcję addRestaurant. Nie zobaczysz jednak jeszcze tych danych w aplikacji internetowej, ponieważ musimy jeszcze zaimplementować pobieranie danych (w następnej sekcji tego Codelab).
Jeśli w konsoli Firebase otworzysz kartę Cloud Firestore, zobaczysz nowe dokumenty w kolekcji restaurants.
Gratulacje! Właśnie zapisaliśmy dane z aplikacji internetowej do Cloud Firestore.
W kolejnej sekcji dowiesz się, jak pobierać dane z Cloud Firestore i wyświetlać je w aplikacji.
7. Wyświetlanie danych z Cloud Firestore
Z tej sekcji dowiesz się, jak pobierać dane z Cloud Firestore i wyświetlać je w aplikacji. Najważniejszymi krokami są utworzenie zapytania i dodanie detektora migawek. Ten odbiorca będzie otrzymywać powiadomienia o wszystkich istniejących danych pasujących do zapytania i aktualizacje w czasie rzeczywistym.
Najpierw zbudujemy zapytanie, które będzie służyć do wyświetlania domyślnej, niezafiltrowanej listy restauracji.
- Wróć do pliku
scripts/FriendlyEats.Data.js. - Znajdź funkcję
FriendlyEats.prototype.getAllRestaurants. - Zastąp całą funkcję tym 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 tworzymy zapytanie, które pobierze maksymalnie 50 restauracji z kolekcji najwyższego poziomu o nazwie restaurants. Są one posortowane według średniej oceny (obecnie wszystkie są równe 0). Po zadeklarowaniu tego zapytania przekazujemy je do metody getDocumentsInQuery(), która odpowiada za wczytywanie i renderowanie danych.
Zrobimy to, dodając odbiorcę zrzutu.
- Wróć do pliku
scripts/FriendlyEats.Data.js. - Znajdź funkcję
FriendlyEats.prototype.getDocumentsInQuery. - Zastąp całą funkcję tym 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 funkcja query.onSnapshot będzie wywoływać funkcję zwracającą wartość zwracaną za każdym razem, gdy zmieni się wynik zapytania.
- Po raz pierwszy wywołanie zwrotne jest wywoływane z całym zbiorem wyników zapytania, czyli z całą kolekcją
restaurantsz Cloud Firestore. Następnie przekazuje wszystkie dokumenty do funkcjirenderer.display. - Gdy dokument zostanie usunięty,
change.typebędzie równeremoved. 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 wcześniej były widoczne w konsoli Firebase, są teraz widoczne w aplikacji. Jeśli udało Ci się ukończyć tę sekcję, Twoja aplikacja odczytuje i zapisze dane za pomocą Cloud Firestore.
Gdy lista restauracji się zmienia, ten listener będzie się automatycznie aktualizować. Otwórz konsolę Firebase i ręcznie usuń restaurację lub zmień jej nazwę – zmiany pojawią się natychmiast w witrynie.
8. Dane funkcji Get()
Do tej pory pokazaliśmy, jak za pomocą funkcji onSnapshot pobierać aktualizacje w czasie rzeczywistym. Nie zawsze jednak jest to pożądane. Czasami lepszym rozwiązaniem jest pobranie danych tylko raz.
Chcemy wdrożyć metodę, która zostanie wywołana, gdy użytkownik kliknie określoną restaurację w Twojej aplikacji.
- Wróć do pliku
scripts/FriendlyEats.Data.js. - Znajdź funkcję
FriendlyEats.prototype.getRestaurant. - Zastąp całą funkcję tym kodem.
FriendlyEats.Data.js
FriendlyEats.prototype.getRestaurant = function(id) {
return firebase.firestore().collection('restaurants').doc(id).get();
};
Po zaimplementowaniu tej metody będziesz mieć możliwość wyświetlania stron każdej restauracji. Wystarczy kliknąć restaurację na liście, aby wyświetlić jej stronę ze szczegółami:
Obecnie nie możesz dodawać ocen, ponieważ musimy jeszcze wdrożyć tę funkcję w ramach tego Codelab.
9. sortować i filtrować dane,
Obecnie nasza aplikacja wyświetla listę restauracji, ale użytkownik nie może filtrować wyników według swoich potrzeb. W tej sekcji użyjesz zaawansowanych zapytań Cloud Firestore, aby włączyć filtrowanie.
Oto przykład prostego zapytania służącego do pobierania wszystkich restauracji Dim Sum:
var filteredQuery = query.where('category', '==', 'Dim Sum')
Jak wskazuje nazwa, metoda where() spowoduje, że nasze zapytanie pobierze tylko elementy kolekcji, których pola spełniają określone przez nas ograniczenia. W tym przypadku pobierane będą tylko restauracje, w których category to Dim Sum.
W naszej aplikacji użytkownik może połączyć kilka filtrów, aby utworzyć konkretne zapytania, np. „Pizza w San Francisco” lub „Owoce morza w Los Angeles posortowane według popularności”.
Utworzymy metodę, która tworzy zapytanie, które będzie filtrować restauracje na podstawie wielu kryteriów wybranych przez użytkowników.
- Wróć do pliku
scripts/FriendlyEats.Data.js. - Znajdź funkcję
FriendlyEats.prototype.getFilteredRestaurants. - Zastąp całą funkcję tym 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 jedną klauzulę orderBy, aby utworzyć złożone zapytanie na podstawie danych wejściowych użytkownika. Nasze zapytanie zwróci teraz tylko restauracje, które spełniają wymagania użytkownika.
Odśwież aplikację FriendlyEats w przeglądarce, a potem sprawdź, czy możesz filtrować według ceny, miasta i kategorii. Podczas testowania w konsoli JavaScript przeglądarki zobaczysz błędy o takim wyglądzie:
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 występują, ponieważ Cloud Firestore wymaga indeksów w przypadku większości złożonych zapytań. Wymaganie indeksów w przypadku zapytań pozwala utrzymać dużą szybkość Cloud Firestore.
Kliknięcie linku w wiadomości o błędzie spowoduje automatyczne otwarcie w konsoli Firebase interfejsu tworzenia indeksu z właściwymi parametrami. W następnej sekcji napiszemy i wdrożymy indeksy potrzebne do tej aplikacji.
10. Wdrażanie indeksów
Jeśli nie chcesz sprawdzać każdej ścieżki w aplikacji i klikać wszystkich linków do tworzenia indeksów, możesz łatwo wdrożyć wiele indeksów naraz za pomocą wiersza poleceń Firebase.
- W katalogu lokalnym pobieranych plików aplikacji znajdziesz plik
firestore.indexes.json.
Plik ten zawiera wszystkie indeksy potrzebne do 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ą tego polecenia:
firebase deploy --only firestore:indexes
Po kilku minutach indeksy zostaną opublikowane, a komunikaty o błędach znikną.
11. Zapisywanie danych w transakcji
W tej sekcji dodamy możliwość przesyłania opinii o restauracjach. Do tej pory wszystkie nasze operacje zapisu były atomowe i względnie proste. Jeśli któryś z nich się nie powiedzie, prawdopodobnie poprosimy użytkownika o powtórzenie próby lub aplikacja sama spróbuje ponownie zapisać dane.
Nasza aplikacja będzie mieć wielu użytkowników, którzy chcą dodać ocenę restauracji, więc będziemy musieli skoordynować wiele operacji odczytu i zapisu. Najpierw należy przesłać opinię, a potem zaktualizować ocenę count i average rating restauracji. Jeśli jeden z tych procesów się nie powiedzie, ale nie drugi, pozostaniemy w niezgodnym stanie, w którym dane w jednej części naszej bazy danych nie będą pasować do danych w innej.
Na szczęście Cloud Firestore udostępnia funkcję transakcji, która pozwala nam wykonywać wiele operacji odczytu i zapisu w ramach pojedynczej operacji atomowej, co zapewnia spójność danych.
- Wróć do pliku
scripts/FriendlyEats.Data.js. - Znajdź funkcję
FriendlyEats.prototype.addRating. - Zastąp całą funkcję tym 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 bloku powyżej uruchamiamy transakcję, aby zaktualizować wartości numeryczne avgRating i numRatings w dokumencie dotyczącym restauracji. Jednocześnie dodamy nową kolekcję rating do podzbioru ratings.
12. Bezpieczeństwo danych
Na początku tego ćwiczenia ustawiliśmy reguły bezpieczeństwa aplikacji, aby ograniczyć dostęp do niej.
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 zapewnić, że klienci wprowadzają tylko bezpieczne zmiany. Przykład:
- Aktualizacje dokumentu restauracji mogą dotyczyć tylko ocen, a nie nazwy ani innych danych, których nie można zmienić.
- Oceny można tworzyć tylko wtedy, gdy identyfikator użytkownika zgadza się z zalogowanym użytkownikiem, co zapobiega podszywanie się pod inną osobę.
Zamiast konsoli Firebase możesz użyć wiersza poleceń Firebase, aby wdrożyć reguły w projekcie Firebase. Plik firestore.rules w katalogu roboczym zawiera już podane wyżej reguły. Aby wdrożyć te reguły z lokalnego systemu plików (zamiast z konsoli Firebase), uruchom to polecenie:
firebase deploy --only firestore:rules
13. Podsumowanie
W tym laboratorium programistycznym dowiesz się, jak wykonywać podstawowe i zaawansowane operacje odczytu i zapisu w Cloud Firestore, a także jak zabezpieczyć dostęp do danych za pomocą reguł bezpieczeństwa. Pełne rozwiązanie znajdziesz w repozytorium quickstarts-js.
Aby dowiedzieć się więcej o Cloud Firestore, zapoznaj się z tymi materiałami:
14. [Opcjonalnie] Wymuś Sprawdzanie aplikacji
Firebase Sprawdzanie aplikacji zapewnia ochronę, pomagając w weryfikacji i zapobieganiu niechcianemu ruchowi w aplikacji. W tym kroku zabezpieczysz dostęp do swoich usług, dodając Sprawdzanie aplikacji z reCAPTCHA Enterprise.
Najpierw musisz włączyć sprawdzanie aplikacji i reCaptcha.
Włączanie reCaptcha Enterprise
- W konsoli Google Cloud znajdź i wybierz reCaptcha Enterprise w sekcji Zabezpieczenia.
- Włącz usługę zgodnie z wyświetlanymi instrukcjami i kliknij Utwórz klucz.
- Wpisz wyświetlaną nazwę zgodnie z wytycznymi i jako typ platformy wybierz Witryna.
- Dodaj wdrożone adresy URL do listy domen i upewnij się, że opcja „Użyj polecenia weryfikacyjnego” jest odznaczona.
- Kliknij Utwórz klucz i zapisz wygenerowany klucz w bezpiecznym miejscu. Będzie on potrzebny w jednym z kolejnych kroków.
Włączanie Sprawdzania aplikacji
- W konsoli Firebase w panelu po lewej stronie odszukaj sekcję Kompilacja.
- Kliknij Sprawdzanie aplikacji, a następnie kliknij przycisk Rozpocznij (lub przekieruj bezpośrednio do konsoli).
- Kliknij Zarejestruj i w wyświetlonym okienku wpisz klucz reCaptcha Enterprise, a potem kliknij Zapisz.
- W widoku interfejsów API wybierz Storage i kliknij Wykonaj. Zrób to samo w przypadku Cloud Firestore.
Sprawdzanie aplikacji powinno być teraz wymuszane. Odśwież aplikację i spróbuj utworzyć lub wyświetlić restaurację. Powinien wyświetlić 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 niepotwierdzone żądania. Teraz dodamy do aplikacji weryfikację.
Otwórz plik FriendlyEats.View.js i zaktualizuj funkcję initAppCheck, a potem 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.
);
};
Inicjuje instancję appCheck za pomocą ReCaptchaEnterpriseProvider z kluczem, a opcja isTokenAutoRefreshEnabled umożliwia automatyczne odświeżanie tokenów w aplikacji.
Aby umożliwić testowanie lokalne, znajdź w pliku FriendlyEats.js sekcję, w której inicjowana jest aplikacja, i dodaj do funkcji FriendlyEats.prototype.initAppCheck ten wiersz kodu:
if(isLocalhost) {
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}
Spowoduje to zapisanie tokenu debugowania w konsoli lokalnej aplikacji internetowej w postaci podobnej do tej:
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.
W konsoli Firebase otwórz widok Aplikacje w sekcji Sprawdzanie aplikacji.
Kliknij menu wyłaniane i wybierz Zarządzaj tokenami debugowania.
Następnie kliknij Dodaj token debugowania i wklej token debugowania z konsoli.
Gratulacje! Aplikacja App Check powinna teraz działać w Twojej aplikacji.