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

Découvrez Firebase pour le Web

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.

capture d'écran de cette étape

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 :

capture d'écran de cette étape

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 et description-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

capture d'écran de cette étape

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.

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 .

Attention : Dans les premières étapes de cet atelier de programmation, vous utilisez le mode test. Cependant, plus tard dans l'atelier de programmation, vous écrirez des règles de sécurité Firebase pour sécuriser votre base de données.
Pour vos applications, notamment les applications de production, il est très important que vous sécurisiez votre base de données à l'aide de règles de sécurité. Apprenez-en plus sur les règles de sécurité dans la documentation Firebase .
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 .
Stackblitz gère vos dépendances pour vous, vous pouvez donc ignorer l'étape npm install firebase affichée dans la console.
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 .

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 ajoutez getAuth et EmailAuthProvider , 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() dans index.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 valeurs id 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 fichier index.js .

Notez que dans le fichier index.html , il y a un conteneur avec l'ID firebaseui-auth-container . Il s'agit de l'identifiant que vous transmettrez à FirebaseUI pour conserver votre connexion.
```


<section id="event-details-container">
    
    
    <button id="startRsvp">RSVP</button>
</section>
<hr>
<section id="firebaseui-auth-container"></section>

```
Aperçu de l'application
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 fonction main() dans index.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 ou The 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.
Aperçu de l'application
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 ajoutez signOut et onAuthStateChanged , 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

capture d'écran de cette étape

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 .

Graphique du modèle de données Firestore montrant une collection de livres d'or avec plusieurs documents de message

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

capture d'écran de cette étape

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 ajoutez getFirestore , addDoc et collection , 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ès initializeApp :
```
initializeApp(firebaseConfig);
auth = getAuth();
db = getFirestore();
```

Au bas de la fonction main() , ajoutez le code suivant.

Notez que auth.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

capture d'écran de cette étape

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 de guestbook .

<!-- ... -->

  <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 ajoutez query , orderBy et onSnapshot , 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

capture d'écran de cette étape

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.

capture d'écran de cette étape

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ée subscribeGuestbook . Affectez également les résultats de la fonction onSnapshot à la variable guestbookListener .

L'écouteur Firestore onSnapshot 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 variable guestbookListener 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 de if (user) .

Ajoutez unsubscribeGuestbook() au bas de l'instruction else .

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

capture d'écran de cette étape

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 ajoutez doc , setDoc et where , 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 sur true ou false en fonction du bouton sur lequel vous cliquez.

D’abord pour rsvpYes :

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

Ensuite, pareil pour rsvpNo , mais avec la valeur false :

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'ID number-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 sur clicked .

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

capture d'écran de cette étape

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 .

Découvrez Firebase pour le Web

1. Vue d'ensemble

Ce que vous apprendrez

Ce dont vous aurez besoin

2. Obtenez le code de départ

3. Modifier les informations sur l'événement

Aperçu de l'application

4. Créez et configurez un projet Firebase

Créer un projet Firebase

Activer et configurer les produits Firebase dans la console

Activer la connexion par e-mail pour l'authentification Firebase

Configurer Cloud Firestore

5. Ajouter et configurer Firebase

Ajouter les bibliothèques Firebase

Ajoutez une application Web Firebase à votre projet Firebase

6. Ajouter la connexion utilisateur (RSVP)

Authentifiez vos utilisateurs avec Email Sign-In et FirebaseUI

Ajoutez le code pour initialiser FirebaseUI Auth

Ajouter un bouton RSVP au HTML

Testez la connexion à l'application

Ajouter un état d'authentification à l'interface utilisateur

Aperçu de l'application

7. Écrivez des messages sur Cloud Firestore

Modèle de données

Ajouter des messages à Firestore

Aperçu de l'application

Afficher le livre d'or uniquement aux utilisateurs connectés

Tester l'envoi de messages

Console Firebase

8. Lire les messages

Synchroniser les messages

Tester la synchronisation des messages

Aperçu de l'application

9. Mettre en place des règles de sécurité de base

Identifier les collections

Ajouter des règles de sécurité

Ajouter des règles de validation

Réinitialiser les écouteurs

10. Étape bonus : mettez en pratique ce que vous avez appris

Enregistrer le statut RSVP d'un participant

Aperçu de l'application

Mettez à jour vos règles de sécurité

Autoriser les ajouts à la collection attendees

Ajouter des règles de validation

Lire le statut RSVP

Aperçu de l'application

11. Félicitations !

Ce que nous avons couvert

Prochaines étapes

Apprendre encore plus

Comment c'était?

Autoriser les ajouts à la collection `attendees`