1. Introduzione
Ultimo aggiornamento: 23/02/2023
Come faccio a impedire l'accesso non autorizzato alle mie 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 a un'attestazione che confermi che la richiesta proviene dalla tua app autentica e bloccando il traffico che non dispone di un'attestazione adeguata. Firebase App Check si basa su 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, Firebase Authentication con Identity Platform e sui backend che ospiti autonomamente.
Cosa creerai
In questo codelab, proteggerai un'applicazione di chat aggiungendo e poi applicando App Check.
Cosa imparerai a fare
- Come monitorare il backend per rilevare accessi non autorizzati
- Come applicare l'applicazione a Firestore e Cloud Storage
- Come eseguire l'applicazione con un token di debug per lo sviluppo locale
Che cosa ti serve
- L'IDE/l'editor di testo che preferisci
- Il gestore dei pacchetti npm, che in genere è incluso in Node.js
- L'interfaccia a riga di comando di Firebase installata e configurata per funzionare con il tuo account
- Un terminale/una console
- Un browser a tua scelta, ad esempio Chrome
- Il codice di esempio del codelab (vedi il passaggio successivo del codelab per scoprire come ottenere il codice).
2. recupera il codice campione
Clona il repository GitHub del codelab dalla riga di comando:
git clone https://github.com/firebase/codelab-friendlychat-web
In alternativa, se non hai installato Git, puoi scaricare il repository come file ZIP.
Importare l'app iniziale
Utilizzando l'IDE, apri o importa la directory 📁 appcheck-start dal repository clonato. Questa directory 📁 appcheck-start contiene il codice iniziale del codelab, che sarà un'app web di chat completamente funzionale. La directory 📁 appcheck-start conterrà il codice completo del codelab.appcheck
3. Crea e configura un progetto Firebase
Crea un progetto Firebase
- Accedi a Firebase.
- Nella console Firebase, fai clic su Aggiungi progetto e poi assegna il nome FriendlyChat al progetto Firebase. Ricorda l'ID progetto per il tuo progetto Firebase.
- Deseleziona Abilita Google Analytics per questo progetto
- Fai clic su Crea progetto.
L'applicazione che stiamo per creare utilizza i prodotti Firebase disponibili per le app web:
- Firebase Authentication per consentire facilmente agli utenti di accedere alla tua app.
- Cloud Firestore per salvare i dati strutturati sul cloud e ricevere una notifica immediata quando i dati cambiano.
- Cloud Storage for Firebase per salvare i file nel cloud.
- Firebase Hosting per ospitare e pubblicare gli asset.
- Firebase Cloud Messaging per inviare notifiche push e visualizzare notifiche popup del browser.
- Firebase Performance Monitoring per raccogliere i dati sul rendimento degli utenti per la tua app.
Alcuni di questi prodotti richiedono una configurazione speciale o devono essere attivati utilizzando la console Firebase.
Eseguire l'upgrade del piano tariffario di Firebase
Per utilizzare Cloud Storage for Firebase, il progetto Firebase deve utilizzare il piano tariffario Blaze (pagamento a consumo), il che significa che deve essere collegato a un account di fatturazione Cloud.
- Un account di fatturazione Cloud richiede un metodo di pagamento, ad esempio una carta di credito.
- Se non hai mai utilizzato Firebase e Google Cloud, controlla se hai l'idoneità a ricevere un credito di 300$e un account di fatturazione Cloud per la prova senza costi.
- Se stai svolgendo questo codelab nell'ambito di un evento, chiedi all'organizzatore se sono disponibili crediti Cloud.
Per eseguire l'upgrade del progetto al piano Blaze:
- Nella console Firebase, seleziona l'upgrade del piano.
- Seleziona il piano Blaze. Segui le istruzioni sullo schermo per collegare un account di fatturazione Cloud al tuo progetto.
Se hai dovuto creare un account di fatturazione Cloud nell'ambito di questo upgrade, potresti dover tornare al flusso di upgrade nella console Firebase per completarlo.
Aggiungi un'app web Firebase al progetto
- Fai clic sull'icona web
per creare una nuova app web Firebase. - Registra l'app con il nickname Chat amichevole, quindi seleziona la casella accanto a Configura anche Firebase Hosting per questa app. Fai clic su Registra app.
- Nel passaggio successivo, vedrai un comando per installare Firebase utilizzando npm e un oggetto di configurazione. Copia questo oggetto in un secondo momento nel codelab, quindi per il momento premi Avanti.
- Vedrai un'opzione per installare l'interfaccia a riga di comando di Firebase. Se non l'hai ancora installato, fallo ora utilizzando il comando
npm install -g firebase-tools. Fai quindi clic su Avanti. - Viene visualizzata un'opzione per accedere a Firebase ed eseguire il deployment in Firebase Hosting. Accedi a Firebase utilizzando il comando
firebase login, quindi fai clic su Continua alla console. Eseguirai il deployment in Firebase Hosting in un passaggio successivo.
Attivare Accedi con Google per Firebase Authentication
Per consentire agli utenti di accedere all'app web con i propri Account Google, utilizzeremo il metodo di accesso Google.
Dovrai attivare Accedi con Google:
- Nella console Firebase, individua la sezione Build nel riquadro a sinistra.
- Fai clic su Autenticazione, poi su Inizia, se applicabile, quindi sulla scheda Metodo di accesso (o fai clic qui per andare direttamente a questa pagina).
- Attivare il provider di Accedi con Google
- Imposta il nome visibile al pubblico della tua app su Chat amichevole e scegli un'email di assistenza del progetto dal menu a discesa.
- Fai clic su Salva
Configura Cloud Firestore
L'app web utilizza Cloud Firestore per salvare i messaggi della chat e ricevere nuovi messaggi.
Ecco come configurare Cloud Firestore nel tuo progetto Firebase:
- Nel riquadro a sinistra della console Firebase, espandi Build e seleziona Database Firestore.
- Fai clic su Crea database.
- Lascia l'ID database impostato su
(default). - Seleziona una posizione per il database, poi fai clic su Avanti.
Per un'app reale, scegli una posizione vicina ai tuoi utenti. - Fai clic su Avvia in modalità di test. Leggi il disclaimer relativo alle regole di sicurezza.
Più avanti in questo codelab, aggiungerai le regole di sicurezza per proteggere i tuoi dati. Non distribuire o esporre pubblicamente un'app senza aggiungere regole di sicurezza per il tuo database. - Fai clic su Crea.
Configurare Cloud Storage for Firebase
L'app web utilizza Cloud Storage per Firebase per archiviare, caricare e condividere le foto.
Ecco come configurare Cloud Storage for Firebase nel tuo progetto Firebase:
- Nel riquadro a sinistra della console Firebase, espandi Build e seleziona Archiviazione.
- Fai clic su Inizia.
- Seleziona una posizione per il bucket di archiviazione predefinito.
I bucket inUS-WEST1,US-CENTRAL1eUS-EAST1possono usufruire del livello"Sempre senza costi" per Google Cloud Storage. I bucket in tutte le altre località rispettano i prezzi e l'utilizzo di Google Cloud Storage. - Fai clic su Avvia in modalità di test. Leggi il disclaimer relativo alle regole di sicurezza.
Più avanti in questo codelab, aggiungerai regole di sicurezza per proteggere i tuoi dati. Non distribuire o esporre un'app pubblicamente senza aggiungere regole di sicurezza per il bucket di archiviazione. - Fai clic su Crea.
4. Configura Firebase
Dalla directory appcheck-start, chiama:
firebase use --add
Quando richiesto, seleziona il tuo ID progetto e poi assegna un alias al progetto Firebase. Per questo progetto, puoi semplicemente assegnare un alias di default. Successivamente, dovrai configurare il progetto locale per il funzionamento con Firebase.
- Vai alle impostazioni del progetto nella Console Firebase.
- Nella scheda "Le tue app", seleziona il nickname dell'app per cui hai bisogno di un oggetto di configurazione.
- Seleziona Configurazione dal riquadro dello snippet dell'SDK Firebase.
- Copia lo snippet dell'oggetto di configurazione e 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.firebasestorage.app",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "G-MEASUREMENT_ID",
};
Dalla stessa directory appcheck-start, chiama:
firebase experiments:enable webframeworks
In questo modo viene attivato il supporto del framework web con cui è stato creato il progetto.
Ora è tutto pronto per eseguire il progetto e verificare che funzioni.
5. Provare l'app senza App Check
Ora che hai configurato l'app e l'SDK, prova a utilizzarla come progettata originariamente. Innanzitutto, installa tutte le dipendenze. Dal terminale, vai alla directory appcheck-start/hosting. All'interno della directory, esegui npm install. Vengono recuperate tutte le dipendenze necessarie per il funzionamento del progetto. Per avviare l'app nel suo stato corrente, puoi eseguire firebase serve. L'app ti chiede di accedere con un Account Google. Effettua l'accesso e prova a pubblicare alcuni messaggi e foto nella chat.
Ora che l'hai testato localmente, è il momento di vederlo in produzione. Esegui firebase deploy per eseguire il deployment dell'applicazione web sul web. Questa parte è un passaggio fondamentale per dimostrare il funzionamento di App Check nella realtà, in quanto richiede la configurazione di un dominio per il provider di attestazione reCAPTCHA Enterprise.
Speriamo che tu stia utilizzando la funzionalità predefinita fornita dall'app. Pubblicare messaggi di chat e tutto ciò che deve 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 risorse di backend. Devono comunque rispettare le regole di sicurezza in vigore nei sistemi Firestore e Cloud Storage, ma possono comunque eseguire query, archiviare e accedere ai dati archiviati al loro interno.
Nei prossimi passaggi:
- Registrati su App Check
- Convalidare l'applicazione forzata
- Iniziare ad applicare le regole
6. Attivare App Check e l'applicazione
Iniziamo acquisendo una chiave reCAPTCHA Enterprise per il tuo progetto e aggiungendola ad App Check. Per iniziare, vai alla sezione reCAPTCHA Enterprise della console Google Cloud. Seleziona il progetto e ti verrà chiesto di abilitare l'API reCAPTCHA Enterprise. Abilita l'API e attendi qualche minuto per il completamento. Quindi, fai clic su Crea chiave accanto a Chiavi aziendali. In questa sezione, specifica un nome visualizzato e seleziona una chiave di tipo Sito web. Devi specificare i domini su cui è ospitata la tua app. Poiché prevedi di ospitarlo su Firebase Hosting, utilizza il nome dell'hosting predefinito, che in genere è ${YOUR_PROJECT_ID}.web.app. Puoi trovare il tuo dominio di hosting nella sezione Hosting della Console Firebase. Dopo aver compilato queste informazioni, premi Fine e Crea chiave.
Al termine, viene visualizzato un ID nella parte superiore della pagina Dettagli chiave.
Copia questo ID negli appunti. Si tratta della chiave che utilizzi per App Check. Poi, vai alla sezione Controllo app della Console Firebase e fai clic su Inizia. Poi, fai clic su Registrati, poi su reCAPTCHA Enterprise e inserisci l'ID copiato nella casella di testo per la chiave di sito reCAPTCHA Enterprise. Lascia le altre impostazioni predefinite. La pagina di controllo dell'app dovrebbe avere il seguente aspetto:
Richieste non verificate e non applicate
Ora che hai una chiave registrata nella Console Firebase, torna a eseguire il sito nel browser eseguendo firebase serve. L'app web è in esecuzione localmente e puoi iniziare di nuovo a inviare richieste al backend di Firebase. Poiché le richieste violano il backend di Firebase, vengono monitorate da App Check, ma non vengono applicate. Se vuoi visualizzare lo stato delle richieste in arrivo, puoi visitare la sezione Cloud Firestore nella scheda API della pagina Controllo app nella Console Firebase. Poiché non hai ancora configurato il client per l'utilizzo di App Check, dovresti visualizzare qualcosa di simile al seguente:
Il backend riceve richieste non verificate al 100%. Questa schermata è utile perché mostra che quasi tutte le richieste dei client provengono da client che non hanno integrato App Check.
Questa dashboard può indicare diversi aspetti. La prima cosa che può indicare è se tutte le app client eseguono la versione più recente del client. In questo caso, puoi applicare App Check in tutta sicurezza senza preoccuparti di disattivare l'accesso per un client autentico della tua applicazione. L'altra cosa che potresti scoprire è il numero di tentativi di accesso al tuo backend che non provengono dall'interno della tua app. Potrebbero essere utenti che eseguono query direttamente sul tuo backend a tua insaputa. Poiché puoi vedere che le richieste non sono verificate, è il momento di capire cosa succederebbe agli utenti che potrebbero avere una richiesta non verificata al tuo backend prima di procedere alla verifica delle loro richieste.
Richieste non verificate e applicate
Vai avanti e premi il pulsante Applica nella schermata precedente, quindi premi di nuovo Applica se richiesto.
Verrà avviata l'applicazione di App Check, che bloccherà le richieste ai servizi di backend non verificati 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 recuperare i 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 richieste bloccate da App Check 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 esaminare come aggiungere App Check di reCAPTCHA Enterprise all'esempio di chat amichevole.
7. Aggiungere la chiave reCAPTCHA Enterprise al sito
Aggiungeremo la chiave aziendale alla tua applicazione. Innanzitutto, apri hosting/src/firebase-config.js e aggiungi la tua 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"
};
Al termine, apri hosting/src/index.js e, nella riga 51, aggiungi un'importazione da firebase-config.js per recuperare la chiave reCAPTCHA e importare anche la libreria App Check in modo da poter utilizzare il provider 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';
Poi, nella riga successiva, creerai una funzione per configurare App Check. La funzione controlla innanzitutto se ti trovi in un ambiente di sviluppo e, in questo caso, stampa un token di debug che puoi 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 in modo che funzioni con il provider selezionato, in questo caso reCAPTCHA Enterprise. Ti consigliamo inoltre di aggiornare automaticamente il token di App Check in background, in modo da evitare qualsiasi tipo di ritardo nell'interazione dell'utente con il tuo servizio nel caso in cui il token di App Check non fosse più valido.
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 aver verificato che l'app sia stata 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();
Esegui prima il test a livello locale
Testa prima l'applicazione in locale. Se non stai già pubblicando l'applicazione localmente, esegui firebase serve. Dovresti notare che l'applicazione continua a non caricarsi localmente. Questo accade perché hai registrato il tuo dominio Firebase solo con il provider di attestazione reCAPTCHA e non con il dominio localhost. Non devi mai registrare localhost come dominio approvato, in quanto ciò consente agli utenti di accedere ai tuoi backend con limitazioni da un'applicazione in esecuzione localmente sulla loro macchina. Poiché hai impostato self.FIREBASE_APPCHECK_DEBUG_TOKEN = true, ti consigliamo di controllare nella console JavaScript se è presente una riga simile alla seguente:
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.
Dovresti prendere il token di debug fornito (nell'esempio è : 55183c20-de61-4438-85e6-8065789265be) e inserirlo nella configurazione di Controllo app nel menu overflow per la tua app.
Assegna al token un nome univoco facile da ricordare e fai clic su Salva. Questa opzione ti consente di utilizzare un token generato dal client con la tua app, un'alternativa più sicura rispetto alla generazione di un token di debug e alla sua incorporazione all'interno dell'applicazione. Se incorpori un token all'interno dell'app, questo potrebbe essere distribuito accidentalmente agli utenti finali, che potrebbero sfruttarlo bypassando i tuoi controlli. Se vuoi distribuire un token di debug, ad esempio in un ambiente CI, leggi questa documentazione per scoprire 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 i contenuti dell'app vengano caricati localmente chiamando firebase serve dal terminale. Dovresti vedere i dati inseriti in precedenza pubblicati nella versione locale dell'applicazione web. Dovresti comunque vedere il messaggio con il token di debug stampato nella console.
Provare la funzionalità in produzione
Una volta che hai verificato che App Check funziona localmente, esegui il deployment dell'applicazione web in produzione. Dal terminale, richiama firebase deploy e ricarica la pagina. In questo modo, l'applicazione web verrà pacchettizzata per l'esecuzione su Firebase Hosting. Una volta che l'applicazione è ospitata su Firebase Hosting, prova a visitarla all'indirizzo ${YOUR_PROJECT_ID}.web.app. Puoi aprire la console JavaScript e non dovresti più vedere il token di debug stampato e dovresti vedere il caricamento delle chat nel tuo progetto. Inoltre, dopo aver interagito con l'applicazione per alcuni istanti, puoi visitare la sezione App Check della console Firebase e verificare che tutte le richieste alla tua applicazione siano state verificate.
8. Complimenti!
Congratulazioni, hai aggiunto Firebase App Check a un'app web.
Puoi configurare la Console Firebase per gestire un token reCAPTCHA Enterprise per gli ambienti di produzione e persino configurare token di debug per lo sviluppo locale. In questo modo, le tue app potranno continuare ad accedere alle risorse di Firebase da client approvati e verrà impedita la comparsa di attività fraudolente all'interno della tua applicazione.
Passaggi successivi
Consulta la seguente documentazione per aggiungere Firebase App Check a: