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 consisterà in un blog di viaggi in cui potrai caricare le immagini di ogni località 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 la persistenza di dati e contenuti multimediali, basati su Cloud Functions e, infine, Firebase Hosting per il deployment dell'app.
Obiettivi didattici
- Come sviluppare con i prodotti Firebase localmente con Emulator Suite
- Come migliorare la tua app web con AngularFire
- Come rendere persistenti i dati in Firestore
- Come mantenere i contenuti multimediali in Spazio di archiviazione
- 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 progetto Firebase
- Interfaccia a riga di comando di Firebase 11.14.2 o versioni 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 del framework web:
- 📁 webframework: il codice iniziale su cui lavorerai durante questo codelab.
Installa le dipendenze
Dopo la clonazione, installa le dipendenze nella cartella principale e functions prima di compilare 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 successiva 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
Creare un progetto Firebase
- Accedi a Firebase.
- Nella Console Firebase, fai clic su Aggiungi progetto e poi assegna un nome al progetto Firebase <your-project>. Ricorda l'ID progetto per il tuo progetto Firebase.
- Fai clic su Crea progetto.
Importante: il progetto Firebase avrà il nome <your-project>, ma Firebase gli assegnerà automaticamente un ID progetto univoco nel formato <your-project>-1234. Questo identificatore univoco è il modo in cui viene identificato il progetto (anche nella CLI), mentre <your-project> è semplicemente un nome visualizzato.
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 istantanea quando i dati cambiano.
- Cloud Storage for Firebase per salvare i file sul cloud.
- Firebase Hosting per ospitare e pubblicare gli asset.
- Funzioni per interagire con API interne ed esterne.
Alcuni di questi prodotti richiedono configurazioni speciali o devono essere attivati utilizzando la console Firebase.
Aggiungi 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.
Attivare 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 a questa pagina).
- Attiva il provider di accesso Google, quindi fai clic su Salva.
- Imposta il nome visibile al pubblico della tua app su <nome-del-tuo-progetto> e scegli un'email di assistenza per il progetto dal menu a discesa.
Attivare Cloud Firestore
- Nella sezione Build della console Firebase, fai clic su Database Firestore.
- Fai clic su Crea database nel riquadro Cloud Firestore.
- Imposta la posizione in cui sono archiviati i dati di Cloud Firestore. Puoi lasciare l'impostazione predefinita o scegliere una regione vicina a te.
Attivare Cloud Storage
L'app web utilizza Cloud Storage per Firebase per archiviare, caricare e condividere le foto.
- Nella sezione Build della console Firebase, fai clic su Archiviazione.
- Se non è presente il pulsante Inizia, significa che Cloud Storage è già
abilitata e non devi seguire i passaggi riportati di seguito.
- Fai clic su Inizia.
- Leggi il disclaimer relativo alle regole di sicurezza per il tuo progetto Firebase, quindi fai clic su Avanti.
- La posizione di Cloud Storage è preselezionata con la stessa regione scelta 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. Renderemo il nostro spazio di archiviazione più sicuro più avanti in questo codelab.
4. Eseguire la connessione 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 e di eseguire il deployment della tua app web nel tuo progetto Firebase.
Assicurati che la riga di comando acceda alla directory webframework locale dell'app.
Collega il codice dell'app web al tuo progetto Firebase. Innanzitutto, accedi all'interfaccia a riga di comando di Firebase:
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
Aggiungi AngularFire
Per aggiungere AngularFire all'app, esegui il comando:
ng add @angular/fire
Quindi, 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 istruzioni della riga di comando, seleziona le funzionalità e gli emulatori utilizzati nel progetto Firebase.
Avvia gli emulatori
Dalla directory webframework, esegui il seguente comando per avviare gli emulatori:
firebase emulators:start
Dovresti visualizzare qualcosa di simile al seguente:
$ 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 per l'uso.
Dovresti vedere l'interfaccia utente della tua app di viaggi, che non è (ancora!) funzionante:
Ora iniziamo a creare.
5. Collega 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 vedere l'interfaccia utente di Emulator Suite.
Indirizza l'app a 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, il che consente 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 i 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 controlli 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. I fornitori di servizi di autenticazione, come Google, e le funzioni comesignin, signout possono anche 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);
})
}
}
La pagina di accesso è ora funzionale. Prova ad accedere e controlla i risultati nell'emulatore di autenticazione.
7. Configurazione di Firestore
In questo passaggio, aggiungerai funzionalità per pubblicare e aggiornare i post del blog di viaggi archiviati in Firestore.
Analogamente all'autenticazione, le funzioni Firestore sono preconfezionate da AngularFire. Ogni documento appartiene a una raccolta e può avere anche raccolte nidificate. Per creare e aggiornare un post del blog di viaggio, devi conoscere il 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 iniettare ripetutamente le stesse funzioni AngularFire in ogni pagina.
Inizia inserendo Auth, come nel passaggio precedente, e Firestore nel nostro servizio. È utile anche definire un oggetto user$ osservabile che ascolta 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);
Aggiunta di un post di viaggio
I post di viaggio esisteranno come documenti archiviati in Firestore e, poiché i documenti devono esistere all'interno di raccolte, la raccolta che contiene tutti i post di viaggio si chiamerà 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 qualsiasi 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 osservabili
Poiché i post di viaggio e le fermate lungo il percorso possono essere modificati dopo la creazione, sarebbe più utile ottenere gli oggetti del documento come oggetti osservabili per iscriversi a eventuali modifiche apportate. 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[]>
}
Aggiunta di fermate a un post di viaggio
Ora che le operazioni dei post di viaggio sono configurate, è il momento di considerare le fermate, che esisteranno in una sottoraccolta di un post di viaggio come segue: travels/
Questa operazione è quasi identica alla creazione di un post di viaggio, quindi mettiti alla prova e prova a implementarla autonomamente oppure dai un'occhiata all'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 Viaggi, quindi ora puoi vederle in azione.
Utilizzare le funzioni Firestore nell'app
Vai a src/app/pages/my-travels/my-travels.component.ts e inserisci TravelService per utilizzare le relative 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.
Se sono necessari solo i viaggi dell'utente corrente, 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 riportati 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 funzionale. 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 lo spazio di archiviazione 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, la utilizzerai per consentire agli utenti di condividere le foto dei loro viaggi.
Analogamente a 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 inietta 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 delle cartelle, la combinazione di URL di base e percorso viene ottenuta tramite getDownloadURL, che può essere archiviata e utilizzata 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 archiviato di conseguenza nel documento in Firestore.
9. Implementazione dell'applicazione
Ora è tutto pronto 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 la tua applicazione dovrebbe essere completa e di cui è stato eseguito il deployment in Firebase Hosting. Ora tutti i dati e le analisi saranno accessibili nella Console Firebase.
Per altre funzionalità relative ad AngularFire, Functions e alle regole di sicurezza, non dimenticare di consultare i passaggi facoltativi riportati di seguito, nonché altri Codelab di Firebase.
11. (Facoltativo) Guardie di autenticazione AngularFire
Oltre a Firebase Authentication, AngularFire offre anche guardie basate sull'autenticazione per i percorsi, in modo che gli utenti con accesso insufficiente possano essere reindirizzati. In questo modo, l'app è protetta dagli utenti che accedono 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 relative a quando e dove devono essere reindirizzati gli utenti in determinate pagine:
const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['signin']);
const redirectLoggedInToTravels = () => redirectLoggedInTo(['my-travels']);
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 sia Cloud Storage utilizzano le regole di sicurezza (rispettivamente firestore.rules e security.rules) per applicare la sicurezza e convalidare i dati.
Al momento, i dati di Firestore e Storage hanno accesso aperto per letture e scritture, ma non vuoi che le persone possano modificare i post di altre persone. 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 viaggio, 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
Analogamente, 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;
}
}
}