Cette page a été traduite par l'API Cloud Translation.

Atelier de programmation sur les frameworks Web Angular Firebase

1. Ce que vous allez créer

Dans cet atelier de programmation, vous allez créer un blog mobile avec une carte collaborative en temps réel à l'aide des dernières nouveautés de notre bibliothèque Angular: AngularFire. L'application Web finale consistera en un blog de voyage dans lequel vous pourrez importer des images de chaque destination que vous avez visitée.

AngularFire vous permettra de créer l'application Web, la suite d'émulateurs pour les tests locaux, Authentication pour suivre les données utilisateur, Firestore et Storage pour conserver les données et les contenus multimédias, avec Cloud Functions en arrière-plan, et enfin Firebase Hosting pour déployer l'application.

Points abordés

Développer en local avec les produits Firebase avec la suite d'émulateurs
Améliorer votre application Web avec AngularFire
Comment conserver vos données dans Firestore
Comment conserver des contenus multimédias dans Storage
Déployer votre application sur Firebase Hosting
Utiliser Cloud Functions pour interagir avec vos bases de données et vos API

Prérequis

Node.js version 10 ou ultérieure
Un compte Google pour la création et la gestion de votre projet Firebase
La CLI Firebase version 11.14.2 ou ultérieure
Un navigateur de votre choix, comme Chrome
Connaissances de base sur Angular et JavaScript

2. Obtenir l'exemple de code

Clonez le dépôt GitHub de l'atelier de programmation depuis la ligne de commande:

git clone https://github.com/firebase/codelab-friendlychat-web

Si vous n'avez pas installé git, vous pouvez également télécharger le dépôt sous forme de fichier ZIP.

Le dépôt GitHub contient des exemples de projets adaptés à différentes plates-formes.

Cet atelier de programmation n'utilise que le dépôt du framework Web :

📁 webframework : code de départ sur lequel vous allez vous appuyer dans cet atelier de programmation.

Installer des dépendances

Après le clonage, installez les dépendances dans le dossier racine et functions avant de créer l'application Web.

cd webframework && npm install
cd functions && npm install

Installer la CLI Firebase

Installez la CLI Firebase à l'aide de la commande suivante dans un terminal :

npm install -g firebase-tools

Vérifiez que la version de votre CLI Firebase est supérieure à la version 11.14.2 à l'aide de la commande suivante:

firebase  --version

Si votre version est antérieure à 11.14.2, veuillez la mettre à jour en procédant comme suit :

npm update firebase-tools

3. Créer et configurer un projet Firebase

Créer un projet Firebase

Connectez-vous à Firebase.
Dans la console Firebase, cliquez sur Ajouter un projet, puis nommez votre projet Firebase <votre-projet>. Mémorisez l'ID de votre projet Firebase.
Cliquez sur Créer un projet.

Important: Votre projet Firebase s'appellera <votre-projet>, mais Firebase lui attribuera automatiquement un ID de projet unique au format <votre-projet>-1234. Cet identifiant unique correspond à la façon dont votre projet est identifié (y compris dans la CLI), tandis que <your-project> est simplement un nom à afficher.

L'application que nous allons créer utilise des produits Firebase disponibles pour les applications Web :

Firebase Authentication pour permettre à vos utilisateurs de se connecter facilement à votre application.
Cloud Firestore, pour sauvegarder des données structurées sur le cloud et être notifié instantanément en cas de modification des données.
Cloud Storage for Firebase, pour sauvegarder des fichiers dans le cloud.
Firebase Hosting, pour héberger et diffuser vos éléments.
Fonctions pour interagir avec des API internes et externes.

Certains de ces produits nécessitent des configurations spéciales ou doivent être activés à l'aide de la console Firebase.

Ajouter une application Web Firebase au projet

Cliquez sur l'icône Web pour créer une application Web Firebase.
À l'étape suivante, vous verrez un objet de configuration. Copiez le contenu de cet objet dans le fichier environments/environment.ts.

Pour permettre aux utilisateurs de se connecter à l'application Web avec leur compte Google, nous allons utiliser la méthode de connexion Google.

Pour activer la connexion Google :

Dans la console Firebase, localisez la section Créer dans le panneau de gauche.
Cliquez sur Authentification, puis sur l'onglet Mode de connexion (ou cliquez ici pour y accéder directement).
Activez le fournisseur de connexion Google, puis cliquez sur Enregistrer.
Définissez le nom public de votre application sur <nom-du-projet> et choisissez une adresse e-mail d'assistance pour le projet dans le menu déroulant.

Activer Cloud Firestore

Dans la section Build de la console Firebase, cliquez sur Firestore Database (Base de données Firestore).
Cliquez sur Créer une base de données dans le volet Cloud Firestore.
Définissez l'emplacement de stockage de vos données Cloud Firestore. Vous pouvez conserver cette valeur par défaut ou choisir une région proche de vous.

Activer Cloud Storage

L'application Web utilise Cloud Storage for Firebase pour stocker, importer et partager des photos.

Dans la section Build (Créer) de la console Firebase, cliquez sur Storage (Stockage).
Si le bouton Commencer ne s'affiche pas, cela signifie que Cloud Storage est déjà

et vous n'avez pas besoin de suivre les étapes ci-dessous.

Cliquez sur Commencer.
Lisez la clause de non-responsabilité concernant les règles de sécurité de votre projet Firebase, puis cliquez sur Suivant.
L'emplacement Cloud Storage est présélectionné avec la même région que celle que vous avez choisie pour votre base de données Cloud Firestore. Cliquez sur OK pour terminer la configuration.

Conformément aux règles de sécurité par défaut, tout utilisateur authentifié peut écrire n'importe quel élément dans Cloud Storage. Nous améliorerons la sécurité de notre stockage plus tard dans cet atelier de programmation.

4. Associer à votre projet Firebase

L'interface de ligne de commande (CLI) Firebase vous permet d'utiliser Firebase Hosting pour diffuser votre application Web en local et de la déployer dans votre projet Firebase.

Assurez-vous que votre ligne de commande accède au répertoire webframework local de votre application.

Associez le code de l'application Web à votre projet Firebase. Tout d'abord, connectez-vous à la CLI Firebase en ligne de commande:

firebase login

Exécutez ensuite la commande suivante pour créer un alias de projet. Remplacez $YOUR_PROJECT_ID par l'ID de votre projet Firebase.

firebase  use  $YOUR_PROJECT_ID

Ajouter AngularFire

Pour ajouter AngularFire à l'application, exécutez la commande suivante:

ng add @angular/fire

Suivez ensuite les instructions de la ligne de commande et sélectionnez les fonctionnalités de votre projet Firebase.

Initialiser Firebase

Pour initialiser le projet Firebase, exécutez la commande suivante :

firebase init

Ensuite, en suivant les invites de la ligne de commande, sélectionnez les fonctionnalités et les émulateurs qui ont été utilisés dans votre projet Firebase.

Démarrer les émulateurs

À partir du répertoire webframework, exécutez la commande suivante pour démarrer les émulateurs:

firebase  emulators:start

Vous devriez obtenir un résultat semblable à celui-ci:

$  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.

Une fois que le message ✔All emulators ready! s'affiche, les émulateurs sont prêts à être utilisés.

Vous devriez voir l'interface utilisateur de votre application de voyages, qui n'est pas (encore) opérationnelle:

C'est parti !

5. Connecter l'application Web aux émulateurs

D'après le tableau des journaux de l'émulateur, l'émulateur Cloud Firestore écoute sur le port 8080 et l'émulateur Authentication écoute sur le port 9099.

Ouvrir l'interface utilisateur de l'émulateur

Dans votre navigateur Web, accédez à http://127.0.0.1:4000/. L'interface utilisateur de la suite d'émulateurs devrait s'afficher.

Acheminer l'application pour utiliser les émulateurs

Dans src/app/app.module.ts, ajoutez le code suivant à la liste des importations de 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'application est maintenant configurée pour utiliser des émulateurs locaux, ce qui permet d'effectuer les tests et le développement localement.

6. Ajouter une authentification

Maintenant que les émulateurs sont configurés pour l'application, nous pouvons ajouter des fonctionnalités d'authentification pour nous assurer que chaque utilisateur est connecté avant de publier des messages.

Pour ce faire, nous pouvons importer les fonctions signin directement depuis AngularFire et suivre l'état d'authentification de vos utilisateurs avec la fonction authState. Modifiez les fonctions de la page de connexion de sorte qu'elle vérifie l'état d'authentification de l'utilisateur lors du chargement.

Injecter AngularFire Auth

Dans src/app/pages/login-page/login-page.component.ts, importez Auth à partir de @angular/fire/auth, puis injectez-le dans LoginPageComponent. Les fournisseurs d'authentification tels que Google et les fonctions telles que signin et signout peuvent également être directement importés à partir du même package et utilisés dans l'application.

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 page de connexion est maintenant fonctionnelle ! Essayez de vous connecter et vérifiez les résultats dans l'émulateur d'authentification.

7. Configurer Firestore

Au cours de cette étape, vous allez ajouter une fonctionnalité permettant de publier et de mettre à jour des articles de blog de voyage stockés dans Firestore.

Tout comme pour l'authentification, les fonctions Firestore sont préinstallées dans AngularFire. Chaque document appartient à une collection et peut également contenir des collections imbriquées. Vous devez connaître l'path du document dans Firestore pour créer et mettre à jour un article de blog de voyage.

Implémenter TravelService

Étant donné que de nombreuses pages différentes devront lire et mettre à jour des documents Firestore dans l'application Web, nous pouvons implémenter les fonctions dans src/app/services/travel.service.ts pour éviter d'injecter à plusieurs reprises les mêmes fonctions AngularFire sur chaque page.

Comme à l'étape précédente, commencez par injecter Auth et Firestore dans notre service. Il est également utile de définir un objet user$ observable qui écoute l'état d'authentification actuel.

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);

Ajouter un post de voyage

Les posts de voyage seront des documents stockés dans Firestore. Étant donné que les documents doivent exister dans des collections, la collection contenant tous les posts de voyage sera nommée travels. Par conséquent, le chemin d'accès de tout post de voyage sera travels/.

La fonction addDoc d'AngularFire permet d'insérer un objet dans une collection:

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;

	})
}

Mettre à jour et supprimer des données

Étant donné l'UID de n'importe quel post de voyage, vous pouvez déduire le chemin d'accès du document stocké dans Firestore, qui peut ensuite être lu, mis à jour ou supprimé à l'aide des fonctions updateFoc et deleteDoc d'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)
}

Lire les données comme un objet observable

Étant donné que les messages de voyage et les arrêts en cours de route peuvent être modifiés après leur création, il serait plus utile d'obtenir des objets de document en tant qu'observables, pour s'abonner à toutes les modifications apportées. Cette fonctionnalité est proposée par les fonctions docData et collectionData de @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[]>
}

Ajouter des étapes à un post de voyage

Maintenant que les opérations de post-partout sont configurées, il est temps d'examiner les arrêts, qui se trouvent dans une sous-collection d'un post de voyage, comme dans l'exemple suivant: travels//stops/

Cette procédure est presque identique à celle de création d'un post de voyage. Essayez de l'implémenter vous-même ou consultez l'implémentation ci-dessous :

async  addStop(travelId: string) {
	...
	const  ref = await  addDoc(collection(this.firestore, `travels/${travelId}/stops`), stopData)
	setDoc(ref, {...stopData, id:  ref.id})
}

Nice! Les fonctions Firestore ont été implémentées dans le service de voyage. Vous pouvez donc les voir en action.

Utiliser les fonctions Firestore dans l'application

Accédez à src/app/pages/my-travels/my-travels.component.ts et injectez TravelService pour utiliser ses fonctions.

travelService = inject(TravelService);
travelsData$: Observable<Travel[]>;
stopsList$!: Observable<Stop[]>;
constructor() {
	this.travelsData$ = this.travelService.getCollectionData(`travels`) as  Observable<Travel[]>
}

TravelService est appelé dans le constructeur pour obtenir un tableau Observable de tous les trajets.

Si seuls les déplacements de l'utilisateur actuel sont nécessaires, utilisez la fonction query.

D'autres méthodes pour assurer la sécurité incluent l'implémentation de règles de sécurité ou l'utilisation de Cloud Functions avec Firestore, comme expliqué dans les étapes facultatives ci-dessous.

Ensuite, appelez simplement les fonctions implémentées dans TravelService.

async  createTravel(userId: String) {
	this.travelService.addEmptyTravel(userId);
}

deleteTravel(travelId: String) {
	this.travelService.deleteData(`travels/${travelId}`)
}

La page "Mes voyages" devrait maintenant être fonctionnelle. Découvrez ce qui se passe dans votre émulateur Firestore lorsque vous créez un post de voyage.

Répétez ensuite l'opération pour les fonctions de mise à jour dans /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. Configurer le stockage

Vous allez maintenant implémenter Storage pour stocker des images et d'autres types de contenus.

Cloud Firestore est particulièrement adapté au stockage de données structurées, telles que des objets JSON. Cloud Storage est conçu pour stocker des fichiers ou des blobs. Dans cette application, vous allez l'utiliser pour permettre aux utilisateurs de partager leurs photos de voyage.

De même, avec Firestore, le stockage et la mise à jour de fichiers avec Storage nécessitent un identifiant unique pour chaque fichier.

Implémentons les fonctions dans TraveService:

Importer un fichier

Accédez à src/app/services/travel.service.ts et injectez du stockage à partir d'AngularFire:

export  class  TravelService {
firestore: Firestore = inject(Firestore);
auth: Auth = inject(Auth);
storage: Storage = inject(Storage);

Implémentez la fonction d'importation:

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 principale différence entre l'accès aux documents depuis Firestore et les fichiers depuis Cloud Storage est que, bien qu'ils suivent tous deux des chemins structurés de dossiers, la combinaison de l'URL de base et du chemin d'accès est obtenue via getDownloadURL, qui peut ensuite être stocké et utilisé dans un fichier .

Utiliser la fonction dans l'application

Accédez à src/app/components/edit-stop/edit-stop.component.ts et appelez la fonction d'importation à l'aide de la commande suivante:

	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);
}

Lorsque l'image est importée, le fichier multimédia lui-même est importé dans l'espace de stockage, et l'URL est stockée en conséquence dans le document dans Firestore.

9. Déployer l'application

Nous sommes maintenant prêts à déployer l'application.

Copiez les configurations firebase de src/environments/environment.ts vers src/environments/environment.prod.ts, puis exécutez :

firebase deploy

L'écran qui s'affiche devrait ressembler à ce qui suit :

✔ 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. Félicitations !

Votre application doit maintenant être terminée et déployée sur Firebase Hosting. Toutes les données et toutes les analyses seront désormais accessibles dans la console Firebase.

Pour en savoir plus sur AngularFire, Functions et les règles de sécurité, n'oubliez pas de consulter les étapes facultatives ci-dessous, ainsi que d'autres ateliers de programmation Firebase.

11. Facultatif : Authentification AngularFire

En plus de Firebase Authentication, AngularFire propose également des protections basées sur l'authentification sur les routes, de sorte que les utilisateurs disposant d'un accès insuffisant puissent être redirigés. Cela permet d'empêcher les utilisateurs d'accéder à des données protégées dans l'application.

Dans src/app/app-routing.module.ts, importez

import {AuthGuard, redirectLoggedInTo, redirectUnauthorizedTo} from  '@angular/fire/auth-guard'

Vous pouvez ensuite définir des fonctions pour déterminer quand et où rediriger les utilisateurs sur certaines pages:

const  redirectUnauthorizedToLogin = () =>  redirectUnauthorizedTo(['signin']);
const  redirectLoggedInToTravels = () =>  redirectLoggedInTo(['my-travels']);

Il vous suffit ensuite de les ajouter à vos itinéraires:

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. Facultatif: règles de sécurité

Firestore et Cloud Storage utilisent des règles de sécurité (firestore.rules et security.rules, respectivement) pour appliquer la sécurité et valider les données.

Pour le moment, les données Firestore et Storage sont en libre accès pour les lectures et les écritures, mais vous ne voulez pas que les utilisateurs changent la donne posts! Vous pouvez utiliser des règles de sécurité pour restreindre l'accès à vos collections et documents.

Règles Firestore

Pour n'autoriser que les utilisateurs authentifiés à afficher les posts de voyage, accédez au fichier firestore.rules et ajoutez :

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;
	}
}

Les règles de sécurité peuvent également être utilisées pour valider les données :

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;
	}
}

Règles de stockage

De même, nous pouvons utiliser des règles de sécurité pour appliquer l'accès aux bases de données de stockage dans storage.rules. Notez que nous pouvons également utiliser des fonctions pour des vérifications plus complexes :

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;
		}
	}
}