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

Découvrir Firebase pour le Web

1. Vue d'ensemble

Dans cet atelier de programmation, vous apprendrez certaines des bases de Firebase pour créer des applications Web interactives. Vous allez créer une application de chat RSVP et de livre d'or pour les événements à 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 (pas de compte ou de 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 des fonctionnalités avancées dans StackBlitz.
L'exemple de code du codelab. Voir l'étape suivante pour savoir comment obtenir le code.

2. Obtenez le code de démarrage

Dans cet atelier de programmation, vous créez une application à l'aide de StackBlitz , un éditeur en ligne qui intègre 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 qui ont l'URL de votre projet StackBlitz peuvent voir votre code et forker 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 avez maintenant une copie du code de démarrage 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 matériaux de départ de cet atelier de programmation fournissent une certaine structure pour l'application Web, y compris 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 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éer et configurer un projet Firebase

L'affichage des 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 devez 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 :

Firebase Authentication 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 autoriser les utilisateurs à 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 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 chat et recevoir de nouveaux messages de chat.

Voici comment configurer Cloud Firestore :

Dans le panneau de gauche de la console Firebase, cliquez sur Build > Firestore Database . 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. Plus tard dans le laboratoire de programmation, cependant, vous écrirez des règles de sécurité Firebase pour sécuriser votre base de données.
Pour vos applications, en particulier les applications de production, il est très important de sécuriser votre base de données à l'aide de règles de sécurité. En savoir 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 la valeur par défaut). Notez cependant que cet emplacement ne peut 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 au 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 du CDN de Google, ou vous pouvez les installer localement à l'aide de npm, puis les regrouper dans votre application si vous utilisez Browserify.

StackBlitz fournit 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 aident à réduire la taille globale de la page Web grâce à un processus appelé "tree shaking". 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 d'autres 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';

Ajouter 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 surnom 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 de prévisualisation 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 qui s'affiche dans la console.
Copiez l' objet de configuration Firebase dans votre presse-papiers.
Cliquez sur Continuer pour accéder à 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 de votre projet Firebase unique.

// ...
// 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 une connexion utilisateur (RSVP)

Maintenant que vous avez ajouté Firebase à l'application, vous pouvez configurer un bouton RSVP qui enregistre les personnes utilisant Firebase Authentication .

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 donne 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 voulez pas que la page s'actualise, 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 suit :

// ...
// 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 de 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 dans le 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 crochets pour ces ID 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'ID que vous transmettrez à FirebaseUI pour conserver votre connexion. Aperçu de l'application
```


<section id="event-details-container">
    
    
    <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 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 , vérifiez que vous avez activé Email/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 Firebase Authentication, qui est averti chaque fois que l'état de connexion de l'utilisateur change. S'il y a actuellement un utilisateur connecté, votre application transformera le bouton "RSVP" en 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 l'écouteur de bouton, vérifiez s'il y a 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 doit afficher LOGOUT , et il doit 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 arrivent, 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 partager pourquoi ils sont ravis de venir ou qui ils espèrent rencontrer.

Pour stocker les messages de chat 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 code HTML pour les éléments de l'interface utilisateur (champ de message et bouton d'envoi). Ensuite, vous ajoutez le code qui relie 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 de 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 ID 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 Firestore db 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 Firebase Authentication 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 de n'autoriser que les utilisateurs connectés à afficher le livre d'or. Cela dit, pour vos propres applications, vous souhaiterez également sécuriser votre base de données avec Firebase Security Rules . (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.
Entrez 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 réelle, car vous devez toujours implémenter la récupération des données. Vous ferez cela 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 devez 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 allez ajouter du code qui écoute les nouveaux messages ajoutés à partir de l'application. Tout d'abord, ajoutez une section dans le 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ù les messages de chat sont stockés. 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 correspondant à 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, de modifier ou d'ajouter manuellement de nouveaux messages directement dans la section Base de données de la console Firebase ; toute modification doit 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 en lecture et en écriture. Cependant, vous ne devez utiliser le mode test qu'aux toutes premières étapes du développement. La meilleure pratique consiste à 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 aux collections de votre base de données. La syntaxe des règles flexibles vous permet de créer des règles qui correspondent à n'importe quoi, de toutes les écritures dans l'ensemble de la base de données 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 Rules (ou cliquez ici pour accéder directement à l'onglet Rules ).
Vous devriez voir les règles de sécurité par défaut suivantes, avec une limite de temps d'accès public de 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 afin 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 de livre d'or, vous pouvez obtenir l'UID d'authentification et vérifier que toute personne tentant d'écrire dans le document dispose d'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'à l'aide de votre ID utilisateur. Nous n'autorisons pas non plus la modification ou la suppression des messages.

Ajouter des règles de validation

Ajoutez la 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 .

Tirez 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 : pratiquez ce que vous avez appris

Enregistrer le statut RSVP d'un participant

Pour le moment, votre application permet simplement aux utilisateurs 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 viennent.

Vous ajouterez une bascule pour enregistrer les personnes qui souhaitent assister à l'événement, puis collecterez le nombre de personnes qui viennent.

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'écouteur pour les clics de bouton. 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 vous cliquez sur l'un des boutons RSVP. Définissez cette référence sur true ou false selon le 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 vous avez déjà configuré certaines règles, 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 de document, vous pouvez le récupérer et vérifier que l' uid de l'émetteur est le même que le document qu'il écrit. Vous autoriserez tout le monde à 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 des 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 de number-attending .

<!-- ... -->

 <section id="description-container">
     <!-- ... -->
     <p id="number-attending"></p>
 </section>

<!-- ... -->

Ensuite, enregistrez l'auditeur pour la collection 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, mettons en surbrillance 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';
      }
    }
  });
}

Aussi, créons une fonction pour se désinscrire. Il sera utilisé lorsque l'utilisateur se déconnectera.

// ...
function unsubscribeCurrentRSVP() {
  if (rsvpListener != null) {
    rsvpListener();
    rsvpListener = null;
  }
  rsvpYes.className = '';
  rsvpNo.className = '';
}

Appelez les fonctions à partir de 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 voulez en savoir plus sur le flux de travail des développeurs Firebase ? Consultez l' atelier de programmation de l'émulateur Firebase pour savoir comment tester et exécuter votre application entièrement en local.
Vous souhaitez en savoir plus sur les autres produits Firebase ? Peut-être souhaitez-vous stocker des fichiers image que les utilisateurs téléchargent ? Ou envoyer des notifications à vos utilisateurs ? Consultez le laboratoire de programmation Web Firebase pour un laboratoire de programmation qui approfondit de nombreux autres produits Firebase pour le Web.
Vous voulez 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écouvrir Firebase pour le Web

1. Vue d'ensemble

Ce que vous apprendrez

Ce dont vous aurez besoin

2. Obtenez le code de démarrage

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

Aperçu de l'application

4. Créer et configurer 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

Ajouter une application Web Firebase à votre projet Firebase

6. Ajouter une 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 : pratiquez 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`