Cloud Firestore Web Codelab

Codelab בנושא Cloud Firestore לאינטרנט

מידע על Codelab זה

subjectהעדכון האחרון: ינו׳ 23, 2025
account_circleנכתב על ידי Abe Haskins, Nicolas Garnier

1.‏ סקירה כללית

מטרות עסקיות

בקודלאב הזה תלמדו ליצור אפליקציית אינטרנט להמלצות על מסעדות שמבוססת על Cloud Firestore.

img5.png

מה תלמדו

  • קריאה וכתיבה של נתונים ב-Cloud Firestore מאפליקציית אינטרנט
  • האזנה לשינויים בנתונים של Cloud Firestore בזמן אמת
  • שימוש באימות ובכללי אבטחה של Firebase לאבטחת נתונים ב-Cloud Firestore
  • כתיבת שאילתות מורכבות ב-Cloud Firestore

מה צריך להכין

לפני שמתחילים את סדנת הקוד, צריך לוודא שהתקנתם את הרכיבים הבאים:

  • npm, שמגיע בדרך כלל עם Node.js – מומלץ להשתמש ב-Node מגרסה 16 ואילך
  • סביבת הפיתוח המשולבת (IDE) או עורך הטקסט שבחרתם, כמו WebStorm,‏ VS Code או Sublime

2.‏ יצירת פרויקט Firebase והגדרתו

יצירת פרויקט Firebase

  1. במסוף Firebase, לוחצים על Add project (הוספת פרויקט) ומעניקים לפרויקט ב-Firebase את השם FriendlyEats.

חשוב לזכור את מזהה הפרויקט ב-Firebase.

  1. לוחצים על Create project.

באפליקציה שנבנה נשתמש בכמה שירותי Firebase שזמינים באינטרנט:

  • אימות ב-Firebase כדי לזהות את המשתמשים בקלות
  • Cloud Firestore לשמירת נתונים מובְנים בענן ולקבלת התראה מיידית כשהנתונים מתעדכנים
  • אירוח ב-Firebase כדי לארח את הנכסים הסטטיים ולהציג אותם

בקודלאב הזה כבר הגדרנו את Firebase Hosting. עם זאת, לגבי Firebase Auth ו-Cloud Firestore, נסביר איך מגדירים ומפעילים את השירותים באמצעות מסוף Firebase.

הפעלת אימות אנונימי

אימות הוא לא הנושא המרכזי של סדנת הקוד הזו, אבל חשוב לכלול אימות כלשהו באפליקציה. נשתמש בכניסה אנונימית – כלומר, המשתמש ייכנס לחשבון באופן אוטומטי בלי להופיע הודעה על כך.

צריך להפעיל את ההתחברות האנונימית.

  1. במסוף Firebase, מאתרים את הקטע Build בסרגל הניווט הימני.
  2. לוחצים על אימות ואז על הכרטיסייה שיטת כניסה (או לוחצים כאן כדי לעבור ישירות לשם).
  3. מפעילים את ספק הכניסה אנונימי ולוחצים על שמירה.

img7.png

כך האפליקציה תוכל להיכנס בשקט לחשבונות של המשתמשים כשהם ייכנסו לאפליקציית האינטרנט. אפשר לקרוא את המסמכים בנושא אימות אנונימי כדי לקבל מידע נוסף.

הפעלת Cloud Firestore

האפליקציה משתמשת ב-Cloud Firestore כדי לשמור ולקבל מידע על מסעדות ודירוגים שלהן.

צריך להפעיל את Cloud Firestore. בקטע Build במסוף Firebase, לוחצים על Firestore Database. לוחצים על Create database בחלונית של Cloud Firestore.

הגישה לנתונים ב-Cloud Firestore מבוקרת על ידי כללי אבטחה. בהמשך נדבר על כללים, אבל קודם נגדיר כללים בסיסיים לגבי הנתונים שלנו כדי שנוכל להתחיל. בכרטיסייה Rules במסוף Firebase, מוסיפים את הכללים הבאים ולוחצים על Publish.

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

בהמשך הסדנה נדבר על הכללים האלה ועל האופן שבו הם פועלים.

3.‏ קבלת הקוד לדוגמה

משכפלים את מאגר GitHub משורת הפקודה:

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

דוגמת הקוד אמורה להיות מועתקת לספרייה 📁friendlyeats-web. מעכשיו, חשוב להריץ את כל הפקודות מהספרייה הזו:

cd friendlyeats-web/vanilla-js

ייבוא האפליקציה לתחילת הדרך

פותחים או מייבאים את הספרייה 📁friendlyeats-web באמצעות סביבת הפיתוח המשולבת (IDE) (WebStorm, ‏ Atom, ‏ Sublime, ‏ Visual Studio Code וכו'). הספרייה הזו מכילה את קוד ההתחלה של סדנת הקוד, שכולל אפליקציה להמלצות על מסעדות שעדיין לא פונקציונלית. נפעיל אותה במהלך סדנת הקוד, כך שבקרוב תצטרכו לערוך את הקוד בספרייה הזו.

4.‏ התקנת ממשק שורת הפקודה של Firebase

ממשק שורת הפקודה (CLI) של Firebase מאפשר להציג את אפליקציית האינטרנט באופן מקומי ולפרוס אותה ב-Firebase Hosting.

  1. כדי להתקין את ה-CLI, מריצים את פקודת ה-npm הבאה:
npm -g install firebase-tools
  1. מריצים את הפקודה הבאה כדי לוודא שה-CLI הוטמע כמו שצריך:
firebase --version

מוודאים שהגרסה של CLI של Firebase היא 7.4.0 ואילך.

  1. מריצים את הפקודה הבאה כדי להעניק הרשאה ל-CLI של Firebase:
firebase login

הגדרנו את התבנית של אפליקציית האינטרנט כדי למשוך את ההגדרות של האפליקציה לאירוח ב-Firebase מהספרייה והקבצים המקומיים של האפליקציה. אבל כדי לעשות זאת, אנחנו צריכים לשייך את האפליקציה לפרויקט Firebase שלכם.

  1. מוודאים ששורת הפקודה ניגשת לספרייה המקומית של האפליקציה.
  2. כדי לשייך את האפליקציה לפרויקט Firebase, מריצים את הפקודה הבאה:
firebase use --add
  1. כשמופיעה בקשה, בוחרים את מזהה הפרויקט ומעניקים לפרופקט ב-Firebase כינוי.

כתובת אימייל חלופית שימושית אם יש לכם כמה סביבות (ייצור, Staging וכו'). עם זאת, ב-codelab הזה נשתמש רק בכינוי default.

  1. פועלים לפי שאר ההוראות בשורת הפקודה.

5.‏ הפעלת השרת המקומי

אנחנו מוכנים להתחיל לעבוד על האפליקציה! מריצים את האפליקציה באופן מקומי

  1. מריצים את הפקודה הבאה ב-CLI של Firebase:
firebase emulators:start --only hosting
  1. בשורת הפקודה אמורה להופיע התגובה הבאה:
hosting: Local server: http://localhost:5000

אנחנו משתמשים באמולטור של Firebase Hosting כדי להציג את האפליקציה שלנו באופן מקומי. עכשיו אפליקציית האינטרנט אמורה להיות זמינה בכתובת http://localhost:5000.

  1. פותחים את האפליקציה בכתובת http://localhost:5000.

אמורה להופיע עותק של FriendlyEats שמקושר לפרויקט Firebase שלכם.

האפליקציה התחברה באופן אוטומטי לפרויקט Firebase שלכם והכניסה אתכם לחשבון באופן אוטומטי כמשתמשים אנונימיים.

img2.png

6.‏ כתיבת נתונים ב-Cloud Firestore

בקטע הזה נכתוב נתונים מסוימים ב-Cloud Firestore כדי שנוכל לאכלס את ממשק המשתמש של האפליקציה. אפשר לעשות זאת באופן ידני דרך מסוף Firebase, אבל אנחנו נעשה זאת באפליקציה עצמה כדי להדגים כתיבת בסיסית ב-Cloud Firestore.

מודל נתונים

הנתונים ב-Firestore מחולקים לאוספים, למסמכים, לשדות ולאוספי משנה. נשמור כל מסעדה כמסמך באוסף ברמה העליונה שנקרא restaurants.

img3.png

בהמשך, נשמור כל ביקורת באוסף משנה שנקרא ratings מתחת לכל מסעדה.

img4.png

הוספת מסעדות ל-Firestore

אובייקט המודל הראשי באפליקציה שלנו הוא מסעדה. נכתוב קוד שמוסיף מסמך מסעדה לאוסף restaurants.

  1. פותחים את הקובץ scripts/FriendlyEats.Data.js מהקבצים שהורדתם.
  2. מאתרים את הפונקציה FriendlyEats.prototype.addRestaurant.
  3. מחליפים את כל הפונקציה בקוד הבא.

FriendlyEats.Data.js

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

הקוד שלמעלה מוסיף מסמך חדש לאוסף restaurants. נתוני המסמך מגיעים מאובייקט JavaScript רגיל. כדי לעשות זאת, קודם מקבלים הפניה לאוסף של Cloud Firestore restaurants ואז add את הנתונים.

נוסיף מסעדות!

  1. חוזרים לאפליקציית FriendlyEats בדפדפן ומרעננים אותה.
  2. לוחצים על Add Mock Data.

האפליקציה תיצור באופן אוטומטי קבוצה אקראית של אובייקטים מסוג מסעדות, ולאחר מכן תפעיל את הפונקציה addRestaurant. עם זאת, עדיין לא תראו את הנתונים באפליקציית האינטרנט בפועל כי עדיין צריך להטמיע את אחזור הנתונים (הקטע הבא בקודלאב).

עם זאת, אם עוברים אל הכרטיסייה Cloud Firestore במסוף Firebase, אמורים להופיע עכשיו מסמכים חדשים באוסף restaurants.

img6.png

מצוין, סיימתם לכתוב נתונים ב-Cloud Firestore מאפליקציית אינטרנט!

בקטע הבא תלמדו איך לאחזר נתונים מ-Cloud Firestore ולהציג אותם באפליקציה.

7.‏ הצגת נתונים מ-Cloud Firestore

בקטע הזה תלמדו איך לאחזר נתונים מ-Cloud Firestore ולהציג אותם באפליקציה. שני השלבים העיקריים הם יצירת שאילתה והוספת מאזין לתמונות מצב. המאזין הזה יקבל התראות על כל הנתונים הקיימים שתואמים לשאילתה, ויקבל עדכונים בזמן אמת.

קודם נרכיב את השאילתה שתציג את רשימת המסעדות שמוגדרת כברירת מחדל, ללא סינון.

  1. חוזרים לקובץ scripts/FriendlyEats.Data.js.
  2. מאתרים את הפונקציה FriendlyEats.prototype.getAllRestaurants.
  3. מחליפים את כל הפונקציה בקוד הבא.

FriendlyEats.Data.js

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

  this.getDocumentsInQuery(query, renderer);
};

בקוד שלמעלה, אנחנו יוצרים שאילתה שתאחזר עד 50 מסעדות מהאוסף ברמת העליונה שנקרא restaurants, והן ימוינו לפי הדירוג הממוצע (כרגע כולן אפס). אחרי שמצהירים על השאילתה הזו, מעבירים אותה לשיטה getDocumentsInQuery() שאחראית על טעינת הנתונים ועל הפיכת הנתונים לתמונה.

כדי לעשות זאת, נוסיף מאזין ל-snapshot.

  1. חוזרים לקובץ scripts/FriendlyEats.Data.js.
  2. מאתרים את הפונקציה FriendlyEats.prototype.getDocumentsInQuery.
  3. מחליפים את כל הפונקציה בקוד הבא.

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

בקוד שלמעלה, query.onSnapshot יפעיל את פונקציית ה-callback שלו בכל פעם שתהיה שינוי בתוצאה של השאילתה.

  • בפעם הראשונה, פונקציית ה-callback מופעלת עם כל קבוצת התוצאות של השאילתה – כלומר כל האוסף restaurants מ-Cloud Firestore. לאחר מכן, הוא מעביר את כל המסמכים הנפרדים לפונקציה renderer.display.
  • כשמוחקים מסמך, הערך של change.type שווה ל-removed. במקרה כזה, נקרא לפונקציה שמסירה את המסעדה מממשק המשתמש.

עכשיו, אחרי שהטמענו את שתי השיטות, צריך לרענן את האפליקציה ולוודא שהמסעדות שראינו מקודם במסוף Firebase מוצגות עכשיו באפליקציה. אם השלמתם את הקטע הזה בהצלחה, סימן שהאפליקציה קוראת ומעדכנת נתונים באמצעות Cloud Firestore.

כשרשימת המסעדות תשתנה, המאזין הזה ימשיך להתעדכן באופן אוטומטי. כדאי לנסות להיכנס למסוף Firebase ולמחוק מסעדה באופן ידני או לשנות את השם שלה – השינויים יופיעו באתר באופן מיידי.

img5.png

8.‏ נתונים של Get()

עד עכשיו הראינו איך להשתמש ב-onSnapshot כדי לאחזר עדכונים בזמן אמת, אבל זה לא תמיד מה שאנחנו רוצים. לפעמים עדיף לאחזר את הנתונים רק פעם אחת.

נצטרך להטמיע שיטה שתופעל כשמשתמש לוחץ על מסעדה ספציפית באפליקציה.

  1. חוזרים לקובץ scripts/FriendlyEats.Data.js.
  2. מאתרים את הפונקציה FriendlyEats.prototype.getRestaurant.
  3. מחליפים את כל הפונקציה בקוד הבא.

FriendlyEats.Data.js

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

אחרי שתטמיעו את השיטה הזו, תוכלו להציג דפים לכל מסעדה. פשוט לוחצים על מסעדה ברשימה ודף הפרטים של המסעדה אמור להופיע:

img1.png

בשלב הזה אי אפשר להוסיף דירוגים, כי אנחנו עדיין צריכים להטמיע את הוספת הדירוגים בהמשך הקודלאב.

9.‏ מיון וסינון של נתונים

נכון לעכשיו, באפליקציה מוצגת רשימת מסעדות, אבל אין למשתמש אפשרות לסנן לפי הצרכים שלו. בקטע הזה נעשה שימוש בשאילתות המתקדמות של Cloud Firestore כדי להפעיל סינון.

דוגמה לשאילתה פשוטה לאחזור כל המסעדות ב-Dim Sum:

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

כפי שרואים מהשם, השיטה where() תגרום לשאילתה שלנו להוריד רק את המשתתפים באוסף שהשדות שלהם עומדים בהגבלות שהגדרתם. במקרה כזה, המערכת תוריד רק מסעדות שבהן הערך של category הוא Dim Sum.

באפליקציה שלנו, המשתמש יכול לשרשר כמה מסננים כדי ליצור שאילתות ספציפיות, כמו 'פיצה בסן פרנסיסקו' או 'מאכלי ים בלוס אנג'לס לפי פופולריות'.

נוצר שיטה שתרכיב שאילתה שתסנן את המסעדות שלנו על סמך כמה קריטריונים שנבחרו על ידי המשתמשים.

  1. חוזרים לקובץ scripts/FriendlyEats.Data.js.
  2. מאתרים את הפונקציה FriendlyEats.prototype.getFilteredRestaurants.
  3. מחליפים את כל הפונקציה בקוד הבא.

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

הקוד שלמעלה מוסיף כמה מסנני where ותנאי orderBy יחיד כדי ליצור שאילתה מורכבת על סמך הקלט של המשתמש. השאילתה שלנו תחזיר עכשיו רק מסעדות שתואמות לדרישות של המשתמש.

מרעננים את אפליקציית FriendlyEats בדפדפן ובודקים אם אפשר לסנן לפי מחיר, עיר וקטגוריה. במהלך הבדיקה, יופיעו שגיאות במסוף JavaScript בדפדפן, שנראות כך:

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

השגיאות האלה נובעות מכך שרוב השאילתות המורכבות ב-Cloud Firestore מחייבות אינדקסים. הדרישה להוספת אינדקסים לשאילתות שומרת על מהירות העבודה ב-Cloud Firestore בקנה מידה נרחב.

פתיחת הקישור מהודעת השגיאה תפתח באופן אוטומטי את ממשק המשתמש ליצירת אינדקס במסוף Firebase, עם הפרמטרים הנכונים שמולאו. בקטע הבא נכתוב ונפרוס את המדדים הנדרשים לאפליקציה הזו.

10.‏ פריסת מדדים

אם אנחנו לא רוצים לבדוק כל נתיב באפליקציה ולעקוב אחרי כל אחד מהקישורים ליצירת אינדקס, אנחנו יכולים לפרוס בקלות הרבה אינדקסים בו-זמנית באמצעות CLI של Firebase.

  1. בספרייה המקומית שהורדתם של האפליקציה, תמצאו קובץ firestore.indexes.json.

הקובץ הזה מתאר את כל המדדים הנדרשים לכל השילובים האפשריים של המסננים.

firestore.indexes.json

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

   ...

 ]
}
  1. פורסים את המדדים האלה באמצעות הפקודה הבאה:
firebase deploy --only firestore:indexes

אחרי כמה דקות, המדדים יהיו פעילים והודעות השגיאה ייעלמו.

11.‏ כתיבת נתונים בעסקה

בקטע הזה נוסיף למשתמשים את האפשרות לשלוח ביקורות על מסעדות. עד כה, כל פעולות הכתיבה שלנו היו אטומיות ופשוטה יחסית. אם אחת מהן תיכשל, סביר להניח שנבקש מהמשתמש לנסות שוב או שהאפליקציה שלנו תנסה לכתוב שוב באופן אוטומטי.

באפליקציה שלנו יהיו הרבה משתמשים שרוצים להוסיף דירוג למסעדה, לכן נצטרך לתאם כמה פעולות קריאה וכתיבה. קודם צריך לשלוח את הביקורת עצמה, ואז לעדכן את הדירוגים count ו-average rating של המסעדה. אם אחד מהם נכשל אבל השני לא, נישאר במצב לא עקבי שבו הנתונים בחלק אחד של מסד הנתונים שלנו לא תואמים לנתונים בחלק אחר.

למרבה המזל, Cloud Firestore מספק פונקציונליות של טרנזקציות שמאפשרת לנו לבצע מספר פעולות קריאה וכתיבה בפעולה אטומית אחת, וכך להבטיח שהנתונים שלנו יישארו עקביים.

  1. חוזרים לקובץ scripts/FriendlyEats.Data.js.
  2. מאתרים את הפונקציה FriendlyEats.prototype.addRating.
  3. מחליפים את כל הפונקציה בקוד הבא.

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

בבלוק שלמעלה, אנחנו מפעילים טרנזקציה כדי לעדכן את הערכים המספריים של avgRating ו-numRatings במסמך המסעדה. במקביל, מוסיפים את rating החדש לאוסף המשנה ratings.

12.‏ אבטחת הנתונים

בתחילת הקודלאב הזה, הגדרנו את כללי האבטחה של האפליקציה כדי להגביל את הגישה אליה.

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

הכללים האלה מגבילים את הגישה כדי לוודא שהלקוחות מבצעים רק שינויים בטוחים. לדוגמה:

  • עדכונים במסמך של מסעדה יכולים לשנות רק את הדירוגים, ולא את השם או נתונים אחרים שלא ניתן לשנות.
  • אפשר ליצור דירוגים רק אם מזהה המשתמש תואם למשתמש שמחובר לחשבון, וכך למנוע זיופים.

במקום להשתמש במסוף Firebase, אפשר להשתמש ב-CLI של Firebase כדי לפרוס כללים בפרויקט Firebase. הקובץ firestore.rules בספריית העבודה כבר מכיל את הכללים שלמעלה. כדי לפרוס את הכללים האלה ממערכת הקבצים המקומית (במקום להשתמש במסוף Firebase), מריצים את הפקודה הבאה:

firebase deploy --only firestore:rules

13.‏ סיכום

ב-codelab הזה למדתם לבצע פעולות קריאה וכתיבה בסיסיות ומתקדמות באמצעות Cloud Firestore, וגם איך לאבטח את הגישה לנתונים באמצעות כללי אבטחה. הפתרון המלא מופיע במאגר quickstarts-js.

מידע נוסף על Cloud Firestore זמין במקורות המידע הבאים:

14.‏ [אופציונלי] אכיפה באמצעות בדיקת אפליקציה

App Check של Firebase מספק הגנה על ידי אימות תנועה לא רצויה לאפליקציה ומניעתה. בשלב הזה, תוסיפו את App Check עם reCAPTCHA Enterprise כדי לאבטח את הגישה לשירותים שלכם.

קודם כול, צריך להפעיל את App Check ואת reCaptcha.

הפעלת reCaptcha Enterprise

  1. במסוף Cloud, מחפשים את reCaptcha Enterprise בקטע Security ובוחרים בו.
  2. מפעילים את השירות לפי ההנחיות ולוחצים על Create Key.
  3. מזינים שם לתצוגה כשמופיעה ההודעה הרלוונטית ובוחרים באפשרות אתר כסוג הפלטפורמה.
  4. מוסיפים את כתובות ה-URL שנפרסו לרשימת הדומיינים, ומוודאים שהאפשרות 'שימוש באתגר של תיבת סימון' לא מסומנת.
  5. לוחצים על Create Key ושומרים את המפתח שנוצר במקום בטוח. תצטרכו אותו בהמשך השלב הזה.

הפעלת App Check

  1. במסוף Firebase, מאתרים את הקטע Build בחלונית השמאלית.
  2. לוחצים על בדיקת האפליקציה ואז על הלחצן מתחילים (או מפנים ישירות ל מסוף).
  3. לוחצים על Register (רישום) ומזינים את המפתח של reCaptcha Enterprise כשמופיעה בקשה לעשות זאת, ואז לוחצים על Save (שמירה).
  4. בתצוגת ממשקי ה-API, בוחרים באפשרות Storage ולוחצים על Enforce. חוזרים על הפעולה עבור Cloud Firestore.

בדיקת האפליקציות אמורה להיות נאכפת עכשיו. מרעננים את האפליקציה ומנסים ליצור או להציג מסעדה. אמורה להופיע הודעת השגיאה הבאה:

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

המשמעות היא ש-App Check חוסם בקשות שלא אומתו כברירת מחדל. עכשיו נוסיף לאפליקציה אימות.

עוברים לקובץ FriendlyEats.View.js ומעדכנים את הפונקציה initAppCheck ומוסיפים את מפתח ה-reCaptcha כדי לאתחל את בדיקת האפליקציה.

FriendlyEats.prototype.initAppCheck = function() {
    var appCheck = firebase.appCheck();
    appCheck.activate(
    new firebase.appCheck.ReCaptchaEnterpriseProvider(
      /* reCAPTCHA Enterprise site key */
    ),
    true // Set to true to allow auto-refresh.
  );
};

המכונה appCheck מופעלת באמצעות ReCaptchaEnterpriseProvider עם המפתח שלכם, ו-isTokenAutoRefreshEnabled מאפשרת לאסימונים להתעדכן באופן אוטומטי באפליקציה.

כדי להפעיל בדיקה מקומית, מחפשים את הקטע שבו האפליקציה מופעלת בקובץ FriendlyEats.js ומוסיפים את השורה הבאה לפונקציה FriendlyEats.prototype.initAppCheck:

if(isLocalhost) {
 
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

הפעולה הזו תירשם ביומן אסימון לניפוי באגים במסוף של אפליקציית האינטרנט המקומית, בדומה לזה:

App Check debug token: 8DBDF614-649D-4D22-B0A3-6D489412838B. You will need to add it to your app's App Check settings in the Firebase console for it to work.

עכשיו עוברים אל תצוגת האפליקציות של App Check במסוף Firebase.

לוחצים על תפריט ההוספה ובוחרים באפשרות ניהול אסימוני ניפוי באגים.

לאחר מכן לוחצים על Add debug token (הוספת אסימון ניפוי באגים) ומדביקים את אסימון ניפוי הבאגים מהמסוף לפי ההנחיות.

כל הכבוד! עכשיו App Check אמור לפעול באפליקציה.