Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now
Ta strona została przetłumaczona przez Cloud Translation API.
Switch to English

Poznaj Firebase w przeglądarce

W tym kodowaniu poznasz podstawy Firebase do tworzenia interaktywnych aplikacji internetowych. Utworzysz i wdrożysz aplikację do potwierdzania obecności i czatu w księdze gości przy użyciu kilku produktów Firebase.

59abdefbcc23bbbe.png

Czego się nauczysz

  • Uwierzytelnij użytkowników za pomocą Firebase Authentication i FirebaseUI.
  • Synchronizuj dane za pomocą Cloud Firestore.
  • Napisz reguły zabezpieczeń Firebase, aby zabezpieczyć bazę danych.
  • Wdróż aplikację internetową w Hostingu Firebase.

Co będziesz potrzebował

  • Wybrana przeglądarka, na przykład Chrome.
  • Dostęp do stackblitz.com (bez konieczności posiadania konta ani logowania).
  • Konto Google, takie jak konto Gmail. Zalecamy konto e-mail, którego już używasz na koncie GitHub. Pozwala to na korzystanie z zaawansowanych funkcji w StackBlitz.
  • Przykładowy kod codelab. Zobacz następny krok, aby dowiedzieć się, jak uzyskać kod.

W tym codelab możesz budować i wdrażać aplikację przy użyciu StackBlitz , edytora online, który ma zintegrowanych kilka przepływów pracy Firebase . Stackblitz nie wymaga instalacji oprogramowania ani specjalnego konta StackBlitz.

StackBlitz umożliwia udostępnianie projektów innym osobom. Inne osoby, które mają adres URL Twojego projektu StackBlitz, mogą zobaczyć Twój kod i rozwidlić Twój projekt, ale nie mogą edytować Twojego projektu StackBlitz.

  1. Przejdź do tego adresu URL, aby uzyskać kod początkowy: https://stackblitz.com/edit/firebase-gtk-web-start
  2. U góry strony StackBlitz kliknij Rozwidlenie : f5135360aef481cc.png

Masz teraz kopię kodu startowego jako własny projekt StackBlitz. Ponieważ się nie zalogowałeś, Twoje konto nosi nazwę @anonymous , ale projekt ma unikalną nazwę wraz z unikalnym adresem URL. Wszystkie twoje pliki i zmiany są zapisywane w tym projekcie StackBlitz.

Materiały początkowe do tego codelab zapewniają pewną strukturę aplikacji internetowej, w tym niektóre arkusze stylów i kilka kontenerów HTML dla aplikacji. W dalszej części tego kodowania połączysz te kontenery z Firebase.

Aby rozpocząć, zapoznajmy się nieco lepiej z interfejsem StackBlitz.

  1. W StackBlitz otwórz plik index.html .
  2. Zlokalizuj event-details-container i event-details-container description-container , a następnie spróbuj edytować niektóre szczegóły wydarzenia.

Podczas edycji tekstu automatyczne ponowne ładowanie strony w StackBlitz wyświetla szczegóły nowego wydarzenia. Fajnie, tak?

<!-- ... -->

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



<!-- ... -->

Podgląd Twojej aplikacji powinien wyglądać mniej więcej tak:

Podgląd aplikacji

908cc57ce3a5b5fe.png

Wyświetlanie informacji o wydarzeniu jest świetne dla gości, ale samo pokazywanie wydarzeń nie jest dla nikogo zbyt przydatne. Dodajmy dynamiczną funkcjonalność do tej aplikacji. W tym celu musisz podłączyć Firebase do swojej aplikacji. Aby rozpocząć korzystanie z Firebase, musisz utworzyć i skonfigurować projekt Firebase.

Utwórz projekt Firebase

  1. Zaloguj się do Firebase .
  2. W konsoli Firebase kliknij Dodaj projekt (lub Utwórz projekt ) i nazwij projekt Firebase Firebase-Web-Codelab .

a67c239f8cc7f4b5.png

  1. Kliknij opcje tworzenia projektu. Po wyświetleniu monitu zaakceptuj warunki Firebase. Pomiń konfigurowanie Google Analytics, ponieważ nie będziesz używać Analytics dla tej aplikacji.

Aby dowiedzieć się więcej o projektach Firebase, zobacz Omówienie projektów Firebase .

Aplikacja, którą tworzysz, korzysta z kilku usług Firebase, które są dostępne dla aplikacji internetowych:

  • Uwierzytelnianie Firebase i interfejs Firebase, aby ułatwić użytkownikom logowanie się do Twojej aplikacji.
  • Cloud Firestore, aby zapisywać uporządkowane dane w chmurze i otrzymywać natychmiastowe powiadomienia o zmianie danych.
  • Reguły bezpieczeństwa Firebase do zabezpieczenia Twojej bazy danych.
  • Hosting Firebase do hostowania i udostępniania Twoich zasobów.

Niektóre z tych produktów wymagają specjalnej konfiguracji lub muszą zostać włączone za pomocą konsoli Firebase.

Włącz logowanie e-mail do uwierzytelniania Firebase

Aby umożliwić użytkownikom logowanie się do aplikacji internetowej, użyj metody logowania e- mailem / hasłem dla tego codelab:

  1. W konsoli Firebase kliknij Develop w lewym panelu.
  2. Kliknij opcję Uwierzytelnianie , a następnie kliknij kartę Metoda logowania (lub kliknij tutaj, aby przejść bezpośrednio do karty Metoda logowania ).
  3. Kliknij opcję E-mail / hasło na liście dostawców logowania , ustaw przełącznik Włącz w pozycji włączonej, a następnie kliknij przycisk Zapisz . 4c88427cfd869bee.png

Włącz Cloud Firestore

Aplikacja internetowa korzysta z Cloud Firestore do zapisywania wiadomości czatu i odbierania nowych wiadomości czatu.

Włącz Cloud Firestore:

  1. W sekcji Develop konsoli Firebase kliknij opcję Baza danych .
  2. W Cloud Firestore kliknij Utwórz bazę danych . 3ce19fd6467e51c5.png
  1. Wybierz opcję Uruchom w trybie testowym . Przeczytaj zastrzeżenie dotyczące zasad bezpieczeństwa. Tryb testowy zapewnia swobodne zapisywanie w bazie danych podczas programowania. Kliknij Dalej . 56369cebb9300eb.png
  1. Wybierz lokalizację dla swojej bazy danych (możesz po prostu użyć domyślnej). Pamiętaj, że tej lokalizacji nie można później zmienić. 32f815f4648c3174.png
  2. Kliknij Gotowe .

Teraz, gdy masz już utworzony projekt Firebase i włączone niektóre usługi, musisz wskazać kodowi, że chcesz używać Firebase, a także wskazać projekt Firebase, którego chcesz użyć.

Dodaj biblioteki Firebase

Aby Twoja aplikacja korzystała z Firebase, musisz dodać do niej biblioteki Firebase. Można to zrobić na wiele sposobów, opisanych w dokumentacji Firebase . Na przykład możesz dodać biblioteki z CDN Google lub możesz je zainstalować lokalnie za pomocą npm, a następnie spakować je w swojej aplikacji, jeśli używasz Browserify.

StackBlitz zapewnia automatyczne pakowanie, więc możesz dodawać biblioteki Firebase za pomocą instrukcji importu.

Aby utworzyć tę aplikację, użyj bibliotek Firebase Authentication, FirebaseUI i Cloud Firestore. W przypadku tego codelab następujące wiersze znajdują się już na początku index.js :

// Import stylesheets
import "./style.css";

// Firebase App (the core Firebase SDK) is always required
// and must be listed first
import firebase from "firebase/app";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

import * as firebaseui from "firebaseui";

Dodaj aplikację internetową Firebase do projektu

  1. Wróć do konsoli Firebase i przejdź do strony przeglądu projektu, klikając Przegląd projektu w lewym górnym rogu.
  2. Na środku strony przeglądu projektu kliknij ikonę sieci Web b286f3d215e1f578.png aby utworzyć nową aplikację internetową Firebase. c167e9526fad2825.png
  3. Zarejestruj aplikację przy użyciu pseudonimu Web App .
  4. W przypadku tej biblioteki kodów nie zaznaczaj pola wyboru Skonfiguruj też Hosting Firebase dla tej aplikacji . Na razie będziesz używać okienka podglądu StackBlitz.
  5. Kliknij Zarejestruj aplikację . c85ac8aa351e2560.png
  6. Skopiujobiekt konfiguracyjny Firebase do schowka. ed1e598c6132f734.png
  7. Kliknij Przejdź do konsoli .

Dodaj obiekt konfiguracyjny Firebase do swojej aplikacji:

  1. Wróć do StackBlitz, przejdź do index.js .
  2. Znajdź wiersz komentarza Add Firebase project configuration object here i wklej swój fragment konfiguracji tuż pod komentarzem.
  3. Dodaj wywołanie funkcji initializeApp aby skonfigurować Firebase przy użyciu unikalnej konfiguracji projektu Firebase.
// ...

// Add Firebase project configuration object here
var 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
firebase.initializeApp(firebaseConfig);

Po dodaniu Firebase do aplikacji możesz skonfigurować przycisk RSVP, który rejestruje osoby korzystające z uwierzytelniania Firebase .

Uwierzytelnij swoich użytkowników za pomocą logowania przez e-mail i interfejsu FirebaseUI

Będziesz potrzebować przycisku RSVP, który zachęca użytkownika do zalogowania się przy użyciu adresu e-mail. Możesz to zrobić, podłączając FirebaseUI do przycisku RSVP.FirebaseUI to biblioteka, która udostępnia wbudowany interfejs użytkownika w uzupełnieniu do Firebase Auth.

FirebaseUI wymaga konfiguracji (zobacz opcje w dokumentacji ), która robi dwie rzeczy:

  1. Informuje FirebaseUI, że chcesz użyć metody logowania za pomocą adresu e-mail / hasła .
  2. Obsługuje wywołanie zwrotne dla pomyślnego logowania i zwraca false, aby uniknąć przekierowania. Nie chcesz, aby strona była odświeżana, ponieważ tworzysz pojedynczą stronę internetową.

Najpierw dodaj kod, aby zainicjować FirebaseUI:

  1. W StackBlitz przejdź do index.js . Zauważ, że konfiguracja FirebaseUI jest już podana.
  2. Na dole index.js, dodaj instrukcję inicjalizacji FirebaseUI, na przykład:
// ...
// Initialize the FirebaseUI widget using Firebase
const ui = new firebaseui.auth.AuthUI(firebase.auth());

Następnie dodaj przycisk RSVP do kodu HTML:

  1. W StackBlitz przejdź do pliku index.html .
  2. Dodaj kod HTML dla przycisku RSVP w event-details-container jak pokazano w poniższym przykładzie.

Uważaj, aby użyć tych samych wartości id , jak pokazano poniżej, ponieważ dla tego codelab istnieją już punkty zaczepienia dla tych konkretnych identyfikatorów w index.js .

Zwróć uwagę, że w pliku index.html znajduje się kontener o identyfikatorze firebaseui-auth-container . To jest identyfikator, który przekażesz do FirebaseUI, aby zachować swój login.

<!-- ... -->

<section id="event-details-container">
    <!-- ... -->
    <!-- ADD THE RSVP BUTTON HERE -->
    <button id="startRsvp">RSVP</button>
</section>
<hr>
<section id="firebaseui-auth-container"></section>
<!-- ... -->

Podgląd aplikacji

ab9ad7d61bb7b28c.png

  1. Skonfiguruj odbiornik na przycisku RSVP i wywołaj funkcję uruchamiania FirebaseUI. To informuje FirebaseUI, że chcesz zobaczyć okno logowania. Dodaj następujący kod na końcu index.js :
// ... 
// At the bottom

// Listen to RSVP button clicks
startRsvpButton.addEventListener("click",
 () => {
      ui.start("#firebaseui-auth-container", uiConfig);
});

Przetestuj logowanie do aplikacji

  1. W oknie podglądu StackBlitz kliknij przycisk RSVP, aby zalogować się do aplikacji.
  • W tym codelab możesz użyć dowolnego adresu e-mail, nawet fałszywego adresu e-mail, ponieważ nie konfigurujesz etapu weryfikacji adresu e-mail dla tego codelab.
  • Jeśli zobaczysz komunikat o błędzie informujący, że auth/operation-not-allowed lub The given sign-in provider is disabled for this Firebase project , sprawdź, czy The given sign-in provider is disabled for this Firebase project E-mail / hasło jako dostawcę logowania w konsoli Firebase.
  1. Przejdź do panelu uwierzytelniania w konsoli Firebase. Na karcie Użytkownicy powinieneś zobaczyć informacje o koncie, które wprowadziłeś, aby zalogować się do aplikacji.

Podgląd aplikacji

3024f90b52ad55fe.png

682fc0eca86a99fc.png

Dodaj stan uwierzytelniania do interfejsu użytkownika

Teraz upewnij się, że interfejs użytkownika odzwierciedla fakt, że jesteś zalogowany.

Będziesz używać wywołania zwrotnego nasłuchiwania stanu uwierzytelniania Firebase, które jest powiadamiane za każdym razem, gdy zmienia się stan logowania użytkownika. Jeśli obecnie jest użytkownik, zmienisz przycisk RSVP na przycisk wylogowania.

  1. W StackBlitz przejdź do index.js .
  2. Dodaj następujący kod na dole:
// ...
// Listen to the current Auth state
firebase.auth().onAuthStateChanged((user)=> {
  if (user) {
    startRsvpButton.textContent = "LOGOUT"
  }
  else {
    startRsvpButton.textContent = "RSVP"
  }
});
  1. W odbiorniku przycisków sprawdź, czy jest aktualny użytkownik i wyloguj go. Aby to zrobić, zamień bieżący startRsvpButton.addEventListener na następujący:
// ...
// Called when the user clicks the RSVP button
startRsvpButton.addEventListener("click",
 () => {
    if (firebase.auth().currentUser) {
      // User is signed in; allows user to sign out
      firebase.auth().signOut();
    } else {
      // No user is signed in; allows user to sign in
      ui.start("#firebaseui-auth-container", uiConfig);
    }
});

Teraz przycisk powinien pokazywać LOGOUT i po kliknięciu przełączać się z powrotem na RSVP .

Podgląd aplikacji

4c540450924f1607.png

Świadomość, że nadchodzą użytkownicy, jest świetna, ale dajmy im coś do zrobienia w aplikacji. Co by było, gdyby mogli zostawić wiadomości w księdze gości? Mogą opowiedzieć, dlaczego są podekscytowani przybyciem lub kogo mają nadzieję spotkać.

Aby przechowywać wiadomości czatu, które użytkownicy piszą w aplikacji, będziesz używać Cloud Firestore .

Model danych

Cloud Firestore to baza danych NoSQL, a dane przechowywane w bazie danych są podzielone na kolekcje, dokumenty, pola i podkolekcje. Będziesz przechowywać każdą wiadomość czatu jako dokument w kolekcji najwyższego poziomu o nazwie guestbook .

b447950f9f993789.png

Dodaj wiadomości do Firestore

W tej sekcji dodasz funkcję umożliwiającą użytkownikom zapisywanie nowych wiadomości w bazie danych. Najpierw dodajesz kod HTML dla elementów interfejsu użytkownika (pole wiadomości i przycisk wysyłania), a następnie dodajesz kod, który podpina te elementy do bazy danych.

Aby dodać elementy interfejsu użytkownika pola wiadomości i przycisk wysyłania, wykonaj następujące czynności:

  1. W StackBlitz przejdź do pliku index.html .
  2. Zlokalizuj guestbook-container i dodaj następujący kod HTML, aby utworzyć formularz z polem wprowadzania wiadomości i przyciskiem Wyślij.
<!-- ... -->

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

<!-- ... -->

Podgląd aplikacji

4a892284443cf73d.png

Kliknięcie przycisku WYŚLIJ przez użytkownika spowoduje wyświetlenie poniższego fragmentu kodu. Dodaje zawartość pola wprowadzania wiadomości do kolekcji guestbook w bazie danych. W szczególności metoda add dodaje treść wiadomości do nowego dokumentu (z automatycznie wygenerowanym identyfikatorem) do kolekcji guestbook .

  1. W StackBlitz przejdź do index.js .
  2. U dołu pliku dodaj następujący kod.

Zwróć uwagę, że firebase.auth().currentUser.uid to odniesienie do automatycznie generowanego unikalnego identyfikatora, który Uwierzytelnianie Firebase nadaje wszystkim zalogowanym użytkownikom.

// ..
// Listen to the form submission
form.addEventListener("submit", (e) => {
 // Prevent the default form redirect
 e.preventDefault();
 // Write a new message to the database collection "guestbook"
 firebase.firestore().collection("guestbook").add({
   text: input.value,
   timestamp: Date.now(),
   name: firebase.auth().currentUser.displayName,
   userId: firebase.auth().currentUser.uid
 })
 // clear message input field
 input.value = ""; 
 // Return false to avoid redirect
 return false;
});

Pokaż księgę tylko zalogowanym użytkownikom

Nie chcesz, aby ktokolwiek widział czat gości. Jedyną rzeczą, którą możesz zrobić, aby zabezpieczyć czat, jest zezwolenie tylko zalogowanym użytkownikom na przeglądanie księgi gości. To powiedziawszy, w przypadku własnych aplikacji będziesz chciał również zabezpieczyć bazę danych za pomocą reguł bezpieczeństwa Firebase . (Więcej informacji na temat reguł bezpieczeństwa znajduje się w dalszej części książki kodów).

  1. W StackBlitz przejdź do index.js .
  2. Edytuj odbiornik onAuthStateChanged aby ukryć i pokazać księgę gości.
// ...
// Listen to the current Auth state
firebase.auth().onAuthStateChanged((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";
 }
});

Przetestuj wysyłanie wiadomości

  1. Upewnij się, że jesteś zalogowany do aplikacji.
  2. Wpisz wiadomość, na przykład „Hej!”, A następnie kliknij WYŚLIJ .

Ta czynność powoduje zapisanie wiadomości w bazie danych Cloud Firestore. Jednak nie zobaczysz jeszcze komunikatu w swojej rzeczywistej aplikacji internetowej, ponieważ nadal musisz zaimplementować pobieranie danych. Zrobisz to dalej.

Ale możesz zobaczyć nowo dodaną wiadomość w konsoli Firebase.

W konsoli Firebase, na pulpicie nawigacyjnym bazy danych , powinieneś zobaczyć guestbook z nowo dodaną wiadomością. Jeśli będziesz nadal wysyłać wiadomości, Twoja księga gości będzie zawierać wiele dokumentów, takich jak ten:

Konsola Firebase

713870af0b3b63c.png

Synchronizuj wiadomości

To cudowne, że goście mogą pisać wiadomości do bazy danych, ale nie widzą ich jeszcze w aplikacji.

Aby wyświetlić komunikaty, musisz dodać detektory, które są wyzwalane po zmianie danych, a następnie utworzyć element interfejsu użytkownika, który wyświetla nowe komunikaty.

Dodasz kod, który nasłuchuje nowo dodanych wiadomości z aplikacji. Najpierw dodaj sekcję w kodzie HTML, aby wyświetlić komunikaty:

  1. W StackBlitz przejdź do pliku index.html .
  2. W guestbook-container dodaj nową sekcję z identyfikatorem guestbook .
<!-- ... -->

  <section id="guestbook-container">
   <h2>Discussion</h2>

   <form><!-- ... --></form>

   <section id="guestbook"></section>

 </section>

<!-- ... -->

Następnie zarejestruj odbiorcę, który nasłuchuje zmian wprowadzonych w danych:

  1. W StackBlitz przejdź do index.js .
  2. U dołu pliku dodaj następujący kod, aby przejrzeć wszystkie dokumenty (komunikaty księgi gości) w bazie danych:
// ...
// Create query for messages
firebase.firestore().collection("guestbook")
.orderBy("timestamp","desc")
.onSnapshot((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);
 });
});

Aby odsłuchać komunikaty w bazie danych, utwórz zapytanie dotyczące określonej kolekcji przy użyciu funkcji .collection . Powyższy kod nasłuchuje zmian w kolekcji guestbook , w której przechowywane są wiadomości czatu. Wiadomości są również sortowane według daty, przy użyciu .orderBy('timestamp', 'desc') aby wyświetlić najnowsze wiadomości u góry.

Funkcja .onSnapshot przyjmuje jeden parametr: funkcję zwrotną. Funkcja wywołania zwrotnego jest wyzwalana w przypadku jakichkolwiek zmian w dokumentach pasujących do zapytania. Może to mieć miejsce, gdy wiadomość zostanie usunięta, zmodyfikowana lub dodana. Więcej informacji można znaleźć w dokumentacji Cloud Firestore .

Przetestuj synchronizację wiadomości

Cloud Firestore automatycznie i natychmiast synchronizuje dane z klientami subskrybowanymi do bazy danych.

  1. Wiadomości utworzone wcześniej w bazie danych powinny zostać wyświetlone w aplikacji. Zapraszam do pisania nowych wiadomości; powinny pojawić się natychmiast.
  2. Jeśli otworzysz obszar roboczy w wielu oknach lub kartach, wiadomości będą synchronizowane w czasie rzeczywistym między kartami.
  3. (Opcjonalnie) Możesz spróbować ręcznie usunąć, zmodyfikować lub dodać nowe wiadomości bezpośrednio w sekcji Baza danych konsoli Firebase; wszelkie zmiany powinny pojawić się w interfejsie użytkownika.

Gratulacje! Czytasz dokumenty Cloud Firestore w swojej aplikacji!

Recenzja aplikacji p

e30df0a9614bae7d.png

Początkowo Cloud Firestore skonfigurowałeś do używania trybu testowego, co oznacza, że ​​Twoja baza danych jest otwarta do odczytu i zapisu. Jednak trybu testowego należy używać tylko na bardzo wczesnych etapach rozwoju. Najlepszym rozwiązaniem jest skonfigurowanie reguł zabezpieczeń dla bazy danych podczas opracowywania aplikacji. Bezpieczeństwo powinno być integralną częścią struktury i zachowania aplikacji.

Reguły bezpieczeństwa pozwalają kontrolować dostęp do dokumentów i kolekcji w bazie danych. Elastyczna składnia reguł umożliwia tworzenie reguł pasujących do wszystkiego, od wszystkich zapisów do całej bazy danych po operacje na określonym dokumencie.

W konsoli Firebase możesz pisać reguły bezpieczeństwa dla Cloud Firestore:

  1. W sekcji Develop konsoli Firebase kliknij opcję Baza danych , a następnie wybierz kartę Reguły (lub kliknij tutaj, aby przejść bezpośrednio do karty Reguły ).
  2. Powinieneś zobaczyć następujące domyślne reguły bezpieczeństwa wraz z ostrzeżeniem o tym, że reguły są publiczne.

7767a2d2e64e7275.png

Zidentyfikuj kolekcje

Najpierw zidentyfikuj kolekcje, w których aplikacja zapisuje dane.

W match /databases/{database}/documents wskaż kolekcję, którą chcesz zabezpieczyć:

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

Dodaj reguły bezpieczeństwa

Ponieważ użyłeś identyfikatora UID uwierzytelnienia jako pola w każdym dokumencie księgi gości, możesz pobrać identyfikator UID uwierzytelnienia i sprawdzić, czy każdy, kto próbuje pisać w dokumencie, ma pasujący identyfikator UID uwierzytelniania.

Dodaj reguły odczytu i zapisu do zestawu reguł, jak pokazano poniżej:

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

Teraz w księdze gości tylko zalogowani użytkownicy mogą czytać wiadomości (dowolną wiadomość!), Ale możesz utworzyć wiadomość tylko za pomocą swojego identyfikatora użytkownika. Nie zezwalamy również na edytowanie ani usuwanie wiadomości.

Dodaj reguły walidacji

Dodaj sprawdzanie poprawności danych, aby upewnić się, że wszystkie oczekiwane pola są obecne w dokumencie:

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

Zresetuj słuchaczy

Ponieważ Twoja aplikacja umożliwia teraz logowanie się tylko uwierzytelnionym użytkownikom, należy przenieść zapytanie firestore księgi gości do odbiornika uwierzytelniania. W przeciwnym razie wystąpią błędy uprawnień i aplikacja zostanie rozłączona po wylogowaniu użytkownika.

  1. Przeciągnij kolekcję księgi gości onSnapshot do nowej funkcji o nazwie subscribeGuestbook . onSnapshot funkcji onSnapshot do zmiennej guestbookListener .

onSnapshot Firestore onSnapshot zwraca funkcję anulowania subskrypcji, której będziesz mógł użyć do późniejszego anulowania nasłuchiwania migawek.

// ...
// Listen to guestbook updates
function subscribeGuestbook(){
   // Create query for messages
 guestbookListener = firebase.firestore().collection("guestbook")
 .orderBy("timestamp","desc")
 .onSnapshot((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);
   });
 });
};
  1. Dodaj nową funkcję pod spodem o nazwie unsubscribeGuestbook . Sprawdź, czy zmienna guestbookListener nie ma wartości null, a następnie wywołaj funkcję, aby anulować odbiornik.
// ...
// Unsubscribe from guestbook updates
function unsubscribeGuestbook(){
 if (guestbookListener != null)
 {
   guestbookListener();
   guestbookListener = null;
 }
};
  1. Na koniec dodaj nowe funkcje do wywołania zwrotnego onAuthStateChanged (wykonaj następujące dwa kroki).
  2. Dodaj subscribeGuestbook() na dole if (user) .
  3. Dodaj unsubscribeGuestbook() na dole instrukcji else .
// ...
firebase.auth().onAuthStateChanged((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();
}
});

Firebase oferuje usługę hostingową do obsługi zasobów aplikacji internetowej. Możesz wdrożyć pliki i konfigurację hostingu w Hostingu Firebase za pomocą interfejsu wiersza poleceń Firebase (CLI). Ale w tym codelab używasz StackBlitz , który zintegrował Firebase CLI ze swoim obszarem roboczym!

Możesz użyć integracji StackBlitz z Firebase, aby powiedzieć StackBlitz, w którym projekcie Firebase chcesz wdrożyć zasoby:

  1. Jeśli nie zalogowałeś się jeszcze przez GitHub w StackBlitz, kliknij Zaloguj się w prawym górnym rogu, a następnie wprowadź dane logowania do konta GitHub.

99a41778bb3c194c.png

  • Jeśli masz już konto GitHub, zaloguj się przy użyciu swojego konta GitHub.
  • Jeśli nie masz jeszcze konta GitHub, utwórz konto GitHub, używając tego samego adresu e-mail, którego użyłeś do logowania się do Firebase.
  1. Na lewym panelu powinna teraz znajdować się ikona Firebase .

2981c2e3ad13c2c1.png 3. Kliknij Zaloguj się do Google . Zaloguj się przy użyciu tego samego adresu e-mail, którego użyłeś do zalogowania się do Firebase. 4. Z listy projektów Firebase wybierz swój projekt Firebase-Web-Codelab .

Wdrażanie do hostingu Firebase za pomocą StackBlitz jest operacją dosłownie jednym kliknięciem:

  1. W obszarze roboczym StackBlitz, kliknij przycisk Instaluj po lewej stronie strony. Tak, to wszystko. Jeden krok! 8fe6c0bfc04c8935.png

Odwiedź dokumentację, aby dowiedzieć się więcej o tym, jak działa Hosting Firebase .

Przejdź do sekcji Hosting konsoli Firebase swojego projektu, aby wyświetlić przydatne informacje i narzędzia dotyczące hostingu, w tym historię wdrożeń, funkcję przywracania poprzednich wersji aplikacji oraz przepływ pracy, aby skonfigurować domenę niestandardową.

Zapisz status RSVP uczestnika

W tej chwili Twoja aplikacja pozwala ludziom rozpocząć rozmowę, jeśli są zainteresowani wydarzeniem. Ponadto jedynym sposobem, aby dowiedzieć się, czy ktoś przyjdzie, jest opublikowanie tego na czacie. Zorganizujmy się i dajmy ludziom znać, ile osób przyjdzie.

Dodasz przełącznik, aby zarejestrować osoby, które chcą wziąć udział w wydarzeniu, a następnie zbierzesz liczbę osób, które przyjdą.

  1. W StackBlitz przejdź do pliku index.html .
  2. W guestbook-container dodaj zestaw przycisków TAK i NIE , na przykład:
<!-- ... -->
  <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>
<!-- ... -->

Podgląd aplikacji

73ca99ca35c13ee7.png

Następnie zarejestruj odbiornik dla kliknięć przycisków. Jeśli użytkownik kliknie TAK , użyj jego identyfikatora UID, aby zapisać odpowiedź w bazie danych.

  1. W StackBlitz przejdź do index.js .
  2. U dołu pliku dodaj następujący kod, aby nasłuchiwać stanu protokołu RSVP:
// ...

// Listen to RSVP responses
rsvpYes.onclick = () => {
}
rsvpNo.onclick = () => {
}
  1. Utwórz nową kolekcję o nazwie attendees , a następnie zarejestruj odwołanie do dokumentu, jeśli zostanie kliknięty przycisk RSVP.
  2. Ustaw to odniesienie na true lub false zależności od klikniętego przycisku.

Po pierwsze, dla rsvpYes : rsvpYes :

// ...

// Listen to RSVP responses
rsvpYes.onclick = () => {
 // Get a reference to the user's document in the attendees collection
 const userDoc = firebase.firestore().collection('attendees').doc(firebase.auth().currentUser.uid);

 // If they RSVP'd yes, save a document with attending: true
 userDoc.set({
   attending: true
 }).catch(console.error)
}

Następnie to samo dla rsvpNo , ale z wartością false :

rsvpNo.onclick = () => {
 // Get a reference to the user's document in the attendees collection
 const userDoc = firebase.firestore().collection('attendees').doc(firebase.auth().currentUser.uid);

 // If they RSVP'd no, save a document with attending: false
 userDoc.set({
   attending: false
 }).catch(console.error)
}

Dodaj zasady

Ponieważ masz już skonfigurowane reguły, nowe dane, które dodajesz za pomocą przycisków, zostaną odrzucone. Musisz zaktualizować reguły, aby umożliwić dodawanie do kolekcji attendees .

W przypadku kolekcji attendees , ponieważ użyłeś identyfikatora UID uwierzytelniania jako nazwy dokumentu, możesz go pobrać i sprawdzić, czy uid użytkownika przesyłającego jest taki sam jak dokument, który piszą. Pozwolisz wszystkim przeczytać listę uczestników (ponieważ nie ma tam żadnych prywatnych danych), ale tylko twórca powinien mieć możliwość jej aktualizacji.

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

Dodaj reguły walidacji

Dodaj walidację danych, aby upewnić się, że wszystkie oczekiwane pola są obecne w dokumencie:

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;

    }
  }
}

(Opcjonalnie) Możesz teraz wyświetlić wyniki klikania przycisków. Przejdź do panelu Cloud Firestore w konsoli Firebase.

Przeczytaj status RSVP

Teraz, gdy już nagrałeś odpowiedzi, zobaczmy, kto nadchodzi i odzwierciedl to w interfejsie użytkownika.

  1. W StackBlitz przejdź do pliku index.html .
  2. W description-container dodaj nowy element z identyfikatorem number-attending .
<!-- ... -->

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

<!-- ... -->

Następnie zarejestruj słuchacza do odbioru attendees i policz liczbę odpowiedzi TAK :

  1. W StackBlitz przejdź do index.js .
  2. U dołu pliku dodaj następujący kod, aby nasłuchiwać statusu odpowiedzi na zaproszenie i liczyć kliknięcia TAK .
// ...
// Listen for attendee list
firebase.firestore()
.collection('attendees')
.where("attending", "==", true)
.onSnapshot(snap => {
 const newAttendeeCount = snap.docs.length;

 numberAttending.innerHTML = newAttendeeCount+' people going'; 
})
  1. Na koniec podświetlmy przycisk odpowiadający aktualnemu statusowi. Sprawdź, czy bieżący identyfikator UID uwierzytelniania ma wpis w kolekcji attendees , a następnie ustaw klasę na clicked .
// ...
// Listen for attendee list
function subscribeCurrentRSVP(user){
 rsvpListener = firebase.firestore()
 .collection('attendees')
 .doc(user.uid)
 .onSnapshot((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";
     }
   }
 });
}
  1. Zróbmy też funkcję anulowania subskrypcji. Będzie to używane, gdy użytkownik się wyloguje.
// ...

function unsubscribeCurrentRSVP(){
 if (rsvpListener != null)
 {
   rsvpListener();
   rsvpListener = null;
 }
 rsvpYes.className="";
 rsvpNo.className="";
}
  1. Wywołaj funkcje z odbiornika uwierzytelniania.
// ...

// Listen to the current Auth state
firebase.auth().onAuthStateChanged((user) => {
if (user){
  startRsvpButton.textContent = "LOGOUT";
  // Show guestbook to logged-in users
  guestbookContainer.style.display = "block";

  // Subscribe to the guestbook collection
  subscribeGuestbook();
  // Subscribe to the guestbook collection
  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();

}
});
  1. Spróbuj zalogować się jako wielu użytkowników i zobacz, jak liczba rośnie po każdym kolejnym kliknięciu przycisku TAK .

Podgląd aplikacji

3df607d3e0b3c35.png

Użyłeś Firebase do stworzenia interaktywnej aplikacji internetowej działającej w czasie rzeczywistym!

Co omówiliśmy

  • Uwierzytelnianie Firebase
  • FirebaseUI
  • Cloud Firestore
  • Reguły bezpieczeństwa Firebase
  • Hosting Firebase

Następne kroki

  • Chcesz dowiedzieć się więcej o innych produktach Firebase? Może chcesz przechowywać pliki graficzne przesłane przez użytkowników? Lub wysyłać powiadomienia do swoich użytkowników? Zapoznaj się z internetową kartą kodów Firebase, aby uzyskać więcej informacji na temat wielu innych produktów Firebase dla sieci.
  • Chcesz dowiedzieć się więcej o Cloud Firestore? Może chcesz dowiedzieć się więcej o podkolekcjach i transakcjach? Przejdź do internetowej biblioteki kodów Cloud Firestore, aby znaleźć bibliotekę kodów, która zawiera bardziej szczegółowe informacje na temat Cloud Firestore. Lub obejrzyj tę serię w YouTube, aby poznać Cloud Firestore !

Ucz się więcej

Jak poszło?

Będziemy wdzięczni za Twoją opinię! Proszę wypełnić (bardzo) krótki formularz tutaj .