Conozca Firebase para la web

1. Información general

En este laboratorio de programación, usted aprenderá algunos de los conceptos básicos de Firebase para crear aplicaciones web interactivas. Construirá una aplicación de chat de libro de visitas y RSVP para eventos con varios productos de Firebase.

59abdefbcc23bbbe.png

Lo que vas a aprender

  • Autentica usuarios con Firebase Authentication y FirebaseUI.
  • Sincroniza datos con Cloud Firestore.
  • Escribe reglas de seguridad de Firebase para proteger una base de datos.

Lo que necesitarás

  • Un navegador de su elección, como Chrome.
  • El acceso a stackblitz.com (sin cuenta o inicio de sesión necesario).
  • Una cuenta de Google, como una cuenta de Gmail. Recomendamos la cuenta de correo electrónico que ya usa para su cuenta de GitHub. Esto le permite utilizar funciones avanzadas en StackBlitz.
  • El código de muestra del codelab. Consulte el siguiente paso para saber cómo obtener el código.

2. Obtén el código de inicio

En este laboratorio de programación, se construye una aplicación usando StackBlitz , un editor en línea que tiene varias Firebase flujos de trabajo integrados en ella. Stackblitz no requiere instalación de software ni cuenta especial de StackBlitz.

StackBlitz te permite compartir proyectos con otros. Otras personas que tienen la URL de su proyecto StackBlitz pueden ver su código y bifurcar su proyecto, pero no pueden editar su proyecto StackBlitz.

  1. Vaya a esta dirección URL para el código de partida: https://stackblitz.com/edit/firebase-gtk-web-start
  2. En la parte superior de la página StackBlitz, haga clic Tenedor: f5135360aef481cc.png

Ahora tiene una copia del código de inicio como su propio proyecto StackBlitz. Dado que no se inscribió en, su cuenta se llama @anonymous , pero el proyecto tiene un nombre único, junto con una URL única. Todos sus archivos y cambios se guardan en este proyecto StackBlitz.

3. Editar la información del evento

Los materiales de partida para este laboratorio de código proporcionan cierta estructura para la aplicación web, incluidas algunas hojas de estilo y un par de contenedores HTML para la aplicación. Más adelante en este laboratorio de código, conectará estos contenedores a Firebase.

Para comenzar, familiaricémonos un poco con la interfaz StackBlitz.

  1. En StackBlitz, abra el index.html archivo.
  2. Localizar event-details-container y description-container , a continuación, tratar la edición de algunos detalles del evento.

A medida que edita el texto, la recarga automática de la página en StackBlitz muestra los detalles del nuevo evento. Genial, ¿no?

<!-- ... -->

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

<!-- ... -->

La vista previa de su aplicación debería verse así:

Vista previa de la aplicación

908cc57ce3a5b5fe.png

4. Crea y configura un proyecto de Firebase

Mostrar la información del evento es excelente para sus invitados, pero mostrar los eventos no es muy útil para nadie. Agreguemos algunas funciones dinámicas a esta aplicación. Para ello, deberá conectar Firebase a su aplicación. Para comenzar con Firebase, deberá crear y configurar un proyecto de Firebase.

Crea un proyecto de Firebase

  1. Iniciar sesión en Firebase .
  2. En la consola Firebase, haga clic en Agregar proyecto (o crear un proyecto), a continuación, el nombre de su proyecto Firebase Firebase-Web-experimento de código.
    a67c239f8cc7f4b5.png
  3. Haga clic en las opciones de creación de proyectos. Acepte los términos de Firebase si se le solicita. Omita la configuración de Google Analytics, porque no utilizará Analytics para esta aplicación.

Para obtener más información sobre los proyectos de base de fuego, consulte Comprender proyectos de base de fuego .

Habilita los productos de Firebase en la consola

La aplicación que está creando usa varios productos de Firebase que están disponibles para aplicaciones web:

  • Firebase Autenticación y firebase interfaz de usuario para permitir fácilmente a los usuarios inician sesión en la aplicación.
  • Nube Firestore para guardar datos estructurados en la nube y obtener una notificación instantánea cuando cambian los datos.
  • Firebase Reglas de seguridad para proteger su base de datos.

Algunos de estos productos necesitan una configuración especial o deben habilitarse mediante la consola de Firebase.

Habilita el inicio de sesión por correo electrónico para la autenticación de Firebase

Para permitir que los usuarios accedan a la aplicación web, va a utilizar el inicio de sesión de correo electrónico / contraseña para este método de laboratorio de programación:

  1. En la consola Firebase, haga clic en Generar en el panel izquierdo.
  2. Haga clic en Autenticación, a continuación, haga clic en la pestaña Inicio de sesión método (o haga clic aquí para ir directamente a la pestaña Inicio de sesión método).
  3. Haga clic en Correo electrónico / contraseña en la lista de inicio de sesión de proveedores, ajuste el interruptor a la posición que permite realizar, a continuación, haga clic en Guardar.
    4c88427cfd869bee.png

Habilitar Cloud Firestore

La aplicación web utiliza la nube Firestore para guardar los mensajes de chat y recibir nuevos mensajes de chat.

Habilita Cloud Firestore:

  1. En la sección de construcción de la consola Firebase, haga clic Firestore base de datos.
  2. Haga clic en Crear base de datos.
    3ce19fd6467e51c5.png
  3. Seleccione la opción de inicio en modo de prueba. Lea el descargo de responsabilidad sobre las reglas de seguridad. El modo de prueba garantiza que pueda escribir libremente en la base de datos durante el desarrollo. Haga clic en Siguiente.
    56369cebb9300eb.png
  4. Seleccione la ubicación de su base de datos (puede usar la predeterminada). Sin embargo, tenga en cuenta que esta ubicación no se puede cambiar más adelante.
    32f815f4648c3174.png
  5. Haga clic en Hecho.

5. Agrega y configura Firebase

Ahora que tiene su proyecto de Firebase creado y algunos servicios habilitados, debe indicarle al código que desea usar Firebase, así como qué proyecto de Firebase usar.

Agrega las bibliotecas de Firebase

Para que su aplicación use Firebase, debe agregar las bibliotecas de Firebase a la aplicación. Hay varias maneras de hacer esto, como se describe en la documentación Firebase . Por ejemplo, puede agregar las bibliotecas desde el CDN de Google, o puede instalarlas localmente usando npm y luego empaquetarlas en su aplicación si está usando Browserify.

StackBlitz proporciona agrupación automática, por lo que puede agregar las bibliotecas de Firebase mediante declaraciones de importación. Utilizará las versiones modulares (v9) de las bibliotecas, que ayudan a reducir el tamaño general de la página web a través de un proceso llamado "agitación de árboles". Usted puede aprender más sobre los SDK modulares en los documentos .

Para crear esta aplicación, usa las bibliotecas Firebase Authentication, FirebaseUI y Cloud Firestore. Para este laboratorio de programación, las siguientes declaraciones de importación ya están incluidos en la parte superior de la index.js archivo, y vamos a estar importando más métodos de cada biblioteca Firebase como vamos:

// 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';

Agrega una aplicación web de Firebase al proyecto

  1. De vuelta en la consola Firebase, navegar a la página de información general del proyecto haciendo clic en Visión general del proyecto en la parte superior izquierda.
  2. En el centro de la página de descripción general de su proyecto, haga clic en el icono web b286f3d215e1f578.png para crear una nueva aplicación web de Firebase.
    c167e9526fad2825.png
  3. Registrar la aplicación con el apodo de aplicación web.
  4. Por esta codelab, no marque la casilla al lado también estableció Firebase Hosting para esta aplicación. Utilizará el panel de vista previa de StackBlitz por ahora.
  5. Haga clic en Registro de aplicaciones.
    c85ac8aa351e2560.png
  6. Copiar el objeto de configuración Firebase en el portapapeles.
    ed1e598c6132f734.png
  7. Haga clic en Continuar a la consola.

Agrega el objeto de configuración de Firebase a tu aplicación:

  1. De vuelta en StackBlitz, vaya a la index.js archivo.
  2. Busque el Add Firebase project configuration object here línea de comentario, a continuación, pegar el fragmento de configuración justo por debajo del comentario.
  3. Añadir el initializeApp llamada a la función de establecer Firebase la utilización de su configuración única Firebase proyecto.
    // ...
    // 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. Agregar inicio de sesión de usuario (RSVP)

Ahora que ha agregado Firebase a la aplicación, se puede configurar un botón de RSVP que registra las personas que utilizan la autenticación Firebase .

Autentica a tus usuarios con el inicio de sesión por correo electrónico y FirebaseUI

Necesitará un botón RSVP que le pide al usuario que inicie sesión con su dirección de correo electrónico. Esto se puede hacer mediante la conexión de FirebaseUI a un button.FirebaseUI RSVP es una biblioteca que proporciona una interfaz de usuario pre-construidos en la parte superior de Firebase de autenticación.

FirebaseUI requiere una configuración (ver las opciones en la documentación ) que hace dos cosas:

  • FirebaseUI dice que desea utilizar el inicio de sesión de correo electrónico / contraseña método.
  • Maneja la devolución de llamada para un inicio de sesión exitoso y devuelve falso para evitar una redirección. No desea que la página se actualice porque está creando una aplicación web de una sola página.

Agrega el código para inicializar FirebaseUI Auth

  1. En StackBlitz, vaya a la index.js archivo.
  2. En la parte superior, localice la firebase/auth declaración de importación, a continuación, añadir getAuth y EmailAuthProvider , así:
    // ...
    // Add the Firebase products and methods that you want to use
    import { getAuth, EmailAuthProvider } from 'firebase/auth';
    
    import {} from 'firebase/firestore';
    
  3. Guardar una referencia al objeto Auth justo después initializeApp , así:
    initializeApp(firebaseConfig);
    auth = getAuth();
    
  4. Tenga en cuenta que la configuración de FirebaseUI ya se proporciona en el código de inicio. Ya está configurado para usar el proveedor de autenticación de correo electrónico.
  5. En la parte inferior de la main() función en index.js , agregue la instrucción de inicialización FirebaseUI, así:
    async function main() {
      // ...
    
      // Initialize the FirebaseUI widget using Firebase
      const ui = new firebaseui.auth.AuthUI(auth);
    }
    main();
    
    

Agregar un botón RSVP al HTML

  1. En StackBlitz, ir al index.html archivo.
  2. Añadir el código HTML para un botón de RSVP dentro del event-details-container como se muestra en el ejemplo siguiente.

    Tenga cuidado al usar los mismos id valores como se muestra a continuación ya porque, para este laboratorio de programación, hay ganchos para estos identificadores específicos en el index.js archivo.

    Tenga en cuenta que en el index.html archivo, hay un recipiente con el ID firebaseui-auth-container . Esta es la ID que pasará a FirebaseUI para mantener su inicio de sesión.
    <!-- ... -->
    
    <section id="event-details-container">
        <!-- ... -->
        <!-- ADD THE RSVP BUTTON HERE -->
        <button id="startRsvp">RSVP</button>
    </section>
    <hr>
    <section id="firebaseui-auth-container"></section>
    <!-- ... -->
    
    aplicación de vista previa
    ab9ad7d61bb7b28c.png
  3. Configure un oyente en el botón RSVP y llame a la función de inicio de FirebaseUI. Esto le dice a FirebaseUI que desea ver la ventana de inicio de sesión.

    Agregue el código siguiente al final del main() función en index.js :
    async function main() {
      // ...
    
      // Listen to RSVP button clicks
      startRsvpButton.addEventListener("click",
       () => {
            ui.start("#firebaseui-auth-container", uiConfig);
      });
    }
    main();
    

Prueba de iniciar sesión en la aplicación

  1. En la ventana de vista previa de StackBlitz, haga clic en el botón RSVP para iniciar sesión en la aplicación.
    • Para este codelab, puede usar cualquier dirección de correo electrónico, incluso una dirección de correo electrónico falsa, ya que no está configurando un paso de verificación de correo electrónico para este codelab.
    • Si aparece un mensaje de error que indica auth/operation-not-allowed o The given sign-in provider is disabled for this Firebase project , asegúrese de que ha habilitado correo electrónico / contraseña como un inicio de sesión en la consola proveedor de Firebase.
    Vista previa de la aplicación
    3024f90b52ad55fe.png
  2. Ir al panel de control de autenticación en la consola Firebase. En la ficha Usuarios, debería ver la información de la cuenta que ha introducido para iniciar sesión en la aplicación. 682fc0eca86a99fc.png

Agregar estado de autenticación a la interfaz de usuario

A continuación, asegúrese de que la interfaz de usuario refleje el hecho de que ha iniciado sesión.

Utilizará la devolución de llamada del oyente de estado de Firebase Authentication, que recibe una notificación cada vez que cambia el estado de inicio de sesión del usuario. Si actualmente hay un usuario que ha iniciado sesión, su aplicación cambiará el botón "RSVP" a un botón de "cierre de sesión".

  1. En StackBlitz, vaya a la index.js archivo.
  2. En la parte superior, localice la firebase/auth declaración de importación, a continuación, añadir signOut y onAuthStateChanged , así:
    // ...
    // Add the Firebase products and methods that you want to use
    import {
      getAuth,
      EmailAuthProvider,
      signOut,
      onAuthStateChanged
    } from 'firebase/auth';
    
    import {} from 'firebase/firestore';
    
  3. Agregue el código siguiente en la parte inferior de la main() función:
    async function main() {
      // ...
    
      // Listen to the current Auth state
      onAuthStateChanged(auth, user => {
        if (user) {
          startRsvpButton.textContent = 'LOGOUT';
        } else {
          startRsvpButton.textContent = 'RSVP';
        }
      });
    }
    main();
    
  4. En el oyente de botones, compruebe si hay un usuario actual y cierre la sesión. Para ello, reemplace la corriente startRsvpButton.addEventListener con lo siguiente:
    // ...
    // 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);
      }
    });
    

Ahora, el botón en su aplicación debe mostrar cierre de sesión, y debe cambiar de nuevo para confirmar su asistencia cuando se hace clic en él.

Vista previa de la aplicación

4c540450924f1607.png

7. Escribe mensajes en Cloud Firestore

Saber que los usuarios van a venir es genial, pero demos a los invitados algo más que hacer en la aplicación. ¿Y si pudieran dejar mensajes en un libro de visitas? Pueden compartir por qué están emocionados de venir o con quién esperan conocer.

Para almacenar los mensajes de chat que los usuarios escriben en la aplicación, va a utilizar la nube Firestore .

Modelo de datos

Cloud Firestore es una base de datos NoSQL y los datos almacenados en la base de datos se dividen en colecciones, documentos, campos y subcolecciones. Va a almacenar cada mensaje de la charla como un documento en una colección de nivel superior llamado guestbook .

b447950f9f993789.png

Agregar mensajes a Firestore

En esta sección, agregará la funcionalidad para que los usuarios escriban nuevos mensajes en la base de datos. Primero, agrega el HTML para los elementos de la interfaz de usuario (campo de mensaje y botón de envío). Luego, agrega el código que conecta estos elementos a la base de datos.

Para agregar los elementos de la interfaz de usuario de un campo de mensaje y un botón de envío:

  1. En StackBlitz, ir al index.html archivo.
  2. Busque el guestbook-container , a continuación, añadir el siguiente código HTML para crear un formulario con el campo de entrada de mensajes y el botón enviar.
    <!-- ... -->
    
     <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>
    
    <!-- ... -->
    

Vista previa de la aplicación

4a892284443cf73d.png

Un usuario hace clic en el botón ENVIAR disparará el siguiente fragmento de código. Se añade el contenido del campo de entrada mensaje al guestbook colección de la base de datos. Específicamente, el addDoc método añade el contenido del mensaje a un nuevo documento (con un ID generado automáticamente) al guestbook colección.

  1. En StackBlitz, vaya a la index.js archivo.
  2. En la parte superior, localice la firebase/firestore declaración de importación, a continuación, añadir getFirestore , addDoc y collection , así:
    // ...
    
    // 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';
    
  3. Ahora vamos a guardar una referencia a la Firestore db derecho objeto después initializeApp :
    initializeApp(firebaseConfig);
    auth = getAuth();
    db = getFirestore();
    
  4. En la parte inferior de la main() función, agregue el código siguiente.

    Tenga en cuenta que auth.currentUser.uid es una referencia a la identificación única generada automáticamente que la autenticación Firebase da para todos los usuarios conectados.
    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();
    

Mostrar el libro de visitas solo a los usuarios que hayan iniciado sesión

Usted no quiere a cualquiera para ver el chat de los huéspedes. Una cosa que puede hacer para proteger el chat es permitir que solo los usuarios que hayan iniciado sesión vean el libro de visitas. Dicho esto, para sus propias aplicaciones, tendrá que asegurar también su base de datos con la base de fuego en Reglas de seguridad . (Hay más información sobre las reglas de seguridad más adelante en el laboratorio de código).

  1. En StackBlitz, vaya a la index.js archivo.
  2. Editar la onAuthStateChanged oyente para ocultar y mostrar el libro de visitas.
    // ...
    
    // 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';
      }
    });
    

Prueba de envío de mensajes

  1. Asegúrese de haber iniciado sesión en la aplicación.
  2. Introduzca un mensaje como "Hola!", A continuación, haga clic en ENVIAR.

Esta acción escribe el mensaje en tu base de datos de Cloud Firestore. Sin embargo, todavía no verá el mensaje en su aplicación web real porque aún necesita implementar la recuperación de datos. Lo harás a continuación.

Pero puede ver el mensaje recién agregado en la consola de Firebase.

En la consola Firebase, en el panel de control de base de datos , usted debe ver el guestbook de recogida con el mensaje que acaba de agregar. Si sigue enviando mensajes, su colección de libros de visitas contendrá muchos documentos, como este:

Consola de Firebase

713870af0b3b63c.png

8. Leer mensajes

Sincronizar mensajes

Es encantador que los invitados puedan escribir mensajes en la base de datos, pero aún no pueden verlos en la aplicación.

Para mostrar mensajes, deberá agregar oyentes que se activen cuando cambien los datos y luego crear un elemento de interfaz de usuario que muestre nuevos mensajes.

Agregará código que escucha los mensajes recién agregados desde la aplicación. Primero, agregue una sección en el HTML para mostrar mensajes:

  1. En StackBlitz, ir al index.html archivo.
  2. En guestbook-container , añadir una nueva sección con el ID de guestbook .
    <!-- ... -->
    
      <section id="guestbook-container">
       <h2>Discussion</h2>
    
       <form><!-- ... --></form>
    
       <section id="guestbook"></section>
    
     </section>
    
    <!-- ... -->
    

A continuación, registre el oyente que escucha los cambios realizados en los datos:

  1. En StackBlitz, vaya a la index.js archivo.
  2. En la parte superior, localice la firebase/firestore declaración de importación, a continuación, añadir query , orderBy y onSnapshot , así:
    // ...
    import {
      getFirestore,
      addDoc,
      collection,
      query,
      orderBy,
      onSnapshot
    } from 'firebase/firestore';
    
  3. En la parte inferior de la main() la función, agregue el código siguiente para recorrer todos los documentos (mensajes) en su libro de visitas de la base de datos. Para obtener más información sobre lo que sucede en este código, lea la información debajo del fragmento.
    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();
    

Para escuchar los mensajes en la base de datos, que ha creado una consulta en una colección específica mediante el uso de la collection función. El código anterior escuchas a los cambios en el guestbook de recogida, que es donde se almacenan los mensajes de chat. Los mensajes también están clasificadas por fecha, utilizando orderBy('timestamp', 'desc') para mostrar los mensajes más recientes en la parte superior.

El onSnapshot función toma dos parámetros: la consulta a un uso y una función de devolución de llamada. La función de devolución de llamada se activa cuando hay cambios en los documentos que coinciden con la consulta. Esto podría ocurrir si un mensaje se elimina, modifica o agrega. Para obtener más información, consulte la documentación de la nube Firestore .

Probar la sincronización de mensajes

Cloud Firestore sincroniza los datos de forma automática e instantánea con los clientes suscritos a la base de datos.

  • Los mensajes que creó anteriormente en la base de datos deben mostrarse en la aplicación. Siéntete libre de escribir nuevos mensajes; deberían aparecer instantáneamente.
  • Si abre su espacio de trabajo en varias ventanas o pestañas, los mensajes se sincronizarán en tiempo real entre las pestañas.
  • (Opcional) Puede probar manualmente la supresión, modificación o adición de nuevos mensajes directamente en la sección Base de datos de la consola Firebase; cualquier cambio debería aparecer en la interfaz de usuario.

¡Felicidades! ¡Estás leyendo documentos de Cloud Firestore en tu aplicación!

Vista previa de la aplicación

e30df0a9614bae7d.png

9. Configure reglas de seguridad básicas

Inicialmente configuraste Cloud Firestore para usar el modo de prueba, lo que significa que tu base de datos está abierta para lecturas y escrituras. Sin embargo, solo debe usar el modo de prueba durante las primeras etapas de desarrollo. Como práctica recomendada, debe configurar reglas de seguridad para su base de datos a medida que desarrolla su aplicación. La seguridad debe ser parte integral de la estructura y el comportamiento de su aplicación.

Las reglas de seguridad le permiten controlar el acceso a documentos y colecciones en su base de datos. La sintaxis de reglas flexible le permite crear reglas que coincidan con cualquier cosa, desde todas las escrituras hasta la base de datos completa, hasta las operaciones en un documento específico.

Puedes escribir reglas de seguridad para Cloud Firestore en Firebase console:

  1. En la sección de construcción de la consola Firebase, haga clic Firestore base de datos, a continuación, seleccione la ficha Reglas (o haga clic aquí para ir directamente a la pestaña Reglas).
  2. Debería ver las siguientes reglas de seguridad predeterminadas, junto con una advertencia acerca de que las reglas son públicas.

7767a2d2e64e7275.png

Identificar colecciones

Primero, identifique las colecciones en las que la aplicación escribe datos.

En match /databases/{database}/documents , identificar la colección que desea proteger:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
     // You'll add rules here in the next step.
  }
}

Agregar reglas de seguridad

Debido a que usó el UID de autenticación como un campo en cada documento del libro de visitas, puede obtener el UID de autenticación y verificar que cualquier persona que intente escribir en el documento tenga un UID de autenticación coincidente.

Agregue las reglas de lectura y escritura a su conjunto de reglas como se muestra a continuación:

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

Ahora, para el libro de visitas, solo los usuarios que hayan iniciado sesión pueden leer mensajes (¡cualquier mensaje!), Pero solo puede crear un mensaje con su ID de usuario. Tampoco permitimos que los mensajes se editen o eliminen.

Agregar reglas de validación

Agregue validación de datos para asegurarse de que todos los campos esperados estén presentes en el documento:

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

Restablecer oyentes

Debido a que su aplicación permite a los usuarios autenticados solamente para iniciar la sesión, debe mover el libro de visitas firestore consulta dentro del oyente autenticación. De lo contrario, se producirán errores de permisos y la aplicación se desconectará cuando el usuario cierre la sesión.

  1. Tire de la colección de libro de visitas que onSnapshot oyente en una nueva función llamada subscribeGuestbook . Asimismo, designar a los resultados de la onSnapshot función a la guestbookListener variable.

    El Firestore onSnapshot oyente vuelve una función de cancelación de suscripción que usted será capaz de utilizar para cancelar el oyente instantánea más tarde.
    // ...
    // Listen to guestbook updates
    // 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);
        });
      });
    }
    
  2. Añadir una nueva función llamada por debajo unsubscribeGuestbook . Comprobar si el guestbookListener variable no es nulo, a continuación, llamar a la función de cancelar el oyente.
    // ...
    // Unsubscribe from guestbook updates
    function unsubscribeGuestbook() {
      if (guestbookListener != null) {
        guestbookListener();
        guestbookListener = null;
      }
    }
    

Por último, añadir las nuevas funciones al onAuthStateChanged de devolución de llamada.

  1. Añadir subscribeGuestbook() en la parte inferior de if (user) .
  2. Añadir unsubscribeGuestbook() en la parte inferior de la else declaración.
    // ...
    // 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. Paso adicional: practica lo que has aprendido

Registrar el estado de RSVP de un asistente

En este momento, su aplicación solo permite que las personas comiencen a chatear si están interesadas en el evento. Además, la única forma de saber si alguien va a venir es si lo publica en el chat. Organicemos y hagamos saber a la gente cuántas personas vendrán.

Agregará una palanca para registrar a las personas que quieran asistir al evento y luego recopile un recuento de cuántas personas asistirán.

  1. En StackBlitz, ir al index.html archivo.
  2. En guestbook-container , añadir un conjunto de botones y no, así:
    <!-- ... -->
      <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>
    <!-- ... -->
    

Vista previa de la aplicación

73ca99ca35c13ee7.png

A continuación, registre al oyente para hacer clic en los botones. Si el usuario hace clic en Sí, a continuación, utilizar su UID autenticación para guardar la respuesta a la base de datos.

  1. En StackBlitz, vaya a la index.js archivo.
  2. En la parte superior, localice la firebase/firestore declaración de importación, a continuación, añadir doc , setDoc , y where , así:
    // ...
    // Add the Firebase products and methods that you want to use
    import {
      getFirestore,
      addDoc,
      collection,
      query,
      orderBy,
      onSnapshot,
      doc,
      setDoc,
      where
    } from 'firebase/firestore';
    
  3. En la parte inferior de la main() la función, agregue el código siguiente para escuchar el estado de respuesta:
    async function main() {
      // ...
    
      // Listen to RSVP responses
      rsvpYes.onclick = async () => {
      };
      rsvpNo.onclick = async () => {
      };
    }
    main();
    
    
  4. Crear una nueva colección llamada attendees , a continuación, registrar una referencia de documento si se hace clic en cualquiera de los botones de RSVP.
  5. Establecer que la referencia al true o false dependiendo de lo que se hace clic en el botón.

    En primer lugar, para 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);
      }
    };
    
    A continuación, el mismo para rsvpNo , pero con el valor 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);
      }
    };
    

Agregar reglas

Debido a que ya tiene configuradas algunas reglas, los nuevos datos que está agregando con los botones serán rechazados. Tendrá que actualizar las normas para permitir la adición a la attendees colección.

Para el attendees colección, ya que utilizó el UID de autenticación como el nombre del documento, puede agarrarlo y verificar que el remitente del uid es el mismo que el documento que están escribiendo. Permitirá que todos lean la lista de asistentes (ya que no hay datos privados allí), pero solo el creador debería poder actualizarla.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId;
    }
  }
}

Agregar reglas de validación

Agregue validación de datos para asegurarse de que todos los campos esperados estén presentes en el documento:

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;

    }
  }
}

(Opcional) Ahora puede ver los resultados de clic en los botones. Ve a tu panel de Cloud Firestore en Firebase console.

Leer el estado de RSVP

Ahora que ha registrado las respuestas, veamos quién viene y reflejémoslo en la interfaz de usuario.

  1. En StackBlitz, ir al index.html archivo.
  2. En description-container , añadir un nuevo elemento con el ID del number-attending .
    <!-- ... -->
    
     <section id="description-container">
         <!-- ... -->
         <p id="number-attending"></p>
     </section>
    
    <!-- ... -->
    

A continuación, registrar el detector para el attendees recogida y contar el número de respuestas afirmativas:

  1. En StackBlitz, vaya a la index.js archivo.
  2. En la parte inferior de la main() la función, agregue el código siguiente para escuchar el estado de respuesta y el recuento de clics que sí.
    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();
    

Finalmente, resaltemos el botón correspondiente al estado actual.

  1. Crear una función que comprueba si la corriente de autenticación UID tiene una entrada en la attendees colección, a continuación, establecer la clase de botón de 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';
          }
        }
      });
    }
    
  2. Además, creemos una función para cancelar la suscripción. Esto se utilizará cuando el usuario cierre la sesión.
    // ...
    function unsubscribeCurrentRSVP() {
      if (rsvpListener != null) {
        rsvpListener();
        rsvpListener = null;
      }
      rsvpYes.className = '';
      rsvpNo.className = '';
    }
    
  3. Llame a las funciones desde el oyente de autenticación.
    // ...
    // 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();
        }
      });
    
  4. Trate de registro en forma de múltiples usuarios y ver el aumento de recuento con cada botón adicional clic.

Vista previa de la aplicación

3df607d3e0b3c35.png

11. ¡Felicitaciones!

¡Usó Firebase para crear una aplicación web interactiva en tiempo real!

Lo que hemos cubierto

  • Autenticación de Firebase
  • FirebaseUI
  • Cloud Firestore
  • Reglas de seguridad de Firebase

Próximos pasos

  • ¿Quieres obtener más información sobre otros productos de Firebase? ¿Quizás desea almacenar archivos de imagen que cargan los usuarios? ¿O enviar notificaciones a sus usuarios? Echa un vistazo a la codelab web Firebase para un laboratorio de programación que entra en más profundidad en muchos productos más firebase para web.
  • ¿Quieres obtener más información sobre Cloud Firestore? ¿Quizás quieras aprender sobre subcolecciones y transacciones? Pásate por el laboratorio de programación Web Cloud Firestore para un laboratorio de programación que entra en más profundidad sobre la nube Firestore. O echa un vistazo a esta serie de YouTube para llegar a conocer la nube Firestore !

Aprende más

¿Como le fue?

Nos encantaría recibir tus comentarios! Por favor llene una (muy) breve formulario aquí .