1. Wprowadzenie
Ostatnia aktualizacja: 23 lutego 2023 r.
Jak możesz zapobiec nieautoryzowanemu dostępowi do zasobów Firebase?
Możesz użyć Sprawdzania aplikacji Firebase, aby uniemożliwić nieautoryzowanym klientom dostęp do zasobów backendu. W tym celu wymagaj, aby żądania przychodzące były opatrzone atestem potwierdzającym, że pochodzą z Twojej aplikacji, i blokuj ruch, który nie ma odpowiedniego atestu. Sprawdzanie aplikacji Firebase korzysta z dostawców atestów charakterystycznych dla danej platformy, aby zweryfikować autentyczność klienta. W przypadku aplikacji internetowych Sprawdzanie aplikacji obsługuje reCAPTCHA w wersji 3 i reCAPTCHA Enterprise jako dostawców atestów.
Sprawdzanie aplikacji może służyć do ochrony żądań do Cloud Firestore, Bazy danych czasu rzeczywistego, Cloud Functions, Uwierzytelniania Firebase z Identity Platform oraz backendów hostowanych przez Ciebie.
Co utworzysz
W tym ćwiczeniu z programowania zabezpieczysz aplikację do czatu, najpierw dodając, a następnie wymuszając sprawdzanie aplikacji.
Czego się nauczysz
- Jak monitorować backend pod kątem nieautoryzowanego dostępu
- Jak dodać egzekwowanie do Firestore i Cloud Storage
- Jak uruchomić aplikację z tokenem debugowania na potrzeby programowania lokalnego
Czego potrzebujesz
- wybrane środowisko IDE lub edytor tekstu,
- Menedżer pakietów npm, który zwykle jest dołączony do Node.js.
- Wiersz poleceń Firebase zainstalowany i skonfigurowany do działania z Twoim kontem.
- terminal lub konsola,
- wybraną przeglądarkę, np. Chrome;
- Przykładowy kod z tego codelab (informacje o tym, jak go pobrać, znajdziesz w następnym kroku).
2. Pobieranie przykładowego kodu
Sklonuj repozytorium GitHub z tego ćwiczenia z poziomu wiersza poleceń:
git clone https://github.com/firebase/codelab-friendlychat-web
Jeśli nie masz zainstalowanego Gita, możesz pobrać repozytorium jako plik ZIP.
Importowanie aplikacji początkowej
Za pomocą środowiska IDE otwórz lub zaimportuj katalog 📁 appcheck-start ze sklonowanego repozytorium. Katalog 📁 appcheck-start zawiera kod początkowy ćwiczenia z programowania, który będzie w pełni funkcjonalną aplikacją internetową do czatu. Katalog 📁 appcheck będzie zawierać gotowy kod ćwiczenia z programowania.
3. Tworzenie i konfigurowanie projektu Firebase
Tworzenie projektu w Firebase
- Zaloguj się w konsoli Firebase, korzystając ze swojego konta Google.
- Kliknij przycisk, aby utworzyć nowy projekt, a następnie wpisz jego nazwę (np.
FriendlyChat).
- Kliknij Dalej.
- Jeśli pojawi się taka prośba, przeczytaj i zaakceptuj Warunki korzystania z Firebase, a następnie kliknij Dalej.
- (Opcjonalnie) Włącz pomoc AI w konsoli Firebase (funkcja „Gemini w Firebase”).
- W tym ćwiczeniu nie potrzebujesz Google Analytics, więc wyłącz tę opcję.
- Kliknij Utwórz projekt, poczekaj na udostępnienie projektu, a następnie kliknij Dalej.
Przejście na wyższy abonament Firebase
Aby korzystać z Cloud Storage dla Firebase, Twój projekt Firebase musi być objęty abonamentem Blaze (płatność według wykorzystania), co oznacza, że jest połączony z kontem rozliczeniowym Cloud.
- Konto rozliczeniowe Cloud wymaga formy płatności, np. karty kredytowej.
- Jeśli dopiero zaczynasz korzystać z Firebase i Google Cloud, sprawdź, czy kwalifikujesz się do otrzymania 300 USD środków i konta rozliczeniowego Cloud w bezpłatnym okresie próbnym.
- Jeśli wykonujesz ten ćwiczenie w ramach wydarzenia, zapytaj organizatora, czy są dostępne środki na Cloud.
Aby przejść na abonament Blaze, wykonaj te czynności:
- W konsoli Firebase wybierz opcję przejścia na wyższy abonament.
- Wybierz abonament Blaze. Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby połączyć konto rozliczeniowe Cloud z projektem.
Jeśli w ramach tego uaktualnienia konieczne było utworzenie konta rozliczeniowego Cloud, może być konieczne powrócenie do procesu uaktualniania w konsoli Firebase, aby dokończyć uaktualnianie.
Dodawanie aplikacji internetowej Firebase do projektu
- Kliknij ikonę internetu
, aby utworzyć nową aplikację internetową Firebase. - Zarejestruj aplikację pod nazwą Friendly Chat, a następnie zaznacz pole obok opcji Also set up Firebase Hosting for this app (Skonfiguruj też Hosting Firebase dla tej aplikacji). Kliknij Register app (Zarejestruj aplikację).
- W następnym kroku zobaczysz polecenie instalacji Firebase za pomocą npm i obiekt konfiguracji. Skopiujesz ten obiekt później w tym ćwiczeniu, więc na razie kliknij Dalej.
- Zobaczysz opcję zainstalowania wiersza poleceń Firebase. Jeśli nie masz jeszcze zainstalowanego tego narzędzia, zainstaluj je teraz za pomocą polecenia
npm install -g firebase-tools. Następnie kliknij Dalej. - Następnie zobaczysz opcję zalogowania się w Firebase i wdrożenia w Hostingu Firebase. Zaloguj się w Firebase za pomocą polecenia
firebase login, a następnie kliknij Przejdź do konsoli. Wdrożysz ją w Hostingu Firebase w jednym z kolejnych kroków.
Konfigurowanie usług Firebase
Aplikacja, którą utworzymy, korzysta z usług Firebase dostępnych dla aplikacji internetowych:
- Uwierzytelnianie Firebase, aby ułatwić użytkownikom logowanie się w aplikacji.
- Cloud Firestore do zapisywania uporządkowanych danych w chmurze i otrzymywania natychmiastowych powiadomień o zmianach danych.
- Cloud Storage dla Firebase do zapisywania plików w chmurze.
- Hosting Firebase do hostowania i udostępniania zasobów.
- Komunikacja w chmurze Firebase (FCM) do wysyłania powiadomień push i wyświetlania wyskakujących powiadomień w przeglądarce.
- Monitorowanie skuteczności w Firebase, aby zbierać dane o skuteczności aplikacji u użytkowników.
Niektóre z tych usług wymagają specjalnej konfiguracji lub muszą zostać włączone w konsoli Firebase.
Włączanie logowania przez Google na potrzeby Uwierzytelniania Firebase
Aby umożliwić użytkownikom logowanie się w aplikacji internetowej za pomocą kont Google, użyjemy metody logowania przez Google.
Musisz włączyć logowanie przez Google:
- W konsoli Firebase znajdź sekcję Kompilacja w panelu po lewej stronie.
- Kliknij Authentication (Uwierzytelnianie), w razie potrzeby kliknij Get Started (Rozpocznij), a następnie kliknij kartę Sign-in method (Metoda logowania) (lub kliknij tutaj, aby przejść bezpośrednio do tej karty).
- Włączanie dostawcy logowania przez Google
- Ustaw publiczną nazwę aplikacji na Friendly Chat i wybierz adres e-mail do pomocy dotyczącej projektu z menu.
- Kliknij Zapisz.
Konfigurowanie Cloud Firestore
Aplikacja internetowa używa Cloud Firestore do zapisywania wiadomości na czacie i odbierania nowych wiadomości.
Aby skonfigurować Cloud Firestore w projekcie w Firebase:
- W lewym panelu konsoli Firebase rozwiń Kompilacja, a następnie wybierz Baza danych Firestore.
- Kliknij Utwórz bazę danych.
- W polu Identyfikator bazy danych pozostaw wartość
(default). - Wybierz lokalizację bazy danych, a następnie kliknij Dalej.
W przypadku prawdziwej aplikacji wybierz lokalizację, która jest blisko użytkowników. - Kliknij Uruchom w trybie testowym. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł zabezpieczeń.
W dalszej części tego ćwiczenia dodasz reguły zabezpieczeń, aby chronić swoje dane. Nie rozpowszechniaj ani nie udostępniaj publicznie aplikacji bez dodania reguł zabezpieczeń do bazy danych. - Kliknij Utwórz.
Konfigurowanie Cloud Storage dla Firebase
Aplikacja internetowa używa Cloud Storage dla Firebase do przechowywania, przesyłania i udostępniania zdjęć.
Aby skonfigurować Cloud Storage dla Firebase w projekcie Firebase:
- W lewym panelu konsoli Firebase rozwiń Kompilacja, a następnie wybierz Miejsce na dane.
- Kliknij Rozpocznij.
- Wybierz lokalizację domyślnego zasobnika Storage.
Zasobniki w regionachUS-WEST1,US-CENTRAL1iUS-EAST1mogą korzystać z poziomu „Zawsze bezpłatnie” w Google Cloud Storage. Zasobniki we wszystkich innych lokalizacjach podlegają cenom i zasadom korzystania z Google Cloud Storage. - Kliknij Uruchom w trybie testowym. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł zabezpieczeń.
W dalszej części tego ćwiczenia dodasz reguły zabezpieczeń, aby chronić swoje dane. Nie rozpowszechniaj ani nie udostępniaj publicznie aplikacji bez dodania reguł zabezpieczeń do zasobnika Storage. - Kliknij Utwórz.
4. Konfigurowanie Firebase
W katalogu appcheck-start wywołaj:
firebase use --add
Gdy pojawi się prośba, wybierz identyfikator projektu, a następnie nadaj projektowi w Firebase alias. W przypadku tego projektu możesz po prostu podać alias default. Następnie musisz skonfigurować projekt lokalny do pracy z Firebase.
- Otwórz ustawienia projektu w konsoli Firebase.
- Na karcie „Twoje aplikacje” wybierz nazwę aplikacji, dla której potrzebujesz obiektu konfiguracji.
- W panelu fragmentu kodu pakietu SDK Firebase wybierz Konfiguracja.
- Skopiuj fragment kodu obiektu konfiguracji, a potem dodaj go do pliku
appcheck-start/hosting/src/firebase-config.js. W pozostałej części tego ćwiczenia zakładamy, że zmienna ma nazwę config.
firebase-config.js
const config = {
apiKey: "API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
databaseURL: "https://PROJECT_ID.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.firebasestorage.app",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "G-MEASUREMENT_ID",
};
W tym samym katalogu appcheck-start wywołaj:
firebase experiments:enable webframeworks
Spowoduje to włączenie obsługi platformy internetowej, za pomocą której utworzono ten projekt.
Możemy teraz uruchomić projekt i sprawdzić, czy domyślny projekt działa.
5. Wypróbowanie aplikacji bez Sprawdzania aplikacji
Po skonfigurowaniu aplikacji i pakietu SDK spróbuj użyć aplikacji zgodnie z jej pierwotnym przeznaczeniem. Najpierw zainstaluj wszystkie zależności. W terminalu przejdź do katalogu appcheck-start/hosting. W tym katalogu uruchom polecenie npm install. Spowoduje to pobranie wszystkich zależności, które są potrzebne do działania projektu. Aby uruchomić aplikację w jej obecnym stanie, możesz uruchomić firebase serve. Aplikacja poprosi Cię o zalogowanie się na konto Google. Zrób to, a następnie spróbuj opublikować na czacie kilka wiadomości na czacie i kilka zdjęć.
Skoro udało Ci się przetestować aplikację lokalnie, czas zobaczyć, jak działa w środowisku produkcyjnym. Uruchom firebase deploy, aby wdrożyć aplikację internetową w internecie. Ta część jest kluczowym krokiem w demonstrowaniu działania Sprawdzania aplikacji w rzeczywistych warunkach, ponieważ wymaga skonfigurowania domeny dla dostawcy atestów reCAPTCHA Enterprise.
Mamy nadzieję, że korzystasz z domyślnych funkcji aplikacji. publikowanie wiadomości na czacie i wszystkie inne czynności, które powinny być wykonywane tylko w takiej aplikacji. Wadą obecnego stanu jest to, że każdy, kto ma konfigurację aplikacji z poprzedniego kroku, może uzyskać dostęp do zasobów backendu. Nadal muszą przestrzegać reguł zabezpieczeń obowiązujących w systemach Firestore i Cloud Storage, ale poza tym mogą wysyłać zapytania do przechowywanych tam danych, zapisywać je i uzyskiwać do nich dostęp.
W kolejnych krokach:
- Rejestrowanie w Sprawdzaniu aplikacji
- Sprawdzanie egzekwowania zasad
- Rozpocznij egzekwowanie reguł
6. Włączanie Sprawdzania aplikacji i egzekwowania zasad
Zacznijmy od pobrania klucza reCAPTCHA Enterprise dla projektu i dodania go do Sprawdzania aplikacji. Zacznij od przejścia do sekcji reCAPTCHA Enterprise w konsoli Google Cloud. Wybierz projekt, a następnie włącz interfejs reCAPTCHA Enterprise API. Włącz interfejs API i poczekaj kilka minut, aż proces się zakończy. Następnie kliknij Utwórz klucz obok opcji Klucze Enterprise. Następnie w tej sekcji podaj wyświetlaną nazwę i wybierz typ klucza Witryna. Musisz określić domeny, w których jest hostowana Twoja aplikacja. Ponieważ planujesz hostować tę aplikację w Hostingu Firebase, używasz domyślnej nazwy hostingu, która zwykle brzmi ${YOUR_PROJECT_ID}.web.app. Domenę hostowaną znajdziesz w sekcji Hosting w konsoli Firebase. Po wypełnieniu tych informacji kliknij Gotowe i Utwórz klucz.
Po zakończeniu u góry strony Szczegóły klucza zobaczysz identyfikator.
Skopiuj ten identyfikator do schowka. Jest to klucz, którego używasz do sprawdzania aplikacji. Następnie otwórz sekcję Sprawdzanie aplikacji w konsoli Firebase i kliknij Rozpocznij. Następnie kliknij Zarejestruj, a potem reCAPTCHA Enterprise i wklej skopiowany identyfikator w polu tekstowym Klucz witryny reCAPTCHA Enterprise. Pozostałe ustawienia pozostaw domyślne. Strona Sprawdzanie aplikacji powinna wyglądać mniej więcej tak:
Niezweryfikowane i niewymuszone żądania
Teraz, gdy masz już zarejestrowany klucz w konsoli Firebase, wróć do uruchamiania witryny w przeglądarce, uruchamiając polecenie firebase serve. Aplikacja internetowa działa teraz lokalnie i możesz ponownie zacząć wysyłać żądania do backendu Firebase. Żądania wysyłane do backendu Firebase są monitorowane przez Sprawdzanie aplikacji, ale nie są egzekwowane. Jeśli chcesz sprawdzić stan przychodzących żądań, możesz otworzyć sekcję Cloud Firestore na karcie Interfejsy API na stronie Sprawdzanie aplikacji w konsoli Firebase. Ponieważ klient nie został jeszcze skonfigurowany do korzystania ze Sprawdzania aplikacji, powinno wyświetlić się coś podobnego do tego:
Backend otrzymuje 100% niezweryfikowanych żądań. Ten ekran jest przydatny, ponieważ pokazuje, że prawie wszystkie żądania klientów pochodzą od klientów, którzy nie mają zintegrowanego Sprawdzania aplikacji.
Ten panel może wskazywać na kilka rzeczy. Po pierwsze, może wskazywać, czy wszystkie aplikacje klienckie działają w najnowszej wersji klienta. Jeśli tak, możesz bezpiecznie wymusić sprawdzanie aplikacji bez obaw o wyłączenie dostępu dla prawdziwego klienta aplikacji. Możesz też dowiedzieć się, ile prób uzyskania dostępu do backendu nie pochodziło z Twojej aplikacji. Mogą to być użytkownicy, którzy wysyłają zapytania do backendu bezpośrednio bez Twojej wiedzy. Widzisz, że żądania nie są weryfikowane. Zanim przejdziesz do weryfikowania żądań, sprawdź, co stanie się z użytkownikami, którzy mogą mieć niezweryfikowane żądanie do backendu.
Niezweryfikowane i egzekwowane żądania
Naciśnij przycisk Wymuś na poprzednim ekranie, a następnie ponownie naciśnij Wymuś, jeśli pojawi się taka prośba.
Spowoduje to rozpoczęcie egzekwowania sprawdzania aplikacji. Od teraz będą blokowane żądania do usług backendu, które nie zostały zweryfikowane przez wybranego dostawcę atestów (w tym przypadku reCAPTCHA Enterprise). Wróć do uruchomionej aplikacji internetowej, która powinna działać pod adresem http://localhost:5000. Po odświeżeniu strony i próbie pobrania danych z bazy danych nic się nie dzieje. Jeśli otworzysz konsolę Chrome, aby odczytać błędy, zobaczysz coś podobnego do tego:
Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.
To Sprawdzanie aplikacji blokuje żądania, które nie przekazały prawidłowego tokena atestu w żądaniach do zasobów Firebase. Na razie możesz wyłączyć egzekwowanie Sprawdzania aplikacji, a w następnej sekcji dowiesz się, jak dodać Sprawdzanie aplikacji reCAPTCHA Enterprise do przykładu Friendly Chat.
7. Dodawanie klucza reCAPTCHA Enterprise do witryny
Dodamy klucz Enterprise do Twojej aplikacji. Najpierw otwórz hosting/src/firebase-config.js i dodaj klucz reCAPTCHA Enterprise do tego fragmentu kodu:
const reCAPTCHAEnterpriseKey = {
// Replace with your recaptcha enterprise site key
key: "Replace with your recaptcha enterprise site key"
};
Gdy to zrobisz, otwórz plik hosting/src/index.js i w wierszu 51 dodaj import z firebase-config.js, aby pobrać klucz reCAPTCHA, a także zaimportuj bibliotekę Sprawdzania aplikacji, aby móc pracować z dostawcą reCAPTCHA Enterprise.
// add from here
import {
initializeAppCheck,
ReCaptchaEnterpriseProvider,
} from 'firebase/app-check';
// to here
// replace this line
import { getFirebaseConfig } from './firebase-config.js';
// with this line
import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';
Następnie w kolejnym wierszu utworzysz funkcję do skonfigurowania Sprawdzania aplikacji. Funkcja najpierw sprawdzi, czy jesteś w środowisku programistycznym, a jeśli tak, wyświetli token debugowania, którego możesz użyć do programowania lokalnego.
import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';
// add from here
function setupAppCheck(app) {
if(import.meta.env.MODE === 'development') {
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}
}
// to here
Teraz należy zainicjować Sprawdzanie aplikacji, aby działało z wybranym dostawcą – w tym przypadku jest to reCAPTCHA Enterprise. Następnie warto też automatycznie odświeżać token Sprawdzania aplikacji w tle, co zapobiegnie opóźnieniom w interakcji użytkownika z usługą w przypadku, gdy token Sprawdzania aplikacji straci ważność.
function setupAppCheck(app) {
if(import.meta.env.MODE === 'development') {
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}
// add from here
// Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
// site key and pass it to initializeAppCheck().
initializeAppCheck(app, {
provider: new ReCaptchaEnterpriseProvider(getReCaptchaKey()),
isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
});
// to here
}
Na koniec, gdy upewnisz się, że aplikacja została zainicjowana, musisz wywołać utworzoną przed chwilą funkcję setupAppCheck. Na dole pliku hosting/src/index.js dodaj wywołanie ostatnio dodanej metody.
const firebaseApp = initializeApp(getFirebaseConfig());
// add from here
setupAppCheck(firebaseApp);
// to here
getPerformance();
initFirebaseAuth();
loadMessages();
Najpierw przetestuj lokalnie
Najpierw przetestuj aplikację lokalnie. Jeśli aplikacja nie jest jeszcze udostępniana lokalnie, uruchom polecenie firebase serve. Zauważysz, że aplikacja nadal nie wczytuje się lokalnie. Dzieje się tak, ponieważ domena Firebase została zarejestrowana tylko u dostawcy atestu reCAPTCHA, a nie w domenie localhost. Nigdy nie rejestruj localhost jako zatwierdzonej domeny, ponieważ umożliwia to użytkownikom dostęp do zastrzeżonych backendów z aplikacji działającej lokalnie na ich komputerze. Zamiast tego, ponieważ ustawiono self.FIREBASE_APPCHECK_DEBUG_TOKEN = true, w konsoli JavaScript powinna pojawić się linia podobna do tej:
App Check debug token: 55183c20-de61-4438-85e6-8065789265be. You will need to add it to your app's App Check settings in the Firebase console for it to work.
Weź podany token debugowania (w tym przykładzie jest to 55183c20-de61-4438-85e6-8065789265be) i wklej go w konfiguracji Sprawdzania aplikacji w rozszerzonym menu aplikacji.
Nadaj tokenowi unikalną nazwę, którą zapamiętasz, i kliknij Zapisz. Ta opcja umożliwia używanie w aplikacji tokena wygenerowanego przez klienta, co jest bezpieczniejszym rozwiązaniem niż wygenerowanie tokena debugowania i umieszczenie go w aplikacji. Umieszczenie tokena w aplikacji może spowodować, że zostanie on przypadkowo rozpowszechniony wśród użytkowników, którzy mogą go wykorzystać do obejścia kontroli. Jeśli chcesz rozpowszechniać token debugowania, na przykład w środowisku CI, przeczytaj tę dokumentację, aby dowiedzieć się, jak to zrobić.
Po zarejestrowaniu tokena debugowania w konsoli Firebase możesz ponownie włączyć egzekwowanie zasad sprawdzania aplikacji i przetestować, czy zawartość aplikacji ładuje się lokalnie, wywołując firebase serve z terminala. Powinny pojawić się dane wprowadzone wcześniej w lokalnej wersji aplikacji internetowej. W konsoli powinien być nadal widoczny komunikat z tokenem debugowania.
Wypróbuj w środowisku produkcyjnym
Gdy upewnisz się, że Sprawdzanie aplikacji działa lokalnie, wdróż aplikację internetową w środowisku produkcyjnym. W terminalu ponownie wywołaj firebase deploy i odśwież stronę. Spowoduje to spakowanie aplikacji internetowej do uruchomienia w Hostingu Firebase. Gdy aplikacja będzie hostowana w Hostingu Firebase, spróbuj ją otworzyć pod adresem ${YOUR_PROJECT_ID}.web.app. Możesz otworzyć konsolę JavaScript. Nie powinien być już w niej widoczny token debugowania, a czaty powinny się ładować w projekcie. Dodatkowo po kilku chwilach korzystania z aplikacji możesz przejść do sekcji Sprawdzanie aplikacji w konsoli Firebase i sprawdzić, czy wszystkie żądania do aplikacji zostały zweryfikowane.
8. Gratulacje!
Udało Ci się dodać Sprawdzanie aplikacji Firebase do aplikacji internetowej.
Skonfigurowano konsolę Firebase do obsługi tokena reCAPTCHA Enterprise w środowiskach produkcyjnych, a nawet skonfigurowano tokeny debugowania na potrzeby lokalnego programowania. Dzięki temu Twoje aplikacje będą mogły nadal uzyskiwać dostęp do zasobów Firebase z zatwierdzonych klientów, a w aplikacji nie będą mogły być wykonywane nieuczciwe działania.
Co dalej?
Aby dodać Sprawdzanie aplikacji Firebase, zapoznaj się z tą dokumentacją:
- Włączanie egzekwowania w Cloud Functions
- Weryfikowanie tokenów Sprawdzania aplikacji w niestandardowych backendach