Ćwiczenie z programowania w aplikacji Sprawdzanie aplikacji

1. Wprowadzenie

Ostatnia aktualizacja: 23.02.2023

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. Wymagaj, aby przychodzące żądania były opatrzone potwierdzeniem, że pochodzą z Twojej autentycznej aplikacji, i blokuj ruch, który nie ma odpowiedniego potwierdzenia. Sprawdzanie aplikacji Firebase korzysta z dostawców atestów do sprawdzania autentyczności klienta: w przypadku aplikacji internetowych Sprawdzanie aplikacji obsługuje reCAPTCHA v3 i reCAPTCHA Enterprise jako dostawców atestów.

Aplikacja App Check może służyć do ochrony żądań wysyłanych do Cloud Firestore, Bazy danych czasu rzeczywistego, Cloud Functions, Uwierzytelniania Firebase z Identity Platform oraz do zaplecza hostowanego przez Ciebie.

Co utworzysz

W tym Codelab zabezpieczysz aplikację do czatu, najpierw dodając, a potem wymuszając sprawdzanie aplikacji.

Czego się nauczysz

• Jak monitorować backend pod kątem nieautoryzowanego dostępu
• Jak dodać mechanizmy egzekwowania w Firestore i Cloud Storage
• Jak uruchomić aplikację za pomocą tokenu debugowania na potrzeby programowania lokalnego

Czego potrzebujesz

• IDE lub edytor tekstu
• Menedżer pakietów npm, który jest zwykle dostarczany z Node.js.
• Wiersz poleceń Firebase zainstalowany i skonfigurowany do działania na Twoim koncie
• terminal lub konsola;
• przeglądarkę, np. Chrome;
• przykładowy kod z codelab (jak go pobrać, dowiesz się z następnego kroku w codelab);

2. Pobieranie przykładowego kodu

Skopiuj repozytorium GitHub z codelab z poziomu wiersza poleceń:

git clone https://github.com/firebase/codelab-friendlychat-web

Jeśli nie masz zainstalowanego Git, możesz pobrać repozytorium jako plik ZIP.

Importowanie aplikacji startowej

Za pomocą środowiska IDE otwórz lub zaimportuj katalog 📁 appcheck-start ze sklonowanego repozytorium. Katalog 📁 appcheck-start zawiera kod początkowy dla ćwiczenia, który będzie w pełni funkcjonalną aplikacją internetową do czatu. Katalog 📁 appcheck zawiera kompletny kod dla ćwiczenia.

3. Tworzenie i konfigurowanie projektu Firebase

Tworzenie projektu Firebase

1. Zaloguj się w Firebase.
2. W konsoli Firebase kliknij Dodaj projekt, a następnie nadaj projektowi Firebase nazwę FriendlyChat. Zapamiętaj identyfikator swojego projektu Firebase.
3. Odznacz pole wyboru Włącz Google Analytics w tym projekcie.
4. Kliknij Utwórz projekt.

Aplikacja, którą zamierzamy utworzyć, korzysta z usług Firebase dostępnych dla aplikacji internetowych:

• Uwierzytelnianie Firebase, aby umożliwić użytkownikom łatwe logowanie się w aplikacji.
• Cloud Firestore do zapisywania ustrukturyzowanych 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 komponentów.
• Komunikacja w chmurze Firebase do wysyłania powiadomień push i wyświetlania powiadomień wyskakujących w przeglądarce.
• Monitorowanie wydajności Firebase do zbierania danych o wydajności aplikacji dla użytkowników.

Niektóre z tych usług wymagają specjalnej konfiguracji lub ich włączenie musi nastąpić w konsoli Firebase.

Przejdź na wyższy abonament Firebase

Aby korzystać z Cloud Storage dla Firebase, musisz mieć projekt Firebase w abonamentem Blaze (opłaty według wykorzystania), co oznacza, że jest on połączony z kontem rozliczeniowym Cloud.

• Konto Cloud Billing 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 bezpłatnego okresu próbnego na koncie płatności Cloud.
• Jeśli wykonujesz to ćwiczenie w ramach wydarzenia, zapytaj organizatora, czy są dostępne jakieś kredyty Cloud.

Aby przenieść projekt na abonament Blaze:

1. W konsoli Firebase wybierz uaktualnienie abonamentu.
2. Wybierz pakiet Blaze. Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby połączyć konto rozliczeniowe Cloud z projektem.
   Jeśli w ramach tego przejścia na wyższy poziom abonamentu musisz utworzyć konto rozliczeniowe Cloud, konieczne może być powrót do procesu przejścia w konsoli Firebase, aby go dokończyć.

Dodawanie aplikacji internetowej Firebase do projektu

1. Aby utworzyć nową aplikację internetową Firebase, kliknij ikonę sieci .
2. Zarejestruj aplikację z nazwą Friendly Chat, a potem zaznacz pole obok opcji Skonfiguruj również Hosting Firebase dla tej aplikacji. Kliknij Zarejestruj aplikację.
3. W następnym kroku zobaczysz polecenie instalowania Firebase za pomocą npm i obiektu konfiguracji. Ten obiekt skopiujesz później w ramach tego Codelab, więc na razie kliknij Dalej.

4. Następnie zobaczysz opcję instalacji wiersza poleceń Firebase. Jeśli nie masz jeszcze zainstalowanego tego pakietu, zainstaluj go za pomocą polecenia npm install -g firebase-tools. Następnie kliknij Dalej.
5. Następnie zobaczysz opcję zalogowania się w Firebase i wdrożenia w hostingu Firebase. Zaloguj się w Firebase za pomocą polecenia firebase login, a potem kliknij Przejdź do konsoli. W następnym kroku wdrożysz aplikację w hostingu Firebase.

Włącz Logowanie przez Google w ramach uwierzytelniania Firebase

Aby umożliwić użytkownikom logowanie się w aplikacji internetowej za pomocą kont Google, użyjemy metody logowania Google.

Musisz włączyć Logowanie przez Google:

1. W konsoli Firebase w panelu po lewej stronie odszukaj sekcję Kompilacja.
2. Kliknij Uwierzytelnianie, a następnie Rozpocznij (jeśli to konieczne) i kartę Metoda logowania (lub kliknij tutaj, aby przejść bezpośrednio do tej karty).
3. Włącz dostawcę logowania przez Google
4. Ustaw publiczną nazwę aplikacji na Friendly Chat i w menu wybierz adres e-mail zespołu pomocy projektu.
5. Kliknij Zapisz.

Konfigurowanie Cloud Firestore

Aplikacja internetowa używa usługi Cloud Firestore do zapisywania wiadomości czatu i odbierania nowych wiadomości czatu.

Aby skonfigurować Cloud Firestore w projekcie Firebase:

1. W panelu po lewej stronie w konsoli Firebase rozwiń Kompilacja, a potem wybierz Baza danych Firestore.
2. Kliknij Utwórz bazę danych.
3. Pozostaw wartość (default) w polu Identyfikator bazy danych.
4. Wybierz lokalizację bazy danych, a potem kliknij Dalej.
   W przypadku prawdziwej aplikacji wybierz lokalizację blisko użytkowników.
5. Kliknij Rozpocznij w trybie testowym. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł bezpieczeństwa.
   W dalszej części tego Codelab dodasz reguły bezpieczeństwa, aby chronić swoje dane. Nie udostępniaj ani nie udostępniaj publicznie aplikacji bez dodania reguł bezpieczeństwa dla bazy danych.
6. Kliknij Utwórz.

Konfigurowanie Cloud Storage dla Firebase

Aplikacja internetowa używa Cloud Storage dla Firebase do przechowywania, przesyłania i udostępniania zdjęć.

Oto jak skonfigurować Cloud Storage dla Firebase w projekcie Firebase:

1. W panelu po lewej stronie konsoli Firebase rozwiń Kompilacja, a potem kliknij Storage.
2. Kliknij Rozpocznij.
3. Wybierz lokalizację domyślnego zasobnika Storage.
   Zasobniki w regionach US-WEST1, US-CENTRAL1 i US-EAST1 mogą korzystać z poziomu Always Free w Google Cloud Storage. Zasobniki w innych lokalizacjach podlegają cennikom i zasadom korzystania z Google Cloud Storage.
4. Kliknij Rozpocznij w trybie testowym. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł bezpieczeństwa.
   W dalszej części tego Codelab dodasz reguły bezpieczeństwa, które ochronią Twoje dane. Nie udostępniaj ani nie udostępniaj publicznie aplikacji bez dodania reguł bezpieczeństwa dla zasobnika Storage.
5. Kliknij Utwórz.

4. Konfigurowanie Firebase

W katalogu appcheck-start wybierz:

firebase use --add

Gdy pojawi się taka prośba, wybierz identyfikator projektu, a potem nadaj projektowi Firebase alias. W przypadku tego projektu możesz podać alias domyślny. Następnie musisz skonfigurować projekt lokalny pod kątem współpracy z Firebase.

1. Otwórz ustawienia projektu w konsoli Firebase.
2. Na karcie „Twoje aplikacje” wybierz pseudonim aplikacji, dla której potrzebujesz obiektu konfiguracji.
3. W panelu fragmentu kodu pakietu SDK Firebase wybierz Konfiguracja.
4. Skopiuj fragment kodu obiektu konfiguracji, a potem dodaj go do appcheck-start/hosting/src/firebase-config.js. Pozostała część tego ćwiczenia zakłada, ż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

Umożliwia to obsługę frameworku internetowego, na którym został utworzony ten projekt.

Wszystko powinno być już gotowe do uruchomienia projektu i sprawdzenia, czy projekt domyślny działa.

5. Wypróbuj aplikację 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 npm install. Spowoduje to pobranie wszystkich zależności projektu. Aby uruchomić aplikację w jej obecnym stanie, możesz użyć polecenia firebase serve. Aplikacja poprosi Cię o zalogowanie się na konto Google. Po zalogowaniu się spróbuj opublikować na czacie kilka wiadomości i zdjęć.

Teraz, gdy aplikacja została przetestowana lokalnie, czas sprawdzić ją w wersji produkcyjnej. Aby wdrożyć aplikację internetową do sieci, uruchom firebase deploy. Ta część jest kluczowym krokiem w demonstrowaniu, jak Sprawdzanie aplikacji działa 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 wszystkiego innego, co powinno być możliwe tylko w takiej aplikacji. Minusem 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ą one być zgodne z regułami zabezpieczeń obowiązującymi w systemach Firestore i Cloud Storage, ale poza tym mogą nadal wysyłać zapytania do tych systemów, przechowywać w nich dane i do nich uzyskiwać dostęp.

W kolejnych krokach:

• Rejestracja w ramach Sprawdzania aplikacji
• Sprawdzanie egzekwowania
• Rozpoczęcie egzekwowania zasad

6. Włączanie Sprawdzania aplikacji i wymuszania

Zacznijmy od pobrania klucza reCAPTCHA Enterprise dla swojego projektu i dodania go do Sprawdzania aplikacji. Najpierw otwórz sekcję reCAPTCHA Enterprise w konsoli Google Cloud. Wybierz projekt, a następnie zostanie wyświetlony komunikat z prośbą o włączenie interfejsu reCAPTCHA Enterprise API. Włącz interfejs API i poczekaj kilka minut. Następnie kliknij Utwórz klucz obok Klucze dla firm. Następnie w tej sekcji podaj wyświetlaną nazwę i wybierz klucz typu Witryna. Musisz określić domeny, na których jest hostowana Twoja aplikacja. Ponieważ planujesz hostowanie w Hostingu Firebase, użyj domyślnej nazwy hostingu, która zwykle brzmi ${YOUR_PROJECT_ID}.web.app. Domenę hostingu znajdziesz w sekcji Hosting konsoli Firebase. Po wypełnieniu tych informacji kliknij Gotowe i Utwórz klucz.

Po zakończeniu procesu u góry strony Szczegóły klucza zobaczysz identyfikator.

Skopiuj ten identyfikator do schowka. 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 umieść skopiowane identyfikator w polu tekstowym klucza witryny reCAPTCHA Enterprise. Pozostałe ustawienia pozostaw domyślne. Strona weryfikacji aplikacji powinna wyglądać mniej więcej tak:

Niezweryfikowane i niewykorzystane żądania

Gdy masz już zarejestrowany klucz w konsoli Firebase, możesz ponownie uruchomić witrynę w przeglądarce, wykonując polecenie firebase serve. Tutaj aplikacja internetowa działa lokalnie i możesz ponownie wysyłać żądania do backendu Firebase. Ponieważ żądania są kierowane do backendu Firebase, są one monitorowane przez Sprawdzanie aplikacji, ale nie są egzekwowane. Jeśli chcesz sprawdzić stan otrzymywanych próśb, otwórz sekcję Cloud Firestore na karcie Interfejsy API na stronie sprawdzania aplikacji w konsoli Firebase. Ponieważ klient nie jest jeszcze skonfigurowany do korzystania z funkcji App Check, powinieneś zobaczyć coś podobnego do tego:

Backend otrzymuje 100% niezweryfikowanych żądań. Ten ekran jest przydatny, ponieważ pokazuje, że prawie wszystkie żądania klienta pochodzą od klientów, którzy nie mają zintegrowanego Sprawdzania aplikacji.

Ten panel może wskazywać kilka kwestii. Po pierwsze, czy wszystkie aplikacje klienckie działają w najnowszej wersji. Jeśli tak, możesz bezpiecznie wymusić Sprawdzanie aplikacji bez obaw o wyłączenie dostępu do autentycznego klienta Twojej aplikacji. Możesz też sprawdzić, ile prób uzyskania dostępu do backendu pochodziło z zewnątrz aplikacji. Mogą to być zapytania wysyłane bezpośrednio do backendu przez użytkowników bez Twojej wiedzy. Ponieważ widzisz, że żądania nie są weryfikowane, zanim przejdziesz do weryfikacji żądań, sprawdź, co się stanie z użytkownikami, którzy mogą mieć niepotwierdzone żądania przesłane do Twojego backendu.

Niezweryfikowane i wymuszone żądania

Na poprzednim ekranie naciśnij przycisk Wprowadź, a następnie, jeśli pojawi się taka prośba, naciśnij ponownie Wprowadź.

Spowoduje to wdrożenie Sprawdzania aplikacji. Zacznie ono blokować żądania wysyłane do usług backendowych, które nie zostały zweryfikowane przez wybranego dostawcę oświadczeń (w tym przypadku reCAPTCHA Enterprise). Wróć do uruchomionej aplikacji internetowej, która powinna działać pod adresem http://localhost:5000. Gdy odświeżysz stronę i próbujesz pobrać dane 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.

Sprawdzanie aplikacji blokuje żądania, które nie zawierają prawidłowego tokena uwierzytelniania w żądaniach do Twoich 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 czatu przyjaznego użytkownikowi.

7. Dodawanie klucza reCAPTCHA Enterprise do witryny

Dodamy klucz korporacyjny 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 na linii 51 dodaj import z pliku firebase-config.js, aby pobrać klucz reCAPTCHA, a także zaimportuj bibliotekę App Check, aby móc pracować z usługą 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 na kolejnym wierszu utworzysz funkcję do konfigurowania Sprawdzania aplikacji. Funkcja najpierw sprawdzi, czy jesteś w środowisku programistycznym. Jeśli tak, wydrukuje 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 zainicjuj Sprawdzanie aplikacji, aby działało z wybranym dostawcą, w tym przypadku z reCAPTCHA Enterprise. Następnie możesz automatycznie odświeżać token App Check w tle, aby zapobiec opóźnieniom w interakcjach użytkownika z Twoją usługą w przypadku, gdy jego token App Check 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 jest zainicjalizowana, wywołaj utworzoną przez siebie funkcję setupAppCheck. U dołu 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 przeprowadź testy lokalnie

Najpierw przetestuj aplikację lokalnie. Jeśli aplikacja nie jest jeszcze obsługiwana lokalnie, uruchom firebase serve. Powinieneś zauważyć, że aplikacja nadal nie wczytuje się lokalnie. Dzieje się tak, ponieważ zarejestrowana została tylko domena Firebase u dostawcy usługi weryfikacji reCAPTCHA, a nie domena localhost. Nigdy nie rejestruj localhost jako zatwierdzonej domeny, ponieważ pozwala to użytkownikom na uzyskiwanie dostępu do backendów z ograniczonym dostępem z aplikacji działającej lokalnie na ich komputerze. Ponieważ ustawiasz self.FIREBASE_APPCHECK_DEBUG_TOKEN = true, w konsoli JavaScript powinieneś/powinnaś szukać wiersza podobnego do tego:

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.

Pobierz dostarczony token debugowania (w tym przykładzie : 55183c20-de61-4438-85e6-8065789265be) i wstaw go do konfiguracji App Check w menu aplikacji.

Nadaj tokenowi niepowtarzalną nazwę, którą łatwo zapamiętasz, i kliknij Zapisz. Ta opcja umożliwia używanie w aplikacji tokena wygenerowanego przez klienta, który jest bezpieczniejszą alternatywą niż wygenerowanie tokena debugowania i wbudowanie go w aplikację. Wstawienie tokena w aplikacji może spowodować jego przypadkowe rozpowszechnienie wśród użytkowników, którzy mogliby go wykorzystać, omijając Twoje kontrole. Jeśli chcesz rozpowszechniać token debugowania, na przykład w środowisku CI, przeczytaj tę dokumentację, aby dowiedzieć się więcej o rozpowszechnianiu.

Gdy masz token debugowania zarejestrowany w konsoli Firebase, możesz ponownie włączyć egzekwowanie kontroli aplikacji i sprawdzić, czy zawartość aplikacji wczytuje się lokalnie, wywołując firebase serve w terminalu. Powinny się wyświetlić dane wprowadzone wcześniej w wersji lokalnej aplikacji internetowej. Komunikat z tokenem debugowania powinien być nadal widoczny na konsoli.

Wypróbuj w wersji produkcyjnej

Gdy upewnisz się, że App Check działa lokalnie, wdróż aplikację internetową w wersji produkcyjnej. W terminalu ponownie wywołaj firebase deploy i załaduj ponownie stronę. Spowoduje to skompilowanie aplikacji internetowej w celu uruchomienia jej w Hostingu Firebase. Gdy aplikacja będzie hostowana w Firebase Hosting, otwórz ją na stronie ${YOUR_PROJECT_ID}.web.app. Możesz otworzyć konsolę JavaScript. Nie powinna już być tam widoczna wydrukowana informacja o tokenie debugowania, a czaty powinny się wczytywać w Twoim projekcie. Po kilku chwilach korzystania z aplikacji możesz otworzyć sekcję Sprawdzanie aplikacji w konsoli Firebase i sprawdzić, czy wszystkie żądania wysyłane do aplikacji są już zweryfikowane.

8. Gratulacje!

Udało Ci się dodać Sprawdzanie aplikacji Firebase do aplikacji internetowej.

Konsolę Firebase konfigurujesz tak, aby obsługiwała token reCAPTCHA Enterprise w środowiskach produkcyjnych, a nawet skonfigurować tokeny debugowania na potrzeby programowania lokalnego. Dzięki temu Twoje aplikacje będą nadal mieć dostęp do zasobów Firebase z zatwierdzonych klientów i zapobiegniesz występowaniu w nich działań związanych z oszustwem.

Co dalej?

Aby dodać Sprawdzanie aplikacji Firebase do:

• Włączanie egzekwowania w Cloud Functions
• Weryfikowanie tokenów App Check w przypadku niestandardowych backendów

Dokumenty referencyjne

• Pierwsze kroki w korzystaniu ze Sprawdzania aplikacji za pomocą reCAPTCHA Enterprise w przypadku aplikacji internetowych
• Korzystanie z usługi debugowania w aplikacjach internetowych