1. Vue d'ensemble
Dans cet atelier de programmation, vous apprendrez certaines bases de Firebase pour créer des applications Web interactives. Vous créerez une application de RSVP d'événement et de chat de livre d'or à l'aide de plusieurs produits Firebase.
Ce que vous apprendrez
- Authentifiez les utilisateurs avec Firebase Authentication et FirebaseUI.
- Synchronisez les données à l'aide de Cloud Firestore.
- Écrivez des règles de sécurité Firebase pour sécuriser une base de données.
Ce dont vous aurez besoin
- Un navigateur de votre choix, tel que Chrome.
- Accès à stackblitz.com (aucun compte ni connexion nécessaire).
- Un compte Google, comme un compte Gmail. Nous vous recommandons le compte de messagerie que vous utilisez déjà pour votre compte GitHub. Cela vous permet d'utiliser les fonctionnalités avancées de StackBlitz.
- Exemple de code de l'atelier de programmation. Voir l'étape suivante pour savoir comment obtenir le code.
2. Obtenez le code de départ
Dans cet atelier de programmation, vous allez créer une application à l'aide de StackBlitz , un éditeur en ligne intégrant plusieurs workflows Firebase. Stackblitz ne nécessite aucune installation de logiciel ni compte StackBlitz spécial.
StackBlitz vous permet de partager des projets avec d'autres. Les autres personnes disposant de l'URL de votre projet StackBlitz peuvent voir votre code et créer votre projet, mais elles ne peuvent pas modifier votre projet StackBlitz.
- Accédez à cette URL pour le code de démarrage : https://stackblitz.com/edit/firebase-gtk-web-start
- En haut de la page StackBlitz, cliquez sur Fork :
Vous disposez maintenant d'une copie du code de départ en tant que votre propre projet StackBlitz, qui a un nom unique, ainsi qu'une URL unique. Tous vos fichiers et modifications sont enregistrés dans ce projet StackBlitz.
3. Modifier les informations sur l'événement
Les documents de départ de cet atelier de programmation fournissent une certaine structure pour l'application Web, notamment des feuilles de style et quelques conteneurs HTML pour l'application. Plus tard dans cet atelier de programmation, vous connecterez ces conteneurs à Firebase.
Pour commencer, familiarisons-nous un peu plus avec l'interface StackBlitz.
- Dans StackBlitz, ouvrez le fichier
index.html
. - Localisez
event-details-container
etdescription-container
, puis essayez de modifier certains détails de l'événement.
Lorsque vous modifiez le texte, le rechargement automatique de la page dans StackBlitz affiche les nouveaux détails de l'événement. Cool, ouais ?
<!-- ... -->
<div id="app">
<img src="..." />
<section id="event-details-container">
<h1>Firebase Meetup</h1>
<p><i class="material-icons">calendar_today</i> October 30</p>
<p><i class="material-icons">location_city</i> San Francisco</p>
</section>
<hr>
<section id="firebaseui-auth-container"></section>
<section id="description-container">
<h2>What we'll be doing</h2>
<p>Join us for a day full of Firebase Workshops and Pizza!</p>
</section>
</div>
<!-- ... -->
L'aperçu de votre application devrait ressembler à ceci :
Aperçu de l'application
4. Créez et configurez un projet Firebase
Afficher les informations sur l'événement est idéal pour vos invités, mais le simple fait d'afficher les événements n'est très utile pour personne. Ajoutons quelques fonctionnalités dynamiques à cette application. Pour cela, vous devrez connecter Firebase à votre application. Pour démarrer avec Firebase, vous devrez créer et configurer un projet Firebase.
Créer un projet Firebase
- Connectez-vous à Firebase .
- Dans la console Firebase, cliquez sur Ajouter un projet (ou Créer un projet ), puis nommez votre projet Firebase Firebase-Web-Codelab .
- Cliquez sur les options de création de projet. Acceptez les conditions de Firebase si vous y êtes invité. Sur l'écran Google Analytics, cliquez sur « Ne pas activer », car vous n'utiliserez pas Analytics pour cette application.
Pour en savoir plus sur les projets Firebase, consultez Comprendre les projets Firebase .
Activer et configurer les produits Firebase dans la console
L'application que vous créez utilise plusieurs produits Firebase disponibles pour les applications Web :
- Authentification Firebase et Firebase UI pour permettre à vos utilisateurs de se connecter facilement à votre application.
- Cloud Firestore pour enregistrer des données structurées sur le cloud et recevoir une notification instantanée lorsque les données changent.
- Règles de sécurité Firebase pour sécuriser votre base de données.
Certains de ces produits nécessitent une configuration spéciale ou doivent être activés à l'aide de la console Firebase.
Activer la connexion par e-mail pour l'authentification Firebase
Pour permettre aux utilisateurs de se connecter à l'application Web, vous utiliserez la méthode de connexion par e-mail/mot de passe pour cet atelier de programmation :
- Dans le panneau de gauche de la console Firebase, cliquez sur Build > Authentication . Cliquez ensuite sur Commencer . Vous êtes maintenant dans le tableau de bord d'authentification, où vous pouvez voir les utilisateurs inscrits, configurer les fournisseurs de connexion et gérer les paramètres.
- Sélectionnez l'onglet Méthode de connexion (ou cliquez ici pour accéder directement à l'onglet).
- Cliquez sur E-mail/Mot de passe dans les options du fournisseur, basculez le commutateur sur Activer , puis cliquez sur Enregistrer .
Configurer Cloud Firestore
L'application Web utilise Cloud Firestore pour enregistrer les messages de discussion et recevoir de nouveaux messages de discussion.
Voici comment configurer Cloud Firestore :
- Dans le panneau de gauche de la console Firebase, cliquez sur Créer > Base de données Firestore . Cliquez ensuite sur Créer une base de données .
- Cliquez sur Créer une base de données .
- Sélectionnez l’option Démarrer en mode test . Lisez l'avertissement sur les règles de sécurité. Le mode test garantit que vous pouvez écrire librement dans la base de données pendant le développement. Cliquez sur Suivant .
- Sélectionnez l'emplacement de votre base de données (vous pouvez simplement utiliser celui par défaut). Notez cependant que cet emplacement ne pourra pas être modifié ultérieurement.
- Cliquez sur Terminé .
5. Ajouter et configurer Firebase
Maintenant que votre projet Firebase est créé et que certains services sont activés, vous devez indiquer le code que vous souhaitez utiliser Firebase, ainsi que le projet Firebase à utiliser.
Ajouter les bibliothèques Firebase
Pour que votre application utilise Firebase, vous devez ajouter les bibliothèques Firebase à l'application. Il existe plusieurs façons de procéder, comme décrit dans la documentation Firebase . Par exemple, vous pouvez ajouter les bibliothèques à partir du CDN de Google, ou vous pouvez les installer localement à l'aide de npm, puis les empaqueter dans votre application si vous utilisez Browserify.
StackBlitz propose un regroupement automatique, vous pouvez donc ajouter les bibliothèques Firebase à l'aide d'instructions d'importation. Vous utiliserez les versions modulaires (v9) des bibliothèques, qui permettent de réduire la taille globale de la page Web grâce à un processus appelé « secouement de l'arbre ». Vous pouvez en savoir plus sur les SDK modulaires dans la documentation .
Pour créer cette application, vous utilisez les bibliothèques Firebase Authentication, FirebaseUI et Cloud Firestore. Pour cet atelier de programmation, les instructions d'importation suivantes sont déjà incluses en haut du fichier index.js
, et nous importerons davantage de méthodes de chaque bibliothèque Firebase au fur et à mesure :
// Import stylesheets
import './style.css';
// Firebase App (the core Firebase SDK) is always required
import { initializeApp } from 'firebase/app';
// Add the Firebase products and methods that you want to use
import {} from 'firebase/auth';
import {} from 'firebase/firestore';
import * as firebaseui from 'firebaseui';
Ajoutez une application Web Firebase à votre projet Firebase
- De retour dans la console Firebase, accédez à la page de présentation de votre projet en cliquant sur Présentation du projet en haut à gauche.
- Au centre de la page de présentation de votre projet, cliquez sur l'icône Web
pour créer une nouvelle application Web Firebase.
- Enregistrez l'application avec le pseudo Web App .
- Pour cet atelier de programmation, ne cochez PAS la case à côté de Configurer également l'hébergement Firebase pour cette application . Vous utiliserez le volet d'aperçu de StackBlitz pour l'instant.
- Cliquez sur Enregistrer l'application .
- Copiez l' objet de configuration Firebase dans votre presse-papiers.
- Cliquez sur Continuer sur la console . Ajoutez l'objet de configuration Firebase à votre application :
- De retour dans StackBlitz, accédez au fichier
index.js
. - Localisez la ligne de commentaire
Add Firebase project configuration object here
, puis collez votre extrait de configuration juste en dessous du commentaire. - Ajoutez l'appel de fonction
initializeApp
pour configurer Firebase à l'aide de la configuration unique de votre projet Firebase.// ... // Add Firebase project configuration object here const firebaseConfig = { apiKey: "random-unique-string", authDomain: "your-projectId.firebaseapp.com", databaseURL: "https://your-projectId.firebaseio.com", projectId: "your-projectId", storageBucket: "your-projectId.appspot.com", messagingSenderId: "random-unique-string", appId: "random-unique-string", }; // Initialize Firebase initializeApp(firebaseConfig);
6. Ajouter la connexion utilisateur (RSVP)
Maintenant que vous avez ajouté Firebase à l'application, vous pouvez configurer un bouton RSVP qui enregistre les personnes à l'aide de l'authentification Firebase .
Authentifiez vos utilisateurs avec Email Sign-In et FirebaseUI
Vous aurez besoin d'un bouton RSVP qui invite l'utilisateur à se connecter avec son adresse e-mail. Vous pouvez le faire en connectant FirebaseUI à un bouton RSVP. FirebaseUI est une bibliothèque qui vous offre une interface utilisateur prédéfinie au-dessus de Firebase Auth.
FirebaseUI nécessite une configuration (voir les options dans la documentation ) qui fait deux choses :
- Indique à FirebaseUI que vous souhaitez utiliser la méthode de connexion par e-mail/mot de passe .
- Gère le rappel pour une connexion réussie et renvoie false pour éviter une redirection. Vous ne souhaitez pas que la page soit actualisée, car vous créez une application Web d'une seule page.
Ajoutez le code pour initialiser FirebaseUI Auth
- Dans StackBlitz, accédez au fichier
index.js
. - En haut, localisez l'instruction d'importation
firebase/auth
, puis ajoutezgetAuth
etEmailAuthProvider
, comme ceci :// ... // Add the Firebase products and methods that you want to use import { getAuth, EmailAuthProvider } from 'firebase/auth'; import {} from 'firebase/firestore';
- Enregistrez une référence à l'objet auth juste après
initializeApp
, comme ceci :initializeApp(firebaseConfig); auth = getAuth();
- Notez que la configuration FirebaseUI est déjà fournie dans le code de démarrage. Il est déjà configuré pour utiliser le fournisseur d'authentification de messagerie.
- Au bas de la fonction
main()
dansindex.js
, ajoutez l'instruction d'initialisation FirebaseUI, comme ceci :async function main() { // ... // Initialize the FirebaseUI widget using Firebase const ui = new firebaseui.auth.AuthUI(auth); } main();
Ajouter un bouton RSVP au HTML
- Dans StackBlitz, accédez au fichier
index.html
. - Ajoutez le code HTML d'un bouton RSVP à l'intérieur du
event-details-container
, comme indiqué dans l'exemple ci-dessous.
Veillez à utiliser les mêmes valeursid
que celles indiquées ci-dessous, car, pour cet atelier de programmation, il existe déjà des hooks pour ces identifiants spécifiques dans le fichierindex.js
.
Notez que dans le fichierindex.html
, il y a un conteneur avec l'IDfirebaseui-auth-container
. Il s'agit de l'identifiant que vous transmettrez à FirebaseUI pour conserver votre connexion.
Aperçu de l'application<!-- ... --> <section id="event-details-container"> <!-- ... --> <!-- ADD THE RSVP BUTTON HERE --> <button id="startRsvp">RSVP</button> </section> <hr> <section id="firebaseui-auth-container"></section> <!-- ... -->
- Configurez un écouteur sur le bouton RSVP et appelez la fonction de démarrage de FirebaseUI. Cela indique à FirebaseUI que vous souhaitez voir la fenêtre de connexion.
Ajoutez le code suivant au bas de la fonctionmain()
dansindex.js
:async function main() { // ... // Listen to RSVP button clicks startRsvpButton.addEventListener("click", () => { ui.start("#firebaseui-auth-container", uiConfig); }); } main();
Testez la connexion à l'application
- Dans la fenêtre d'aperçu de StackBlitz, cliquez sur le bouton RSVP pour vous connecter à l'application.
- Pour cet atelier de programmation, vous pouvez utiliser n'importe quelle adresse e-mail, même une fausse adresse e-mail, puisque vous ne configurez pas d'étape de vérification des e-mails pour cet atelier de programmation.
- Si vous voyez un message d'erreur indiquant
auth/operation-not-allowed
ouThe given sign-in provider is disabled for this Firebase project
, assurez-vous que vous avez activé l'adresse e-mail/mot de passe en tant que fournisseur de connexion dans la console Firebase.
- Accédez au tableau de bord d'authentification dans la console Firebase. Dans l'onglet Utilisateurs , vous devriez voir les informations de compte que vous avez saisies pour vous connecter à l'application.
Ajouter un état d'authentification à l'interface utilisateur
Ensuite, assurez-vous que l'interface utilisateur reflète le fait que vous êtes connecté.
Vous utiliserez le rappel de l'écouteur d'état d'authentification Firebase, qui est averti chaque fois que l'état de connexion de l'utilisateur change. S'il y a actuellement un utilisateur connecté, votre application passera du bouton « RSVP » à un bouton « Déconnexion ».
- Dans StackBlitz, accédez au fichier
index.js
. - En haut, localisez l'instruction d'importation
firebase/auth
, puis ajoutezsignOut
etonAuthStateChanged
, comme ceci :// ... // Add the Firebase products and methods that you want to use import { getAuth, EmailAuthProvider, signOut, onAuthStateChanged } from 'firebase/auth'; import {} from 'firebase/firestore';
- Ajoutez le code suivant au bas de la fonction
main()
:async function main() { // ... // Listen to the current Auth state onAuthStateChanged(auth, user => { if (user) { startRsvpButton.textContent = 'LOGOUT'; } else { startRsvpButton.textContent = 'RSVP'; } }); } main();
- Dans le bouton d'écoute, vérifiez s'il existe un utilisateur actuel et déconnectez-le. Pour ce faire, remplacez le
startRsvpButton.addEventListener
actuel par ce qui suit :// ... // Called when the user clicks the RSVP button startRsvpButton.addEventListener('click', () => { if (auth.currentUser) { // User is signed in; allows user to sign out signOut(auth); } else { // No user is signed in; allows user to sign in ui.start('#firebaseui-auth-container', uiConfig); } });
Maintenant, le bouton de votre application devrait afficher LOGOUT et il devrait revenir à RSVP lorsque vous cliquez dessus.
Aperçu de l'application
7. Écrivez des messages sur Cloud Firestore
Savoir que les utilisateurs viennent, c'est bien, mais donnons aux invités autre chose à faire dans l'application. Et s’ils pouvaient laisser des messages dans un livre d’or ? Ils peuvent expliquer pourquoi ils sont ravis de venir ou qui ils espèrent rencontrer.
Pour stocker les messages de discussion que les utilisateurs écrivent dans l'application, vous utiliserez Cloud Firestore .
Modèle de données
Cloud Firestore est une base de données NoSQL et les données stockées dans la base de données sont divisées en collections, documents, champs et sous-collections. Vous stockerez chaque message du chat en tant que document dans une collection de niveau supérieur appelée guestbook
.
Ajouter des messages à Firestore
Dans cette section, vous allez ajouter la fonctionnalité permettant aux utilisateurs d'écrire de nouveaux messages dans la base de données. Tout d’abord, vous ajoutez le HTML pour les éléments de l’interface utilisateur (champ de message et bouton d’envoi). Ensuite, vous ajoutez le code qui connecte ces éléments à la base de données.
Pour ajouter les éléments d'interface utilisateur d'un champ de message et d'un bouton d'envoi :
- Dans StackBlitz, accédez au fichier
index.html
. - Localisez le
guestbook-container
, puis ajoutez le code HTML suivant pour créer un formulaire avec le champ de saisie du message et le bouton d'envoi.<!-- ... --> <section id="guestbook-container"> <h2>Discussion</h2> <form id="leave-message"> <label>Leave a message: </label> <input type="text" id="message"> <button type="submit"> <i class="material-icons">send</i> <span>SEND</span> </button> </form> </section> <!-- ... -->
Aperçu de l'application
Un utilisateur cliquant sur le bouton ENVOYER déclenchera l'extrait de code ci-dessous. Il ajoute le contenu du champ de saisie du message à la collection guestbook
de la base de données. Plus précisément, la méthode addDoc
ajoute le contenu du message à un nouveau document (avec un identifiant généré automatiquement) à la collection de guestbook
.
- Dans StackBlitz, accédez au fichier
index.js
. - En haut, localisez l'instruction d'importation
firebase/firestore
, puis ajoutezgetFirestore
,addDoc
etcollection
, comme ceci :// ... // Add the Firebase products and methods that you want to use import { getAuth, EmailAuthProvider, signOut, onAuthStateChanged } from 'firebase/auth'; import { getFirestore, addDoc, collection } from 'firebase/firestore';
- Nous allons maintenant enregistrer une référence à l'objet
db
Firestore juste aprèsinitializeApp
:initializeApp(firebaseConfig); auth = getAuth(); db = getFirestore();
- Au bas de la fonction
main()
, ajoutez le code suivant.
Notez queauth.currentUser.uid
est une référence à l'ID unique généré automatiquement que l'authentification Firebase donne à tous les utilisateurs connectés.async function main() { // ... // Listen to the form submission form.addEventListener('submit', async e => { // Prevent the default form redirect e.preventDefault(); // Write a new message to the database collection "guestbook" addDoc(collection(db, 'guestbook'), { text: input.value, timestamp: Date.now(), name: auth.currentUser.displayName, userId: auth.currentUser.uid }); // clear message input field input.value = ''; // Return false to avoid redirect return false; }); } main();
Afficher le livre d'or uniquement aux utilisateurs connectés
Vous ne voulez pas que n’importe qui voie le chat des invités. Une chose que vous pouvez faire pour sécuriser le chat est d'autoriser uniquement les utilisateurs connectés à consulter le livre d'or. Cela dit, pour vos propres applications, vous souhaiterez également sécuriser votre base de données avec les règles de sécurité Firebase . (Vous trouverez plus d'informations sur les règles de sécurité plus loin dans l'atelier de programmation.)
- Dans StackBlitz, accédez au fichier
index.js
. - Modifiez l'écouteur
onAuthStateChanged
pour masquer et afficher le livre d'or.// ... // Listen to the current Auth state onAuthStateChanged(auth, user => { if (user) { startRsvpButton.textContent = 'LOGOUT'; // Show guestbook to logged-in users guestbookContainer.style.display = 'block'; } else { startRsvpButton.textContent = 'RSVP'; // Hide guestbook for non-logged-in users guestbookContainer.style.display = 'none'; } });
Tester l'envoi de messages
- Assurez-vous que vous êtes connecté à l'application.
- Saisissez un message tel que « Salut ! », puis cliquez sur ENVOYER .
Cette action écrit le message dans votre base de données Cloud Firestore. Cependant, vous ne verrez pas encore le message dans votre application Web actuelle, car vous devez encore implémenter la récupération des données. Vous le ferez ensuite.
Mais vous pouvez voir le message nouvellement ajouté dans la console Firebase.
Dans la console Firebase, dans le tableau de bord de la base de données Firestore , vous devriez voir la collection de guestbook
avec votre message nouvellement ajouté. Si vous continuez à envoyer des messages, votre collection de livres d'or contiendra de nombreux documents, comme celui-ci :
Console Firebase
8. Lire les messages
Synchroniser les messages
C'est bien que les invités puissent écrire des messages dans la base de données, mais ils ne peuvent pas encore les voir dans l'application.
Pour afficher les messages, vous devrez ajouter des écouteurs qui se déclenchent lorsque les données changent, puis créer un élément d'interface utilisateur qui affiche les nouveaux messages.
Vous ajouterez du code qui écoute les messages nouvellement ajoutés depuis l’application. Tout d'abord, ajoutez une section dans le code HTML pour afficher les messages :
- Dans StackBlitz, accédez au fichier
index.html
. - Dans
guestbook-container
, ajoutez une nouvelle section avec l'ID deguestbook
.<!-- ... --> <section id="guestbook-container"> <h2>Discussion</h2> <form><!-- ... --></form> <section id="guestbook"></section> </section> <!-- ... -->
Ensuite, enregistrez l'écouteur qui écoute les modifications apportées aux données :
- Dans StackBlitz, accédez au fichier
index.js
. - En haut, localisez l'instruction d'importation
firebase/firestore
, puis ajoutezquery
,orderBy
etonSnapshot
, comme ceci :// ... import { getFirestore, addDoc, collection, query, orderBy, onSnapshot } from 'firebase/firestore';
- Au bas de la fonction
main()
, ajoutez le code suivant pour parcourir tous les documents (messages du livre d'or) de la base de données. Pour en savoir plus sur ce qui se passe dans ce code, lisez les informations sous l'extrait.async function main() { // ... // Create query for messages const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc')); onSnapshot(q, snaps => { // Reset page guestbook.innerHTML = ''; // Loop through documents in database snaps.forEach(doc => { // Create an HTML entry for each document and add it to the chat const entry = document.createElement('p'); entry.textContent = doc.data().name + ': ' + doc.data().text; guestbook.appendChild(entry); }); }); } main();
Pour écouter les messages de la base de données, vous avez créé une requête sur une collection spécifique à l'aide de la fonction collection
. Le code ci-dessus écoute les modifications apportées à la collection guestbook
, où sont stockés les messages de discussion. Les messages sont également classés par date, en utilisant orderBy('timestamp', 'desc')
pour afficher les messages les plus récents en haut.
La fonction onSnapshot
prend deux paramètres : la requête à utiliser et une fonction de rappel. La fonction de rappel est déclenchée lorsque des modifications sont apportées aux documents qui correspondent à la requête. Cela peut se produire si un message est supprimé, modifié ou ajouté. Pour plus d'informations, consultez la documentation Cloud Firestore .
Tester la synchronisation des messages
Cloud Firestore synchronise automatiquement et instantanément les données avec les clients abonnés à la base de données.
- Les messages que vous avez créés précédemment dans la base de données doivent être affichés dans l'application. N'hésitez pas à écrire de nouveaux messages ; ils devraient apparaître instantanément.
- Si vous ouvrez votre espace de travail dans plusieurs fenêtres ou onglets, les messages seront synchronisés en temps réel entre les onglets.
- (Facultatif) Vous pouvez essayer de supprimer, modifier ou ajouter manuellement de nouveaux messages directement dans la section Base de données de la console Firebase ; tout changement devrait apparaître dans l’interface utilisateur.
Toutes nos félicitations! Vous lisez des documents Cloud Firestore dans votre application !
Aperçu de l'application
9. Mettre en place des règles de sécurité de base
Vous avez initialement configuré Cloud Firestore pour utiliser le mode test, ce qui signifie que votre base de données est ouverte aux lectures et aux écritures. Cependant, vous ne devez utiliser le mode test que pendant les toutes premières étapes du développement. Il est recommandé de configurer des règles de sécurité pour votre base de données lorsque vous développez votre application. La sécurité doit faire partie intégrante de la structure et du comportement de votre application.
Les règles de sécurité vous permettent de contrôler l'accès aux documents et collections de votre base de données. La syntaxe flexible des règles vous permet de créer des règles qui correspondent à tout, depuis toutes les écritures dans l'ensemble de la base de données jusqu'aux opérations sur un document spécifique.
Vous pouvez écrire des règles de sécurité pour Cloud Firestore dans la console Firebase :
- Dans la section Build de la console Firebase, cliquez sur Firestore Database , puis sélectionnez l'onglet Règles (ou cliquez ici pour accéder directement à l'onglet Règles ).
- Vous devriez voir les règles de sécurité par défaut suivantes, avec une limite de temps d'accès public dans quelques semaines à partir d'aujourd'hui.
Identifier les collections
Tout d’abord, identifiez les collections dans lesquelles l’application écrit des données.
- Supprimez la clause
match /{document=**}
existante pour que vos règles ressemblent à ceci :rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { } }
- Dans
match /databases/{database}/documents
, identifiez la collection que vous souhaitez sécuriser :rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /guestbook/{entry} { // You'll add rules here in the next step. } }
Ajouter des règles de sécurité
Étant donné que vous avez utilisé l'UID d'authentification comme champ dans chaque document du livre d'or, vous pouvez obtenir l'UID d'authentification et vérifier que toute personne tentant d'écrire dans le document possède un UID d'authentification correspondant.
- Ajoutez les règles de lecture et d'écriture à votre ensemble de règles comme indiqué ci-dessous :
rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /guestbook/{entry} { allow read: if request.auth.uid != null; allow create: if request.auth.uid == request.resource.data.userId; } } }
- Cliquez sur Publier pour déployer vos nouvelles règles. Désormais, pour le livre d'or, seuls les utilisateurs connectés peuvent lire les messages (n'importe quel message !), mais vous ne pouvez créer un message qu'en utilisant votre identifiant utilisateur. Nous n'autorisons pas non plus la modification ou la suppression des messages.
Ajouter des règles de validation
- Ajoutez une validation des données pour vous assurer que tous les champs attendus sont présents dans le document :
rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /guestbook/{entry} { allow read: if request.auth.uid != null; allow create: if request.auth.uid == request.resource.data.userId && "name" in request.resource.data && "text" in request.resource.data && "timestamp" in request.resource.data; } } }
- Cliquez sur Publier pour déployer vos nouvelles règles.
Réinitialiser les écouteurs
Étant donné que votre application autorise désormais uniquement les utilisateurs authentifiés à se connecter, vous devez déplacer la requête firestore
du livre d'or dans l'écouteur d'authentification. Sinon, des erreurs d'autorisation se produiront et l'application sera déconnectée lorsque l'utilisateur se déconnectera.
- Dans StackBlitz, accédez au fichier
index.js
. - Extrayez la collection de livres d'or sur l'écouteur
onSnapshot
dans une nouvelle fonction appeléesubscribeGuestbook
. Affectez également les résultats de la fonctiononSnapshot
à la variableguestbookListener
.
L'écouteur FirestoreonSnapshot
renvoie une fonction de désabonnement que vous pourrez utiliser pour annuler l'écouteur d'instantané ultérieurement.// ... // Listen to guestbook updates function subscribeGuestbook() { const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc')); guestbookListener = onSnapshot(q, snaps => { // Reset page guestbook.innerHTML = ''; // Loop through documents in database snaps.forEach(doc => { // Create an HTML entry for each document and add it to the chat const entry = document.createElement('p'); entry.textContent = doc.data().name + ': ' + doc.data().text; guestbook.appendChild(entry); }); }); }
- Ajoutez une nouvelle fonction en dessous appelée
unsubscribeGuestbook
. Vérifiez si la variableguestbookListener
n'est pas nulle, puis appelez la fonction pour annuler l'écouteur.// ... // Unsubscribe from guestbook updates function unsubscribeGuestbook() { if (guestbookListener != null) { guestbookListener(); guestbookListener = null; } }
Enfin, ajoutez les nouvelles fonctions au rappel onAuthStateChanged
.
- Ajoutez
subscribeGuestbook()
au bas deif (user)
. - Ajoutez
unsubscribeGuestbook()
au bas de l'instructionelse
.// ... // Listen to the current Auth state onAuthStateChanged(auth, user => { if (user) { startRsvpButton.textContent = 'LOGOUT'; // Show guestbook to logged-in users guestbookContainer.style.display = 'block'; // Subscribe to the guestbook collection subscribeGuestbook(); } else { startRsvpButton.textContent = 'RSVP'; // Hide guestbook for non-logged-in users guestbookContainer.style.display = 'none'; // Unsubscribe from the guestbook collection unsubscribeGuestbook(); } });
10. Étape bonus : mettez en pratique ce que vous avez appris
Enregistrer le statut RSVP d'un participant
À l'heure actuelle, votre application permet simplement aux gens de commencer à discuter s'ils sont intéressés par l'événement. De plus, la seule façon de savoir si quelqu'un vient est de le publier dans le chat. Organisons-nous et informons les gens du nombre de personnes qui viendront.
Vous ajouterez une bascule pour enregistrer les personnes souhaitant assister à l’événement, puis collecterez un décompte du nombre de personnes venues.
- Dans StackBlitz, accédez au fichier
index.html
. - Dans
guestbook-container
, ajoutez un ensemble de boutons OUI et NON , comme ceci :<!-- ... --> <section id="guestbook-container"> <h2>Are you attending?</h2> <button id="rsvp-yes">YES</button> <button id="rsvp-no">NO</button> <h2>Discussion</h2> <!-- ... --> </section> <!-- ... -->
Aperçu de l'application
Ensuite, enregistrez l'auditeur pour les clics sur les boutons. Si l'utilisateur clique sur OUI , utilisez son UID d'authentification pour enregistrer la réponse dans la base de données.
- Dans StackBlitz, accédez au fichier
index.js
. - En haut, localisez l'instruction d'importation
firebase/firestore
, puis ajoutezdoc
,setDoc
etwhere
, comme ceci :// ... // Add the Firebase products and methods that you want to use import { getFirestore, addDoc, collection, query, orderBy, onSnapshot, doc, setDoc, where } from 'firebase/firestore';
- Au bas de la fonction
main()
, ajoutez le code suivant pour écouter le statut RSVP :async function main() { // ... // Listen to RSVP responses rsvpYes.onclick = async () => { }; rsvpNo.onclick = async () => { }; } main();
- Ensuite, créez une nouvelle collection appelée
attendees
, puis enregistrez une référence de document si l'utilisateur clique sur l'un des boutons RSVP. Définissez cette référence surtrue
oufalse
en fonction du bouton sur lequel vous cliquez.
D’abord pourrsvpYes
:
Ensuite, pareil pour// ... // Listen to RSVP responses rsvpYes.onclick = async () => { // Get a reference to the user's document in the attendees collection const userRef = doc(db, 'attendees', auth.currentUser.uid); // If they RSVP'd yes, save a document with attendi()ng: true try { await setDoc(userRef, { attending: true }); } catch (e) { console.error(e); } };
rsvpNo
, mais avec la valeurfalse
:rsvpNo.onclick = async () => { // Get a reference to the user's document in the attendees collection const userRef = doc(db, 'attendees', auth.currentUser.uid); // If they RSVP'd yes, save a document with attending: true try { await setDoc(userRef, { attending: false }); } catch (e) { console.error(e); } };
Mettez à jour vos règles de sécurité
Étant donné que certaines règles sont déjà définies, les nouvelles données que vous ajoutez avec les boutons seront rejetées.
Autoriser les ajouts à la collection attendees
Vous devrez mettre à jour les règles pour autoriser l'ajout à la collection attendees
.
- Pour la collection
attendees
, puisque vous avez utilisé l'UID d'authentification comme nom du document, vous pouvez le récupérer et vérifier que l'uid
de l'expéditeur est le même que celui du document qu'il rédige. Vous permettrez à tout le monde de lire la liste des participants (puisqu'il n'y a pas de données privées), mais seul le créateur devrait pouvoir la mettre à jour.rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { // ... // match /attendees/{userId} { allow read: if true; allow write: if request.auth.uid == userId; } } }
- Cliquez sur Publier pour déployer vos nouvelles règles.
Ajouter des règles de validation
- Ajoutez quelques règles de validation des données pour vous assurer que tous les champs attendus sont présents dans le document :
rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { // ... // match /attendees/{userId} { allow read: if true; allow write: if request.auth.uid == userId && "attending" in request.resource.data; } } }
- N'oubliez pas de cliquer sur Publier pour déployer vos règles !
(Facultatif) Vous pouvez maintenant afficher les résultats en cliquant sur les boutons. Accédez à votre tableau de bord Cloud Firestore dans la console Firebase.
Lire le statut RSVP
Maintenant que vous avez enregistré les réponses, voyons qui vient et reflétons-le dans l'interface utilisateur.
- Dans StackBlitz, accédez au fichier
index.html
. - Dans
description-container
, ajoutez un nouvel élément avec l'IDnumber-attending
.<!-- ... --> <section id="description-container"> <!-- ... --> <p id="number-attending"></p> </section> <!-- ... -->
Ensuite, enregistrez l'auditeur pour la collecte attendees
et comptez le nombre de réponses OUI :
- Dans StackBlitz, accédez au fichier
index.js
. - Au bas de la fonction
main()
, ajoutez le code suivant pour écouter le statut RSVP et compter les clics OUI .async function main() { // ... // Listen for attendee list const attendingQuery = query( collection(db, 'attendees'), where('attending', '==', true) ); const unsubscribe = onSnapshot(attendingQuery, snap => { const newAttendeeCount = snap.docs.length; numberAttending.innerHTML = newAttendeeCount + ' people going'; }); } main();
Enfin, soulignons le bouton correspondant à l'état actuel.
- Créez une fonction qui vérifie si l'UID d'authentification actuel a une entrée dans la collection
attendees
, puis définissez la classe de bouton surclicked
.// ... // Listen for attendee list function subscribeCurrentRSVP(user) { const ref = doc(db, 'attendees', user.uid); rsvpListener = onSnapshot(ref, doc => { if (doc && doc.data()) { const attendingResponse = doc.data().attending; // Update css classes for buttons if (attendingResponse) { rsvpYes.className = 'clicked'; rsvpNo.className = ''; } else { rsvpYes.className = ''; rsvpNo.className = 'clicked'; } } }); }
- Créons également une fonction pour se désinscrire. Celui-ci sera utilisé lorsque l'utilisateur se déconnectera.
// ... function unsubscribeCurrentRSVP() { if (rsvpListener != null) { rsvpListener(); rsvpListener = null; } rsvpYes.className = ''; rsvpNo.className = ''; }
- Appelez les fonctions depuis l'écouteur d'authentification.
// ... // Listen to the current Auth state // Listen to the current Auth state onAuthStateChanged(auth, user => { if (user) { startRsvpButton.textContent = 'LOGOUT'; // Show guestbook to logged-in users guestbookContainer.style.display = 'block'; // Subscribe to the guestbook collection subscribeGuestbook(); // Subcribe to the user's RSVP subscribeCurrentRSVP(user); } else { startRsvpButton.textContent = 'RSVP'; // Hide guestbook for non-logged-in users guestbookContainer.style.display = 'none' ; // Unsubscribe from the guestbook collection unsubscribeGuestbook(); // Unsubscribe from the guestbook collection unsubscribeCurrentRSVP(); } });
- Essayez de vous connecter en tant qu'utilisateurs multiples et voyez le nombre augmenter à chaque clic supplémentaire sur le bouton OUI .
Aperçu de l'application
11. Félicitations !
Vous avez utilisé Firebase pour créer une application Web interactive en temps réel !
Ce que nous avons couvert
- Authentification Firebase
- FirebaseUI
- Cloud Firestore
- Règles de sécurité Firebase
Prochaines étapes
- Vous souhaitez en savoir plus sur le workflow des développeurs Firebase ? Consultez l' atelier de programmation de l'émulateur Firebase pour savoir comment tester et exécuter votre application entièrement localement.
- Vous souhaitez en savoir plus sur les autres produits Firebase ? Peut-être souhaitez-vous stocker les fichiers image que les utilisateurs téléchargent ? Ou envoyer des notifications à vos utilisateurs ? Consultez l' atelier de programmation Web Firebase pour un atelier de programmation qui approfondit de nombreux autres produits Firebase pour le Web.
- Vous souhaitez en savoir plus sur Cloud Firestore ? Peut-être souhaitez-vous en savoir plus sur les sous-collections et les transactions ? Rendez-vous sur l' atelier de programmation Web Cloud Firestore pour un atelier de programmation approfondi sur Cloud Firestore. Ou consultez cette série YouTube pour découvrir Cloud Firestore !
Apprendre encore plus
- Site Firebase : firebase.google.com
- Chaîne YouTube Firebase
Comment c'était?
Nous aimerions vos retours. Merci de remplir un (très) court formulaire ici .