Firebase Angular Web Frameworks Codelab

1. מה אתה תיצור

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

AngularFire ישמש לבניית אפליקציית האינטרנט, Emulator Suite לבדיקות מקומיות, אימות למעקב אחר נתוני משתמש, Firestore ואחסון לשמירה על נתונים ומדיה, המופעלים על ידי פונקציות ענן, ולבסוף, Firebase Hosting לפריסת האפליקציה.

מה תלמד

• כיצד לפתח עם מוצרי Firebase באופן מקומי עם Emulator Suite
• כיצד לשפר את אפליקציית האינטרנט שלך עם AngularFire
• כיצד לשמור על הנתונים שלך ב-Firestore
• כיצד להתמיד במדיה באחסון
• כיצד לפרוס את האפליקציה שלך ל-Firebase Hosting
• כיצד להשתמש בפונקציות ענן כדי ליצור אינטראקציה עם מסדי הנתונים וממשקי ה-API שלך

מה אתה צריך

• Node.js גרסה 10 ומעלה
• חשבון Google ליצירה וניהול של פרויקט Firebase שלך
• Firebase CLI גרסה 11.14.2 ואילך
• דפדפן לבחירתך, כגון Chrome
• הבנה בסיסית של Angular ו-Javascript

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

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

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

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

מאגר Github מכיל פרויקטים לדוגמה עבור פלטפורמות מרובות.

מעבדת קוד זה משתמשת רק במאגר webframework:

• 📁 webframework : קוד ההתחלה שתבנה עליו במהלך מעבדת הקוד הזה.

התקנת תלות

לאחר השיבוט, התקן תלות בתיקיית השורש functions לפני בניית אפליקציית האינטרנט.

cd webframework && npm install
cd functions && npm install

התקן את Firebase CLI

התקן את Firebase CLI באמצעות פקודה זו במסוף:

npm install -g firebase-tools

בדוק שוב שגרסת Firebase CLI שלך גדולה מ-11.14.2 באמצעות:

firebase  --version

אם הגרסה שלך נמוכה מ-11.14.2, אנא עדכן באמצעות:

npm update firebase-tools

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

צור פרויקט Firebase

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

חשוב : פרויקט Firebase שלך ​​ייקרא <your-project> , אך Firebase יקצה לו באופן אוטומטי מזהה פרויקט ייחודי בצורת <your-project>-1234 . מזהה ייחודי זה הוא האופן שבו הפרויקט שלך מזוהה בפועל (כולל ב-CLI), בעוד ש- <your-project> הוא פשוט שם תצוגה.

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

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

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

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

1. לחץ על סמל האינטרנט כדי ליצור אפליקציית אינטרנט חדשה של Firebase.
2. בשלב הבא, תראה אובייקט תצורה. העתק את התוכן של אובייקט זה לקובץ environments/environment.ts .

אפשר את הכניסה של Google עבור אימות Firebase

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

כדי לאפשר כניסה של Google :

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

הפעל את Cloud Firestore

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

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

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

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

מופעל, ואין צורך לבצע את השלבים הבאים.

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

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

4. התחבר לפרויקט Firebase שלך

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

ודא ששורת הפקודה שלך ניגשת לספריית webframework המקומית של האפליקציה שלך.

חבר את קוד אפליקציית האינטרנט לפרויקט Firebase שלך. ראשית, היכנס ל-Firebase CLI בשורת הפקודה:

firebase login

לאחר מכן הפעל את הפקודה הבאה כדי ליצור כינוי לפרויקט. החלף $YOUR_PROJECT_ID במזהה של פרויקט Firebase שלך.

firebase  use  $YOUR_PROJECT_ID

הוסף את AngularFire

כדי להוסיף AngularFire לאפליקציה, הפעל את הפקודה:

ng add @angular/fire

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

אתחל את Firebase

כדי לאתחל את פרויקט Firebase, הפעל:

firebase init

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

הפעל את האמולטורים

מספריית webframework , הפעל את הפקודה הבאה כדי להפעיל את האמולטורים:

firebase  emulators:start

בסופו של דבר אתה אמור לראות משהו כזה:

$  firebase  emulators:start

i  emulators:  Starting  emulators:  auth,  functions,  firestore,  hosting,  functions

i  firestore:  Firestore  Emulator  logging  to  firestore-debug.log

i  hosting:  Serving  hosting  files  from:  public

✔  hosting:  Local  server:  http://localhost:5000

i  ui:  Emulator  UI  logging  to  ui-debug.log

i  functions:  Watching  "/functions"  for  Cloud  Functions...

✔  functions[updateMap]:  firestore  function  initialized.

  

┌─────────────────────────────────────────────────────────────┐

│  ✔  All  emulators  ready!  It  is  now  safe  to  connect  your  app.  │

│  i  View  Emulator  UI  at  http://localhost:4000  │

└─────────────────────────────────────────────────────────────┘

  

┌────────────────┬────────────────┬─────────────────────────────────┐

│  Emulator  │  Host:Port  │  View  in  Emulator  UI  │

├────────────────┼────────────────┼─────────────────────────────────┤

│  Authentication  │  localhost:9099  │  http://localhost:4000/auth  │

├────────────────┼────────────────┼─────────────────────────────────┤

│  Functions  │  localhost:5001  │  http://localhost:4000/functions  │

├────────────────┼────────────────┼─────────────────────────────────┤

│  Firestore  │  localhost:8080  │  http://localhost:4000/firestore  │

├────────────────┼────────────────┼─────────────────────────────────┤

│  Hosting  │  localhost:5000  │  n/a  │

└────────────────┴────────────────┴─────────────────────────────────┘

Emulator  Hub  running  at  localhost:4400

Other  reserved  ports:  4500

  

Issues?  Report  them  at  https://github.com/firebase/firebase-tools/issues  and  attach  the  *-debug.log  files.

ברגע שתראה את ✔All emulators ready! הודעה, האמולטורים מוכנים לשימוש.

אתה אמור לראות את ממשק המשתמש של אפליקציית הנסיעות שלך, אשר לא (עדיין!) פועל:

עכשיו בואו נתחיל לבנות!

5. חבר את אפליקציית האינטרנט לאמולטורים

בהתבסס על הטבלה ביומני האמולטור, אמולטור Cloud Firestore מאזין ביציאה 8080 ואמולטור האימות מאזין ביציאה 9099.

פתח את EmulatorUI

בדפדפן האינטרנט שלך, נווט אל http://127.0.0.1:4000/ . אתה אמור לראות את ממשק המשתמש של Emulator Suite.

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

ב- src/app/app.module.ts , הוסף את הקוד הבא לרשימת הייבוא ​​של AppModule :

@NgModule({
	declarations: [...],
	imports: [
		provideFirebaseApp(() =>  initializeApp(environment.firebase)),

		provideAuth(() => {
			const  auth = getAuth();
			if (location.hostname === 'localhost') {
				connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings:  true });
			}
			return  auth;
		}),

		provideFirestore(() => {
			const  firestore = getFirestore();
			if (location.hostname === 'localhost') {
				connectFirestoreEmulator(firestore, '127.0.0.1', 8080);
			}
			return  firestore;
		}),

		provideFunctions(() => {
			const  functions = getFunctions();
			if (location.hostname === 'localhost') {
				connectFunctionsEmulator(functions, '127.0.0.1', 5001);
			}
			return  functions;
		}),

		provideStorage(() => {
			const  storage = getStorage();
			if (location.hostname === 'localhost') {
				connectStorageEmulator(storage, '127.0.0.1', 5001);
			}
			return  storage;
		}),
		...
	]

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

6. הוספת אימות

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

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

הזרקת AngularFire Auth

ב- src/app/pages/login-page/login-page.component.ts , ייבא Auth מ- @angular/fire/auth , והכנס אותו ל- LoginPageComponent . ניתן גם לייבא ישירות מאותה חבילה ספקי אימות, כמו גוגל, ופונקציות כמו signin , signout , ולהשתמש באפליקציה.

import { Auth, GoogleAuthProvider, signInWithPopup, signOut, user } from  '@angular/fire/auth';

export  class  LoginPageComponent  implements  OnInit {
	private  auth: Auth = inject(Auth);
	private  provider = new  GoogleAuthProvider();
	user$ = user(this.auth);
	constructor() {}  

	ngOnInit(): void {} 

	login() {
		signInWithPopup(this.auth, this.provider).then((result) => {
			const  credential = GoogleAuthProvider.credentialFromResult(result);
			return  credential;
		})
	}

	logout() {
		signOut(this.auth).then(() => {
			console.log('signed out');}).catch((error) => {
				console.log('sign out error: ' + error);
		})
	}
}

כעת עמוד הכניסה פונקציונלי! נסה להיכנס ולבדוק את התוצאות באמולטור האימות.

7. הגדרת Firestore

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

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

הטמעת TravelService

מכיוון שדפים רבים ושונים יצטרכו לקרוא ולעדכן מסמכי Firestore באפליקציית האינטרנט, אנו יכולים ליישם את הפונקציות ב- src/app/services/travel.service.ts , כדי להימנע מלהזריק שוב ושוב את אותן פונקציות AngularFire בכל עמוד.

התחל בהזרקת Auth , בדומה לשלב הקודם, כמו גם Firestore לשירות שלנו. הגדרת אובייקט user$ הניתן לצפייה שמאזין למצב האימות הנוכחי היא גם שימושית.

import { doc, docData, DocumentReference, Firestore, getDoc, setDoc, updateDoc, collection, addDoc, deleteDoc, collectionData, Timestamp } from  "@angular/fire/firestore";

export  class  TravelService {
	firestore: Firestore = inject(Firestore);
	auth: Auth = inject(Auth);
	user$ = authState(this.auth).pipe(filter(user  =>  user !== null), map(user  =>  user!));
	router: Router = inject(Router);

הוספת פוסט מסע

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

באמצעות הפונקציה addDoc מ-AngularFire, ניתן להכניס אובייקט לאוסף:

async  addEmptyTravel(userId: String) {
	...
	addDoc(collection(this.firestore, 'travels'), travelData).then((travelRef) => {
		collection(this.firestore, `travels/${travelRef.id}/stops`);
		setDoc(travelRef, {... travelData, id:  travelRef.id})
		this.router.navigate(['edit', `${travelRef.id}`]);
		return  travelRef;

	})
}

עדכון ומחיקת נתונים

בהתחשב ב-uid של כל פוסט טיול, ניתן להסיק את הנתיב של המסמך המאוחסן ב-Firestore, שאותו ניתן לקרוא, לעדכן או למחוק באמצעות הפונקציות updateFoc ו- deleteDoc של AngularFire:

async  updateData(path: string, data: Partial<Travel | Stop>) {
	await  updateDoc(doc(this.firestore, path), data)
}

async  deleteData(path: string) {
	const  ref = doc(this.firestore, path);
	await  deleteDoc(ref)
}

קריאת נתונים כנצפה

מכיוון שניתן לשנות פוסטים ותחנות נסיעות בדרך לאחר היצירה, זה יהיה שימושי יותר לקבל אובייקטים של מסמכים כנצפים, כדי להירשם לכל שינוי שיבוצע. פונקציונליות זו מוצעת על ידי הפונקציות docData ו- collectionData מ- @angular/fire/firestore .

getDocData(path: string) {
	return  docData(doc(this.firestore, path), {idField:  'id'}) as  Observable<Travel | Stop>
}

  
getCollectionData(path: string) {
	return  collectionData(collection(this.firestore, path), {idField:  'id'}) as  Observable<Travel[] | Stop[]>
}

הוספת תחנות לפוסט נסיעה

כעת, לאחר שהוקמו תפעול עמדות נסיעות, הגיע הזמן לשקול עצירות, שיתקיימו תחת אוסף משנה של עמדת נסיעות כמו: travels/ /stops/ travels/ /stops/

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

async  addStop(travelId: string) {
	...
	const  ref = await  addDoc(collection(this.firestore, `travels/${travelId}/stops`), stopData)
	setDoc(ref, {...stopData, id:  ref.id})
}

נֶחְמָד! הפונקציות של Firestore יושמו בשירות הנסיעות, אז עכשיו אתה יכול לראות אותן בפעולה.

שימוש בפונקציות Firestore באפליקציה

נווט אל src/app/pages/my-travels/my-travels.component.ts והכנס את TravelService לשימוש בפונקציות שלו.

travelService = inject(TravelService);
travelsData$: Observable<Travel[]>;
stopsList$!: Observable<Stop[]>;
constructor() {
	this.travelsData$ = this.travelService.getCollectionData(`travels`) as  Observable<Travel[]>
}

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

במקרה שבו יש צורך רק בנסיעות של המשתמש הנוכחי, השתמש בפונקציית query .

שיטות אחרות להבטחת אבטחה כוללות הטמעת כללי אבטחה, או שימוש בפונקציות ענן עם Firestore כפי שנבחן בשלבים אופציונליים למטה

לאחר מכן, פשוט קרא לפונקציות המיושמות ב- TravelService .

async  createTravel(userId: String) {
	this.travelService.addEmptyTravel(userId);
}

deleteTravel(travelId: String) {
	this.travelService.deleteData(`travels/${travelId}`)
}

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

לאחר מכן, חזור על פונקציות העדכון ב- /src/app/pages/edit-travels/edit-travels.component.ts :

travelService: TravelService = inject(TravelService)
travelId = this.activatedRoute.snapshot.paramMap.get('travelId');
travelData$: Observable<Travel>;
stopsData$: Observable<Stop[]>;

constructor() {
	this.travelData$ = this.travelService.getDocData(`travels/${this.travelId}`) as  Observable<Travel>
	this.stopsData$ = this.travelService.getCollectionData(`travels/${this.travelId}/stops`) as  Observable<Stop[]>
}

updateCurrentTravel(travel: Partial<Travel>) {
	this.travelService.updateData(`travels${this.travelId}`, travel)
}

  

updateCurrentStop(stop: Partial<Stop>) {
	stop.type = stop.type?.toString();
	this.travelService.updateData(`travels${this.travelId}/stops/${stop.id}`, stop)
}

  

addStop() {
	if (!this.travelId) return;
	this.travelService.addStop(this.travelId);
}

deleteStop(stopId: string) {
	if (!this.travelId || !stopId) {
		return;
	}
	this.travelService.deleteData(`travels${this.travelId}/stops/${stopId}`)
	this.stopsData$ = this.travelService.getCollectionData(`travels${this.travelId}/stops`) as  Observable<Stop[]>

}

8. הגדרת אחסון

כעת תטמיע את Storage לאחסון תמונות וסוגים אחרים של מדיה.

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

באופן דומה עם Firestore, אחסון ועדכון קבצים עם Storage דורש מזהה ייחודי עבור כל קובץ.

בואו ליישם את הפונקציות ב- TraveService :

העלאת קובץ

נווט אל src/app/services/travel.service.ts והזרקת אחסון מ-AngularFire:

export  class  TravelService {
firestore: Firestore = inject(Firestore);
auth: Auth = inject(Auth);
storage: Storage = inject(Storage);

והטמיע את פונקציית ההעלאה:

async  uploadToStorage(path: string, input: HTMLInputElement, contentType: any) {
	if (!input.files) return  null
	const  files: FileList = input.files;
		for (let  i = 0; i  <  files.length; i++) {
			const  file = files.item(i);
			if (file) {
				const  imagePath = `${path}/${file.name}`
				const  storageRef = ref(this.storage, imagePath);
				await  uploadBytesResumable(storageRef, file, contentType);
				return  await  getDownloadURL(storageRef);
			}
		}
	return  null;
}

ההבדל העיקרי בין גישה למסמכים מ-Firestore לקבצים מ-Cloud Storage הוא שלמרות ששניהם עוקבים אחר נתיבים מובנים של תיקיות, השילוב של כתובת האתר והנתיב הבסיסית מתקבל דרך getDownloadURL , אשר לאחר מכן ניתן לאחסן ולהשתמש ב- קוֹבֶץ.

שימוש בפונקציה באפליקציה

נווט אל src/app/components/edit-stop/edit-stop.component.ts וקרא לפונקציית ההעלאה באמצעות:

	async  uploadFile(file: HTMLInputElement, stop: Partial<Stop>) {
	const  path = `/travels/${this.travelId}/stops/${stop.id}`
	const  url = await  this.travelService.uploadToStorage(path, file, {contentType:  'image/png'});
	stop.image = url ? url : '';
	this.travelService.updateData(path, stop);
}

עם העלאת התמונה, קובץ המדיה עצמו יועלה לאחסון, וכתובת ה-URL תישמר בהתאם במסמך ב-Firestore.

9. פריסת האפליקציה

עכשיו אנחנו מוכנים לפרוס את האפליקציה!

העתק את תצורות firebase מ- src/environments/environment.ts ל- src/environments/environment.prod.ts והפעל:

firebase deploy

אתה אמור לראות משהו כזה:

✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

=== Deploying to 'friendly-travels-b6a4b'...

i  deploying storage, firestore, hosting
i  firebase.storage: checking storage.rules for compilation errors...
✔  firebase.storage: rules file storage.rules compiled successfully
i  firestore: reading indexes from firestore.indexes.json...
i  cloud.firestore: checking firestore.rules for compilation errors...
✔  cloud.firestore: rules file firestore.rules compiled successfully
i  storage: latest version of storage.rules already up to date, skipping upload...
i  firestore: deploying indexes...
i  firestore: latest version of firestore.rules already up to date, skipping upload...
✔  firestore: deployed indexes in firestore.indexes.json successfully for (default) database
i  hosting[friendly-travels-b6a4b]: beginning deploy...
i  hosting[friendly-travels-b6a4b]: found 6 files in .firebase/friendly-travels-b6a4b/hosting
✔  hosting[friendly-travels-b6a4b]: file upload complete
✔  storage: released rules storage.rules to firebase.storage
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendly-travels-b6a4b]: finalizing version...
✔  hosting[friendly-travels-b6a4b]: version finalized
i  hosting[friendly-travels-b6a4b]: releasing new version...
✔  hosting[friendly-travels-b6a4b]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendly-travels-b6a4b/overview
Hosting URL: https://friendly-travels-b6a4b.web.app

10. מזל טוב!

כעת היישום שלך אמור להיות מלא ולפרוס ל-Firebase Hosting! כל הנתונים והניתוח יהיו נגישים כעת ב-Firebase Console שלך.

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

11. אופציונלי: שומרי אישור AngularFire

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

ב- src/app/app-routing.module.ts , ייבוא

import {AuthGuard, redirectLoggedInTo, redirectUnauthorizedTo} from  '@angular/fire/auth-guard'

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

const  redirectUnauthorizedToLogin = () =>  redirectUnauthorizedTo(['signin']);
const  redirectLoggedInToTravels = () =>  redirectLoggedInTo(['my-travels']);

לאחר מכן פשוט הוסף אותם למסלולים שלך:

const  routes: Routes = [
	{path:  '', component:  LoginPageComponent, canActivate: [AuthGuard], data: {authGuardPipe:  redirectLoggedInToTravels}},
	{path:  'signin', component:  LoginPageComponent, canActivate: [AuthGuard], data: {authGuardPipe:  redirectLoggedInToTravels}},
	{path:  'my-travels', component:  MyTravelsComponent, canActivate: [AuthGuard], data: {authGuardPipe:  redirectUnauthorizedToLogin}},
	{path:  'edit/:travelId', component:  EditTravelsComponent, canActivate: [AuthGuard], data: {authGuardPipe:  redirectUnauthorizedToLogin}},
];

12. אופציונלי: כללי אבטחה

גם Firestore וגם Cloud Storage משתמשים בכללי אבטחה ( firestore.rules ו- security.rules בהתאמה) כדי לאכוף אבטחה וכדי לאמת נתונים.

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

חוקי Firestore

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

rules_version  =  '2';
service  cloud.firestore  {
	match  /databases/{database}/travels  {
		allow  read:  if  request.auth.uid  !=  null;
		allow  write:
		if  request.auth.uid  ==  request.resource.data.userId;
	}
}

ניתן להשתמש בכללי אבטחה גם כדי לאמת נתונים:

rules_version  =  '2';
service  cloud.firestore  {
	match  /databases/{database}/posts  {
		allow  read:  if  request.auth.uid  !=  null;
		allow  write:
		if  request.auth.uid  ==  request.resource.data.userId;
		&&  "author"  in  request.resource.data
		&&  "text"  in  request.resource.data
		&&  "timestamp"  in  request.resource.data;
	}
}

כללי אחסון

באופן דומה, אנו יכולים להשתמש בכללי אבטחה כדי לאכוף גישה למסדי נתונים של אחסון ב- storage.rules . שימו לב שאנחנו יכולים להשתמש בפונקציות גם לבדיקות מורכבות יותר:

rules_version  =  '2';

function  isImageBelowMaxSize(maxSizeMB)  {
	return  request.resource.size  <  maxSizeMB  *  1024  *  1024
		&&  request.resource.contentType.matches('image/.*');
}

 service  firebase.storage  {
	match  /b/{bucket}/o  {
		match  /{userId}/{postId}/{filename}  {
			allow  write:  if  request.auth  !=  null
			&&  request.auth.uid  ==  userId  &&  isImageBelowMaxSize(5);
			allow  read;
		}
	}
}