1. Cosa creerai
In questo codelab creerai un blog itinerante 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 viaggio in cui potrai caricare immagini di ogni luogo in cui hai viaggiato.
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 rendere persistenti dati e contenuti multimediali, basati su Cloud Functions e, infine, Firebase Hosting per distribuire l'app.
Cosa imparerai
- Come sviluppare con i prodotti Firebase localmente con Emulator Suite
- Come migliorare la tua app Web con AngularFire
- Come rendere persistenti i tuoi dati in Firestore
- Come rendere persistenti i supporti nello spazio di archiviazione
- Come distribuire la tua app su Firebase Hosting
- Come utilizzare Cloud Functions per interagire con i tuoi database e le tue API
Di cosa avrai bisogno
- Node.js versione 10 o successiva
- Un Account Google per la creazione e la gestione del tuo progetto Firebase
- La CLI Firebase versione 11.14.2 o successiva
- Un browser a tua scelta, come Chrome
- Conoscenza base di Angular e Javascript
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 .
Il repository Github contiene progetti di esempio per più piattaforme.
Questo codelab utilizza solo il repository webframework:
- 📁 webframework : il codice iniziale su cui svilupperai durante questo codelab.
Installa le dipendenze
Dopo la clonazione, installa le dipendenze nella cartella 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 la CLI Firebase utilizzando questo comando in un terminale:
npm install -g firebase-tools
Verifica nuovamente che la versione della CLI di Firebase sia successiva alla 11.14.2 utilizzando:
firebase --version
Se la tua versione è precedente alla 11.14.2, aggiorna utilizzando:
npm update firebase-tools
3. Crea e configura un progetto Firebase
Crea un progetto Firebase
- Accedi a Firebase .
- Nella console Firebase, fai clic su Aggiungi progetto , quindi dai un nome al tuo progetto Firebase <tuo-progetto> . Ricorda l'ID progetto per il tuo progetto Firebase.
- Fare clic su Crea progetto .
Importante : il tuo progetto Firebase verrà denominato <your-project> , ma Firebase gli assegnerà automaticamente un ID progetto univoco nel formato <your-project>-1234 . Questo identificatore univoco è il modo in cui il tuo progetto viene effettivamente identificato (anche nella CLI), mentre <your-project> è semplicemente un nome visualizzato.
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.
- Funzioni per interagire con API interne ed esterne.
Alcuni di questi prodotti necessitano di configurazioni speciali o devono essere abilitati 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 il contenuto di questo oggetto nel file
environments/environment.ts.
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 .
Per abilitare l'accesso a Google :
- Nella console Firebase, individua la sezione Build nel pannello di sinistra.
- Fai clic su Autenticazione , quindi fai clic sulla scheda Metodo di accesso (o fai clic qui per andare direttamente lì).
- Abilita il provider di accesso Google , quindi fai clic su Salva .
- Imposta il nome pubblico della tua app su <nome-progetto> e scegli un'e -mail di supporto per il progetto dal menu a discesa.
Abilita Cloud Firestore
- Nella sezione Compila della console Firebase, fai clic su Database Firestore .
- Fai clic su Crea database nel riquadro Cloud Firestore.
- Imposta la posizione in cui vengono archiviati i dati Cloud Firestore. Puoi lasciare questa impostazione predefinita o scegliere una regione vicino a te.
Abilita archiviazione cloud
L'app Web utilizza Cloud Storage for Firebase per archiviare, caricare e condividere immagini.
- Nella sezione Build della console Firebase, fai clic su Archiviazione .
- Se non è presente il pulsante Inizia , significa che l'archiviazione nel cloud è già disponibile
abilitato e non è necessario seguire i passaggi seguenti.
- Fare clic su Inizia .
- Leggi la dichiarazione di non responsabilità sulle regole di sicurezza per il tuo progetto Firebase, quindi fai clic su Avanti .
- 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.
Con le regole di sicurezza predefinite, qualsiasi utente autenticato può scrivere qualsiasi cosa su Cloud Storage. Renderemo il nostro spazio di archiviazione più sicuro più avanti in questo codelab.
4. Connettiti al tuo progetto Firebase
L'interfaccia della riga di comando (CLI) di Firebase ti consente di utilizzare Firebase Hosting per servire la tua app Web localmente, nonché per distribuire la tua app Web nel tuo progetto Firebase.
Assicurati che la riga di comando acceda alla directory webframework locale della tua app.
Collega il codice dell'app Web al tuo progetto Firebase. Innanzitutto, accedi alla CLI di Firebase nella riga di comando:
firebase login
Quindi esegui il comando seguente per creare un alias di 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 tuo progetto Firebase.
Avvia gli emulatori
Dalla directory webframework , eseguire il comando seguente per avviare gli emulatori:
firebase emulators:start
Alla fine dovresti vedere qualcosa del genere:
$ 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.
Una volta visualizzati gli ✔All emulators ready! messaggio, gli emulatori sono pronti per l'uso.
Dovresti vedere l'interfaccia utente della tua app di viaggio, che non funziona (ancora!):
Adesso cominciamo a costruire!
5. Connetti 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 di autenticazione è in ascolto sulla porta 9099.
Apri l'EmulatoreUI
Nel browser Web, accedere a http://127.0.0.1:4000/ . Dovresti vedere 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 delle 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 garantire che ogni utente abbia effettuato l'accesso prima di pubblicare messaggi.
Per fare ciò, possiamo importare funzioni signin direttamente da AngularFire e tracciare lo stato di autenticazione dell'utente con la funzione authState . Modificare le funzioni della pagina di accesso in modo che la pagina controlli lo stato di autenticazione dell'utente al caricamento.
Iniezione dell'autenticazione AngularFire
In src/app/pages/login-page/login-page.component.ts , importa Auth da @angular/fire/auth e inseriscilo in LoginPageComponent . Anche i fornitori di autenticazione, come Google, e funzioni come signin e 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 funzionalità per pubblicare e aggiornare i post del blog di viaggio archiviati in Firestore.
Analogamente all'autenticazione, le funzioni Firestore sono preconfezionate da AngularFire. Ogni documento appartiene a una raccolta e ogni documento può anche avere raccolte nidificate. Per creare e aggiornare un post sul blog di viaggio è necessario 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 , in modo simile al 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 delle raccolte, la raccolta che contiene tutti i post di viaggio verrà denominata travels . Pertanto, il percorso di qualsiasi postazione di viaggio sarà travels/
Utilizzando la funzione addDoc di AngularFire, un oggetto può essere inserito 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ò quindi 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)
}
Leggere i dati come osservabili
Poiché le fermate e le fermate lungo il percorso possono essere modificate dopo la creazione, sarebbe più utile ottenere oggetti documento come osservabili, per sottoscrivere 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 una postazione di viaggio
Ora che le operazioni dei post di viaggio sono impostate, è il momento di considerare le fermate, che esisteranno in una sottoraccolta di un post di viaggio in questo modo: travels/ /stops/travels/ /stops/
Questo è quasi identico alla creazione di un post di viaggio, quindi sfida te stesso a implementarlo da solo o dai un'occhiata all'implementazione di seguito:
async addStop(travelId: string) {
...
const ref = await addDoc(collection(this.firestore, `travels/${travelId}/stops`), stopData)
setDoc(ref, {...stopData, id: ref.id})
}
Carino! Le funzioni Firestore sono state implementate nel servizio Travel, quindi ora puoi vederle in azione.
Utilizzo delle funzioni Firestore nell'app
Passare a src/app/pages/my-travels/my-travels.component.ts e inserire 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 i viaggi dell'utente corrente, utilizzare 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
Quindi, richiama 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 nel tuo emulatore Firestore quando crei un nuovo post di viaggio.
Quindi, ripeti 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 dell'archiviazione
Ora implementerai l'archiviazione per archiviare immagini e altri tipi di contenuti multimediali.
Cloud Firestore è utilizzato al meglio 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 proprie foto di viaggio.
Allo stesso modo con Firestore, l'archiviazione e l'aggiornamento dei file con Storage richiede un identificatore univoco per ciascun file.
Implementiamo le funzioni in TraveService :
Caricamento di un file
Passare a src/app/services/travel.service.ts e inserire 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ò quindi essere archiviata e utilizzata in un
Utilizzando la funzione nell'app
Passare a src/app/components/edit-stop/edit-stop.component.ts e chiamare 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 verrà caricato nell'archivio e l'URL verrà archiviato di conseguenza nel documento in Firestore.
9. Distribuzione dell'applicazione
Ora siamo pronti per distribuire l'applicazione!
Copia le configurazioni firebase da src/environments/environment.ts a src/environments/environment.prod.ts ed esegui:
firebase deploy
Dovresti vedere qualcosa del genere:
✔ 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. Congratulazioni!
Ora la tua applicazione dovrebbe essere completa e distribuita su Firebase Hosting! Tutti i dati e le analisi saranno ora accessibili nella tua console Firebase.
Per ulteriori funzionalità relative ad AngularFire, funzioni e regole di sicurezza, non dimenticare di consultare i passaggi opzionali di seguito, nonché altri codelab Firebase !
11. Opzionale: protezioni di autenticazione AngularFire
Insieme all'autenticazione Firebase, AngularFire offre anche guardie basate sull'autenticazione sui percorsi, in modo che gli utenti con accesso insufficiente possano essere reindirizzati. Ciò aiuta a proteggere l'app dagli utenti che accedono ai dati protetti.
In src/app/app-routing.module.ts , importa
import {AuthGuard, redirectLoggedInTo, redirectUnauthorizedTo} from '@angular/fire/auth-guard'
È quindi possibile definire funzioni su quando e dove gli utenti devono essere reindirizzati su determinate pagine:
const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['signin']);
const redirectLoggedInToTravels = () => redirectLoggedInTo(['my-travels']);
Quindi 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 (rispettivamente firestore.rules e security.rules ) per garantire la sicurezza e convalidare i dati.
Al momento, i dati Firestore e Storage hanno accesso aperto per letture e scritture, ma non vuoi che le persone modifichino i post degli altri! Puoi utilizzare le regole di sicurezza per limitare l'accesso alle tue raccolte e ai tuoi documenti.
Regole del fuoco
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
Allo stesso modo, possiamo utilizzare le regole di sicurezza per imporre l'accesso ai database di archiviazione in storage.rules . Tieni presente che possiamo utilizzare anche funzioni 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;
}
}
}