1. Wstęp
Ostatnia aktualizacja: 23.02.2023
Jak zapobiec nieautoryzowanemu dostępowi do zasobów Firebase?
Możesz użyć Firebase App Check, aby uniemożliwić nieautoryzowanym klientom dostęp do zasobów backendu, wymagając dołączenia przychodzących żądań z zaświadczeniem, że żądanie pochodzi z Twojej prawdziwej aplikacji, oraz blokując ruch, który nie ma odpowiedniego zaświadczenia. Firebase App Check opiera się na dostawcach atestów specyficznych dla platformy w celu weryfikacji autentyczności klienta: w przypadku aplikacji internetowych App Check obsługuje reCAPTCHA v3 i reCAPTCHA Enterprise jako dostawców atestów.
Sprawdzania aplikacji można używać do ochrony żądań do Cloud Firestore, bazy danych czasu rzeczywistego, funkcji w chmurze, uwierzytelniania Firebase za pomocą Identity Platform oraz na backendach, które sam hostujesz.
Co zbudujesz
W tych ćwiczeniach z programowania zabezpieczysz aplikację do czatu, najpierw dodając, a następnie wymuszając sprawdzanie aplikacji.
Czego się dowiesz
- 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 rozwoju lokalnego
Co będziesz potrzebował
- Wybrany przez Ciebie edytor IDE/tekstu
- Menedżer pakietów npm , który zwykle jest dostarczany z Node.js
- Interfejs Firebase CLI zainstalowany i skonfigurowany do współpracy z Twoim kontem
- Terminal/konsola
- Wybrana przeglądarka, np. Chrome
- Przykładowy kod ćwiczeń z programowania (zobacz następny krok ćwiczeń z kodowania, aby dowiedzieć się, jak uzyskać kod).
2. Pobierz przykładowy kod
Sklonuj repozytorium GitHub Codelab z wiersza poleceń:
git clone https://github.com/firebase/codelab-friendlychat-web
Alternatywnie, jeśli nie masz zainstalowanego Gita, możesz pobrać repozytorium jako plik ZIP .
Zaimportuj aplikację startową
Używając swojego IDE, otwórz lub zaimportuj katalog 📁 appcheck-start ze sklonowanego repozytorium. Ten 📁 katalog appcheck-start zawiera kod startowy do ćwiczeń z programowania, które będą w pełni funkcjonalną aplikacją internetową do czatowania. Katalog 📁 appcheck będzie zawierał kompletny kod ćwiczeń z programowania.
3. Utwórz i skonfiguruj projekt Firebase
Utwórz projekt Firebase
- Zaloguj się do Firebase .
- W konsoli Firebase kliknij Dodaj projekt, a następnie nadaj swojemu projektowi Firebase nazwę FriendlyChat. Zapamiętaj identyfikator projektu Firebase.
- Odznacz opcję Włącz Google Analytics dla tego projektu
- Kliknij opcję Utwórz projekt.
Aplikacja, którą będziemy budować, korzysta z produktów Firebase dostępnych dla aplikacji internetowych:
- Uwierzytelnianie Firebase, aby umożliwić użytkownikom łatwe logowanie się do Twojej 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 obsługi Twoich zasobów.
- Firebase Cloud Messaging do wysyłania powiadomień push i wyświetlania wyskakujących powiadomień przeglądarki.
- Monitorowanie wydajności Firebase w celu gromadzenia danych dotyczących wydajności użytkowników Twojej aplikacji.
Niektóre z tych produktów wymagają specjalnej konfiguracji lub wymagają włączenia za pomocą konsoli Firebase.
Dodaj aplikację internetową Firebase do projektu
- Kliknij ikonę sieci
aby utworzyć nową aplikację internetową Firebase. - Zarejestruj aplikację pod pseudonimem Friendly Chat, a następnie zaznacz pole obok Skonfiguruj także hosting Firebase dla tej aplikacji . Kliknij opcję Zarejestruj aplikację .
- W następnym kroku zobaczysz polecenie instalacji Firebase przy użyciu npm i obiektu konfiguracyjnego. Skopiujesz ten obiekt w dalszej części zajęć z kodowania, więc na razie naciśnij Dalej .
- Następnie zobaczysz opcję zainstalowania interfejsu CLI Firebase. Jeśli jeszcze go nie zainstalowałeś, zrób to teraz, używając polecenia
npm install -g firebase-tools. Następnie kliknij Dalej . - Następnie zobaczysz opcję zalogowania się do Firebase i wdrożenia na hostingu Firebase. Śmiało, zaloguj się do Firebase za pomocą polecenia
firebase login, a następnie kliknij Kontynuuj do konsoli . Wdrażasz w hostingu Firebase w przyszłym kroku.
Włącz logowanie Google do uwierzytelniania Firebase
Aby umożliwić użytkownikom logowanie się do aplikacji internetowej przy użyciu kont Google, użyjemy metody logowania Google.
Musisz włączyć Logowanie Google:
- W konsoli Firebase znajdź sekcję Kompilacja w lewym panelu.
- Kliknij opcję Uwierzytelnianie , w razie potrzeby kliknij opcję Rozpocznij , a następnie kliknij kartę Metoda logowania (lub kliknij tutaj , aby przejść bezpośrednio tam).
- Włącz dostawcę logowania Google
- Ustaw publiczną nazwę swojej aplikacji na Przyjazny Czat i wybierz z menu rozwijanego adres e-mail pomocy technicznej projektu.
- Kliknij Zapisz
Włącz Cloud Firestore
Aplikacja internetowa korzysta z Cloud Firestore do zapisywania wiadomości czatu i odbierania nowych wiadomości czatu.
Musisz włączyć Cloud Firestore:
- W sekcji Kompilacja konsoli Firebase kliknij Baza danych Firestore .
- Kliknij opcję Utwórz bazę danych w panelu Cloud Firestore.
- Wybierz opcję Uruchom w trybie testowym , a następnie po zapoznaniu się z zastrzeżeniem dotyczącym zasad bezpieczeństwa kliknij Dalej .
Tryb testowy zapewnia możliwość swobodnego zapisu do bazy danych podczas programowania. Zasady bezpieczeństwa masz już zapisane w kodzie startowym. Będziesz ich używać w tych ćwiczeniach z kodowania.
- Ustaw lokalizację, w której przechowywane są dane Cloud Firestore. Możesz pozostawić to ustawienie domyślne lub wybrać region blisko siebie. Kliknij Włącz, aby udostępnić Firestore.
Włącz przechowywanie w chmurze
Aplikacja internetowa korzysta z Cloud Storage dla Firebase do przechowywania, przesyłania i udostępniania zdjęć.
Musisz włączyć przechowywanie w chmurze:
- W sekcji Kompilacja konsoli Firebase kliknij opcję Pamięć .
- Jeśli nie ma przycisku Rozpocznij , oznacza to, że usługa Cloud Storage jest już włączona i nie musisz wykonywać poniższych kroków.
- Kliknij opcję Rozpocznij .
- Wybierz opcję Uruchom w trybie testowym , a następnie po zapoznaniu się z zastrzeżeniem dotyczącym zasad bezpieczeństwa kliknij Dalej .
Przy domyślnych regułach bezpieczeństwa każdy uwierzytelniony użytkownik może zapisywać wszystko w Cloud Storage. W dalszej części tego ćwiczenia z programowania wdrożymy napisane już dla nas reguły bezpieczeństwa.
- Lokalizacja Cloud Storage jest wstępnie wybrana z tym samym regionem, który wybrałeś dla swojej bazy danych Cloud Firestore. Kliknij Gotowe, aby zakończyć konfigurację.
4. Skonfiguruj Firebase
Z katalogu appcheck-start wywołaj:
firebase use --add
Po wyświetleniu monitu wybierz identyfikator projektu, a następnie nadaj projektowi Firebase alias. W przypadku tego projektu możesz po prostu podać alias default . Następnie musisz skonfigurować swój lokalny projekt do współpracy z Firebase.
- Przejdź do ustawień projektu w konsoli Firebase
- Na karcie „Twoje aplikacje” wybierz pseudonim aplikacji, dla której potrzebujesz obiektu konfiguracyjnego.
- Wybierz opcję Konfiguracja w panelu fragmentu kodu SDK Firebase.
- Skopiuj fragment obiektu konfiguracyjnego, a następnie dodaj go do
appcheck-start/hosting/src/firebase-config.js. W pozostałej części zajęć z programowania zakłada się, ż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.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "G-MEASUREMENT_ID",
};
Z tego samego katalogu appcheck-start wywołaj:
firebase experiments:enable webframeworks
Umożliwia to obsługę środowiska sieciowego , z którego zbudowano ten projekt.
Wszyscy powinniśmy być gotowi do uruchomienia Twojego projektu i sprawdzenia, czy domyślny projekt działa!
5. Wypróbuj aplikację bez sprawdzania aplikacji
Teraz, gdy masz już skonfigurowaną aplikację i zestaw SDK, spróbuj używać aplikacji tak, jak została pierwotnie zaprojektowana. Najpierw zacznij od zainstalowania wszystkich zależności. Z terminala przejdź do katalogu appcheck-start/hosting . Będąc w tym katalogu, uruchom npm install . Spowoduje to pobranie wszystkich zależności niezbędnych 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 i zdjęć.
Teraz, gdy przetestowałeś go lokalnie, czas zobaczyć go w produkcji! Uruchom firebase deploy , aby wdrożyć aplikację internetową w Internecie. Ta część to kluczowy krok w zademonstrowaniu, jak sprawdzanie aplikacji działa w świecie rzeczywistym, ponieważ wymaga skonfigurowania domeny dla dostawcy atestu reCAPTCHA Enterprise.
Mamy nadzieję, że korzystasz z domyślnych możliwości oferowanych przez aplikację. Publikowanie wiadomości na czacie i wszystkich innych czynności, które można wykonywać wyłącznie za pomocą takiej aplikacji. Wadą bieżącego stanu jest to, że każda osoba posiadająca konfigurację aplikacji z poprzedniego kroku może uzyskać dostęp do zasobów zaplecza. Nadal muszą przestrzegać zasad bezpieczeństwa obowiązujących w systemach Firestore i Cloud Storage, ale poza tym mogą nadal wysyłać zapytania, przechowywać i uzyskiwać dostęp do przechowywanych tam danych.
W kilku następnych krokach:
- Zarejestruj się w celu sprawdzenia aplikacji
- Zweryfikuj egzekwowanie
- Zacznij egzekwować zasady
6. Włącz Sprawdzanie aplikacji i egzekwowanie
Zacznijmy od pobrania klucza przedsiębiorstwa reCAPTCHA dla Twojego projektu i dodania go do sprawdzania aplikacji. Zaczynasz od odwiedzenia sekcji reCAPTCHA Enterprise w Google Cloud Console. Wybierz swój projekt, a następnie zostaniesz poproszony o włączenie interfejsu API reCAPTCHA Enterprise. Włącz interfejs API i poczekaj kilka minut na zakończenie. Następnie kliknij opcję Utwórz klucz obok Klucze przedsiębiorstwa . Następnie w tej sekcji określ nazwę wyświetlaną i wybierz klucz typu witryny internetowej . Musisz określić domeny, w których hostowana jest Twoja aplikacja. Ponieważ planujesz hostować to w Firebase Hosting, używasz domyślnej nazwy hostingu, która zazwyczaj brzmi ${YOUR_PROJECT_ID}.web.app . Swoją domenę hostingową znajdziesz w sekcji Hosting w konsoli Firebase. Po uzupełnieniu tych informacji naciśnij Gotowe i Utwórz klucz .
Po zakończeniu zobaczysz identyfikator na górze strony „Szczegóły klucza” .
Śmiało, skopiuj ten identyfikator do schowka. To jest klucz używany do sprawdzania aplikacji. Następnie odwiedź część Sprawdzanie aplikacji w konsoli Firebase i kliknij Rozpocznij . Następnie kliknij Zarejestruj , a następnie kliknij reCAPTCHA Enterprise i umieść skopiowany identyfikator w polu tekstowym klucza witryny reCAPTCHA Enterprise . Resztę ustawień pozostaw jako domyślne. Twoja strona sprawdzania aplikacji powinna wyglądać mniej więcej tak:
Żądania niezweryfikowane i niewymuszone
Teraz, gdy masz zarejestrowany klucz w konsoli Firebase, wróć do uruchamiania swojej witryny w przeglądarce, uruchamiając firebase serve . Tutaj masz aplikację internetową działającą lokalnie i możesz ponownie rozpocząć wysyłanie żądań do zaplecza Firebase. Ponieważ żądania trafiają do zaplecza Firebase, są one monitorowane przez Sprawdzanie aplikacji, ale nie są egzekwowane. Jeśli chcesz zobaczyć status przychodzących żądań, możesz odwiedzić sekcję Cloud Firestore na karcie Interfejsy API strony Sprawdzanie aplikacji w konsoli Firebase. Ponieważ nie skonfigurowałeś jeszcze klienta do korzystania z Sprawdzania aplikacji, powinieneś zobaczyć coś podobnego do tego:
Do backendu przychodzą 100% niezweryfikowanych żądań. Ten ekran jest przydatny, ponieważ pokazuje, że prawie wszystkie żądania klientów pochodzą od klientów, którzy nie mają zintegrowanej funkcji sprawdzania aplikacji.
Ten pulpit nawigacyjny może wskazywać kilka rzeczy. Pierwszą rzeczą, którą może wskazać, jest to, czy wszystkie aplikacje klienckie korzystają z najnowszej wersji klienta. Jeśli tak, możesz bezpiecznie wymusić sprawdzanie aplikacji, nie martwiąc się o wyłączenie dostępu prawdziwego klienta aplikacji. Inną rzeczą, która może ci to powiedzieć, jest liczba prób dostępu do twojego backendu, które nie pochodziły z twojej aplikacji. Mogą to być użytkownicy, którzy wysyłają zapytania do Twojego backendu bezpośrednio bez Twojej wiedzy. Ponieważ widzisz, że żądania nie są weryfikowane, czas sprawdzić, co stanie się z użytkownikami, którzy mogą mieć niezweryfikowane żądania do Twojego backendu, zanim przejdziesz do weryfikowania ich żądań.
Niezweryfikowane i wymuszone żądania
Śmiało, naciśnij przycisk Wymuś z poprzedniego ekranu, a następnie ponownie naciśnij przycisk Wymuś, jeśli pojawi się monit.
Spowoduje to rozpoczęcie wymuszania sprawdzania aplikacji; będzie teraz blokować żądania kierowane do usług backendu, które nie są weryfikowane przez wybranego dostawcę atestów (w tym przypadku reCAPTCHA Enterprise). Wróć do działającej aplikacji internetowej, która powinna działać pod http://localhost:5000 . Kiedy odświeżasz stronę i próbujesz pobrać dane z bazy danych, nic się nie dzieje. Jeśli otworzysz konsolę Chrome, aby odczytać błędy, powinieneś zobaczyć coś podobnego do poniższego:
Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.
To są żądania blokujące Sprawdzanie aplikacji, które nie przekazały prawidłowego tokenu atestującego w swoich żądaniach do zasobów Firebase. Na razie możesz wyłączyć wymuszanie sprawdzania aplikacji, a w następnej sekcji sprawdzisz, jak dodać sprawdzanie aplikacji reCAPTCHA Enterprise do przykładu Przyjaznego czatu.
7. Dodaj klucz reCAPTCHA Enterprise do witryny
Dodamy klucz przedsiębiorstwa do Twojej aplikacji. Najpierw otwórz hosting/src/firebase-config.js i dodaj swój klucz przedsiębiorstwa reCAPTCHA do następującego fragmentu kodu:
const reCAPTCHAEnterpriseKey = {
// Replace with your recaptcha enterprise site key
key: "Replace with your recaptcha enterprise site key"
};
Po zakończeniu otwórz hosting/src/index.js i w linii 51 dodasz import z firebase-config.js, aby pobrać klucz reCAPTCHA, a także zaimportuj bibliotekę App Check, abyś mógł pracować z reCAPTCHA Dostawca dla przedsiębiorstw.
// 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 następnym wierszu utworzysz funkcję konfigurującą Sprawdzanie aplikacji. Funkcja najpierw sprawdzi, czy znajdujesz się w środowisku programistycznym, a jeśli tak, wydrukuje token debugowania, którego możesz użyć do lokalnego programowania.
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 nadszedł czas, aby zainicjować Sprawdzanie aplikacji, aby współpracowało z wybranym dostawcą – w tym przypadku jest to reCAPTCHA Enterprise. Następnie warto automatycznie odświeżyć token Sprawdzania aplikacji w tle, co zapobiegnie wszelkim opóźnieniom w interakcji użytkownika z Twoją usługą w przypadku, gdy jego token Sprawdzania aplikacji stanie się nieaktualny.
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ć właśnie utworzoną 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 swoją aplikację lokalnie. Jeśli nie udostępniasz jeszcze aplikacji lokalnie, uruchom firebase serve . Powinieneś zauważyć, że aplikacja nadal nie ładuje się lokalnie. Dzieje się tak, ponieważ zarejestrowałeś swoją domenę Firebase tylko u dostawcy zaświadczenia reCAPTCHA, a nie w domenie localhost. Nigdy nie powinieneś rejestrować localhost jako zatwierdzonej domeny, ponieważ umożliwia to użytkownikom dostęp do ograniczonych backendów z aplikacji działającej lokalnie na ich komputerze. Zamiast tego, ponieważ ustawiłeś self.FIREBASE_APPCHECK_DEBUG_TOKEN = true chciałbyś sprawdzić w konsoli JavaScript linię wyglądającą mniej więcej tak:
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.
Będziesz chciał wziąć dostarczony token debugowania (w przykładowym przypadku jest to: 55183c20-de61-4438-85e6-8065789265be ) i podłączyć go do konfiguracji App Check w rozszerzonym menu swojej aplikacji.
Nadaj tokenowi unikalną nazwę, którą zapamiętasz i kliknij Zapisz . Ta opcja umożliwia użycie w aplikacji tokena wygenerowanego przez klienta, co jest bezpieczniejszą alternatywą niż generowanie tokenu debugowania i osadzanie go w aplikacji. Osadzanie tokena w aplikacji może spowodować jego przypadkowe rozesłanie do użytkowników końcowych, a ci użytkownicy końcowi mogą go wykorzystać, omijając Twoje kontrole. Jeśli chcesz dystrybuować token debugowania, na przykład w środowisku CI, przeczytaj tę dokumentację , aby dowiedzieć się więcej o tym, jak go dystrybuować.
Po zarejestrowaniu tokena debugowania w konsoli Firebase możesz ponownie włączyć wymuszanie sprawdzania aplikacji i przetestować, czy zawartość aplikacji ładuje się lokalnie, wywołując firebase serve z terminala. Powinieneś zobaczyć, że wcześniej wprowadzone dane są udostępniane lokalnej wersji aplikacji internetowej. Nadal powinieneś zobaczyć komunikat z tokenem debugowania wydrukowanym na konsoli.
Wypróbuj go w produkcji
Po upewnieniu się, że Sprawdzanie aplikacji działa lokalnie, wdróż aplikację internetową w środowisku produkcyjnym. Z terminala wywołaj ponownie firebase deploy i załaduj ponownie stronę. Spowoduje to spakowanie aplikacji internetowej do działania w Hostingu Firebase. Gdy Twoja aplikacja będzie hostowana w Firebase Hosting, spróbuj odwiedzić ją pod adresem ${YOUR_PROJECT_ID}.web.app . Możesz otworzyć konsolę JavaScript i nie powinien już być tam wyświetlany token debugowania, a w Twoim projekcie powinny być widoczne ładujące się czaty. Dodatkowo, po kilku chwilach interakcji z aplikacją, możesz odwiedzić sekcję Sprawdzanie aplikacji w konsoli Firebase i sprawdzić, czy żądania kierowane do Twojej aplikacji zostały przełączone na wszystkie weryfikowane.
8. Gratulacje!
Gratulacje, pomyślnie dodałeś Sprawdzanie aplikacji Firebase do aplikacji internetowej!
Konfigurujesz konsolę Firebase do obsługi tokena reCAPTCHA Enterprise dla środowisk produkcyjnych, a nawet konfigurujesz tokeny debugowania na potrzeby programowania lokalnego. Dzięki temu Twoje aplikacje nadal będą miały dostęp do zasobów Firebase od zatwierdzonych klientów i zapobiegnie nieuczciwym działaniom w Twojej aplikacji.
Co dalej?
Zapoznaj się z poniższą dokumentacją, aby dodać Sprawdzanie aplikacji Firebase do:
- Włącz wymuszanie w Cloud Functions
- Zweryfikuj tokeny sprawdzania aplikacji na niestandardowych backendach