1. Cosa creerai
In questo codelab creerai un blog di viaggi con una mappa collaborativa in tempo reale con le ultime novità della nostra libreria Angular: AngularFire. L'app web finale sarà costituita da un blog di viaggi in cui potrai caricare immagini di ogni luogo che hai visitato.
AngularFire verrà utilizzato per creare l'app web, Emulator Suite per i test locali, Authentication per tenere traccia dei dati utente, Firestore e Storage per archiviare dati e contenuti multimediali, il tutto con la potenza di Cloud Functions e, infine, Firebase Hosting per il deployment dell'app.
Obiettivi didattici
- Come sviluppare con i prodotti Firebase in locale con Emulator Suite
- Come migliorare la tua app web con AngularFire
- Come rendere persistenti i dati in Firestore
- Come rendere persistenti i contenuti multimediali in Storage
- Come eseguire il deployment dell'app su Firebase Hosting
- Come utilizzare Cloud Functions per interagire con i database e le API
Che cosa ti serve
- Node.js versione 10 o successive
- Un Account Google per la creazione e la gestione del tuo progetto Firebase
- Interfaccia a riga di comando di Firebase versione 11.14.2 o successive
- Un browser a tua scelta, ad esempio Chrome
- Conoscenza di base di Angular e JavaScript
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.
Il repository GitHub contiene progetti di esempio per più piattaforme.
Questo codelab utilizza solo il repository webframework:
- 📁 webframework: il codice iniziale su cui lavorerai durante questo codelab.
Installa le dipendenze
Dopo la clonazione, installa le dipendenze nelle cartelle root e functions prima di creare l'app web.
cd webframework && npm install
cd functions && npm install
Installa l'interfaccia a riga di comando di Firebase
Installa l'interfaccia a riga di comando di Firebase utilizzando questo comando in un terminale:
npm install -g firebase-tools
Verifica che la versione dell'interfaccia a riga di comando di Firebase sia superiore alla 11.14.2 utilizzando:
firebase --version
Se la tua versione è precedente alla 11.14.2, esegui l'aggiornamento utilizzando:
npm update firebase-tools
3. Crea e configura un progetto Firebase
Crea un progetto Firebase
- Accedi alla console Firebase utilizzando il tuo Account Google.
- Fai clic sul pulsante per creare un nuovo progetto, quindi inserisci un nome per il progetto (ad esempio
FriendlyChat).
- Fai clic su Continua.
- Se richiesto, leggi e accetta i termini di Firebase, quindi fai clic su Continua.
- (Facoltativo) Attiva l'assistenza AI nella console Firebase (denominata "Gemini in Firebase").
- Per questo codelab non hai bisogno di Google Analytics, quindi disattiva l'opzione Google Analytics.
- Fai clic su Crea progetto, attendi il provisioning del progetto, poi fai clic su Continua.
Aggiungere un'app web Firebase al progetto
- Fai clic sull'icona web per creare una nuova app web Firebase.
- Nel passaggio successivo vedrai un oggetto di configurazione. Copia i contenuti di questo oggetto nel file
environments/environment.ts.
Configura i prodotti Firebase
L'applicazione che creeremo 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 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 le risorse.
- Funzioni per interagire con API interne ed esterne.
Alcuni di questi prodotti richiedono configurazioni speciali o devono essere abilitati utilizzando la console Firebase.
Attiva l'accesso 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.
Per attivare l'accesso con Google:
- Nella console Firebase, individua la sezione Build nel riquadro a sinistra.
- Fai clic su Autenticazione, quindi sulla scheda Metodo di accesso (o fai clic qui per andare direttamente alla scheda).
- Attiva il fornitore di accesso Google, quindi fai clic su Salva.
- Imposta il nome visibile al pubblico della tua app su <your-project-name> e scegli un indirizzo email di assistenza per il progetto dal menu a discesa.
Attiva Cloud Firestore
- Nella sezione Build della console Firebase, fai clic su Firestore Database.
- Fai clic su Crea database nel riquadro Cloud Firestore.
- Imposta la località in cui vengono archiviati i tuoi dati di Cloud Firestore. Puoi lasciare il valore predefinito o scegliere una regione vicina a te.
Attivare Cloud Storage
L'app web utilizza Cloud Storage per Firebase per archiviare, caricare e condividere immagini.
- Nella sezione Build della console Firebase, fai clic su Storage.
- Se non è presente il pulsante Inizia, significa che Cloud Storage è già
e non devi seguire i passaggi riportati di seguito.
- Fai clic su Get Started.
- Leggi l'esclusione di responsabilità relativa alle regole di sicurezza per il tuo progetto Firebase, poi fai clic su Avanti.
- La posizione di Cloud Storage è preselezionata con la stessa regione che hai scelto per il database Cloud Firestore. Fai clic su Fine per completare la configurazione.
Con le regole di sicurezza predefinite, qualsiasi utente autenticato può scrivere qualsiasi cosa in Cloud Storage. Più avanti in questo codelab, renderemo più sicuro il nostro spazio di archiviazione.
4. Connettersi al progetto Firebase
L'interfaccia a riga di comando (CLI) di Firebase ti consente di utilizzare Firebase Hosting per pubblicare la tua app web localmente, nonché di eseguirne il deployment nel tuo progetto Firebase.
Assicurati che la riga di comando acceda alla directory locale webframework della tua app.
Collega il codice dell'app web al tuo progetto Firebase. Innanzitutto, accedi all'interfaccia a riga di comando di Firebase nella riga di comando:
firebase login
Quindi, esegui il comando seguente per creare un alias del progetto. Sostituisci $YOUR_PROJECT_ID con l'ID del tuo progetto Firebase.
firebase use $YOUR_PROJECT_ID
Aggiungere AngularFire
Per aggiungere AngularFire all'app, esegui questo comando:
ng add @angular/fire
Poi, segui le istruzioni della riga di comando e seleziona le funzionalità esistenti nel tuo progetto Firebase.
Inizializza Firebase
Per inizializzare il progetto Firebase, esegui:
firebase init
Quindi, seguendo le richieste della riga di comando, seleziona le funzionalità e gli emulatori utilizzati nel tuo progetto Firebase.
Avvia gli emulatori
Dalla directory webframework, esegui questo comando per avviare gli emulatori:
firebase emulators:start
Alla fine dovresti vedere qualcosa di simile a questo:
$ firebase emulators:start
i emulators: Starting emulators: auth, functions, firestore, hosting, functions
i firestore: Firestore Emulator logging to firestore-debug.log
i hosting: Serving hosting files from: public
✔ hosting: Local server: http://localhost:5000
i ui: Emulator UI logging to ui-debug.log
i functions: Watching "/functions" for Cloud Functions...
✔ functions[updateMap]: firestore function initialized.
┌─────────────────────────────────────────────────────────────┐
│ ✔ All emulators ready! It is now safe to connect your app. │
│ i View Emulator UI at http://localhost:4000 │
└─────────────────────────────────────────────────────────────┘
┌────────────────┬────────────────┬─────────────────────────────────┐
│ Emulator │ Host:Port │ View in Emulator UI │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Authentication │ localhost:9099 │ http://localhost:4000/auth │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Functions │ localhost:5001 │ http://localhost:4000/functions │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Firestore │ localhost:8080 │ http://localhost:4000/firestore │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Hosting │ localhost:5000 │ n/a │
└────────────────┴────────────────┴─────────────────────────────────┘
Emulator Hub running at localhost:4400
Other reserved ports: 4500
Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.
Quando viene visualizzato il messaggio ✔All emulators ready!, gli emulatori sono pronti all'uso.
Dovresti vedere l'interfaccia utente dell'app di viaggio, che non è (ancora) funzionante:
Ora iniziamo a creare.
5. Connettere l'app web agli emulatori
In base alla tabella nei log dell'emulatore, l'emulatore Cloud Firestore è in ascolto sulla porta 8080 e l'emulatore Authentication è in ascolto sulla porta 9099.
Apri EmulatorUI
Nel browser web, vai alla pagina http://127.0.0.1:4000/. Dovresti visualizzare l'interfaccia utente di Emulator Suite.
Instradare l'app per utilizzare gli emulatori
In src/app/app.module.ts, aggiungi il seguente codice all'elenco di importazioni di AppModule:
@NgModule({
declarations: [...],
imports: [
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
const auth = getAuth();
if (location.hostname === 'localhost') {
connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings: true });
}
return auth;
}),
provideFirestore(() => {
const firestore = getFirestore();
if (location.hostname === 'localhost') {
connectFirestoreEmulator(firestore, '127.0.0.1', 8080);
}
return firestore;
}),
provideFunctions(() => {
const functions = getFunctions();
if (location.hostname === 'localhost') {
connectFunctionsEmulator(functions, '127.0.0.1', 5001);
}
return functions;
}),
provideStorage(() => {
const storage = getStorage();
if (location.hostname === 'localhost') {
connectStorageEmulator(storage, '127.0.0.1', 5001);
}
return storage;
}),
...
]
L'app è ora configurata per utilizzare emulatori locali, consentendo di eseguire test e sviluppo localmente.
6. Aggiunta dell'autenticazione
Ora che gli emulatori sono configurati per l'app, possiamo aggiungere funzionalità di autenticazione per assicurarci che ogni utente abbia eseguito l'accesso prima di pubblicare messaggi.
Per farlo, possiamo importare le funzioni signin direttamente da AngularFire e monitorare lo stato di autenticazione dell'utente con la funzione authState. Modifica le funzioni della pagina di accesso in modo che la pagina verifichi lo stato di autenticazione dell'utente al caricamento.
Inserimento di AngularFire Auth
In src/app/pages/login-page/login-page.component.ts, importa Auth da @angular/fire/auth e inseriscilo in LoginPageComponent. Anche i provider di autenticazione, come Google, e le funzioni comesignin, signout possono essere importati direttamente dallo stesso pacchetto e utilizzati nell'app.
import { Auth, GoogleAuthProvider, signInWithPopup, signOut, user } from '@angular/fire/auth';
export class LoginPageComponent implements OnInit {
private auth: Auth = inject(Auth);
private provider = new GoogleAuthProvider();
user$ = user(this.auth);
constructor() {}
ngOnInit(): void {}
login() {
signInWithPopup(this.auth, this.provider).then((result) => {
const credential = GoogleAuthProvider.credentialFromResult(result);
return credential;
})
}
logout() {
signOut(this.auth).then(() => {
console.log('signed out');}).catch((error) => {
console.log('sign out error: ' + error);
})
}
}
Ora la pagina di accesso è funzionante. Prova ad accedere e controlla i risultati nell'emulatore di autenticazione.
7. Configurazione di Firestore
In questo passaggio, aggiungerai la funzionalità per pubblicare e aggiornare i post del blog di viaggi archiviati in Firestore.
Analogamente all'autenticazione, le funzioni Firestore sono preconfigurate da AngularFire. Ogni documento appartiene a una raccolta e ogni documento può avere anche raccolte nidificate. Per creare e aggiornare un post del blog di viaggi, è necessario conoscere l'path del documento in Firestore.
Implementazione di TravelService
Poiché molte pagine diverse dovranno leggere e aggiornare i documenti Firestore nell'app web, possiamo implementare le funzioni in src/app/services/travel.service.ts per evitare di inserire ripetutamente le stesse funzioni AngularFire in ogni pagina.
Inizia con l'inserimento di Auth, in modo simile al passaggio precedente, e di Firestore nel nostro servizio. È utile anche definire un oggetto osservabile user$ che ascolti lo stato di autenticazione corrente.
import { doc, docData, DocumentReference, Firestore, getDoc, setDoc, updateDoc, collection, addDoc, deleteDoc, collectionData, Timestamp } from "@angular/fire/firestore";
export class TravelService {
firestore: Firestore = inject(Firestore);
auth: Auth = inject(Auth);
user$ = authState(this.auth).pipe(filter(user => user !== null), map(user => user!));
router: Router = inject(Router);
Aggiungere un post di viaggio
I post di viaggi esisteranno come documenti archiviati in Firestore e, poiché i documenti devono esistere all'interno delle raccolte, la raccolta che contiene tutti i post di viaggi verrà denominata travels. Pertanto, il percorso di qualsiasi post di viaggio sarà travels/
Utilizzando la funzione addDoc di AngularFire, è possibile inserire un oggetto in una raccolta:
async addEmptyTravel(userId: String) {
...
addDoc(collection(this.firestore, 'travels'), travelData).then((travelRef) => {
collection(this.firestore, `travels/${travelRef.id}/stops`);
setDoc(travelRef, {... travelData, id: travelRef.id})
this.router.navigate(['edit', `${travelRef.id}`]);
return travelRef;
})
}
Aggiornamento ed eliminazione dei dati
Dato l'UID di un post di viaggio, è possibile dedurre il percorso del documento archiviato in Firestore, che può essere letto, aggiornato o eliminato utilizzando le funzioni updateFoc e deleteDoc di AngularFire:
async updateData(path: string, data: Partial<Travel | Stop>) {
await updateDoc(doc(this.firestore, path), data)
}
async deleteData(path: string) {
const ref = doc(this.firestore, path);
await deleteDoc(ref)
}
Lettura dei dati come osservabile
Poiché i post di viaggio e le tappe lungo il percorso possono essere modificati dopo la creazione, sarebbe più utile ottenere gli oggetti del documento come osservabili, per iscriversi a qualsiasi modifica apportata. Questa funzionalità è offerta dalle funzioni docData e collectionData di @angular/fire/firestore.
getDocData(path: string) {
return docData(doc(this.firestore, path), {idField: 'id'}) as Observable<Travel | Stop>
}
getCollectionData(path: string) {
return collectionData(collection(this.firestore, path), {idField: 'id'}) as Observable<Travel[] | Stop[]>
}
Aggiungere tappe a un post di viaggio
Ora che le operazioni sui post di viaggio sono configurate, è il momento di prendere in considerazione le fermate, che esisteranno in una sottoraccolta di un post di viaggio come segue: travels/
La procedura è quasi identica a quella per creare un post di viaggio, quindi mettiti alla prova e prova a implementarla da solo oppure consulta l'implementazione riportata di seguito:
async addStop(travelId: string) {
...
const ref = await addDoc(collection(this.firestore, `travels/${travelId}/stops`), stopData)
setDoc(ref, {...stopData, id: ref.id})
}
Bene! Le funzioni Firestore sono state implementate nel servizio Travel, quindi ora puoi vederle in azione.
Utilizzo delle funzioni di Firestore nell'app
Vai a src/app/pages/my-travels/my-travels.component.ts e inserisci TravelService per utilizzare le sue funzioni.
travelService = inject(TravelService);
travelsData$: Observable<Travel[]>;
stopsList$!: Observable<Stop[]>;
constructor() {
this.travelsData$ = this.travelService.getCollectionData(`travels`) as Observable<Travel[]>
}
TravelService viene chiamato nel costruttore per ottenere un array Observable di tutti i viaggi.
Nel caso in cui siano necessari solo gli spostamenti dell'utente attuale, utilizza la funzione query.
Altri metodi per garantire la sicurezza includono l'implementazione di regole di sicurezza o l'utilizzo di Cloud Functions con Firestore, come illustrato nei passaggi facoltativi di seguito.
Poi, chiama semplicemente le funzioni implementate in TravelService.
async createTravel(userId: String) {
this.travelService.addEmptyTravel(userId);
}
deleteTravel(travelId: String) {
this.travelService.deleteData(`travels/${travelId}`)
}
Ora la pagina I miei viaggi dovrebbe essere funzionante. Scopri cosa succede nell'emulatore Firestore quando crei un nuovo post di viaggio.
Quindi, ripeti l'operazione per le funzioni di aggiornamento in /src/app/pages/edit-travels/edit-travels.component.ts :
travelService: TravelService = inject(TravelService)
travelId = this.activatedRoute.snapshot.paramMap.get('travelId');
travelData$: Observable<Travel>;
stopsData$: Observable<Stop[]>;
constructor() {
this.travelData$ = this.travelService.getDocData(`travels/${this.travelId}`) as Observable<Travel>
this.stopsData$ = this.travelService.getCollectionData(`travels/${this.travelId}/stops`) as Observable<Stop[]>
}
updateCurrentTravel(travel: Partial<Travel>) {
this.travelService.updateData(`travels${this.travelId}`, travel)
}
updateCurrentStop(stop: Partial<Stop>) {
stop.type = stop.type?.toString();
this.travelService.updateData(`travels${this.travelId}/stops/${stop.id}`, stop)
}
addStop() {
if (!this.travelId) return;
this.travelService.addStop(this.travelId);
}
deleteStop(stopId: string) {
if (!this.travelId || !stopId) {
return;
}
this.travelService.deleteData(`travels${this.travelId}/stops/${stopId}`)
this.stopsData$ = this.travelService.getCollectionData(`travels${this.travelId}/stops`) as Observable<Stop[]>
}
8. Configurazione dello spazio di archiviazione
Ora implementerai Storage per archiviare immagini e altri tipi di contenuti multimediali.
Cloud Firestore è ideale per archiviare dati strutturati, come oggetti JSON. Cloud Storage è progettato per archiviare file o blob. In questa app, lo utilizzerai per consentire agli utenti di condividere le foto dei loro viaggi.
Allo stesso modo, con Firestore, l'archiviazione e l'aggiornamento dei file con Storage richiedono un identificatore univoco per ogni file.
Implementiamo le funzioni in TraveService:
Caricamento di un file
Vai a src/app/services/travel.service.ts e inserisci Storage da AngularFire:
export class TravelService {
firestore: Firestore = inject(Firestore);
auth: Auth = inject(Auth);
storage: Storage = inject(Storage);
e implementa la funzione di caricamento:
async uploadToStorage(path: string, input: HTMLInputElement, contentType: any) {
if (!input.files) return null
const files: FileList = input.files;
for (let i = 0; i < files.length; i++) {
const file = files.item(i);
if (file) {
const imagePath = `${path}/${file.name}`
const storageRef = ref(this.storage, imagePath);
await uploadBytesResumable(storageRef, file, contentType);
return await getDownloadURL(storageRef);
}
}
return null;
}
La differenza principale tra l'accesso ai documenti da Firestore e ai file da Cloud Storage è che, sebbene entrambi seguano percorsi strutturati in cartelle, la combinazione di URL di base e percorso viene ottenuta tramite getDownloadURL, che può essere archiviato e utilizzato in un file
Utilizzare la funzione nell'app
Vai a src/app/components/edit-stop/edit-stop.component.ts e chiama la funzione di caricamento utilizzando:
async uploadFile(file: HTMLInputElement, stop: Partial<Stop>) {
const path = `/travels/${this.travelId}/stops/${stop.id}`
const url = await this.travelService.uploadToStorage(path, file, {contentType: 'image/png'});
stop.image = url ? url : '';
this.travelService.updateData(path, stop);
}
Quando l'immagine viene caricata, il file multimediale stesso viene caricato nello spazio di archiviazione e l'URL viene memorizzato di conseguenza nel documento in Firestore.
9. Implementazione dell'applicazione
Ora siamo pronti per eseguire il deployment dell'applicazione.
Copia le configurazioni firebase da src/environments/environment.ts a src/environments/environment.prod.ts ed esegui:
firebase deploy
Il risultato dovrebbe essere simile a questo:
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.
=== Deploying to 'friendly-travels-b6a4b'...
i deploying storage, firestore, hosting
i firebase.storage: checking storage.rules for compilation errors...
✔ firebase.storage: rules file storage.rules compiled successfully
i firestore: reading indexes from firestore.indexes.json...
i cloud.firestore: checking firestore.rules for compilation errors...
✔ cloud.firestore: rules file firestore.rules compiled successfully
i storage: latest version of storage.rules already up to date, skipping upload...
i firestore: deploying indexes...
i firestore: latest version of firestore.rules already up to date, skipping upload...
✔ firestore: deployed indexes in firestore.indexes.json successfully for (default) database
i hosting[friendly-travels-b6a4b]: beginning deploy...
i hosting[friendly-travels-b6a4b]: found 6 files in .firebase/friendly-travels-b6a4b/hosting
✔ hosting[friendly-travels-b6a4b]: file upload complete
✔ storage: released rules storage.rules to firebase.storage
✔ firestore: released rules firestore.rules to cloud.firestore
i hosting[friendly-travels-b6a4b]: finalizing version...
✔ hosting[friendly-travels-b6a4b]: version finalized
i hosting[friendly-travels-b6a4b]: releasing new version...
✔ hosting[friendly-travels-b6a4b]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/friendly-travels-b6a4b/overview
Hosting URL: https://friendly-travels-b6a4b.web.app
10. Complimenti!
Ora l'applicazione dovrebbe essere completa e sottoposta a deployment su Firebase Hosting. Tutti i dati e le analisi saranno ora accessibili nella console Firebase.
Per altre funzionalità relative ad AngularFire, Functions e regole di sicurezza, non dimenticare di consultare i passaggi facoltativi riportati di seguito, nonché gli altri Firebase Codelab.
11. (Facoltativo) Protezioni di autenticazione AngularFire
Oltre a Firebase Authentication, AngularFire offre anche guardie basate sull'autenticazione sulle route, in modo che gli utenti con accesso insufficiente possano essere reindirizzati. Ciò contribuisce a proteggere l'app dall'accesso degli utenti ai dati protetti.
In src/app/app-routing.module.ts, importa
import {AuthGuard, redirectLoggedInTo, redirectUnauthorizedTo} from '@angular/fire/auth-guard'
Puoi quindi definire le funzioni per determinare quando e dove gli utenti devono essere reindirizzati su determinate pagine:
const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['signin']);
const redirectLoggedInToTravels = () => redirectLoggedInTo(['my-travels']);
Poi aggiungili semplicemente ai tuoi percorsi:
const routes: Routes = [
{path: '', component: LoginPageComponent, canActivate: [AuthGuard], data: {authGuardPipe: redirectLoggedInToTravels}},
{path: 'signin', component: LoginPageComponent, canActivate: [AuthGuard], data: {authGuardPipe: redirectLoggedInToTravels}},
{path: 'my-travels', component: MyTravelsComponent, canActivate: [AuthGuard], data: {authGuardPipe: redirectUnauthorizedToLogin}},
{path: 'edit/:travelId', component: EditTravelsComponent, canActivate: [AuthGuard], data: {authGuardPipe: redirectUnauthorizedToLogin}},
];
12. (Facoltativo) Regole di sicurezza
Sia Firestore che Cloud Storage utilizzano regole di sicurezza (firestore.rules e security.rules rispettivamente) per applicare la sicurezza e convalidare i dati.
Al momento, i dati di Firestore e Storage sono accessibili in lettura e scrittura, ma non vuoi che le persone modifichino i post di altri. Puoi utilizzare le regole di sicurezza per limitare l'accesso alle tue raccolte e ai tuoi documenti.
Regole di Firestore
Per consentire solo agli utenti autenticati di visualizzare i post di viaggi, vai al file firestore.rules e aggiungi:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/travels {
allow read: if request.auth.uid != null;
allow write:
if request.auth.uid == request.resource.data.userId;
}
}
Le regole di sicurezza possono essere utilizzate anche per convalidare i dati:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/posts {
allow read: if request.auth.uid != null;
allow write:
if request.auth.uid == request.resource.data.userId;
&& "author" in request.resource.data
&& "text" in request.resource.data
&& "timestamp" in request.resource.data;
}
}
Regole di archiviazione
Allo stesso modo, possiamo utilizzare le regole di sicurezza per applicare l'accesso ai database di archiviazione in storage.rules. Tieni presente che possiamo utilizzare le funzioni anche per controlli più complessi:
rules_version = '2';
function isImageBelowMaxSize(maxSizeMB) {
return request.resource.size < maxSizeMB * 1024 * 1024
&& request.resource.contentType.matches('image/.*');
}
service firebase.storage {
match /b/{bucket}/o {
match /{userId}/{postId}/{filename} {
allow write: if request.auth != null
&& request.auth.uid == userId && isImageBelowMaxSize(5);
allow read;
}
}
}