کد لبه وب AngularFire

۱. مرور کلی

در این آزمایشگاه کد، شما یاد خواهید گرفت که چگونه با پیاده‌سازی و استقرار یک کلاینت چت با استفاده از محصولات و سرویس‌های Firebase، از AngularFire برای ایجاد برنامه‌های وب استفاده کنید.

آنچه یاد خواهید گرفت

• ساخت یک برنامه وب با استفاده از Angular و Firebase
• همگام‌سازی داده‌ها با استفاده از Cloud Firestore و Cloud Storage برای Firebase.
• کاربران خود را با استفاده از احراز هویت Firebase تأیید کنید.
• برنامه وب خود را در Firebase App Hosting مستقر کنید.
• ارسال اعلان‌ها با پیام‌رسان ابری فایربیس
• داده‌های عملکرد برنامه وب خود را جمع‌آوری کنید.

آنچه نیاز دارید

• یک حساب کاربری گیت‌هاب
• امکان ارتقاء پروژه Firebase شما به طرح قیمت‌گذاری Blaze
• IDE/ویرایشگر متن مورد نظر شما، مانند WebStorm ، Sublime یا VS Code
• مدیر بسته npm که معمولاً با Node.js همراه است
• یک ترمینال/کنسول
• یک مرورگر دلخواه مثل کروم
• نمونه کد codelab (برای نحوه دریافت کد به مرحله بعدی codelab مراجعه کنید.)

۲. کد نمونه را دریافت کنید

ایجاد یک مخزن گیت‌هاب

سورس codelab را می‌توانید در آدرس https://github.com/firebase/codelab-friendlychat-web پیدا کنید. این مخزن شامل پروژه‌های نمونه برای پلتفرم‌های مختلف است. با این حال، این codelab فقط از دایرکتوری angularfire-start استفاده می‌کند.

پوشه angularfire-start را در مخزن خود کپی کنید:

1. با استفاده از ترمینال، یک پوشه جدید در رایانه خود ایجاد کنید و به دایرکتوری جدید بروید:

   mkdir codelab-friendlyeats-web
   
   cd codelab-friendlyeats-web
   

2. از پکیج giget npm برای دریافت فقط پوشه angularfire-start استفاده کنید:

   npx giget@latest gh:firebase/codelab-friendlychat-web/angularfire-start#master . --install
   

3. پیگیری تغییرات به صورت محلی با git:

   git init
   
   git add .
   
   git commit -m "codelab starting point"
   
   git branch -M main
   

4. یک مخزن گیت‌هاب جدید به آدرس https://github.com/new ایجاد کنید. نام آن را هر چیزی که دوست دارید بگذارید.
   1. گیت‌هاب یک آدرس اینترنتی مخزن جدید به شما می‌دهد که شبیه https://github.com/[user-name]/[repository-name].git یا [e-mail]:[user-name]/[repository-name].git . این آدرس را کپی کنید.
5. تغییرات محلی را به مخزن جدید GitHub خود اعمال کنید. دستور زیر را اجرا کنید و URL مخزن خود را با عبارت your-repository-url جایگزین کنید.

   git remote add origin your-repository-url
   
   git push -u origin main
   

6. اکنون باید کد آغازین را در مخزن گیت‌هاب خود مشاهده کنید.

۳. ایجاد و راه‌اندازی یک پروژه Firebase

ایجاد یک پروژه فایربیس

1. با استفاده از حساب گوگل خود وارد کنسول فایربیس شوید.
2. برای ایجاد یک پروژه جدید، روی دکمه کلیک کنید و سپس نام پروژه را وارد کنید (برای مثال، FriendlyChat ).
   

   این نام پروژه به عنوان نام نمایشی در رابط‌های Firebase استفاده می‌شود و Firebase به طور خودکار یک شناسه پروژه منحصر به فرد بر اساس این نام پروژه ایجاد می‌کند. توجه داشته باشید که می‌توانید به صورت اختیاری روی نماد ویرایش کلیک کنید تا شناسه پروژه مورد نظر خود را تنظیم کنید، اما پس از ایجاد پروژه نمی‌توانید این شناسه را تغییر دهید.

   شناسه پروژه خود را به خاطر بسپارید زیرا بعداً برای شناسایی پروژه Firebase خود در Firebase CLI به آن نیاز خواهید داشت. اگر شناسه خود را فراموش کردید، همیشه می‌توانید بعداً آن را در تنظیمات پروژه پیدا کنید.

3. روی ادامه کلیک کنید.
4. در صورت درخواست، شرایط Firebase را مرور و قبول کنید و سپس روی ادامه کلیک کنید.
5. (اختیاری) دستیار هوش مصنوعی را در کنسول Firebase (با نام "Gemini در Firebase") فعال کنید.
6. برای این codelab، به گوگل آنالیتیکس نیاز ندارید ، بنابراین گزینه گوگل آنالیتیکس را غیرفعال کنید .
7. روی ایجاد پروژه کلیک کنید، منتظر بمانید تا پروژه شما آماده شود و سپس روی ادامه کلیک کنید.

طرح قیمت‌گذاری فایربیس خود را ارتقا دهید

برای استفاده از میزبانی برنامه Firebase و فضای ذخیره‌سازی ابری برای Firebase، پروژه Firebase شما باید در طرح قیمت‌گذاری pay-as-you-go (Blaze) باشد، به این معنی که به یک حساب Cloud Billing متصل باشد.

• یک حساب Cloud Billing به یک روش پرداخت، مانند کارت اعتباری، نیاز دارد.
• اگر در استفاده از فایربیس و گوگل کلود تازه‌کار هستید، بررسی کنید که آیا واجد شرایط دریافت اعتبار ۳۰۰ دلاری و یک حساب کاربری رایگان ابری هستید یا خیر.
• اگر این codelab را به عنوان بخشی از یک رویداد انجام می‌دهید، از برگزارکننده خود بپرسید که آیا امکان استفاده از فضای ابری (Cloud credits) وجود دارد یا خیر.

برای ارتقاء پروژه خود به طرح Blaze، مراحل زیر را دنبال کنید:

1. در کنسول Firebase، گزینه ارتقاء پلن خود را انتخاب کنید.
2. طرح Blaze را انتخاب کنید. دستورالعمل‌های روی صفحه را دنبال کنید تا یک حساب Cloud Billing به پروژه شما متصل شود.
   اگر به عنوان بخشی از این ارتقا نیاز به ایجاد یک حساب Cloud Billing داشتید، ممکن است لازم باشد برای تکمیل ارتقا، به روند ارتقا در کنسول Firebase برگردید.

توجه : پس از تکمیل این کدلاگ، می‌توانید پروژه خود را به طرح قیمت‌گذاری بدون هزینه (Spark) کاهش دهید .

یک برنامه وب Firebase به پروژه اضافه کنید

1. روی آیکون وب کلیک کنید برای ایجاد یک برنامه وب جدید Firebase.
2. برنامه را با نام مستعار Friendly Chat ثبت کنید. کادر کنار Also set up Firebase Hosting for this app را علامت نزنید. روی Register app کلیک کنید.
3. در مرحله بعد، یک شیء پیکربندی مشاهده خواهید کرد. در حال حاضر به آن نیازی ندارید. برای ادامه، روی ادامه کلیک کنید.

راه اندازی محصولات فایربیس

برنامه‌ای که قرار است بسازید از محصولات Firebase که برای برنامه‌های وب در دسترس هستند استفاده می‌کند:

• احراز هویت فایربیس برای اینکه به راحتی به کاربران خود اجازه دهید وارد برنامه شما شوند.
• Cloud Firestore برای ذخیره داده‌های ساختاریافته روی ابر و دریافت اعلان فوری هنگام تغییر داده‌ها.
• فضای ذخیره‌سازی ابری برای فایربیس جهت ذخیره فایل‌ها در فضای ابری.
• میزبانی برنامه Firebase برای ساخت، میزبانی و ارائه برنامه.
• پیام‌رسان ابری فایربیس برای ارسال اعلان‌های فوری و نمایش اعلان‌های پاپ‌آپ مرورگر.
• نظارت بر عملکرد Firebase برای جمع‌آوری داده‌های عملکرد کاربر برای برنامه شما.

برخی از این محصولات به پیکربندی خاصی نیاز دارند یا باید با استفاده از کنسول Firebase فعال شوند.

تنظیم احراز هویت

برای اینکه کاربران بتوانند با حساب‌های گوگل خود وارد برنامه وب شوند، از روش ورود به سیستم گوگل استفاده خواهید کرد.

1. در کنسول Firebase، به بخش Authentication بروید.
2. روی شروع به کار کلیک کنید.
3. در ستون ارائه دهندگان اضافی ، روی Google > Enable کلیک کنید.
4. در کادر متن Public-facing name for project ، یک نام به یاد ماندنی مانند My Next.js app وارد کنید.
5. از منوی کشویی ایمیل پشتیبانی برای پروژه ، آدرس ایمیل خود را انتخاب کنید.
6. روی ذخیره کلیک کنید.

راه اندازی کلود فایر استور

برنامه وب از Cloud Firestore برای ذخیره پیام‌های چت و دریافت پیام‌های چت جدید استفاده می‌کند.

در اینجا نحوه تنظیم Cloud Firestore در پروژه Firebase شما آورده شده است:

1. در پنل سمت چپ کنسول Firebase، گزینه Build را باز کرده و سپس Firestore database را انتخاب کنید.
2. روی ایجاد پایگاه داده کلیک کنید.
3. شناسه پایگاه داده را روی (default) تنظیم کنید.
4. مکانی را برای پایگاه داده خود انتخاب کنید، سپس روی Next کلیک کنید.
   برای یک اپلیکیشن واقعی، شما می‌خواهید مکانی را انتخاب کنید که به کاربرانتان نزدیک باشد.
5. روی شروع در حالت آزمایشی کلیک کنید. سلب مسئولیت مربوط به قوانین امنیتی را مطالعه کنید.
   بعداً در این آزمایشگاه کد، قوانین امنیتی را برای ایمن‌سازی داده‌های خود اضافه خواهید کرد. بدون اضافه کردن قوانین امنیتی برای پایگاه داده خود، برنامه را به صورت عمومی توزیع یا افشا نکنید .
6. روی ایجاد کلیک کنید.

راه‌اندازی فضای ذخیره‌سازی ابری برای فایربیس

این برنامه وب از فضای ذخیره‌سازی ابری برای فایربیس جهت ذخیره، آپلود و اشتراک‌گذاری تصاویر استفاده می‌کند.

در اینجا نحوه تنظیم فضای ذخیره‌سازی ابری برای فایربیس در پروژه فایربیس شما آورده شده است:

1. در پنل سمت چپ کنسول Firebase، گزینه Build را باز کرده و سپس Storage را انتخاب کنید.
2. روی شروع به کار کلیک کنید.
3. مکانی را برای سطل ذخیره‌سازی پیش‌فرض خود انتخاب کنید.
   کاربران در US-WEST1 ، US-CENTRAL1 و US-EAST1 می‌توانند از ردیف «همیشه رایگان» برای Google Cloud Storage بهره‌مند شوند. کاربران در سایر مناطق ، از قیمت‌ها و میزان استفاده از Google Cloud Storage پیروی می‌کنند.
4. روی شروع در حالت آزمایشی کلیک کنید. سلب مسئولیت مربوط به قوانین امنیتی را مطالعه کنید.
   بعداً در این آزمایشگاه کد، قوانین امنیتی را برای ایمن‌سازی داده‌های خود اضافه خواهید کرد. بدون اضافه کردن قوانین امنیتی برای مخزن ذخیره‌سازی خود، برنامه را به صورت عمومی توزیع یا در معرض نمایش قرار ندهید .
5. روی ایجاد کلیک کنید.

۴. رابط خط فرمان Firebase را نصب کنید

رابط خط فرمان (CLI) فایربیس به شما امکان می‌دهد از Firebase Hosting برای ارائه برنامه وب خود به صورت محلی و همچنین استقرار برنامه وب خود در پروژه فایربیس خود استفاده کنید.

توجه : برای نصب CLI، باید npm را نصب کنید که معمولاً با Node.js همراه است.

1. با اجرای دستور npm زیر، رابط خط فرمان (CLI) را نصب کنید:

npm -g install firebase-tools@latest

کار نمی‌کند؟ شاید لازم باشد مجوزهای npm را تغییر دهید.

2. با اجرای دستور زیر، تأیید کنید که CLI به درستی نصب شده است:

firebase --version

مطمئن شوید که نسخه Firebase CLI نسخه ۱۳.۹.۰ یا بالاتر است.

3. با اجرای دستور زیر، Firebase CLI را مجاز کنید:

firebase login

شما قالب برنامه وب را طوری تنظیم کرده‌اید که پیکربندی برنامه‌تان را برای Firebase Hosting از دایرکتوری محلی برنامه‌تان (مخزنی که قبلاً در codelab کلون کرده‌اید) دریافت کند. اما برای دریافت پیکربندی، باید برنامه‌تان را با پروژه Firebase خود مرتبط کنید.

4. مطمئن شوید که خط فرمان شما به دایرکتوری محلی angularfire-start برنامه‌تان دسترسی دارد.
5. با اجرای دستور زیر، برنامه خود را با پروژه Firebase خود مرتبط کنید:

firebase use --add

6. وقتی از شما خواسته شد، شناسه پروژه خود را انتخاب کنید، سپس به پروژه Firebase خود یک نام مستعار بدهید.

اگر چندین محیط (محیط تولید، محیط مرحله‌بندی و غیره) دارید، یک نام مستعار مفید است. با این حال، برای این آزمایشگاه کد، بیایید فقط از نام مستعار default استفاده کنیم.

7. دستورالعمل‌های باقی‌مانده را در خط فرمان خود دنبال کنید.

۵. نصب انگولار فایر

قبل از اجرای پروژه، مطمئن شوید که Angular CLI و AngularFire را تنظیم کرده‌اید.

1. در یک کنسول، دستور زیر را اجرا کنید:

npm install -g @angular/cli

2. سپس، در کنسولی از دایرکتوری angularfire-start ، دستور Angular CLI زیر را اجرا کنید:

ng add @angular/fire

این دستور تمام وابستگی‌های لازم برای پروژه شما را نصب خواهد کرد.

3. وقتی از شما خواسته شد، تیک گزینه ng deploy -- hosting با کلید فاصله بردارید. ویژگی‌های زیر را با کلیدهای جهت‌نما و کلید فاصله انتخاب کنید:
   • Authentication
   • Firestore
   • Cloud Messaging
   • Cloud Storage
4. enter بزنید و بقیه مراحل را دنبال کنید.
5. یک کامیت با پیام کامیت "نصب AngularFire" ایجاد کنید و آن را به مخزن گیت‌هاب خود ارسال کنید.

۶. یک بک‌اند میزبانی برنامه ایجاد کنید

در این بخش، یک بک‌اند میزبانی برنامه (App Hosting backend) راه‌اندازی خواهید کرد تا بتوانید یک شاخه (branch) را در مخزن گیت خود زیر نظر داشته باشید.

توجه : میزبانی برنامه Firebase در پیش‌نمایش عمومی است .

در پایان این بخش، شما یک بک‌اند میزبانی برنامه (App Hosting backend) متصل به مخزن خود در گیت‌هاب خواهید داشت که هر زمان که یک کامیت جدید به شاخه main خود ارسال کنید، به‌طور خودکار نسخه جدیدی از برنامه شما را بازسازی و منتشر می‌کند.

1. به صفحه میزبانی برنامه در کنسول Firebase بروید:

2. برای شروع فرآیند ایجاد backend، روی «شروع» کلیک کنید. backend خود را به صورت زیر پیکربندی کنید:
3. برای اتصال مخزن GitHub که قبلاً ایجاد کرده‌اید، دستورالعمل‌های مرحله اول را دنبال کنید.
4. تنظیمات استقرار را تنظیم کنید:
   1. دایرکتوری ریشه را به صورت / نگه دارید
   2. شاخه زنده را روی main تنظیم کنید
   3. فعال کردن انتشار خودکار
5. نام backend خود را friendlychat-codelab قرار دهید.
6. در بخش «ایجاد یا مرتبط کردن یک برنامه وب Firebase»، برنامه وب مورد نظر خود را که قبلاً پیکربندی کرده‌اید، از منوی کشویی «انتخاب یک برنامه وب Firebase موجود» انتخاب کنید.
7. روی «پایان و استقرار» کلیک کنید. پس از لحظه‌ای، به صفحه جدیدی منتقل می‌شوید که در آن می‌توانید وضعیت بک‌اند میزبانی برنامه جدید خود را مشاهده کنید!

   توجه : می‌توانید سرویس‌های اصلی Google Cloud را برای بخش میزبانی برنامه (App Hosting backend) خود با دنبال کردن لینک‌ها در کنسول رصد کنید. برای اطلاعات بیشتر به بخش مشاهده گزارش‌ها و معیارها مراجعه کنید.

8. پس از اتمام مراحل نصب، روی دامنه رایگان خود در زیر «دامنه‌ها» کلیک کنید. به دلیل انتشار DNS، ممکن است چند دقیقه طول بکشد تا شروع به کار کند.

شما برنامه وب اولیه را مستقر کرده‌اید! هر بار که یک commit جدید را به شاخه main مخزن GitHub خود ارسال می‌کنید، خواهید دید که یک build و rollout جدید در کنسول Firebase آغاز می‌شود و سایت شما پس از اتمام rollout به طور خودکار به‌روزرسانی می‌شود.

شما باید صفحه ورود به سیستم برنامه FriendlyChat خود را ببینید، که (هنوز!) کار نمی‌کند.

این برنامه در حال حاضر نمی‌تواند کاری انجام دهد، اما با کمک شما، به زودی این کار را خواهد کرد!

حالا بیایید یک برنامه چت بلادرنگ بسازیم.

۷. وارد کردن و پیکربندی فایربیس

پیکربندی فایربیس

شما باید Firebase SDK را پیکربندی کنید تا به آن بگویید از کدام پروژه Firebase استفاده می‌کنید.

1. به تنظیمات پروژه خود در کنسول Firebase بروید
2. در کارت «برنامه‌های شما»، نام مستعار برنامه‌ای را که برای آن به شیء پیکربندی نیاز دارید، انتخاب کنید.
3. از پنل قطعه کد Firebase SDK، گزینه «Config» را انتخاب کنید.

متوجه خواهید شد که یک فایل محیطی /angularfire-start/src/environments/environment.ts برای شما ایجاد شده است.

4. قطعه کد شیء پیکربندی را کپی کنید، سپس آن را به angularfire-start/src/firebase-config.js اضافه کنید.

environment.ts

export const environment = {
  firebase: {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.firebasestorage.app",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
  },
};

کد بالا باید شامل شیء پیکربندی Firebase مخصوص برنامه شما باشد، نه مقادیر placeholder ما!

مشاهده تنظیمات AngularFire

متوجه خواهید شد که ویژگی‌هایی که در کنسول انتخاب کرده‌اید، به‌طور خودکار در فایل /angularfire-start/src/app/app.config.ts اضافه شده‌اند. این به برنامه شما اجازه می‌دهد تا از ویژگی‌ها و قابلیت‌های Firebase استفاده کند.

۸. ورود کاربر را تنظیم کنید

اکنون AngularFire باید آماده استفاده باشد زیرا در app.config.ts وارد و مقداردهی اولیه شده است. اکنون می‌خواهید ورود کاربر را با استفاده از احراز هویت Firebase پیاده‌سازی کنید.

افزودن دامنه مجاز

احراز هویت فایربیس فقط اجازه ورود از طریق فهرست مشخصی از دامنه‌هایی که شما کنترل می‌کنید را می‌دهد. دامنه رایگان App Hosting خود را به فهرست دامنه‌ها اضافه کنید:

1. به میزبانی برنامه بروید.
2. دامنه‌ی بک‌اند خود را کپی کنید.
3. به تنظیمات احراز هویت بروید.
4. برگه دامنه‌های مجاز (Authorized domains) را انتخاب کنید.
5. روی افزودن دامنه کلیک کنید و دامنه‌ی مربوط به بک‌اند میزبانی برنامه‌ی خود را جای‌گذاری کنید.

کاربران خود را با ورود به سیستم گوگل تأیید کنید

در برنامه، وقتی کاربر روی دکمه ورود با گوگل کلیک می‌کند، تابع login فعال می‌شود. برای این آزمایشگاه کد، می‌خواهید به فایربیس اجازه دهید از گوگل به عنوان ارائه‌دهنده هویت استفاده کند. برای این کار از یک پنجره بازشو استفاده خواهید کرد، اما چندین روش دیگر از فایربیس در دسترس است.

1. در زیرشاخه /src/app/services/ ، chat.service.ts را باز کنید.
2. تابع login پیدا کنید.
3. کل تابع را با کد زیر جایگزین کنید.

chat.service.ts

// Signs-in Friendly Chat.
login() {
    signInWithPopup(this.auth, this.provider).then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
        this.router.navigate(['/', 'chat']);
        return credential;
    })
}

تابع logout زمانی فعال می‌شود که کاربر روی دکمه خروج کلیک کند.

1. به فایل src/app/services/chat.service.ts برگردید.
2. تابع logout را پیدا کنید.
3. کل تابع را با کد زیر جایگزین کنید.

chat.service.ts

// Logout of Friendly Chat.
logout() {
    signOut(this.auth).then(() => {
        this.router.navigate(['/', 'login'])
        console.log('signed out');
    }).catch((error) => {
        console.log('sign out error: ' + error);
    })
}

پیگیری وضعیت احراز هویت

برای به‌روزرسانی رابط کاربری (UI) خود بر این اساس، به روشی نیاز دارید تا بررسی کنید که آیا کاربر وارد سیستم شده است یا خیر. AngularFire تابعی را برای دریافت یک observable ارائه می‌دهد که هر بار که وضعیت احراز هویت تغییر می‌کند، به‌روزرسانی می‌شود. این قبلاً پیاده‌سازی شده است، اما ارزش بررسی دارد.

1. به فایل src/app/services/chat.service.ts برگردید.
2. مقدار انتساب متغیر user$ را پیدا کنید.

chat.service.ts

// observable that is updated when the auth state changes
user$ = user(this.auth);

کد بالا تابع user از AngularFire را فراخوانی می‌کند که یک کاربر قابل مشاهده را برمی‌گرداند. این تابع هر بار که وضعیت احراز هویت تغییر کند (وقتی کاربر وارد سیستم می‌شود یا از سیستم خارج می‌شود) فعال می‌شود. کامپوننت‌های قالب‌های Angular در FriendlyChat از این قابل مشاهده برای به‌روزرسانی رابط کاربری جهت هدایت مجدد، نمایش کاربر در نوار ناوبری هدر و غیره استفاده می‌کنند.

ورود به برنامه را تست کنید

1. یک کامیت با پیام «افزودن احراز هویت گوگل» ایجاد کنید و آن را به مخزن گیت‌هاب خود ارسال کنید.
2. صفحه App Hosting را در کنسول Firebase باز کنید و منتظر بمانید تا نصب جدید شما تکمیل شود.
3. در برنامه وب، صفحه را رفرش کنید و با استفاده از دکمه ورود و حساب گوگل خود وارد برنامه شوید. اگر پیام خطایی با عنوان auth/operation-not-allowed مشاهده کردید، مطمئن شوید که Google Sign-in را به عنوان ارائه دهنده احراز هویت در کنسول Firebase فعال کرده‌اید.
4. پس از ورود، تصویر پروفایل و نام کاربری شما نمایش داده می‌شود:

۹. ارسال پیام به Cloud Firestore

در این بخش، مقداری داده در Cloud Firestore خواهید نوشت تا بتوانید رابط کاربری برنامه را پر کنید. این کار را می‌توان به صورت دستی با کنسول Firebase انجام داد، اما برای نشان دادن یک نوشتن اولیه در Cloud Firestore، این کار را در خود برنامه انجام خواهید داد.

مدل داده

داده‌های Cloud Firestore به مجموعه‌ها، اسناد، فیلدها و زیرمجموعه‌ها تقسیم می‌شوند. شما هر پیام چت را به عنوان یک سند در یک مجموعه سطح بالا به نام messages ذخیره خواهید کرد.

نکته : برای کسب اطلاعات بیشتر در مورد مدل داده Cloud Firestore، در مورد اسناد و مجموعه‌ها در مستندات مطالعه کنید.

اضافه کردن پیام به Cloud Firestore

برای ذخیره پیام‌های چتی که توسط کاربران نوشته شده‌اند، از Cloud Firestore استفاده خواهید کرد.

در این بخش، قابلیتی را اضافه خواهید کرد که کاربران بتوانند پیام‌های جدیدی را در پایگاه داده شما بنویسند. کلیک کاربر روی دکمه ارسال (SEND) ، قطعه کد زیر را فعال می‌کند. این قطعه کد، یک شیء پیام با محتوای فیلدهای پیام را به نمونه Cloud Firestore شما در مجموعه messages اضافه می‌کند. متد add() یک سند جدید با یک شناسه (ID) که به طور خودکار تولید می‌شود، به مجموعه اضافه می‌کند.

1. به فایل src/app/services/chat.service.ts برگردید.
2. تابع addMessage را پیدا کنید.
3. کل تابع را با کد زیر جایگزین کنید.

chat.service.ts

// Adds a text or image message to Cloud Firestore.
addMessage = async (
  textMessage: string | null,
  imageUrl: string | null,
): Promise<void | DocumentReference<DocumentData>> => {
  // ignore empty messages
  if (!textMessage && !imageUrl) {
    console.log(
      "addMessage was called without a message",
      textMessage,
      imageUrl,
    );
    return;
  }

  if (this.currentUser === null) {
    console.log("addMessage requires a signed-in user");
    return;
  }

  const message: ChatMessage = {
    name: this.currentUser.displayName,
    profilePicUrl: this.currentUser.photoURL,
    timestamp: serverTimestamp(),
    uid: this.currentUser?.uid,
  };

  textMessage && (message.text = textMessage);
  imageUrl && (message.imageUrl = imageUrl);

  try {
    const newMessageRef = await addDoc(
      collection(this.firestore, "messages"),
      message,
    );
    return newMessageRef;
  } catch (error) {
    console.error("Error writing new message to Firebase Database", error);
    return;
  }
};

تست ارسال پیام

1. یک کامیت با پیام «ارسال چت‌های جدید به Firestore» ایجاد کنید و آن را به مخزن گیت‌هاب خود ارسال کنید.
2. صفحه App Hosting را در کنسول Firebase باز کنید و منتظر بمانید تا نصب جدید شما تکمیل شود.
3. رفرش کردن FriendlyChat. پس از ورود به سیستم، پیامی مانند "سلام!" وارد کنید و سپس روی ارسال کلیک کنید. این کار پیام را در Cloud Firestore ثبت می‌کند. با این حال، هنوز داده‌ها را در برنامه وب واقعی خود مشاهده نخواهید کرد زیرا هنوز نیاز به پیاده‌سازی بازیابی داده‌ها دارید (بخش بعدی codelab).
4. می‌توانید پیام تازه اضافه شده را در کنسول Firebase خود مشاهده کنید. رابط کاربری مجموعه شبیه‌ساز خود را باز کنید. در بخش Build، روی Firestore Database کلیک کنید (یا اینجا کلیک کنید تا مجموعه پیام‌ها را با پیام تازه اضافه شده خود مشاهده کنید):

۱۰. خواندن پیام‌ها

همگام‌سازی پیام‌ها

برای خواندن پیام‌ها در برنامه، باید یک observable اضافه کنید که هنگام تغییر داده‌ها فعال شود و سپس یک عنصر UI ایجاد کنید که پیام‌های جدید را نشان دهد.

شما کدی اضافه خواهید کرد که پیام‌های جدید اضافه شده از برنامه را دریافت می‌کند. در این کد، شما تصویر لحظه‌ای از مجموعه messages را بازیابی خواهید کرد. شما فقط ۱۲ پیام آخر چت را نمایش خواهید داد تا از نمایش تاریخچه بسیار طولانی هنگام بارگیری جلوگیری شود.

1. به فایل src/app/services/chat.service.ts برگردید.
2. تابع loadMessages را پیدا کنید.
3. کل تابع را با کد زیر جایگزین کنید.

chat.service.ts

// Loads chat message history and listens for upcoming ones.
loadMessages = () => {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(this.firestore, 'messages'), orderBy('timestamp', 'desc'), limit(12));
  // Start listening to the query.
  return collectionData(recentMessagesQuery);
}

برای گوش دادن به پیام‌های موجود در پایگاه داده، با استفاده از تابع collection ، یک کوئری روی یک مجموعه ایجاد می‌کنید تا مشخص کنید داده‌هایی که می‌خواهید به آنها گوش دهید در کدام مجموعه قرار دارند. در کد بالا، شما به تغییرات درون مجموعه messages گوش می‌دهید، جایی که پیام‌های چت ذخیره می‌شوند. همچنین با گوش دادن به ۱۲ پیام آخر با استفاده از limit(12) و مرتب کردن پیام‌ها بر اساس تاریخ با استفاده از orderBy('timestamp', 'desc') محدودیتی اعمال می‌کنید تا ۱۲ پیام جدید را دریافت کنید.

تابع collectionData در پشت صحنه از snapshots استفاده می‌کند. تابع callback زمانی فعال می‌شود که هرگونه تغییری در اسناد مطابق با query ایجاد شود. این می‌تواند زمانی باشد که پیامی حذف، اصلاح یا اضافه شود. می‌توانید اطلاعات بیشتر در این مورد را در مستندات Cloud Firestore بخوانید.

تست همگام‌سازی پیام‌ها

1. یک کامیت با پیام کامیت «نمایش چت‌های جدید در رابط کاربری» ایجاد کنید و آن را به مخزن گیت‌هاب خود ارسال کنید.
2. صفحه App Hosting را در کنسول Firebase باز کنید و منتظر بمانید تا نصب جدید شما تکمیل شود.
3. FriendlyChat را رفرش کنید. پیام‌هایی که قبلاً در پایگاه داده ایجاد کرده‌اید باید در رابط کاربری FriendlyChat (به پایین مراجعه کنید) نمایش داده شوند. می‌توانید پیام‌های جدید بنویسید؛ آن‌ها باید فوراً ظاهر شوند.
4. (اختیاری) می‌توانید مستقیماً در بخش Firestore از مجموعه Emulator، پیام‌های جدید را به صورت دستی حذف، اصلاح یا اضافه کنید؛ هرگونه تغییر باید در رابط کاربری منعکس شود.

تبریک می‌گویم! شما در حال خواندن اسناد Cloud Firestore در برنامه خود هستید!

۱۱. ویژگی‌های هوش مصنوعی را اضافه کنید

شما از هوش مصنوعی گوگل برای افزودن ویژگی‌های کمکی مفید به برنامه چت استفاده خواهید کرد.

دریافت کلید API گوگل هوش مصنوعی

1. به Google AI Studio بروید و روی ایجاد کلید API کلیک کنید
2. پروژه Firebase که برای این codelab ایجاد کرده‌اید را انتخاب کنید. اعلان مربوط به یک پروژه Google Cloud است، اما هر پروژه Firebase یک پروژه Google Cloud نیز هست.
3. روی ایجاد کلید API در پروژه موجود کلیک کنید
4. کلید API حاصل را کپی کنید

نصب یک افزونه

این افزونه یک تابع ابری را مستقر می‌کند که هر بار که یک سند جدید به مجموعه messages در Firestore اضافه می‌شود، فعال می‌شود. این تابع Gemini را فراخوانی می‌کند و پاسخ آن را در فیلد response در سند می‌نویسد.

1. در صفحه افزونه Build Chatbot with the Gemini API، روی نصب در کنسول Firebase کلیک کنید.
2. دستورالعمل‌ها را دنبال کنید. پس از رسیدن به مرحله پیکربندی افزونه ، مقادیر پارامترهای زیر را تنظیم کنید:
   • ارائه دهنده API Gemini: Google AI
   • کلید API گوگل هوش مصنوعی: کلیدی را که قبلاً ایجاد کرده‌اید، جای‌گذاری کنید و روی «ایجاد رمز» کلیک کنید.
   • مسیر جمع‌آوری اطلاعات در فایراستور: messages
   • فیلد درخواست: text
   • فیلد پاسخ: response
   • فیلد سفارش: timestamp
   • متن: Keep your answers short, informal, and helpful. Use emojis when possible.
3. روی نصب افزونه کلیک کنید
4. صبر کنید تا نصب افزونه تمام شود

ویژگی هوش مصنوعی را آزمایش کنید

FriendlyChat از قبل کدی برای خواندن پاسخ‌ها از افزونه هوش مصنوعی دارد. تنها کاری که باید انجام دهید این است که یک پیام چت جدید ارسال کنید تا آن را امتحان کنید!

1. چت دوستانه (FriendlyChat) را باز کنید و یک پیام ارسال کنید.
2. پس از لحظه‌ای، باید پاسخی را در کنار پیام خود ببینید که در انتها یک یادداشت ✨ ai generated دارد تا مشخص شود که با هوش مصنوعی مولد ایجاد شده است، نه یک کاربر واقعی.

۱۲. ارسال تصاویر

اکنون ویژگی‌ای اضافه خواهید کرد که تصاویر را به اشتراک می‌گذارد.

در حالی که Cloud Firestore برای ذخیره داده‌های ساختاریافته مناسب است، Cloud Storage برای ذخیره فایل‌ها مناسب‌تر است. Cloud Storage برای Firebase یک سرویس ذخیره‌سازی فایل/حباب است و شما از آن برای ذخیره هر تصویری که کاربر با استفاده از برنامه ما به اشتراک می‌گذارد، استفاده خواهید کرد.

ذخیره تصاویر در فضای ابری

برای این آزمایشگاه کد، شما قبلاً یک دکمه اضافه کرده‌اید که یک کادر محاوره‌ای انتخاب فایل را فعال می‌کند. پس از انتخاب یک فایل، تابع saveImageMessage فراخوانی می‌شود و می‌توانید به فایل انتخاب شده ارجاع دهید. تابع saveImageMessage موارد زیر را انجام می‌دهد:

1. یک پیام چت "جایگزین" در فید چت ایجاد می‌کند، به طوری که کاربران هنگام بارگذاری تصویر، انیمیشن "بارگذاری" را مشاهده می‌کنند.
2. فایل تصویر را در فضای ذخیره‌سازی ابری به این مسیر آپلود می‌کند: /<uid>/<file_name>
3. یک URL قابل خواندن عمومی برای فایل تصویر تولید می‌کند.
4. پیام چت را با آدرس اینترنتی فایل تصویر تازه آپلود شده به جای تصویر بارگذاری موقت، به‌روزرسانی می‌کند.

اکنون قابلیت ارسال تصویر را اضافه خواهید کرد:

1. به فایل src/chat.service.ts برگردید.
2. تابع saveImageMessage را پیدا کنید.
3. کل تابع را با کد زیر جایگزین کنید.

چت.سرویس.ts

// Saves a new message containing an image in Firestore.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - Add a message with a loading icon that will get updated with the shared image.
    const messageRef = await this.addMessage(null, this.LOADING_IMAGE_URL);

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${this.auth.currentUser?.uid}/${file.name}`;
    const newImageRef = ref(this.storage, filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);

    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    messageRef ?
    await updateDoc(messageRef, {
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    }): null;
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

تست ارسال تصاویر

1. یک کامیت با پیام «افزودن قابلیت ارسال تصاویر» ایجاد کنید و آن را به مخزن گیت‌هاب خود ارسال کنید.
2. صفحه App Hosting را در کنسول Firebase باز کنید و منتظر بمانید تا نصب جدید شما تکمیل شود.
3. رفرش کردن چت دوستانه. پس از ورود، روی دکمه آپلود تصویر در پایین سمت چپ کلیک کنید. و با استفاده از انتخابگر فایل، یک فایل تصویری انتخاب کنید. اگر به دنبال یک تصویر هستید، می‌توانید از این تصویر زیبا از یک فنجان قهوه استفاده کنید.
4. یک پیام جدید باید در رابط کاربری برنامه با تصویر انتخابی شما ظاهر شود:

اگر سعی کنید تصویری را بدون ورود به سیستم اضافه کنید، باید خطایی را مشاهده کنید که به شما می‌گوید برای افزودن تصاویر باید وارد سیستم شوید.

۱۳. نمایش اعلان‌ها

اکنون پشتیبانی از اعلان‌های مرورگر را اضافه خواهید کرد. برنامه هنگام ارسال پیام‌های جدید در چت، به کاربران اطلاع می‌دهد. پیام‌رسان ابری فایربیس (FCM) یک راهکار پیام‌رسان چند پلتفرمی است که به شما امکان می‌دهد پیام‌ها و اعلان‌ها را به طور قابل اعتمادی ارسال کنید.

سرویس ورکر FCM را اضافه کنید

برنامه وب به یک سرویس ورکر نیاز دارد که اعلان‌های وب را دریافت و نمایش دهد.

ارائه دهنده پیام رسانی باید هنگام اضافه شدن AngularFire از قبل تنظیم شده باشد، مطمئن شوید که کد زیر در بخش import های فایل /angularfire-start/src/app/app.config.ts وجود دارد.

provideMessaging(() => {
    return getMessaging();
}),

app/app.config.ts

سرویس ورکر فقط باید Firebase Cloud Messaging SDK را بارگذاری و مقداردهی اولیه کند، که وظیفه نمایش اعلان‌ها را بر عهده خواهد داشت.

توکن‌های دستگاه FCM را دریافت کنید

وقتی اعلان‌ها در یک دستگاه یا مرورگر فعال می‌شوند، به شما یک توکن دستگاه داده می‌شود. این توکن دستگاه همان چیزی است که شما برای ارسال اعلان به یک دستگاه یا مرورگر خاص استفاده می‌کنید.

وقتی کاربر وارد سیستم می‌شود، شما تابع saveMessagingDeviceToken را فراخوانی می‌کنید. در اینجا توکن دستگاه FCM را از مرورگر دریافت کرده و آن را در Cloud Firestore ذخیره می‌کنید.

chat.service.ts

2. تابع saveMessagingDeviceToken را پیدا کنید.
3. کل تابع را با کد زیر جایگزین کنید.

chat.service.ts

// Saves the messaging device token to Cloud Firestore.
saveMessagingDeviceToken= async () => {
    try {
      const currentToken = await getToken(this.messaging);
      if (currentToken) {
        console.log('Got FCM device token:', currentToken);
        // Saving the Device Token to Cloud Firestore.
        const tokenRef = doc(this.firestore, 'fcmTokens', currentToken);
        await setDoc(tokenRef, { uid: this.auth.currentUser?.uid });

        // This will fire when a message is received while the app is in the foreground.
        // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
        onMessage(this.messaging, (message) => {
          console.log(
            'New foreground notification from Firebase Messaging!',
            message.notification
          );
        });
      } else {
        // Need to request permissions to show notifications.
        this.requestNotificationsPermissions();
      }
    } catch(error) {
      console.error('Unable to get messaging token.', error);
    };
}

با این حال، این کد در ابتدا کار نخواهد کرد. برای اینکه برنامه شما بتواند توکن دستگاه را بازیابی کند، کاربر باید به برنامه شما اجازه نمایش اعلان‌ها را بدهد (مرحله بعدی codelab).

درخواست مجوز برای نمایش اعلان‌ها

وقتی کاربر هنوز به برنامه شما اجازه نمایش اعلان‌ها را نداده باشد، به شما توکن دستگاه داده نمی‌شود. در این حالت، شما متد requestPermission() را فراخوانی می‌کنید که یک کادر محاوره‌ای مرورگر را نمایش می‌دهد و این مجوز را درخواست می‌کند ( در مرورگرهای پشتیبانی شده ).

1. به فایل src/app/services/chat.service.ts برگردید.
2. تابع requestNotificationsPermissions را پیدا کنید.
3. کل تابع را با کد زیر جایگزین کنید.

chat.service.ts

// Requests permissions to show notifications.
requestNotificationsPermissions = async () => {
    console.log('Requesting notifications permission...');
    const permission = await Notification.requestPermission();

    if (permission === 'granted') {
      console.log('Notification permission granted.');
      // Notification permission granted.
      await this.saveMessagingDeviceToken();
    } else {
      console.log('Unable to get permission to notify.');
    }
}

توکن دستگاه خود را دریافت کنید

1. یک کامیت با پیام «افزودن قابلیت ارسال تصاویر» ایجاد کنید و آن را به مخزن گیت‌هاب خود ارسال کنید.
2. صفحه App Hosting را در کنسول Firebase باز کنید و منتظر بمانید تا نصب جدید شما تکمیل شود.
3. رفرش کردن FriendlyChat. پس از ورود به سیستم، پنجره‌ی مجوز اعلان‌ها باید ظاهر شود:
4. روی اجازه دادن کلیک کنید.
5. کنسول جاوا اسکریپت مرورگر خود را باز کنید. باید پیام زیر را مشاهده کنید: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
6. توکن دستگاه خود را کپی کنید. برای مرحله بعدی codelab به آن نیاز خواهید داشت.

ارسال اعلان به دستگاه شما

حالا که توکن دستگاه خود را دارید، می‌توانید یک اعلان ارسال کنید.

1. تب Cloud Messaging را در کنسول Firebase باز کنید.
2. روی «اعلان جدید» کلیک کنید
3. عنوان اعلان و متن اعلان را وارد کنید.
4. در سمت راست صفحه، روی «ارسال پیام آزمایشی» کلیک کنید
5. توکن دستگاهی که از کنسول جاوا اسکریپت مرورگر خود کپی کرده‌اید را وارد کنید، سپس روی علامت جمع ("+") کلیک کنید.
6. روی «آزمون» کلیک کنید

اگر برنامه شما در پیش‌زمینه باشد، اعلان را در کنسول جاوا اسکریپت مشاهده خواهید کرد.

اگر برنامه شما در پس‌زمینه باشد، باید یک اعلان در مرورگر شما ظاهر شود، مانند این مثال:

در ادامه‌ی این دوره، در یک آزمایشگاه کد با عنوان Firebase SDK for Cloud Functions ، خواهید دید که چگونه می‌توانید ارسال اعلان‌ها از بک‌اند را برای هر پیام جدید ارسال شده در برنامه‌ی چت، خودکار کنید.

۱۴. قوانین امنیتی کلود فایراستور

مشاهده قوانین امنیتی پایگاه داده

Cloud Firestore از یک زبان قواعد خاص برای تعریف حقوق دسترسی، امنیت و اعتبارسنجی داده‌ها استفاده می‌کند.

هنگام راه‌اندازی پروژه Firebase در ابتدای این آزمایشگاه کد، شما تصمیم گرفتید از قوانین امنیتی پیش‌فرض "حالت آزمایشی" استفاده کنید تا دسترسی به پایگاه داده را محدود نکنید. در کنسول Firebase ، در تب Rules در بخش Database ، می‌توانید این قوانین را مشاهده و تغییر دهید.

در حال حاضر، باید قوانین پیش‌فرض را ببینید که دسترسی به پایگاه داده را محدود نمی‌کنند. این بدان معناست که هر کاربری می‌تواند هر مجموعه موجود در پایگاه داده شما را بخواند و بنویسد.

شما با استفاده از قوانین زیر، قوانین را برای محدود کردن موارد به‌روزرسانی خواهید کرد:

قوانین فروشگاه آتش‌نشانی

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

متغیر قانون request.auth یک متغیر ویژه است که حاوی اطلاعاتی در مورد یک کاربر احراز هویت شده است. متغیر قانون request.resource به داده‌های جدیدی که نوشته می‌شوند اشاره می‌کند. اطلاعات بیشتر را می‌توانید در مستندات . بیابید.

قوانین امنیتی باید به طور خودکار در مجموعه شبیه‌ساز شما به‌روزرسانی شوند.

مشاهده قوانین امنیتی فضای ذخیره‌سازی ابری

فضای ذخیره‌سازی ابری برای فایربیس از یک زبان قواعد خاص برای تعریف حقوق دسترسی، امنیت و اعتبارسنجی داده‌ها استفاده می‌کند.

هنگام راه‌اندازی پروژه Firebase در ابتدای این codelab، شما تصمیم گرفتید از قانون امنیتی پیش‌فرض Cloud Storage استفاده کنید که فقط به کاربران احراز هویت شده اجازه استفاده از Cloud Storage را می‌دهد. در کنسول Firebase ، در تب Rules بخش Storage ، می‌توانید قوانین را مشاهده و تغییر دهید. باید قانون پیش‌فرض را ببینید که به هر کاربر وارد شده اجازه می‌دهد هر فایلی را در storage bucket شما بخواند و بنویسد.

شما قوانین را برای انجام موارد زیر به‌روزرسانی خواهید کرد:

• به هر کاربر اجازه دهید فقط در پوشه‌های خاص خود بنویسد
• به هر کسی اجازه دهید از فضای ذخیره‌سازی ابری بخواند
• مطمئن شوید که فایل‌های آپلود شده، تصویر هستند.
• حجم تصاویر قابل آپلود را حداکثر ۵ مگابایت محدود کنید

این را می‌توان با استفاده از قوانین زیر پیاده‌سازی کرد:

قوانین ذخیره‌سازی

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

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

متغیر قانون request.auth یک متغیر ویژه است که حاوی اطلاعاتی در مورد یک کاربر احراز هویت شده است. متغیر قانون request.resource حاوی اطلاعاتی در مورد فایل آپلود شده است. اطلاعات بیشتر را می‌توانید در مستندات . بیابید.

۱۵. تبریک می‌گویم!

شما از Firebase برای ساخت یک برنامه وب چت بلادرنگ استفاده کرده‌اید!

آنچه شما پوشش داده‌اید

• میزبانی برنامه فایربیس
• احراز هویت فایربیس
• فروشگاه ابری فایر استور
• کیت توسعه نرم‌افزار فایربیس برای ذخیره‌سازی ابری
• پیام‌رسانی ابری فایربیس
• نظارت بر عملکرد فایربیس

مراحل بعدی

برای یادگیری نحوه استفاده از Firebase SDK برای توابع ابری و افزودن برخی وظایف backend به برنامه چت خود، به بخش Cloud Functions for Firebase codelab مراجعه کنید. از آنجایی که پروژه Firebase خود را از قبل راه‌اندازی کرده‌اید، می‌توانید مستقیماً از مرحله 5 آن codelab شروع کنید.

می‌خواهید درباره Cloud Firestore بیشتر بدانید؟ شاید بخواهید درباره زیرمجموعه‌ها و تراکنش‌ها اطلاعات کسب کنید؟ برای مشاهده یک آزمایشگاه کد که به طور عمیق‌تری به Cloud Firestore می‌پردازد، به آزمایشگاه کد وب Cloud Firestore مراجعه کنید.

آیا می‌خواهید درباره نظارت بر عملکرد فایربیس برای وب بیشتر بدانید؟ برای مشاهده‌ی آزمایشگاه کدی که به طور عمیق‌تری به نظارت بر عملکرد فایربیس می‌پردازد، به آزمایشگاه کد نظارت بر عملکرد فایربیس برای وب مراجعه کنید.

بیشتر بدانید

• firebase.google.com

۱۶. [اختیاری] اجرا با بررسی برنامه

Firebase App Check به ایمن‌سازی سرویس‌های شما در برابر ترافیک ناخواسته و محافظت از backend شما در برابر سوءاستفاده کمک می‌کند. در این مرحله، اعتبارسنجی اعتبارنامه‌ها را اضافه کرده و با استفاده از App Check و reCAPTCHA Enterprise، کلاینت‌های غیرمجاز را مسدود خواهید کرد.

این مرحله به تکمیل مراحل قبلی بستگی دارد، مطمئن شوید که FriendlyChat به صورت محلی با شبیه‌سازها اجرا می‌شود یا با سرویس‌های Firebase مستقر شده است.

ابتدا، باید App Check و reCaptcha را فعال کنید.

فعال کردن reCaptcha Enterprise

1. در کنسول Cloud، در قسمت Security، گزینه reCaptcha Enterprise را پیدا کرده و انتخاب کنید.
2. سرویس را طبق دستورالعمل فعال کنید و روی ایجاد کلید (Create Key) کلیک کنید.
3. یک نام نمایشی مطابق درخواست وارد کنید و وب‌سایت را به عنوان نوع پلتفرم خود انتخاب کنید.
4. آدرس‌های اینترنتی (URL) مستقر شده خود را به لیست دامنه اضافه کنید و مطمئن شوید که گزینه "استفاده از چالش کادر انتخاب" علامت نخورده باشد.
5. روی ایجاد کلید (Create Key) کلیک کنید و کلید تولید شده را در جایی برای نگهداری امن ذخیره کنید. در ادامه‌ی این مرحله به آن نیاز خواهید داشت.

فعال کردن بررسی برنامه

1. در کنسول Firebase، بخش Build را در پنل سمت چپ پیدا کنید.
2. روی بررسی برنامه کلیک کنید، سپس روی برگه روش ورود کلیک کنید تا به بررسی برنامه بروید.
3. روی «ثبت نام» کلیک کنید و در صورت درخواست، کلید reCaptcha Enterprise خود را وارد کنید، سپس روی «ذخیره» کلیک کنید.
4. در نمای APIها، Storage را انتخاب کرده و روی Enforce کلیک کنید. همین کار را برای Cloud Firestore انجام دهید.

اکنون باید بررسی برنامه (App Check) اجرا شود! برنامه خود را رفرش کنید و سعی کنید پیام‌های چت را مشاهده یا ارسال کنید. باید پیام خطای زیر را دریافت کنید:

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

این یعنی App Check به طور پیش‌فرض درخواست‌های اعتبارسنجی نشده را مسدود می‌کند. حالا بیایید اعتبارسنجی را به برنامه خود اضافه کنیم.

به فایل environment.ts خود بروید و reCAPTCHAEnterpriseKey را به شیء environment اضافه کنید.

export const environment = {
  firebase: {
    apiKey: 'API_KEY',
    authDomain: 'PROJECT_ID.firebaseapp.com',
    databaseURL: 'https://PROJECT_ID.firebaseio.com',
    projectId: 'PROJECT_ID',
    storageBucket: 'PROJECT_ID.firebasestorage.app',
    messagingSenderId: 'SENDER_ID',
    appId: 'APP_ID',
    measurementId: 'G-MEASUREMENT_ID',
  },
  reCAPTCHAEnterpriseKey: {
    key: "Replace with your recaptcha enterprise site key"
  },
};

مقدار key را با توکن reCaptcha Enterprise خود جایگزین کنید.

سپس، به فایل app.config.ts بروید و ایمپورت‌های زیر را اضافه کنید:

import { getApp } from '@angular/fire/app';
import {
  ReCaptchaEnterpriseProvider,
  initializeAppCheck,
  provideAppCheck,
} from '@angular/fire/app-check';

در همان فایل app.config.ts ، تعریف متغیر سراسری زیر را اضافه کنید:

declare global {
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}

@NgModule({ ...

در ایمپورت‌ها، مقداردهی اولیه App Check را با ReCaptchaEnterpriseProvider اضافه کنید و isTokenAutoRefreshEnabled روی true تنظیم کنید تا توکن‌ها بتوانند به‌طور خودکار به‌روزرسانی شوند.

imports: [
BrowserModule,
AppRoutingModule,
CommonModule,
FormsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => {
const appCheck = initializeAppCheck(getApp(), {
  provider: new ReCaptchaEnterpriseProvider(
  environment.reCAPTCHAEnterpriseKey.key
  ),
  isTokenAutoRefreshEnabled: true,
  });
  if (location.hostname === 'localhost') {
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
  }
  return appCheck;
}),

برای اجازه دادن به تست محلی، self.FIREBASE_APPCHECK_DEBUG_TOKEN را روی true تنظیم کنید. وقتی برنامه خود را در localhost رفرش می‌کنید، این یک توکن اشکال‌زدایی را در کنسول مشابه زیر ثبت می‌کند:

App Check debug token: CEFC0C76-7891-494B-B764-349BDFD00D00. You will need to add it to your app's App Check settings in the Firebase console for it to work.

حالا، در کنسول فایربیس به نمای برنامه‌ها (Apps View) از بخش بررسی برنامه‌ها (App Check) بروید.

روی منوی سرریز کلیک کنید و مدیریت توکن‌های اشکال‌زدایی را انتخاب کنید.

سپس، روی افزودن توکن اشکال‌زدایی کلیک کنید و توکن اشکال‌زدایی را از کنسول خود، همانطور که از شما خواسته شد، جایگذاری کنید.

به فایل chat.service.ts بروید و دستور زیر را به آن اضافه کنید:

import { AppCheck } from '@angular/fire/app-check';

در همان فایل chat.service.ts ، App Check را در کنار سایر سرویس‌های Firebase تزریق کنید.

export class ChatService {
appCheck: AppCheck = inject(AppCheck);
...

1. یک کامیت با پیام «مسدود کردن کلاینت‌های غیرمجاز با بررسی برنامه» ایجاد کنید و آن را به مخزن گیت‌هاب خود ارسال کنید.
2. صفحه App Hosting را در کنسول Firebase باز کنید و منتظر بمانید تا نصب جدید شما تکمیل شود.

تبریک! اکنون App Check باید در برنامه شما کار کند.