App Check Web Codelab

1. הקדמה

עדכון אחרון: 2023-02-23

כיצד תוכל למנוע גישה לא מורשית למשאבי Firebase שלך?

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

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

מה שתבנה

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

מה תלמד

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

מה אתה צריך

• עורך ה-IDE/טקסט לבחירתך
• מנהל החבילות npm , שמגיע בדרך כלל עם Node.js
• Firebase CLI מותקן ומוגדר כך שיעבוד עם החשבון שלך
• טרמינל/קונסולה
• דפדפן לבחירתך, כגון Chrome
• הקוד לדוגמה של מעבדת הקוד (ראה את השלב הבא של מעבדת הקוד כדי לקבל את הקוד.)

2. קבל את הקוד לדוגמה

שיבוט את מאגר GitHub של Codelab משורת הפקודה:

git clone https://github.com/firebase/codelab-friendlychat-web

לחלופין, אם לא התקנת את Git, תוכל להוריד את המאגר כקובץ ZIP .

ייבא את אפליקציית המתנע

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

3. צור והגדר פרוייקט Firebase

צור פרויקט Firebase

1. היכנס ל- Firebase .
2. במסוף Firebase, לחץ על הוסף פרויקט ולאחר מכן תן שם לפרויקט Firebase שלך ​​FriendlyChat. זכור את מזהה הפרויקט של פרויקט Firebase שלך.
3. בטל את הסימון הפעל את Google Analytics עבור פרויקט זה
4. לחץ על צור פרויקט.

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

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

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

הוסף אפליקציית אינטרנט של Firebase לפרויקט

1. לחץ על סמל האינטרנט כדי ליצור אפליקציית אינטרנט חדשה של Firebase.
2. רשום את האפליקציה עם הכינוי Friendly Chat, ולאחר מכן סמן את התיבה שליד הגדר גם אירוח Firebase עבור אפליקציה זו . לחץ על הרשמה אפליקציה .
3. בשלב הבא, תראה פקודה להתקנת Firebase באמצעות npm ואובייקט תצורה. אתה מעתיק את האובייקט הזה מאוחר יותר במעבדת הקוד, אז לעת עתה, הקש Next .

4. לאחר מכן תראה אפשרות להתקין את Firebase CLI. אם עדיין לא התקנת אותו, עשה זאת כעת באמצעות הפקודה npm install -g firebase-tools . לאחר מכן לחץ על הבא .
5. לאחר מכן תראה אפשרות להיכנס ל-Firebase ולפרוס לאירוח של Firebase. קדימה, היכנס ל-Firebase באמצעות הפקודה firebase login , ולאחר מכן לחץ על Continue to Console . אתה פורס לאירוח של Firebase בשלב עתידי.

הפעל את Google Sign-in עבור אימות Firebase

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

יהיה עליך להפעיל את Google Sign-in:

1. במסוף Firebase, אתר את הקטע Build בחלונית השמאלית.
2. לחץ על אימות , לחץ על התחל אם רלוונטי ולאחר מכן לחץ על הכרטיסייה שיטת כניסה (או לחץ כאן כדי לעבור ישירות לשם).
3. הפעל את ספק הכניסה של Google
4. הגדר את השם הפונה לציבור של האפליקציה שלך ל-Friendly Chat ובחר אימייל לתמיכה בפרויקט מהתפריט הנפתח.
5. לחץ על שמור

הפעל את Cloud Firestore

אפליקציית האינטרנט משתמשת ב-Cloud Firestore כדי לשמור הודעות צ'אט ולקבל הודעות צ'אט חדשות.

יהיה עליך להפעיל את Cloud Firestore:

1. בקטע Build של מסוף Firebase, לחץ על Firestore Database .
2. לחץ על צור מסד נתונים בחלונית Cloud Firestore.

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

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

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

הפעל אחסון בענן

אפליקציית האינטרנט משתמשת ב-Cloud Storage for Firebase כדי לאחסן, להעלות ולשתף תמונות.

יהיה עליך להפעיל אחסון בענן:

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

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

5. מיקום Cloud Storage נבחר מראש עם אותו אזור שבחרת עבור מסד הנתונים של Cloud Firestore שלך. לחץ על סיום כדי להשלים את ההגדרה.

4. הגדר את Firebase

מתוך ספריית appcheck-start , התקשר:

firebase use --add

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

1. עבור להגדרות הפרויקט שלך במסוף Firebase
2. בכרטיס "האפליקציות שלך", בחר את הכינוי של האפליקציה שעבורה אתה צריך אובייקט תצורה.
3. בחר Config מחלונית הקטעים של Firebase SDK.
4. העתק את קטע הקוד של אובייקט התצורה ולאחר מכן הוסף אותו ל- appcheck-start/hosting/src/firebase-config.js . שאר מעבד הקוד מניח שהמשתנה נקרא config .

firebase-config.js

const config = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

מאותה ספריית appcheck-start , ואז התקשר:

firebase experiments:enable webframeworks

זה מאפשר תמיכה במסגרות אינטרנט שאיתה נבנה הפרויקט הזה.

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

5. נסה את האפליקציה ללא App Check

כעת, לאחר שהגדרת את האפליקציה שלך ואת ה-SDK, נסה להשתמש באפליקציה כפי שהיא תוכננה במקור. ראשית, התחל בהתקנת כל התלות. מהטרמינל שלך, נווט אל ספריית appcheck-start/hosting . בתוך הספרייה הזו, הפעל את npm install . זה מביא את כל התלות כדי שהפרויקט שלך יעבוד. כדי להפעיל את האפליקציה במצבה הנוכחי, תוכל להפעיל את firebase serve . האפליקציה מבקשת ממך להיכנס עם חשבון גוגל; עשה זאת, ולאחר מכן נסה לפרסם כמה הודעות צ'אט וכמה תמונות לצ'אט.

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

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

בשלבים הבאים, אתה הולך:

• הרשמה ל-App Check
• אימות אכיפה
• תתחיל לאכוף כללים

6. הפעל את בדיקת האפליקציה והאכיפה

נתחיל בנטילת מפתח reCAPTCHA Enterprise עבור הפרויקט שלך ונוסיף אותו ל-App Check. אתה מתחיל בביקור בקטע reCAPTCHA Enterprise של Google Cloud Console. בחר את הפרוייקט שלך ולאחר מכן תתבקש להפעיל את reCAPTCHA Enterprise API. הפעל את ה-API והמתן מספר דקות לסיום. לאחר מכן לחץ על צור מפתח לצד מפתחות ארגוניים . לאחר מכן בסעיף זה, ציין שם תצוגה ובחר מפתח סוג אתר . עליך לציין את הדומיינים שבהם האפליקציה שלך מתארחת. מכיוון שאתה מתכנן לארח את זה ב-Firebase Hosting, אתה משתמש בשם אירוח ברירת המחדל שהוא בדרך כלל ${YOUR_PROJECT_ID}.web.app . אתה יכול למצוא את דומיין האירוח שלך בקטע אירוח של מסוף Firebase. לאחר מילוי מידע זה, הקש Done ו- Create Key .

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

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

בקשות לא מאומתות ולא נאכפות

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

ל-backend יש 100% בקשות לא מאומתות שמגיעות. מסך זה שימושי מכיוון שהוא מראה שכמעט כל בקשות הלקוח מגיעות מלקוחות שאין להם App Check משולבת.

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

בקשות לא מאומתות ונאכפות

קדימה, לחץ על כפתור האכיפה מהמסך הקודם ולאחר מכן לחץ שוב על אכיפת אם תתבקש.

זה יתחיל לאכוף App Check; זה יחסום כעת בקשות לשירותי הקצה האחוריים שלך שלא מאומתות דרך ספק האישורים שבחרת (במקרה זה reCAPTCHA Enterprise). חזור לאפליקציית האינטרנט הפועלת שלך שאמורה לפעול בכתובת http://localhost:5000 . כאשר אתה מרענן את הדף, ומנסה לקבל נתונים ממסד הנתונים, שום דבר לא קורה. אם אתה פותח את קונסולת Chrome כדי לקרוא את השגיאות, אתה אמור לראות משהו דומה לזה:

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

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

7. הוסף מפתח reCAPTCHA Enterprise לאתר

אנו הולכים להוסיף את המפתח הארגוני ליישום שלך. ראשית, פתח את hosting/src/firebase-config.js והוסף את מפתח reCAPTCHA Enterprise שלך ​​לקטע הקוד הבא:

const reCAPTCHAEnterpriseKey = {
  // Replace with your recaptcha enterprise site key
  key: "Replace with your recaptcha enterprise site key"
};

ברגע שזה הושלם, פתח את hosting/src/index.js ובשורה 51, אתה הולך להוסיף ייבוא ​​מ-firebase-config.js כדי להביא את מפתח reCAPTCHA שלך וגם לייבא את ספריית App Check כדי שתוכל לעבוד עם reCAPTCHA ספק ארגוני.

// add from here
 import {
   initializeAppCheck,
   ReCaptchaEnterpriseProvider,
 } from 'firebase/app-check';
// to here

// replace this line
import { getFirebaseConfig } from './firebase-config.js';
// with this line
import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';

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

import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';
// add from here
 function setupAppCheck(app) {
   if(import.meta.env.MODE === 'development') {
     self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
   }
 }
// to here

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

function setupAppCheck(app) {
   if(import.meta.env.MODE === 'development') {
     self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
   }
// add from here
   // Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
   // site key and pass it to initializeAppCheck().
   initializeAppCheck(app, {
     provider: new ReCaptchaEnterpriseProvider(getReCaptchaKey()),
     isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
   });
// to here
 }

לבסוף, ברגע שאתה מוודא שהאפליקציה מאותחלת, עליך לקרוא לפונקציה setupAppCheck שיצרת זה עתה. בתחתית הקובץ hosting/src/index.js , הוסף את הקריאה לשיטה שנוספת לאחרונה.

const firebaseApp = initializeApp(getFirebaseConfig());
// add from here
setupAppCheck(firebaseApp);
// to here
getPerformance();
initFirebaseAuth();
loadMessages();

תחילה בדוק מקומית

בדוק תחילה את היישום שלך באופן מקומי. אם אתה עדיין לא משרת את היישום באופן מקומי, הפעל את firebase serve . אתה צריך לשים לב שהאפליקציה עדיין לא מצליחה להיטען באופן מקומי. הסיבה לכך היא שרשמת את דומיין Firebase שלך ​​רק אצל ספק אישור reCAPTCHA ולא בדומיין localhost. לעולם אל תירשום את localhost כדומיין מאושר, מכיוון שהדבר מאפשר למשתמשים לגשת לחלקים האחוריים המוגבלים שלך מיישום הפועל באופן מקומי במחשב שלהם. במקום זאת, מכיוון שהגדרת self.FIREBASE_APPCHECK_DEBUG_TOKEN = true תרצה לבדוק בקונסולת ה-JavaScript שלך אם יש שורה שנראית משהו דומה לזה:

App Check debug token: 55183c20-de61-4438-85e6-8065789265be. You will need to add it to your app's App Check settings in the Firebase console for it to work.

תרצה לקחת את אסימון ניפוי הבאגים שסופק (במקרה לדוגמה הוא: 55183c20-de61-4438-85e6-8065789265be ) ולחבר אותו לתצורת App Check תחת תפריט ההצפה של האפליקציה שלך.

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

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

נסה את זה בייצור

ברגע שאתה מרוצה ש-App Check עובד באופן מקומי, פרוס את אפליקציית האינטרנט לייצור. מהטרמינל שלך קרא firebase deploy שוב וטען מחדש את הדף. פעולה זו תארוז את יישום האינטרנט שלך להפעלה ב-Firebase Hosting. לאחר שהאפליקציה שלך מתארחת ב-Firebase Hosting, נסה לבקר באפליקציה שלך בכתובת ${YOUR_PROJECT_ID}.web.app . אתה יכול לפתוח את קונסולת ה-JavaScript, וכבר לא אמור לראות את אסימון ניפוי הבאגים מודפס שם ואמור לראות את הצ'אטים נטענים בפרויקט שלך. בנוסף, לאחר אינטראקציה עם האפליקציה לכמה רגעים, תוכל לבקר בקטע בדיקת האפליקציות של מסוף Firebase ולאמת שהבקשות לאפליקציה שלך עברו לאימות.

8. מזל טוב!

מזל טוב, הוספת בהצלחה את Firebase App Check לאפליקציית אינטרנט!

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

מה הלאה?

עיין בתיעוד הבא להוספת Firebase App Check:

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

מסמכי עזר

• התחל להשתמש ב-App Check עם reCAPTCHA Enterprise באפליקציות אינטרנט
• השתמש בספק ניפוי הבאגים באפליקציות אינטרנט