1. معرفی
آخرین به روز رسانی: 23-02-2023
چگونه می توانید از دسترسی غیرمجاز به منابع Firebase خود جلوگیری کنید؟
میتوانید از Firebase App Check برای جلوگیری از دسترسی مشتریان غیرمجاز به منابع پشتیبان خود استفاده کنید، زیرا درخواستهای دریافتی را ملحق میکنید که تأییدیهای مبنی بر اینکه درخواست از برنامه اصلی شما میآید و با مسدود کردن ترافیکی که گواهینامه مناسبی ندارد، پیوست شود. Firebase App Check برای تأیید صحت کلاینت به ارائه دهندگان گواهینامه مخصوص پلتفرم متکی است: برای برنامه های وب، App Check از reCAPTCHA v3 و reCAPTCHA Enterprise به عنوان ارائه دهندگان گواهی پشتیبانی می کند.
App Check میتواند برای محافظت از درخواستها به Cloud Firestore، پایگاه داده بیدرنگ، عملکردهای ابری، احراز هویت Firebase با پلتفرم هویت، و در بکاندهایی که خودتان میزبانی میکنید، استفاده شود.
چیزی که خواهی ساخت
در این کد لبه، ابتدا یک برنامه چت را با افزودن و سپس اجرای App Check ایمن میکنید.
چیزی که یاد خواهید گرفت
- نحوه نظارت بر باطن خود برای دسترسی غیرمجاز
- چگونه به Firestore و Cloud Storage اضافه کنیم
- چگونه برنامه خود را با توکن اشکال زدایی برای توسعه محلی اجرا کنید
آنچه شما نیاز دارید
- ویرایشگر IDE/متن انتخابی شما
- مدیر بسته npm ، که معمولاً با Node.js ارائه می شود
- Firebase CLI برای کار با حساب شما نصب و پیکربندی شده است
- یک ترمینال/کنسول
- مرورگر دلخواه شما، مانند کروم
- کد نمونه کد لبه (برای نحوه دریافت کد به مرحله بعدی کد لبه مراجعه کنید.)
2. کد نمونه را دریافت کنید
مخزن GitHub کد لبه را از خط فرمان کلون کنید:
git clone https://github.com/firebase/codelab-friendlychat-web
از طرف دیگر، اگر Git را نصب نکردهاید، میتوانید مخزن را بهعنوان یک فایل ZIP دانلود کنید .
برنامه شروع را وارد کنید
با استفاده از IDE خود، دایرکتوری 📁 appcheck-start
از مخزن کلون شده باز کنید یا وارد کنید. این دایرکتوری 📁 appcheck-start
حاوی کد شروع برای codelab است که یک برنامه وب چت کاملاً کاربردی خواهد بود. دایرکتوری 📁 appcheck
کد تکمیل شده برای codelab را خواهد داشت.
3. یک پروژه Firebase ایجاد و راه اندازی کنید
یک پروژه Firebase ایجاد کنید
- وارد Firebase شوید.
- در کنسول Firebase، روی Add Project کلیک کنید و سپس نام پروژه Firebase خود را FriendlyChat بگذارید. شناسه پروژه برای پروژه Firebase خود را به خاطر بسپارید.
- علامت Enable Google Analytics را برای این پروژه بردارید
- روی ایجاد پروژه کلیک کنید.
برنامهای که میخواهیم بسازیم از محصولات Firebase استفاده میکند که برای برنامههای وب در دسترس هستند:
- Firebase Authentication به کاربران شما اجازه می دهد تا به راحتی وارد برنامه شما شوند.
- Cloud Firestore برای ذخیره دادههای ساختیافته در فضای ابری و دریافت اطلاعرسانی فوری هنگام تغییر دادهها.
- Cloud Storage برای Firebase برای ذخیره فایلها در فضای ابری.
- میزبانی Firebase برای میزبانی و خدمات رسانی به دارایی های شما.
- Firebase Cloud Messaging برای ارسال اعلانهای فشاری و نمایش اعلانهای بازشوی مرورگر.
- نظارت بر عملکرد Firebase برای جمع آوری داده های عملکرد کاربر برای برنامه شما.
برخی از این محصولات نیاز به پیکربندی خاصی دارند یا باید با استفاده از کنسول Firebase فعال شوند.
یک برنامه وب Firebase را به پروژه اضافه کنید
- روی نماد وب کلیک کنید برای ایجاد یک برنامه وب Firebase جدید.
- برنامه را با نام مستعار «چت دوستانه» ثبت کنید، سپس کادر کنار «همچنین میزبانی Firebase را برای این برنامه تنظیم کنید» علامت بزنید. روی ثبت برنامه کلیک کنید.
- در مرحله بعد، فرمانی برای نصب Firebase با استفاده از npm و یک شی پیکربندی خواهید دید. این شی را بعداً در Codelab کپی میکنید، بنابراین در حال حاضر، Next را فشار دهید.
- سپس گزینه ای برای نصب Firebase CLI مشاهده می کنید. اگر قبلاً آن را نصب نکرده اید، اکنون با استفاده از دستور
npm install -g firebase-tools
این کار را انجام دهید. سپس روی Next کلیک کنید. - سپس گزینه ای برای ورود به Firebase و استقرار در میزبانی Firebase را مشاهده می کنید. پیش بروید و با استفاده از فرمان
firebase login
به Firebase وارد شوید، سپس روی Continue to Console کلیک کنید. شما در مرحله آینده به میزبانی Firebase مستقر می شوید.
Google Sign-in را برای احراز هویت Firebase فعال کنید
برای اینکه به کاربران اجازه دهیم با حسابهای Google خود وارد برنامه وب شوند، از روش ورود به سیستم Google استفاده میکنیم.
شما باید Google Sign-in را فعال کنید:
- در کنسول Firebase، قسمت Build را در پانل سمت چپ قرار دهید.
- روی احراز هویت کلیک کنید، در صورت امکان شروع به کار کنید ، سپس روی برگه روش ورود به سیستم کلیک کنید (یا اینجا را کلیک کنید تا مستقیماً به آنجا بروید).
- ارائه دهنده ورود به سیستم Google را فعال کنید
- نام عمومی برنامه خود را روی چت دوستانه تنظیم کنید و یک ایمیل پشتیبانی پروژه را از منوی کشویی انتخاب کنید.
- روی ذخیره کلیک کنید
Cloud Firestore را فعال کنید
برنامه وب از Cloud Firestore برای ذخیره پیام های چت و دریافت پیام های چت جدید استفاده می کند.
باید Cloud Firestore را فعال کنید:
- در بخش ساخت کنسول Firebase، روی Firestore Database کلیک کنید.
- روی ایجاد پایگاه داده در پنجره Cloud Firestore کلیک کنید.
- گزینه Start in test mode را انتخاب کنید و بعد از خواندن سلب مسئولیت در مورد قوانین امنیتی روی Next کلیک کنید.
حالت تست تضمین می کند که شما می توانید آزادانه در طول توسعه در پایگاه داده بنویسید. شما قوانین امنیتی قبلاً در کد شروع برای شما نوشته شده است. شما از آنها برای این کد لبه استفاده خواهید کرد.
- مکان ذخیره داده های Cloud Firestore خود را تنظیم کنید. می توانید این را به عنوان پیش فرض بگذارید یا منطقه ای نزدیک به خود انتخاب کنید. برای ارائه Firestore روی Enable کلیک کنید.
Cloud Storage را فعال کنید
برنامه وب از Cloud Storage برای Firebase برای ذخیره، آپلود و اشتراک گذاری تصاویر استفاده می کند.
باید Cloud Storage را فعال کنید:
- در بخش ساخت کنسول Firebase، روی Storage کلیک کنید.
- اگر دکمه Get Started وجود ندارد، به این معنی است که Cloud Storage از قبل فعال شده است و نیازی به دنبال کردن مراحل زیر نیست.
- روی Get Started کلیک کنید.
- گزینه Start in test mode را انتخاب کنید و بعد از خواندن سلب مسئولیت در مورد قوانین امنیتی روی Next کلیک کنید.
با قوانین امنیتی پیشفرض، هر کاربر احراز هویت شده میتواند هر چیزی را در Cloud Storage بنویسد. ما قوانین امنیتی را که قبلاً برای ما نوشته شده است را بعداً در این Codelab مستقر خواهیم کرد.
- مکان Cloud Storage با همان منطقه ای که برای پایگاه داده Cloud Firestore خود انتخاب کرده اید از پیش انتخاب شده است. برای تکمیل تنظیمات روی Done کلیک کنید.
4. Firebase را پیکربندی کنید
از دایرکتوری appcheck-start
، تماس بگیرید:
firebase use --add
هنگامی که از شما خواسته شد، شناسه پروژه خود را انتخاب کنید، سپس به پروژه Firebase خود یک نام مستعار بدهید. برای این پروژه، فقط می توانید نام مستعار پیش فرض بدهید. در مرحله بعد، باید پروژه محلی خود را برای کار با Firebase پیکربندی کنید.
- به تنظیمات پروژه خود در کنسول Firebase بروید
- در کارت «برنامههای شما»، نام مستعار برنامهای را که برای آن به شی پیکربندی نیاز دارید، انتخاب کنید.
- Config را از قسمت snippet Firebase SDK انتخاب کنید.
- قطعه شی پیکربندی را کپی کنید، سپس آن را به
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
اجرا کنید. برنامه از شما می خواهد که با یک حساب Google وارد شوید. این کار را انجام دهید و سپس چند پیام چت و چند عکس در چت پست کنید.
اکنون که آن را به صورت محلی آزمایش کرده اید، وقت آن است که آن را در مرحله تولید ببینید! برای استقرار برنامه وب در وب firebase deploy
اجرا کنید. این بخش گامی مهم در نمایش نحوه عملکرد App Check در دنیای واقعی است، زیرا به پیکربندی دامنه برای ارائهدهنده گواهی سازمانی reCAPTCHA نیاز دارد.
امیدواریم که شما قابلیت پیش فرضی را که این برنامه ارائه می دهد را تجربه می کنید. ارسال پیام های چت و هر چیز دیگری که فقط باید از برنامه ای مانند این انجام شود. نقطه ضعف وضعیت فعلی این است که هر کسی با پیکربندی برنامه شما در مرحله قبل می تواند به منابع باطن شما دسترسی داشته باشد. آنها همچنان باید از قوانین امنیتی که توسط سیستمهای Firestore و Cloud Storage شما وجود دارد پیروی کنند، اما در غیر این صورت، همچنان میتوانند به دادههای ذخیره شده در آنجا پرس و جو کنند، ذخیره کنند و به آنها دسترسی داشته باشند.
در چند مرحله بعدی، شما قصد دارید:
- برای بررسی برنامه ثبت نام کنید
- اعتبار بخشیدن به اجرا
- اجرای قوانین را شروع کنید
6. App Check and Enforcement را روشن کنید
بیایید با گرفتن یک کلید سازمانی reCAPTCHA برای پروژه خود و اضافه کردن آن به بررسی برنامه شروع کنیم. شما با بازدید از بخش reCAPTCHA Enterprise در Google Cloud Console شروع می کنید. پروژه خود را انتخاب کنید و سپس از شما خواسته می شود که reCAPTCHA Enterprise API را فعال کنید. API را فعال کنید و چند دقیقه صبر کنید تا تمام شود. سپس روی Create Key در کنار Enterprise keys کلیک کنید. سپس در این قسمت یک نام نمایشی را مشخص کرده و یک کلید نوع وب سایت را انتخاب کنید. شما باید دامنه هایی را که برنامه شما روی آنها میزبانی می شود را مشخص کنید. از آنجایی که شما در حال برنامه ریزی برای میزبانی این میزبانی در Firebase Hosting هستید، از نام میزبانی پیش فرض استفاده می کنید که معمولاً ${YOUR_PROJECT_ID}.web.app
است. میتوانید دامنه میزبانی خود را در بخش Hosting Console Firebase پیدا کنید. پس از پر کردن این اطلاعات، Done را فشار دهید و کلید ایجاد کنید .
پس از تکمیل، یک شناسه در بالای صفحه جزئیات کلیدی مشاهده می کنید.
ادامه دهید و این شناسه را در کلیپ بورد خود کپی کنید. این کلیدی است که برای بررسی برنامه استفاده می کنید. در مرحله بعد، از قسمت App Check کنسول Firebase دیدن کنید و روی Get Started کلیک کنید. سپس روی Register کلیک کنید و سپس روی reCAPTCHA Enterprise کلیک کنید و شناسه کپی شده را در کادر متنی برای reCAPTCHA Enterprise Site Key قرار دهید. بقیه تنظیمات را به عنوان پیش فرض بگذارید. صفحه بررسی برنامه شما باید چیزی شبیه به این باشد:
درخواست های تایید نشده و اجرا نشده
اکنون که یک کلید ثبت شده در کنسول Firebase دارید، با اجرای firebase serve
به اجرای سایت خود در مرورگر بازگردید. در اینجا برنامه وب را دارید که به صورت محلی اجرا میشود و میتوانید دوباره درخواستها را علیه باطن Firebase شروع کنید. از آنجایی که درخواستها در مقابل باطن Firebase قرار میگیرند، این درخواستها توسط App Check نظارت میشوند اما اجرا نمیشوند. اگر میخواهید وضعیت درخواستهای ارسالی را ببینید، میتوانید از بخش Cloud Firestore در برگه APIs صفحه App Check در کنسول Firebase بازدید کنید. از آنجایی که هنوز کلاینت را برای استفاده از App Check پیکربندی نکردهاید، باید چیزی شبیه به این ببینید:
بکاند 100% درخواستهای تایید نشده دارد. این صفحه مفید است زیرا نشان میدهد که تقریباً تمام درخواستهای مشتری از سوی کلاینتهایی میآیند که App Check را یکپارچه ندارند.
این داشبورد می تواند چند مورد را نشان دهد. اولین چیزی که می تواند نشان دهد این است که آیا همه برنامه های مشتری شما آخرین نسخه مشتری شما را اجرا می کنند یا خیر. اگر چنین هستند، میتوانید با خیال راحت App Check را بدون نگرانی در مورد خاموش کردن دسترسی یک کلاینت واقعی برنامه خود اجرا کنید. نکته دیگری که ممکن است به شما بگوید این است که چند بار تلاش برای دسترسی به باطن شما بدون اینکه از داخل برنامه شما انجام شود انجام شده است. این ممکن است کاربرانی باشند که مستقیماً بدون اطلاع شما در حال پرس و جو هستند. از آنجایی که میبینید درخواستها تأیید نمیشوند، وقت آن است که ببینیم چه اتفاقی برای آن دسته از کاربرانی میافتد که ممکن است درخواست تأیید نشدهای به پشتیبان شما داشته باشند قبل از اینکه بخواهید درخواستهایشان را تأیید کنید.
درخواست های تایید نشده و اجرا شده
ادامه دهید و دکمه Enforce را از صفحه قبلی فشار دهید و سپس در صورت درخواست دوباره Enforce را فشار دهید.
این شروع به اجرای بررسی برنامه میکند. اکنون درخواستهای سرویسهای پشتیبان شما را که از طریق ارائهدهنده گواهی انتخابی شما (در این مورد reCAPTCHA Enterprise) تأیید نشدهاند، مسدود میکند. به برنامه وب در حال اجرا خود که باید در http://localhost:5000
اجرا شود بازگردید. وقتی صفحه را بهروزرسانی میکنید و سعی میکنید دادهها را از پایگاه داده دریافت کنید، هیچ اتفاقی نمیافتد. اگر کنسول کروم را برای خواندن خطاها باز کنید، باید چیزی شبیه به زیر مشاهده کنید:
Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.
این درخواستهای مسدودکننده App Check است که یک نشانه تأیید معتبر را در درخواستهای خود به منابع Firebase شما ارسال نکردهاند. در حال حاضر، می توانید اجرای بررسی برنامه را خاموش کنید و در بخش بعدی، نحوه افزودن reCAPTCHA Enterprise App Check را به مثال چت دوستانه بررسی می کنید.
7. کلید reCAPTCHA Enterprise را به سایت اضافه کنید
ما قصد داریم کلید سازمانی را به برنامه شما اضافه کنیم. ابتدا hosting/src/firebase-config.js
باز کنید و reCAPTCHA Enterprise Key خود را به قطعه کد زیر اضافه کنید:
const reCAPTCHAEnterpriseKey = {
// Replace with your recaptcha enterprise site key
key: "Replace with your recaptcha enterprise site key"
};
پس از تکمیل، hosting/src/index.js
باز کنید و در خط 51، میخواهید یک import از 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. هرگز نباید لوکال هاست را به عنوان یک دامنه تایید شده ثبت کنید زیرا این امر به کاربران اجازه می دهد تا به پشتیبان های محدود شده شما از برنامه ای که به صورت محلی روی دستگاه آنها اجرا می شود دسترسی داشته باشند. در عوض، از آنجایی که 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
) و آن را به پیکربندی بررسی برنامه در منوی سرریز برنامه خود وصل کنید.
به نشانه یک نام منحصر به فرد بدهید که به خاطر بسپارید و روی ذخیره کلیک کنید. این گزینه به شما امکان می دهد از یک توکن تولید شده توسط مشتری با برنامه خود استفاده کنید که جایگزین ایمن تری نسبت به تولید رمز اشکال زدایی و جاسازی آن در برنامه خود است. جاسازی توکن در برنامه ممکن است به طور تصادفی بین کاربران نهایی توزیع شود و این کاربران نهایی می توانند با دور زدن چک های شما از آن سوء استفاده کنند. اگر میخواهید یک نشانه اشکالزدایی را، به عنوان مثال، در یک محیط CI توزیع کنید، این مستندات را بخوانید تا درباره نحوه توزیع آن اطلاعات بیشتری کسب کنید.
هنگامی که رمز اشکال زدایی را در کنسول Firebase ثبت کردید، سپس می توانید اجرای بررسی برنامه را دوباره فعال کنید و با تماس با firebase serve
از ترمینال، آزمایش کنید که محتوای برنامه به صورت محلی بارگیری می شود. باید مشاهده کنید که دادههایی که قبلا وارد شدهاند در حال ارائه به نسخه محلی برنامه وب هستند. همچنان باید پیامی را با نشانه اشکال زدایی که در کنسول چاپ شده است ببینید.
آن را در تولید امتحان کنید
هنگامی که مطمئن شدید که App Check به صورت محلی کار می کند، برنامه وب را برای تولید مستقر کنید. مجدداً از firebase deploy
و صفحه را بارگیری مجدد کنید. این برنامه وب شما را برای اجرا در میزبانی Firebase بسته بندی می کند. هنگامی که برنامه شما در میزبانی Firebase میزبانی شد، سپس سعی کنید از برنامه خود در ${YOUR_PROJECT_ID}.web.app
بازدید کنید. شما می توانید کنسول جاوا اسکریپت را باز کنید و دیگر نباید نشانه اشکال زدایی را که در آنجا چاپ شده است ببینید و باید چت ها را در پروژه خود بارگیری کنید. علاوه بر این، پس از چند لحظه تعامل با برنامه، میتوانید از بخش App Check در کنسول Firebase دیدن کنید و تأیید کنید که درخواستهای برنامه شما به همه تأیید شدهاند.
8. تبریک می گویم!
تبریک میگوییم، شما با موفقیت بررسی برنامه Firebase را به یک برنامه وب اضافه کردید!
شما کنسول Firebase را راهاندازی میکنید تا توکن reCAPTCHA Enterprise را برای محیطهای تولید مدیریت کند و حتی توکنهای اشکالزدایی را برای توسعه محلی تنظیم کنید. این تضمین میکند که برنامههای شما همچنان میتوانند به منابع Firebase از مشتریان تأیید شده دسترسی داشته باشند و از انجام فعالیتهای جعلی از داخل برنامه شما جلوگیری میکند.
بعدش چی؟
برای افزودن Firebase App Check به اسناد زیر را بررسی کنید: