1. Introduzione
Ultimo aggiornamento: 2023-02-23
Come puoi impedire l'accesso non autorizzato alle tue risorse Firebase?
Puoi utilizzare Firebase App Check per impedire ai client non autorizzati di accedere alle tue risorse di backend richiedendo che le richieste in arrivo siano allegate con un attestato che la richiesta proviene dalla tua app autentica e bloccando il traffico che non dispone di un'attestazione adeguata. Firebase App Check si affida a fornitori di attestazioni specifici della piattaforma per verificare l'autenticità del client: per le app Web, App Check supporta reCAPTCHA v3 e reCAPTCHA Enterprise come fornitori di attestazioni.
App Check può essere utilizzato per proteggere le richieste a Cloud Firestore, Realtime Database, Cloud Functions, Autenticazione Firebase con Identity Platform e sui backend ospitati personalmente.
Cosa costruirai
In questo codelab proteggerai un'applicazione di chat aggiungendo prima e poi applicando il controllo dell'app.
Cosa imparerai
- Come monitorare il tuo backend per accessi non autorizzati
- Come aggiungere l'applicazione a Firestore e Cloud Storage
- Come eseguire la tua applicazione con un token di debug per lo sviluppo locale
Di cosa avrai bisogno
- L'IDE/editor di testo di tua scelta
- Il gestore pacchetti npm , che in genere viene fornito con Node.js
- La CLI Firebase installata e configurata per funzionare con il tuo account
- Un terminale/console
- Un browser a tua scelta, come Chrome
- Il codice di esempio del codelab (vedi il passaggio successivo del codelab per come ottenere il codice).
2. Ottieni il codice di esempio
Clona il repository GitHub del codelab dalla riga di comando:
git clone https://github.com/firebase/codelab-friendlychat-web
In alternativa, se non hai Git installato, puoi scaricare il repository come file ZIP .
Importa l'app iniziale
Utilizzando il tuo IDE, apri o importa la directory 📁 appcheck-start dal repository clonato. Questa 📁 directory appcheck-start contiene il codice iniziale per il codelab, che sarà un'app Web di chat completamente funzionale. La directory 📁 appcheck conterrà il codice completato per il codelab.
3. Crea e configura un progetto Firebase
Crea un progetto Firebase
- Accedi a Firebase .
- Nella console Firebase, fai clic su Aggiungi progetto, quindi assegna il nome al tuo progetto Firebase FriendlyChat. Ricorda l'ID progetto per il tuo progetto Firebase.
- Deseleziona Abilita Google Analytics per questo progetto
- Fare clic su Crea progetto.
L'applicazione che creeremo utilizza i prodotti Firebase disponibili per le app Web:
- Autenticazione Firebase per consentire ai tuoi utenti di accedere facilmente alla tua app.
- Cloud Firestore per salvare i dati strutturati sul cloud e ricevere notifiche istantanee quando i dati cambiano.
- Cloud Storage per Firebase per salvare file nel cloud.
- Firebase Hosting per ospitare e servire le tue risorse.
- Firebase Cloud Messaging per inviare notifiche push e visualizzare notifiche popup del browser.
- Firebase Performance Monitoring per raccogliere dati sulle prestazioni degli utenti per la tua app.
Alcuni di questi prodotti necessitano di una configurazione speciale o devono essere abilitati utilizzando la console Firebase.
Aggiungi un'app Web Firebase al progetto
- Fare clic sull'icona Web
per creare una nuova app Web Firebase. - Registra l'app con il nickname Friendly Chat, quindi seleziona la casella accanto a Configura anche hosting Firebase per questa app . Fai clic su Registra app .
- Nel passaggio successivo, vedrai un comando per installare Firebase utilizzando npm e un oggetto di configurazione. Copi questo oggetto più tardi nel codelab, quindi per ora premi Next .
- Quindi vedi un'opzione per installare la CLI Firebase. Se non lo hai già installato, fallo ora utilizzando il comando
npm install -g firebase-tools. Quindi fare clic su Avanti . - Quindi vedrai un'opzione per accedere a Firebase e distribuirlo all'hosting Firebase. Vai avanti e accedi a Firebase utilizzando il comando
firebase login, quindi fai clic su Continua su Console . La distribuzione all'hosting Firebase verrà eseguita in un passaggio futuro.
Abilita l'accesso a Google per l'autenticazione Firebase
Per consentire agli utenti di accedere all'app Web con i propri account Google, utilizzeremo il metodo di accesso di Google.
Dovrai abilitare l'accesso con Google:
- Nella console Firebase, individua la sezione Build nel pannello di sinistra.
- Fai clic su Autenticazione , fai clic su Inizia se applicabile, quindi fai clic sulla scheda Metodo di accesso (o fai clic qui per andare direttamente lì).
- Abilita il provider di accesso di Google
- Imposta il nome pubblico della tua app su Friendly Chat e scegli un'e-mail di supporto per il progetto dal menu a discesa.
- Fare clic su Salva
Abilita Cloud Firestore
L'app Web utilizza Cloud Firestore per salvare i messaggi di chat e ricevere nuovi messaggi di chat.
Dovrai abilitare Cloud Firestore:
- Nella sezione Compila della console Firebase, fai clic su Database Firestore .
- Fai clic su Crea database nel riquadro Cloud Firestore.
- Selezionare l'opzione Avvia in modalità test , quindi fare clic su Avanti dopo aver letto la dichiarazione di non responsabilità sulle regole di sicurezza.
La modalità test garantisce la possibilità di scrivere liberamente nel database durante lo sviluppo. Hai delle regole di sicurezza già scritte per te nel codice di partenza. Li utilizzerai per questo codelab.
- Imposta la posizione in cui vengono archiviati i dati Cloud Firestore. Puoi lasciare questa impostazione predefinita o scegliere una regione vicino a te. Fai clic su Abilita per effettuare il provisioning di Firestore.
Abilita archiviazione cloud
L'app Web utilizza Cloud Storage for Firebase per archiviare, caricare e condividere immagini.
Dovrai abilitare Cloud Storage:
- Nella sezione Build della console Firebase, fai clic su Archiviazione .
- Se non è presente il pulsante Inizia , significa che Cloud Storage è già abilitato e non è necessario seguire i passaggi seguenti.
- Fare clic su Inizia .
- Selezionare l'opzione Avvia in modalità test , quindi fare clic su Avanti dopo aver letto la dichiarazione di non responsabilità sulle regole di sicurezza.
Con le regole di sicurezza predefinite, qualsiasi utente autenticato può scrivere qualsiasi cosa su Cloud Storage. Distribuiremo le regole di sicurezza già scritte per noi più avanti in questo codelab.
- La posizione di Cloud Storage è preselezionata con la stessa regione che hai scelto per il tuo database Cloud Firestore. Fare clic su Fine per completare la configurazione.
4. Configura Firebase
Dalla directory appcheck-start , chiama:
firebase use --add
Quando richiesto, seleziona il tuo ID progetto, quindi assegna un alias al tuo progetto Firebase. Per questo progetto, puoi semplicemente fornire un alias di default . Successivamente, dovrai configurare il tuo progetto locale per funzionare con Firebase.
- Vai alle impostazioni del progetto nella console Firebase
- Nella scheda "Le tue app", seleziona il nickname dell'app per la quale hai bisogno di un oggetto di configurazione.
- Seleziona Config dal riquadro dello snippet dell'SDK Firebase.
- Copia lo snippet dell'oggetto di configurazione, quindi aggiungilo a
appcheck-start/hosting/src/firebase-config.js. Il resto del codelab presuppone che la variabile sia denominata 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",
};
Dalla stessa directory appcheck-start , quindi chiama:
firebase experiments:enable webframeworks
Ciò abilita il supporto del framework web con cui è stato creato questo progetto.
Dovremmo essere tutti pronti per eseguire il tuo progetto e testare che il progetto predefinito funzioni!
5. Prova l'app senza Verifica app
Ora che hai configurato l'app e impostato l'SDK, prova a utilizzare l'app così come è stata originariamente progettata. Innanzitutto, inizia installando tutte le dipendenze. Dal tuo terminale, vai alla directory appcheck-start/hosting . All'interno di quella directory, esegui npm install . Questo recupera tutte le dipendenze affinché il tuo progetto funzioni. Per avviare l'app nel suo stato attuale, puoi eseguire firebase serve . L'app ti chiede di accedere con un account Google; fallo, quindi prova a pubblicare alcuni messaggi di chat e alcune foto nella chat.
Ora che lo hai testato localmente, è tempo di vederlo in produzione! Esegui firebase deploy per distribuire l'applicazione Web sul Web. Questa parte è un passaggio fondamentale per dimostrare il funzionamento di App Check nel mondo reale poiché richiede la configurazione di un dominio per il provider di attestazioni reCAPTCHA Enterprise.
Si spera che tu stia sperimentando la funzionalità predefinita fornita dall'app. Pubblicare messaggi di chat e tutto ciò che dovrebbe essere fatto solo da un'app come questa. Lo svantaggio dello stato attuale è che chiunque abbia la configurazione dell'app del passaggio precedente può accedere alle tue risorse di backend. Devono comunque rispettare le regole di sicurezza adottate dai tuoi sistemi Firestore e Cloud Storage, ma per il resto possono comunque eseguire query, archiviare e accedere ai dati archiviati lì.
Nei prossimi passaggi, dovrai:
- Registrati per il controllo dell'app
- Convalidare l'applicazione
- Inizia a far rispettare le regole
6. Attiva il controllo e l'applicazione delle app
Iniziamo prendendo una chiave reCAPTCHA Enterprise per il tuo progetto e aggiungendola ad App Check. Inizi visitando la sezione reCAPTCHA Enterprise di Google Cloud Console. Seleziona il tuo progetto e ti verrà richiesto di abilitare l'API reCAPTCHA Enterprise. Abilita l'API e attendi qualche minuto affinché termini. Quindi fare clic su Crea chiave accanto a Chiavi aziendali . Quindi, in questa sezione, specifica un nome visualizzato e seleziona una chiave per il tipo di sito web . Devi specificare i domini su cui è ospitata la tua app. Poiché stai pianificando di ospitarlo su Firebase Hosting, utilizzi il nome di hosting predefinito che generalmente è ${YOUR_PROJECT_ID}.web.app . Puoi trovare il tuo dominio di hosting nella sezione Hosting della Console Firebase. Dopo aver compilato queste informazioni, premere Fine e Crea chiave .
Una volta completato, vedrai un ID nella parte superiore della pagina Dettagli chiave .
Vai avanti e copia questo ID negli appunti. Questa è la chiave che usi per App Check. Successivamente, visita la sezione App Check della console Firebase e fai clic su Inizia . Quindi, fai clic su Registra , quindi su reCAPTCHA Enterprise e inserisci l'ID copiato nella casella di testo per la chiave del sito reCAPTCHA Enterprise . Lascia il resto delle impostazioni come predefinite. La pagina di controllo dell'app dovrebbe assomigliare a questa:
Richieste non verificate e non applicate
Ora che hai una chiave registrata nella console Firebase, torna a eseguire il tuo sito nel browser eseguendo firebase serve . Qui hai l'app Web in esecuzione localmente e puoi iniziare a effettuare nuovamente richieste sul backend Firebase. Poiché le richieste vanno contro il backend Firebase, queste richieste vengono monitorate da App Check ma non vengono applicate. Se desideri vedere lo stato delle richieste in arrivo, puoi visitare la sezione Cloud Firestore nella scheda API della pagina App Check nella console Firebase. Poiché non hai ancora configurato il client per utilizzare App Check, dovresti vedere qualcosa di simile a questo:
Il backend riceve il 100% di richieste non verificate in arrivo. Questa schermata è utile poiché mostra che quasi tutte le richieste dei client provengono da client che non hanno App Check integrato.
Questa dashboard può indicare alcune cose. La prima cosa che può indicare è se tutte le tue app client eseguono la versione più recente del tuo client. Se lo sono, puoi applicare in sicurezza App Check senza preoccuparti di disattivare l'accesso per un client autentico della tua applicazione. L'altra cosa che questo potrebbe dirti è quanti tentativi di accesso al tuo backend sono arrivati senza provenire dall'interno della tua app. Potrebbero trattarsi di utenti che interrogano direttamente il tuo backend a tua insaputa. Poiché puoi vedere che le richieste non sono verificate, è il momento di vedere cosa accadrebbe a quegli utenti che potrebbero avere una richiesta non verificata al tuo backend prima di passare alla verifica delle loro richieste.
Richieste non verificate e applicate
Vai avanti e premi il pulsante Applica dalla schermata precedente, quindi premi nuovamente Applica se richiesto.
Questo inizierà ad applicare App Check; ora bloccherà le richieste ai tuoi servizi backend che non sono verificate tramite il fornitore di attestazione scelto (in questo caso reCAPTCHA Enterprise). Torna all'app Web in esecuzione che dovrebbe essere in esecuzione su http://localhost:5000 . Quando aggiorni la pagina e provi a ottenere dati dal database, non succede nulla. Se apri la console di Chrome per leggere gli errori, dovresti vedere qualcosa di simile al seguente:
Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.
Si tratta di App Check che blocca le richieste che non hanno trasmesso un token di attestazione valido nelle richieste alle tue risorse Firebase. Per il momento, puoi disattivare l'applicazione di App Check e nella sezione successiva esaminerai come aggiungere reCAPTCHA Enterprise App Check all'esempio Friendly Chat.
7. Aggiungi la chiave reCAPTCHA Enterprise al sito
Aggiungeremo la chiave aziendale alla tua applicazione. Innanzitutto, apri hosting/src/firebase-config.js e aggiungi la chiave reCAPTCHA Enterprise al seguente snippet di codice:
const reCAPTCHAEnterpriseKey = {
// Replace with your recaptcha enterprise site key
key: "Replace with your recaptcha enterprise site key"
};
Una volta completato, apri hosting/src/index.js e alla riga 51, aggiungerai un'importazione da firebase-config.js per recuperare la tua chiave reCAPTCHA e importare anche la libreria App Check in modo da poter lavorare con reCAPTCHA Fornitore aziendale.
// 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';
Quindi, nella riga successiva, creerai una funzione per impostare App Check. La funzione controllerà innanzitutto se ti trovi in un ambiente di sviluppo e, in tal caso, stamperà un token di debug che potrai utilizzare per lo sviluppo locale.
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
Ora è il momento di inizializzare App Check affinché funzioni con il provider selezionato: in questo caso si tratta di reCAPTCHA Enterprise. Dovresti quindi anche aggiornare automaticamente il token App Check in background, il che impedirebbe qualsiasi tipo di ritardo da parte dell'utente nell'interazione con il tuo servizio nel caso in cui il token App Check fosse diventato obsoleto.
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
}
Infine, dopo esserti assicurato che l'app sia inizializzata, devi chiamare la funzione setupAppCheck che hai appena creato. Nella parte inferiore del file hosting/src/index.js , aggiungi la chiamata al metodo aggiunto di recente.
const firebaseApp = initializeApp(getFirebaseConfig());
// add from here
setupAppCheck(firebaseApp);
// to here
getPerformance();
initFirebaseAuth();
loadMessages();
Prova prima localmente
Testa prima la tua applicazione localmente. Se non stai già servendo l'applicazione localmente, esegui firebase serve . Dovresti notare che l'applicazione non riesce ancora a caricarsi localmente. Questo perché hai registrato il tuo dominio Firebase solo con il provider di attestazione reCAPTCHA e non con il dominio localhost. Non dovresti mai registrare localhost come dominio approvato poiché ciò consente agli utenti di accedere ai tuoi backend limitati da un'applicazione in esecuzione localmente sul loro computer. Invece, poiché imposti self.FIREBASE_APPCHECK_DEBUG_TOKEN = true , vorresti controllare nella tua console JavaScript una riga simile a questa:
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.
Ti consigliamo di prendere il token di debug fornito (nel caso dell'esempio è: 55183c20-de61-4438-85e6-8065789265be ) e collegarlo alla configurazione App Check nel menu extra della tua app.
Dai al token un nome univoco che ricorderai e fai clic su Salva . Questa opzione ti consente di utilizzare un token generato dal client con la tua app che rappresenta un'alternativa più sicura rispetto alla generazione di un token di debug e all'incorporamento nell'applicazione. Incorporare un token all'interno dell'app potrebbe distribuirlo accidentalmente agli utenti finali e questi utenti finali potrebbero sfruttarlo aggirando i tuoi controlli. Se desideri distribuire un token di debug, ad esempio, in un ambiente CI, leggi questa documentazione per saperne di più su come distribuirlo.
Una volta registrato il token di debug nella console Firebase, puoi riattivare l'applicazione di App Check e verificare che il contenuto dell'app venga caricato localmente chiamando firebase serve dal terminale. Dovresti vedere i dati precedentemente inseriti essere serviti alla versione locale dell'applicazione web. Dovresti comunque vedere il messaggio con il token di debug stampato sulla console.
Provalo in produzione
Una volta accertato che App Check funzioni localmente, distribuisci l'applicazione Web in produzione. Dal tuo terminale chiama firebase deploy nuovamente e ricarica la pagina. Questo impacchetterà la tua applicazione web per l'esecuzione su Firebase Hosting. Una volta che la tua applicazione è ospitata su Firebase Hosting, prova a visitare la tua applicazione su ${YOUR_PROJECT_ID}.web.app . Puoi aprire la console JavaScript e non dovresti più vedere il token di debug stampato lì e dovresti vedere il caricamento delle chat nel tuo progetto. Inoltre, dopo aver interagito con l'applicazione per alcuni istanti, puoi visitare la sezione Controllo app della console Firebase e verificare che le richieste alla tua applicazione siano passate a tutte in fase di verifica.
8. Congratulazioni!
Congratulazioni, hai aggiunto correttamente Firebase App Check a un'app Web!
Puoi configurare la console Firebase per gestire un token reCAPTCHA Enterprise per ambienti di produzione e persino impostare token di debug per lo sviluppo locale. Ciò garantisce che le tue app siano ancora in grado di accedere alle risorse Firebase da client approvati e impedisce che si verifichino attività fraudolente all'interno della tua applicazione.
Qual è il prossimo?
Consulta la seguente documentazione per aggiungere Firebase App Check a: