Cloud Firestore Web Codelab

1. Tổng quan

Bàn thắng

Trong codelab này, bạn sẽ xây dựng một ứng dụng web nhà hàng đề nghị cung cấp bởi đám mây FireStore .

img5.png

Những gì bạn sẽ học

  • Đọc và ghi dữ liệu vào Cloud Firestore từ một ứng dụng web
  • Lắng nghe những thay đổi trong dữ liệu Cloud Firestore trong thời gian thực
  • Sử dụng Xác thực Firebase và các quy tắc bảo mật để bảo mật dữ liệu Cloud Firestore
  • Viết các truy vấn Cloud Firestore phức tạp

Những gì bạn cần

Trước khi bắt đầu codelab này, hãy đảm bảo rằng bạn đã cài đặt:

  • NPM mà thường đi kèm với Node.js - Node v8 được khuyến khích
  • IDE / soạn thảo văn bản mà bạn lựa chọn, chẳng hạn như WebStorm , Atom , VS Mã , hoặc Sublime

2. Tạo và thiết lập dự án Firebase

Tạo dự án Firebase

  1. Trong căn cứ hỏa lực console , bấm Add dự án, sau đó đặt tên cho FriendlyEats dự án căn cứ hỏa lực.

Hãy nhớ ID dự án cho dự án Firebase của bạn.

  1. Nhấp vào Tạo dự án.

Ứng dụng mà chúng tôi sẽ xây dựng sử dụng một số dịch vụ Firebase có sẵn trên web:

  • Căn cứ hỏa lực xác thực dễ dàng xác định người dùng của bạn
  • Đám mây FireStore để lưu dữ liệu cấu trúc trên đám mây và nhận được thông báo ngay lập tức khi dữ liệu được cập nhật
  • Căn cứ hỏa lực Hosting để lưu trữ và phục vụ tài sản tĩnh của bạn

Đối với codelab cụ thể này, chúng tôi đã định cấu hình Lưu trữ Firebase. Tuy nhiên, đối với Firebase Auth và Cloud Firestore, chúng tôi sẽ hướng dẫn bạn cách cấu hình và kích hoạt các dịch vụ bằng bảng điều khiển Firebase.

Bật xác thực ẩn danh

Mặc dù xác thực không phải là trọng tâm của bảng mã này, nhưng điều quan trọng là phải có một số hình thức xác thực trong ứng dụng của chúng tôi. Chúng tôi sẽ sử dụng Anonymous đăng nhập - có nghĩa là người dùng sẽ được âm thầm đăng nhập mà không bị nhắc nhở.

Bạn sẽ cần phải kích hoạt Anonymous đăng nhập.

  1. Trong căn cứ hỏa lực điều khiển, xác định vị trí phần xây dựng trong nav trái.
  2. Nhấn Xác thực, sau đó nhấp vào Sign-in tab phương pháp (hoặc bấm vào đây để đi trực tiếp ở đó).
  3. Kích hoạt tính năng Anonymous Đăng-in cung cấp, sau đó nhấn Save.

img7.png

Điều này sẽ cho phép ứng dụng âm thầm đăng nhập vào người dùng của bạn khi họ truy cập ứng dụng web. Cảm thấy miễn phí để đọc các tài liệu Anonymous xác thực để tìm hiểu thêm.

Bật Cloud Firestore

Ứng dụng sử dụng Cloud Firestore để lưu và nhận thông tin và xếp hạng nhà hàng.

Bạn sẽ cần bật Cloud Firestore. Trong phần xây dựng các căn cứ hỏa lực console của, nhấp vào Cơ sở dữ liệu FireStore. Nhấp vào Tạo cơ sở dữ liệu trong cửa sổ Mây FireStore.

Quyền truy cập vào dữ liệu trong Cloud Firestore được kiểm soát bởi Quy tắc bảo mật. Chúng ta sẽ nói thêm về các quy tắc sau trong bảng mã này nhưng trước tiên, chúng ta cần đặt một số quy tắc cơ bản trên dữ liệu của mình để bắt đầu. Trong tab Rules của các firebase console thêm các quy tắc sau đây và sau đó nhấp vào Xuất bản.

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      //
      // WARNING: These rules are insecure! We will replace them with
      // more secure rules later in the codelab
      //
      allow read, write: if request.auth != null;
    }
  }
}

Các quy tắc trên hạn chế quyền truy cập dữ liệu đối với người dùng đã đăng nhập, điều này ngăn người dùng chưa được xác thực đọc hoặc ghi. Điều này tốt hơn là cho phép truy cập công khai nhưng vẫn chưa an toàn, chúng tôi sẽ cải thiện các quy tắc này sau trong bảng mã.

3. Lấy mã mẫu

Clone kho GitHub từ dòng lệnh:

git clone https://github.com/firebase/friendlyeats-web

Mẫu mã nên đã được nhân bản vào 📁 friendlyeats-web thư mục. Từ bây giờ, hãy đảm bảo chạy tất cả các lệnh của bạn từ thư mục này:

cd friendlyeats-web

Nhập ứng dụng dành cho người mới bắt đầu

Sử dụng IDE của bạn (WebStorm, Atom, Sublime, Visual Studio Mã ...) mở hoặc nhập 📁 friendlyeats-web thư mục. Thư mục này chứa mã bắt đầu cho bảng mã bao gồm một ứng dụng đề xuất nhà hàng chưa hoạt động. Chúng tôi sẽ làm cho nó hoạt động trong suốt bộ mã này, vì vậy bạn sẽ cần sớm chỉnh sửa mã trong thư mục đó.

4. Cài đặt Giao diện dòng lệnh Firebase

Giao diện dòng lệnh Firebase (CLI) cho phép bạn phân phối ứng dụng web của mình cục bộ và triển khai ứng dụng web của bạn với Lưu trữ Firebase.

  1. Cài đặt CLI bằng cách chạy lệnh npm sau:
npm -g install firebase-tools
  1. Xác minh rằng CLI đã được cài đặt đúng cách bằng cách chạy lệnh sau:
firebase --version

Đảm bảo phiên bản của Firebase CLI là v7.4.0 trở lên.

  1. Cấp quyền cho Firebase CLI bằng cách chạy lệnh sau:
firebase login

Chúng tôi đã thiết lập mẫu ứng dụng web để lấy cấu hình ứng dụng của bạn cho Lưu trữ Firebase từ thư mục và tệp cục bộ của ứng dụng. Nhưng để làm được điều này, chúng tôi cần liên kết ứng dụng của bạn với dự án Firebase của bạn.

  1. Đảm bảo rằng dòng lệnh của bạn đang truy cập thư mục cục bộ của ứng dụng.
  2. Liên kết ứng dụng của bạn với dự án Firebase bằng cách chạy lệnh sau:
firebase use --add
  1. Khi được nhắc, chọn ID dự án của bạn, sau đó cung cấp cho dự án căn cứ hỏa lực của bạn một bí danh.

Bí danh rất hữu ích nếu bạn có nhiều môi trường (sản xuất, dàn dựng, v.v.). Tuy nhiên, đối codelab này, chúng ta hãy chỉ sử dụng bí danh của default .

  1. Làm theo các hướng dẫn còn lại trong dòng lệnh của bạn.

5. Chạy máy chủ cục bộ

Chúng tôi đã sẵn sàng để thực sự bắt đầu công việc trên ứng dụng của mình! Hãy chạy ứng dụng của chúng tôi tại địa phương!

  1. Chạy lệnh Firebase CLI sau:
firebase emulators:start --only hosting
  1. Dòng lệnh của bạn sẽ hiển thị phản hồi sau:
hosting: Local server: http://localhost:5000

Chúng tôi đang sử dụng căn cứ hỏa lực Hosting giả lập để phục vụ ứng dụng của chúng tôi tại địa phương. Các ứng dụng web sẽ hiện hữu từ http: // localhost: 5000 .

  1. Mở ứng dụng của bạn tại http: // localhost: 5000 .

Bạn sẽ thấy bản sao của FriendlyEats đã được kết nối với dự án Firebase của bạn.

Ứng dụng đã tự động kết nối với dự án Firebase của bạn và âm thầm đăng nhập cho bạn với tư cách là người dùng ẩn danh.

img2.png

6. Ghi dữ liệu vào Cloud Firestore

Trong phần này, chúng tôi sẽ ghi một số dữ liệu vào Cloud Firestore để chúng tôi có thể điền vào giao diện người dùng của ứng dụng. Điều này có thể được thực hiện bằng tay thông qua các căn cứ hỏa lực console , nhưng chúng tôi sẽ làm điều đó trong ứng dụng riêng của mình để chứng minh một cơ bản đám mây FireStore ghi.

Mô hình dữ liệu

Dữ liệu Firestore được chia thành các bộ sưu tập, tài liệu, trường và bộ sưu tập con. Chúng tôi sẽ lưu trữ mỗi nhà hàng như một tài liệu trong một bộ sưu tập cấp cao nhất được gọi là restaurants .

img3.png

Sau đó, chúng tôi sẽ lưu trữ mỗi lần xem xét trong một subcollection gọi là ratings theo từng nhà hàng.

img4.png

Thêm nhà hàng vào Firestore

Đối tượng mô hình chính trong ứng dụng của chúng tôi là một nhà hàng. Hãy viết một số mã có thêm một tài liệu nhà hàng đến restaurants bộ sưu tập.

  1. Từ các tập tin đã tải xuống, mở scripts/FriendlyEats.Data.js .
  2. Tìm chức năng FriendlyEats.prototype.addRestaurant .
  3. Thay thế toàn bộ chức năng bằng đoạn mã sau.

FriendlyEats.Data.js

FriendlyEats.prototype.addRestaurant = function(data) {
  var collection = firebase.firestore().collection('restaurants');
  return collection.add(data);
};

Đoạn mã trên cho biết thêm một tài liệu mới cho restaurants bộ sưu tập. Dữ liệu tài liệu đến từ một đối tượng JavaScript thuần túy. Chúng tôi làm điều này bằng cách xin giấy chứng nhận tham chiếu đến một đám mây FireStore bộ sưu tập restaurants sau đó add 'ing dữ liệu.

Hãy thêm nhà hàng!

  1. Quay lại ứng dụng FriendlyEats trong trình duyệt của bạn và làm mới nó.
  2. Nhấn Add Mock Data.

Ứng dụng sẽ tự động tạo ra một tập hợp ngẫu nhiên của nhà hàng các đối tượng, sau đó gọi bạn addRestaurant chức năng. Tuy nhiên, bạn sẽ chưa thấy dữ liệu trong ứng dụng web thực sự của bạn vì chúng tôi vẫn cần phải thực hiện lấy dữ liệu (phần tiếp theo của codelab).

Nếu bạn điều hướng đến tab Mây FireStore trong căn cứ hỏa lực điều khiển, tuy nhiên, bạn nên bây giờ nhìn thấy tài liệu mới trong restaurants bộ sưu tập!

img6.png

Xin chúc mừng, bạn vừa ghi dữ liệu lên Cloud Firestore từ một ứng dụng web!

Trong phần tiếp theo, bạn sẽ tìm hiểu cách lấy dữ liệu từ Cloud Firestore và hiển thị nó trong ứng dụng của mình.

7. Hiển thị dữ liệu từ Cloud Firestore

Trong phần này, bạn sẽ học cách truy xuất dữ liệu từ Cloud Firestore và hiển thị dữ liệu đó trong ứng dụng của mình. Hai bước quan trọng là tạo truy vấn và thêm trình nghe ảnh chụp nhanh. Người nghe này sẽ được thông báo về tất cả dữ liệu hiện có phù hợp với truy vấn và sẽ nhận được cập nhật trong thời gian thực.

Đầu tiên, hãy xây dựng truy vấn sẽ phục vụ danh sách nhà hàng mặc định, chưa được lọc.

  1. Quay trở lại các tập tin scripts/FriendlyEats.Data.js .
  2. Tìm chức năng FriendlyEats.prototype.getAllRestaurants .
  3. Thay thế toàn bộ chức năng bằng đoạn mã sau.

FriendlyEats.Data.js

FriendlyEats.prototype.getAllRestaurants = function(renderer) {
  var query = firebase.firestore()
      .collection('restaurants')
      .orderBy('avgRating', 'desc')
      .limit(50);

  this.getDocumentsInQuery(query, renderer);
};

Trong đoạn mã trên, chúng ta xây dựng một truy vấn mà sẽ truy lục lên tới 50 nhà hàng từ bộ sưu tập đầu cấp tên restaurants , mà được sắp xếp theo đánh giá trung bình (hiện tại tất cả các zero). Sau khi chúng tôi tuyên bố truy vấn này, chúng tôi vượt qua nó để getDocumentsInQuery() phương pháp có trách nhiệm cho tải và render dữ liệu.

Chúng tôi sẽ thực hiện việc này bằng cách thêm trình nghe ảnh chụp nhanh.

  1. Quay trở lại các tập tin scripts/FriendlyEats.Data.js .
  2. Tìm chức năng FriendlyEats.prototype.getDocumentsInQuery .
  3. Thay thế toàn bộ chức năng bằng đoạn mã sau.

FriendlyEats.Data.js

FriendlyEats.prototype.getDocumentsInQuery = function(query, renderer) {
  query.onSnapshot(function(snapshot) {
    if (!snapshot.size) return renderer.empty(); // Display "There are no restaurants".

    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        renderer.remove(change.doc);
      } else {
        renderer.display(change.doc);
      }
    });
  });
};

Trong đoạn mã trên, query.onSnapshot sẽ kích hoạt callback của mình mỗi khi có một sự thay đổi đến kết quả của truy vấn.

  • Lần đầu tiên, các callback được kích hoạt với toàn bộ tập kết quả của truy vấn - có nghĩa là toàn bộ restaurants bộ sưu tập từ đám mây FireStore. Sau đó nó sẽ vượt qua tất cả các giấy tờ cá nhân để các renderer.display chức năng.
  • Khi một tài liệu bị xóa, change.type bằng để removed . Vì vậy, trong trường hợp này, chúng tôi sẽ gọi một hàm xóa nhà hàng khỏi giao diện người dùng.

Bây giờ chúng tôi đã triển khai cả hai phương pháp, hãy làm mới ứng dụng và xác minh rằng các nhà hàng mà chúng tôi đã thấy trước đó trong bảng điều khiển Firebase hiện hiển thị trong ứng dụng. Nếu bạn hoàn thành phần này thành công, thì ứng dụng của bạn hiện đang đọc và ghi dữ liệu với Cloud Firestore!

Khi danh sách nhà hàng của bạn thay đổi, trình nghe này sẽ tiếp tục cập nhật tự động. Hãy thử truy cập bảng điều khiển Firebase và xóa nhà hàng hoặc đổi tên nhà hàng theo cách thủ công - bạn sẽ thấy các thay đổi hiển thị trên trang web của mình ngay lập tức!

img5.png

8. Lấy () dữ liệu

Cho đến nay, chúng tôi đã cho thấy làm thế nào để sử dụng onSnapshot để lấy thông tin cập nhật trong thời gian thực; tuy nhiên, đó không phải lúc nào cũng là điều chúng ta muốn. Đôi khi sẽ có ý nghĩa hơn nếu chỉ tìm nạp dữ liệu một lần.

Chúng tôi sẽ muốn triển khai một phương pháp được kích hoạt khi người dùng nhấp vào một nhà hàng cụ thể trong ứng dụng của bạn.

  1. Quay trở lại tập tin của bạn scripts/FriendlyEats.Data.js .
  2. Tìm chức năng FriendlyEats.prototype.getRestaurant .
  3. Thay thế toàn bộ chức năng bằng đoạn mã sau.

FriendlyEats.Data.js

FriendlyEats.prototype.getRestaurant = function(id) {
  return firebase.firestore().collection('restaurants').doc(id).get();
};

Sau khi thực hiện phương pháp này, bạn sẽ có thể xem các trang cho từng nhà hàng. Chỉ cần nhấp vào một nhà hàng trong danh sách và bạn sẽ thấy trang chi tiết của nhà hàng:

img1.png

Hiện tại, bạn không thể thêm xếp hạng vì chúng tôi vẫn cần triển khai thêm xếp hạng sau này trong bảng mã.

9. Sắp xếp và lọc dữ liệu

Hiện tại, ứng dụng của chúng tôi hiển thị danh sách các nhà hàng, nhưng không có cách nào để người dùng lọc dựa trên nhu cầu của họ. Trong phần này, bạn sẽ sử dụng truy vấn nâng cao của Cloud Firestore để cho phép lọc.

Dưới đây là một ví dụ về một truy vấn đơn giản để lấy tất cả Dim Sum nhà hàng:

var filteredQuery = query.where('category', '==', 'Dim Sum')

Như tên gọi của nó ngụ ý, những where() phương pháp sẽ làm cho tải về truy vấn của chúng tôi chỉ thành viên của tập hợp có nghề đạt những hạn chế, chúng tôi thiết lập. Trong trường hợp này, nó sẽ chỉ tải nhà hàng, nơi categoryDim Sum .

Trong ứng dụng của chúng tôi, người dùng có thể xâu chuỗi nhiều bộ lọc để tạo các truy vấn cụ thể, chẳng hạn như "Pizza ở San Francisco" hoặc "Hải sản ở Los Angeles đặt hàng theo mức độ phổ biến".

Chúng tôi sẽ tạo một phương pháp xây dựng một truy vấn sẽ lọc các nhà hàng của chúng tôi dựa trên nhiều tiêu chí do người dùng của chúng tôi lựa chọn.

  1. Quay trở lại tập tin của bạn scripts/FriendlyEats.Data.js .
  2. Tìm chức năng FriendlyEats.prototype.getFilteredRestaurants .
  3. Thay thế toàn bộ chức năng bằng đoạn mã sau.

FriendlyEats.Data.js

FriendlyEats.prototype.getFilteredRestaurants = function(filters, renderer) {
  var query = firebase.firestore().collection('restaurants');

  if (filters.category !== 'Any') {
    query = query.where('category', '==', filters.category);
  }

  if (filters.city !== 'Any') {
    query = query.where('city', '==', filters.city);
  }

  if (filters.price !== 'Any') {
    query = query.where('price', '==', filters.price.length);
  }

  if (filters.sort === 'Rating') {
    query = query.orderBy('avgRating', 'desc');
  } else if (filters.sort === 'Reviews') {
    query = query.orderBy('numRatings', 'desc');
  }

  this.getDocumentsInQuery(query, renderer);
};

Đoạn mã trên cho biết thêm nhiều where các bộ lọc và một đơn orderBy khoản để xây dựng một truy vấn hợp chất dựa trên người dùng nhập vào. Truy vấn của chúng tôi bây giờ sẽ chỉ trả về các nhà hàng phù hợp với yêu cầu của người dùng.

Làm mới ứng dụng FriendlyEats trong trình duyệt của bạn, sau đó xác minh rằng bạn có thể lọc theo giá, thành phố và danh mục. Trong khi kiểm tra, bạn sẽ thấy các lỗi trong Bảng điều khiển JavaScript của trình duyệt của bạn trông giống như sau:

The query requires an index. You can create it here: https://console.firebase.google.com/project/.../database/firestore/indexes?create_index=...

Những lỗi này là do Cloud Firestore yêu cầu chỉ mục cho hầu hết các truy vấn phức hợp. Yêu cầu chỉ mục trên các truy vấn giúp Cloud Firestore nhanh chóng trên quy mô lớn.

Mở liên kết từ thông báo lỗi sẽ tự động mở giao diện người dùng tạo chỉ mục trong bảng điều khiển Firebase với các thông số chính xác được điền vào. Trong phần tiếp theo, chúng tôi sẽ viết và triển khai các chỉ mục cần thiết cho ứng dụng này.

10. Triển khai các chỉ mục

Nếu chúng tôi không muốn khám phá mọi đường dẫn trong ứng dụng của mình và đi theo từng liên kết tạo chỉ mục, chúng tôi có thể dễ dàng triển khai nhiều chỉ mục cùng một lúc bằng cách sử dụng Firebase CLI.

  1. Trong thư mục địa phương đã tải về của ứng dụng, bạn sẽ tìm thấy một firestore.indexes.json tập tin.

Tệp này mô tả tất cả các chỉ mục cần thiết cho tất cả các tổ hợp bộ lọc có thể có.

firestore.indexes.json

{
 "indexes": [
   {
     "collectionGroup": "restaurants",
     "queryScope": "COLLECTION",
     "fields": [
       { "fieldPath": "city", "order": "ASCENDING" },
       { "fieldPath": "avgRating", "order": "DESCENDING" }
     ]
   },

   ...

 ]
}
  1. Triển khai các chỉ mục này bằng lệnh sau:
firebase deploy --only firestore:indexes

Sau một vài phút, các chỉ mục của bạn sẽ hoạt động và các thông báo lỗi sẽ biến mất.

11. Ghi dữ liệu trong một giao dịch

Trong phần này, chúng tôi sẽ thêm khả năng để người dùng gửi đánh giá cho các nhà hàng. Cho đến nay, tất cả các bài viết của chúng tôi đều là nguyên tử và tương đối đơn giản. Nếu bất kỳ lỗi nào trong số chúng bị lỗi, chúng tôi có thể chỉ nhắc người dùng thử lại chúng hoặc ứng dụng của chúng tôi sẽ tự động thử lại việc ghi.

Ứng dụng của chúng tôi sẽ có nhiều người dùng muốn thêm xếp hạng cho một nhà hàng, vì vậy chúng tôi sẽ cần phối hợp nhiều lượt đọc và ghi. Đầu tiên là xem xét bản thân có phải nộp, sau đó giá của nhà hàng countaverage rating cần phải được cập nhật. Nếu một trong hai lỗi này không thành công mà không phải lỗi kia, chúng ta sẽ ở trong trạng thái không nhất quán, nơi dữ liệu trong một phần cơ sở dữ liệu của chúng tôi không khớp với dữ liệu trong một phần khác.

May mắn thay, Cloud Firestore cung cấp chức năng giao dịch cho phép chúng tôi thực hiện nhiều lần đọc và ghi trong một hoạt động nguyên tử duy nhất, đảm bảo rằng dữ liệu của chúng tôi vẫn nhất quán.

  1. Quay trở lại tập tin của bạn scripts/FriendlyEats.Data.js .
  2. Tìm chức năng FriendlyEats.prototype.addRating .
  3. Thay thế toàn bộ chức năng bằng đoạn mã sau.

FriendlyEats.Data.js

FriendlyEats.prototype.addRating = function(restaurantID, rating) {
  var collection = firebase.firestore().collection('restaurants');
  var document = collection.doc(restaurantID);
  var newRatingDocument = document.collection('ratings').doc();

  return firebase.firestore().runTransaction(function(transaction) {
    return transaction.get(document).then(function(doc) {
      var data = doc.data();

      var newAverage =
          (data.numRatings * data.avgRating + rating.rating) /
          (data.numRatings + 1);

      transaction.update(document, {
        numRatings: data.numRatings + 1,
        avgRating: newAverage
      });
      return transaction.set(newRatingDocument, rating);
    });
  });
};

Trong khối trên, chúng ta kích hoạt một giao dịch để cập nhật các giá trị số của avgRatingnumRatings trong tài liệu nhà hàng. Đồng thời, chúng ta thêm mới rating đến ratings subcollection.

12. Bảo mật dữ liệu của bạn

Khi bắt đầu codelab này, chúng tôi đặt các quy tắc bảo mật của ứng dụng để mở hoàn toàn cơ sở dữ liệu để đọc hoặc ghi. Trong một ứng dụng thực, chúng tôi muốn đặt ra nhiều quy tắc chi tiết hơn để ngăn chặn việc truy cập hoặc sửa đổi dữ liệu không mong muốn.

  1. Trong phần xây dựng các căn cứ hỏa lực console của, nhấp vào Cơ sở dữ liệu FireStore.
  2. Nhấp vào tab Rules trong phần đám mây FireStore (hoặc bấm vào đây để đi trực tiếp ở đó).
  3. Thay thế các giá trị mặc định với các quy tắc sau đây, sau đó nhấn Publish.

firestore.rules

rules_version = '2';
service cloud.firestore {

  // Determine if the value of the field "key" is the same
  // before and after the request.
  function unchanged(key) {
    return (key in resource.data) 
      && (key in request.resource.data) 
      && (resource.data[key] == request.resource.data[key]);
  }

  match /databases/{database}/documents {
    // Restaurants:
    //   - Authenticated user can read
    //   - Authenticated user can create/update (for demo purposes only)
    //   - Updates are allowed if no fields are added and name is unchanged
    //   - Deletes are not allowed (default)
    match /restaurants/{restaurantId} {
      allow read: if request.auth != null;
      allow create: if request.auth != null;
      allow update: if request.auth != null
                    && (request.resource.data.keys() == resource.data.keys()) 
                    && unchanged("name");
      
      // Ratings:
      //   - Authenticated user can read
      //   - Authenticated user can create if userId matches
      //   - Deletes and updates are not allowed (default)
      match /ratings/{ratingId} {
        allow read: if request.auth != null;
        allow create: if request.auth != null
                      && request.resource.data.userId == request.auth.uid;
      }
    }
  }
}

Các quy tắc này hạn chế quyền truy cập để đảm bảo rằng khách hàng chỉ thực hiện các thay đổi an toàn. Ví dụ:

  • Cập nhật tài liệu nhà hàng chỉ có thể thay đổi xếp hạng chứ không phải tên hoặc bất kỳ dữ liệu bất biến nào khác.
  • Xếp hạng chỉ có thể được tạo nếu ID người dùng khớp với người dùng đã đăng nhập, điều này ngăn chặn việc giả mạo.

Ngoài việc sử dụng bảng điều khiển Firebase, bạn có thể sử dụng Firebase CLI để triển khai các quy tắc cho dự án Firebase của mình. Các firestore.rules tập tin trong thư mục làm việc của bạn đã có chứa các quy tắc từ trên cao. Để triển khai các quy tắc này từ hệ thống tệp cục bộ của bạn (thay vì sử dụng bảng điều khiển Firebase), bạn sẽ chạy lệnh sau:

firebase deploy --only firestore:rules

13. Kết luận

Trong bảng mã này, bạn đã học cách thực hiện đọc và ghi cơ bản và nâng cao với Cloud Firestore, cũng như cách bảo mật quyền truy cập dữ liệu bằng các quy tắc bảo mật. Bạn có thể tìm ra giải pháp đầy đủ trong kho quickstarts-js .

Để tìm hiểu thêm về Cloud Firestore, hãy truy cập các tài nguyên sau: