برنامه Web Codelab را بررسی کنید

۱. مقدمه

آخرین به‌روزرسانی: ۲۳-۰۲-۲۰۲۳

چگونه می‌توانید از دسترسی غیرمجاز به منابع Firebase خود جلوگیری کنید؟

شما می‌توانید از Firebase App Check برای جلوگیری از دسترسی کلاینت‌های غیرمجاز به منابع backend خود استفاده کنید. این کار با الزام درخواست‌های ورودی به ضمیمه کردن گواهی مبنی بر اینکه درخواست از برنامه اصلی شما می‌آید و مسدود کردن ترافیکی که گواهی مناسبی ندارد، انجام می‌شود. Firebase App Check برای تأیید صحت کلاینت به ارائه‌دهندگان گواهی مخصوص پلتفرم متکی است: برای برنامه‌های وب، App Check از reCAPTCHA v3 و reCAPTCHA Enterprise به عنوان ارائه‌دهندگان گواهی پشتیبانی می‌کند.

از App Check می‌توان برای محافظت از درخواست‌های ارسالی به Cloud Firestore، Realtime Database، Cloud Functions، Firebase Authentication with Identity Platform و روی backendهایی که خودتان میزبانی می‌کنید، استفاده کرد.

آنچه خواهید ساخت

در این آزمایشگاه کد، شما قصد دارید ابتدا با اضافه کردن و سپس اجرای App Check، یک برنامه چت را ایمن کنید.

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

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

  • چگونه می‌توان دسترسی‌های غیرمجاز به backend را رصد کرد؟
  • نحوه افزودن ضمانت اجرا به Firestore و Cloud Storage
  • نحوه اجرای برنامه خود با یک توکن اشکال‌زدایی برای توسعه محلی

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

  • IDE/ویرایشگر متن مورد نظر شما
  • مدیر بسته npm که معمولاً با Node.js همراه است
  • رابط خط فرمان فایربیس نصب و پیکربندی شده برای کار با حساب کاربری شما
  • یک ترمینال/کنسول
  • یک مرورگر دلخواه مثل کروم
  • نمونه کد codelab (برای نحوه دریافت کد به مرحله بعدی codelab مراجعه کنید.)

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

مخزن گیت‌هاب codelab را از خط فرمان کلون کنید:

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

از طرف دیگر، اگر Git را نصب ندارید، می‌توانید مخزن را به صورت یک فایل ZIP دانلود کنید .

برنامه شروع کننده را وارد کنید

با استفاده از IDE خود، دایرکتوری 📁 appcheck-start را از مخزن کلون شده باز یا وارد کنید. این دایرکتوری 📁 appcheck-start شامل کد شروع codelab است که یک برنامه وب چت کاملاً کاربردی خواهد بود. دایرکتوری 📁 appcheck کد تکمیل شده codelab را خواهد داشت.

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

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

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

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

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

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

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

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

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

  1. روی آیکون وب کلیک کنید ۵۸d6543a156e56f9.png برای ایجاد یک برنامه وب جدید Firebase.
  2. برنامه را با نام مستعار Friendly Chat ثبت کنید، سپس کادر کنار Also set up Firebase Hosting for this app را علامت بزنید. روی ثبت برنامه کلیک کنید.
  3. در مرحله بعد، دستوری برای نصب Firebase با استفاده از npm و یک شیء پیکربندی مشاهده خواهید کرد. این شیء را بعداً در codelab کپی می‌کنید، بنابراین فعلاً روی Next کلیک کنید.

پنجره افزودن فایربیس به برنامه وب شما

  1. سپس گزینه‌ای برای نصب Firebase CLI می‌بینید. اگر قبلاً آن را نصب نکرده‌اید، اکنون با استفاده از دستور npm install -g firebase-tools این کار را انجام دهید. سپس روی Next کلیک کنید.
  2. سپس گزینه‌ای برای ورود به Firebase و استقرار در Firebase hosting می‌بینید. با استفاده از دستور firebase login وارد Firebase شوید، سپس روی Continue to Console کلیک کنید. در مرحله بعد، استقرار در Firebase hosting را انجام خواهید داد.

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

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

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

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

فعال کردن ورود به سیستم گوگل برای احراز هویت فایربیس

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

شما باید ورود به سیستم گوگل را فعال کنید:

  1. در کنسول Firebase، بخش Build را در پنل سمت چپ پیدا کنید.
  2. روی تأیید هویت کلیک کنید، در صورت لزوم روی شروع به کار کلیک کنید، سپس روی برگه روش ورود کلیک کنید (یا برای رفتن مستقیم به آنجا اینجا را کلیک کنید ).
  3. ارائه دهنده ورود به سیستم گوگل را فعال کنید
  4. نام عمومی برنامه خود را روی «چت دوستانه» تنظیم کنید و یک ایمیل پشتیبانی پروژه را از منوی کشویی انتخاب کنید.
  5. روی ذخیره کلیک کنید

f96888973c3d00cc.png

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

برنامه وب از 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. روی ایجاد کلیک کنید.

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

از دایرکتوری appcheck-start ، فراخوانی کنید:

firebase use --add

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

  1. به تنظیمات پروژه خود در کنسول Firebase بروید
  2. در کارت «برنامه‌های شما»، نام مستعار برنامه‌ای را که برای آن به شیء پیکربندی نیاز دارید، انتخاب کنید.
  3. از پنل قطعه کد Firebase SDK، گزینه Config را انتخاب کنید.
  4. قطعه کد شیء پیکربندی را کپی کنید، سپس آن را به appcheck-start/hosting/src/firebase-config.js اضافه کنید. بقیه‌ی کدلب فرض می‌کند که متغیر config نام دارد.

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

const config = {
  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",
};

از همان دایرکتوری appcheck-start ، سپس فراخوانی کنید:

firebase experiments:enable webframeworks

این امر پشتیبانی از چارچوب وب را که این پروژه با آن ساخته شده است، امکان‌پذیر می‌کند.

حالا باید آماده باشیم تا پروژه شما را اجرا کنیم و بررسی کنیم که آیا پروژه پیش‌فرض کار می‌کند یا خیر!

۵. برنامه را بدون App Check امتحان کنید

حالا که برنامه‌تان را پیکربندی و SDK را تنظیم کرده‌اید، سعی کنید از برنامه همانطور که در ابتدا طراحی شده بود استفاده کنید. ابتدا، با نصب تمام وابستگی‌ها شروع کنید. از ترمینال خود، به دایرکتوری appcheck-start/hosting بروید. در حالی که داخل آن دایرکتوری هستید، npm install اجرا کنید. این دستور تمام وابستگی‌های لازم برای کار پروژه شما را دریافت می‌کند. برای شروع برنامه در وضعیت فعلی، می‌توانید firebase serve اجرا کنید. برنامه از شما می‌خواهد که با یک حساب گوگل وارد شوید؛ این کار را انجام دهید و سپس سعی کنید چند پیام چت و چند عکس در چت ارسال کنید.

حالا که آن را به صورت محلی آزمایش کرده‌اید، وقت آن است که آن را در محیط عملیاتی ببینید! firebase deploy اجرا کنید تا برنامه وب را در وب مستقر کنید. این بخش یک گام اساسی در نمایش نحوه عملکرد App Check در دنیای واقعی است زیرا به یک دامنه برای پیکربندی ارائه دهنده گواهی reCAPTCHA Enterprise نیاز دارد.

امیدوارم که شما از قابلیت پیش‌فرضی که برنامه ارائه می‌دهد، استفاده کنید. ارسال پیام‌های چت و هر کار دیگری که فقط باید از طریق برنامه‌ای مانند این انجام شود. نکته منفی وضعیت فعلی این است که هر کسی که پیکربندی برنامه شما را از مرحله قبل داشته باشد، می‌تواند به منابع backend شما دسترسی پیدا کند. آنها هنوز هم باید از قوانین امنیتی که توسط سیستم‌های Firestore و Cloud Storage شما اعمال می‌شود، پیروی کنند، اما در غیر این صورت، همچنان می‌توانند داده‌های ذخیره شده در آنجا را جستجو، ذخیره و به آنها دسترسی داشته باشند.

در چند مرحله بعدی، شما قرار است:

  • برای بررسی برنامه ثبت نام کنید
  • اعتبارسنجی اجرا
  • شروع به اجرای قوانین کنید

۶. بررسی و اجرای برنامه را فعال کنید

بیایید با گرفتن یک کلید reCAPTCHA Enterprise برای پروژه خود و اضافه کردن آن به App Check شروع کنیم. شما با مراجعه به بخش reCAPTCHA Enterprise در کنسول Google Cloud شروع می‌کنید. پروژه خود را انتخاب کنید و سپس از شما خواسته می‌شود که API reCAPTCHA Enterprise را فعال کنید. API را فعال کنید و چند دقیقه صبر کنید تا تمام شود. سپس روی Create Key در کنار Enterprise keys کلیک کنید. سپس در این بخش، یک نام نمایشی مشخص کنید و یک کلید نوع وب‌سایت انتخاب کنید. باید دامنه‌هایی را که برنامه شما روی آنها میزبانی می‌شود مشخص کنید. از آنجایی که قصد دارید این برنامه را در Firebase Hosting میزبانی کنید، از نام میزبانی پیش‌فرض که عموماً ${YOUR_PROJECT_ID}.web.app است استفاده می‌کنید. می‌توانید دامنه میزبانی خود را در بخش Hosting کنسول Firebase پیدا کنید. پس از پر کردن این اطلاعات، Done و Create Key را فشار دهید.

صفحه کلید ایجاد شده توسط reCAPTCHA

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

پنجره ثبت نام سازمانی reCAPTCHA

این شناسه را در کلیپ‌بورد خود کپی کنید. این کلیدی است که برای بررسی برنامه استفاده می‌کنید. سپس، به بخش بررسی برنامه در کنسول Firebase بروید و روی «شروع به کار» کلیک کنید. سپس، روی «ثبت نام» کلیک کنید و سپس روی «reCAPTCHA Enterprise» کلیک کنید و شناسه کپی شده را در کادر متن مربوط به کلید سایت reCAPTCHA Enterprise قرار دهید. بقیه تنظیمات را به صورت پیش‌فرض بگذارید. صفحه بررسی برنامه شما باید چیزی شبیه به این باشد:

پنجره App Check apps که در آن توکن سازمانی reCAPTCHA خود را ثبت می‌کنید

درخواست‌های تأیید نشده و اجرا نشده

حالا که یک کلید ثبت‌شده در کنسول Firebase دارید، با اجرای firebase serve به اجرای سایت خود در مرورگر برگردید. در اینجا برنامه وب شما به صورت محلی اجرا می‌شود و می‌توانید دوباره درخواست‌هایی را در backend Firebase ارسال کنید. از آنجایی که درخواست‌ها در backend Firebase قرار می‌گیرند، این درخواست‌ها توسط App Check نظارت می‌شوند اما اجرا نمی‌شوند. اگر می‌خواهید وضعیت درخواست‌های دریافتی را ببینید، می‌توانید به بخش Cloud Firestore در تب APIها در صفحه App Check در کنسول Firebase مراجعه کنید. از آنجایی که هنوز کلاینت را برای استفاده از App Check پیکربندی نکرده‌اید، باید چیزی شبیه به این را ببینید:

داشبورد بررسی برنامه که درخواست‌های ۱۰۰٪ تأیید نشده‌ی کلاینت برای برنامه‌ی شما را نشان می‌دهد.

۱۰۰٪ درخواست‌های تأیید نشده به بک‌اند ارسال می‌شود. این صفحه مفید است زیرا نشان می‌دهد که تقریباً تمام درخواست‌های کلاینت از کلاینت‌هایی ارسال می‌شوند که App Check را به صورت یکپارچه ندارند.

این داشبورد می‌تواند چند نکته را نشان دهد. اولین چیزی که می‌تواند نشان دهد این است که آیا همه برنامه‌های کلاینت شما آخرین نسخه کلاینت شما را اجرا می‌کنند یا خیر. اگر اینطور است، می‌توانید با خیال راحت App Check را بدون نگرانی از قطع دسترسی برای یک کلاینت واقعی برنامه خود اجرا کنید. نکته دیگری که این می‌تواند به شما بگوید این است که چند تلاش برای دسترسی به backend شما بدون اینکه از داخل برنامه شما باشد، انجام شده است. این ممکن است کاربرانی باشند که مستقیماً و بدون اطلاع شما backend شما را جستجو می‌کنند. از آنجایی که می‌بینید درخواست‌ها تأیید نشده‌اند، وقت آن است که قبل از اقدام به تأیید درخواست‌های آنها، ببینید چه اتفاقی برای کاربرانی می‌افتد که ممکن است درخواست تأیید نشده‌ای به backend شما داشته باشند.

درخواست‌های تأیید نشده و اجباری

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

یک داشبورد معیارهای تایید نشده با دکمه‌ی برجسته‌ی Enforce

این کار باعث اجرای App Check می‌شود؛ اکنون درخواست‌هایی که به سرویس‌های backend شما ارسال می‌شوند و از طریق ارائه‌دهنده‌ی گواهی انتخابی شما (در این مورد reCAPTCHA Enterprise) تأیید نشده‌اند، مسدود می‌شوند. به برنامه‌ی وب در حال اجرای خود که باید در http://localhost:5000 اجرا شود، بازگردید. وقتی صفحه را رفرش می‌کنید و سعی می‌کنید داده‌ها را از پایگاه داده دریافت کنید، هیچ اتفاقی نمی‌افتد. اگر کنسول کروم را برای خواندن خطاها باز کنید، باید چیزی شبیه به موارد زیر را ببینید:

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

این درخواست‌های مسدودکننده‌ی App Check هستند که توکن گواهی معتبری را در درخواست‌های خود به منابع Firebase شما ارسال نکرده‌اند. فعلاً می‌توانید App Check enforcement را غیرفعال کنید و در بخش بعدی، نحوه‌ی افزودن reCAPTCHA Enterprise App Check به مثال Friendly Chat را بررسی خواهید کرد.

۷. کلید reCAPTCHA Enterprise را به سایت اضافه کنید

ما قصد داریم کلید سازمانی را به برنامه شما اضافه کنیم. ابتدا، hosting/src/firebase-config.js را باز کنید و کلید سازمانی reCAPTCHA خود را به قطعه کد زیر اضافه کنید:

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

پس از تکمیل این مرحله، hosting/src/index.js باز کنید و در خط ۵۱، یک import از firebase-config.js برای دریافت کلید reCAPTCHA خود اضافه کنید و همچنین کتابخانه App Check را وارد کنید تا بتوانید با ارائه‌دهنده reCAPTCHA Enterprise کار کنید.

// 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 را به عنوان یک دامنه تأیید شده ثبت کنید زیرا این امر به کاربران اجازه می‌دهد تا از طریق برنامه‌ای که به صورت محلی روی دستگاه خود اجرا می‌شود، به backend های محدود شده شما دسترسی پیدا کنند. در عوض، از آنجایی که self.FIREBASE_APPCHECK_DEBUG_TOKEN = true را تنظیم کرده‌اید، باید در کنسول جاوا اسکریپت خود خطی شبیه به این را بررسی کنید:

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 در زیر منوی سرریز برنامه خود وارد کنید.

داشبورد App Check که محل Manage Debug Tokens را نشان می‌دهد

به توکن یک نام منحصر به فرد که به خاطر خواهید سپرد، اختصاص دهید و روی ذخیره کلیک کنید. این گزینه به شما امکان می‌دهد از یک توکن تولید شده توسط کلاینت با برنامه خود استفاده کنید که جایگزین امن‌تری نسبت به تولید یک توکن اشکال‌زدایی و جاسازی آن در برنامه شماست. جاسازی یک توکن در برنامه می‌تواند باعث شود که آن به طور تصادفی بین کاربران نهایی توزیع شود و آن کاربران نهایی بتوانند با دور زدن بررسی‌های شما، از آن سوءاستفاده کنند. اگر می‌خواهید یک توکن اشکال‌زدایی را توزیع کنید، به عنوان مثال، در یک محیط CI، برای کسب اطلاعات بیشتر در مورد نحوه توزیع آن، این مستندات را مطالعه کنید.

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

پس از ثبت توکن اشکال‌زدایی در کنسول Firebase، می‌توانید اجرای App Check را دوباره فعال کنید و با فراخوانی firebase serve از ترمینال، بارگیری محلی محتوای برنامه را آزمایش کنید. باید ببینید که داده‌های قبلاً وارد شده به نسخه محلی برنامه وب ارسال می‌شوند. همچنان باید پیام حاوی توکن اشکال‌زدایی را در کنسول مشاهده کنید.

آن را در محیط تولید امتحان کنید

وقتی از عملکرد App Check به صورت محلی مطمئن شدید، برنامه وب را در محیط عملیاتی مستقر کنید. از ترمینال خود، دوباره firebase deploy و صفحه را مجدداً بارگذاری کنید. این کار برنامه وب شما را برای اجرا در Firebase Hosting بسته‌بندی می‌کند. وقتی برنامه شما در Firebase Hosting میزبانی شد، سعی کنید از برنامه خود در ${YOUR_PROJECT_ID}.web.app بازدید کنید. می‌توانید کنسول جاوا اسکریپت را باز کنید و دیگر نباید توکن اشکال‌زدایی را در آنجا چاپ شده ببینید و باید چت‌ها را در پروژه خود در حال بارگیری ببینید. علاوه بر این، پس از چند لحظه تعامل با برنامه، می‌توانید به بخش App Check کنسول Firebase مراجعه کنید و تأیید کنید که درخواست‌های ارسالی به برنامه شما به حالت تأیید شده تغییر یافته‌اند.

۸. تبریک می‌گویم!

تبریک می‌گویم، شما با موفقیت Firebase App Check را به یک برنامه وب اضافه کردید!

شما کنسول Firebase را طوری تنظیم می‌کنید که توکن reCAPTCHA Enterprise را برای محیط‌های عملیاتی مدیریت کند و حتی توکن‌های اشکال‌زدایی را برای توسعه محلی تنظیم کنید. این تضمین می‌کند که برنامه‌های شما همچنان می‌توانند به منابع Firebase از کلاینت‌های تأیید شده دسترسی داشته باشند و از وقوع فعالیت‌های کلاهبرداری از درون برنامه شما جلوگیری می‌کند.

بعدش چی؟

برای افزودن بررسی برنامه Firebase به موارد زیر، مستندات زیر را بررسی کنید:

اسناد مرجع