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

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 ایجاد کنید

  1. وارد Firebase شوید.
  2. در کنسول Firebase، روی Add Project کلیک کنید و سپس نام پروژه Firebase خود را FriendlyChat بگذارید. شناسه پروژه برای پروژه Firebase خود را به خاطر بسپارید.
  3. علامت Enable Google Analytics را برای این پروژه بردارید
  4. روی ایجاد پروژه کلیک کنید.

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

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

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

طرح قیمت گذاری Firebase خود را ارتقا دهید

برای استفاده از Cloud Storage برای Firebase، پروژه Firebase شما باید در طرح قیمت‌گذاری (Blaze) باشد، به این معنی که به یک حساب Cloud Billing مرتبط است.

  • حساب Cloud Billing به یک روش پرداخت مانند کارت اعتباری نیاز دارد.
  • اگر تازه وارد Firebase و Google Cloud هستید، بررسی کنید که آیا واجد شرایط دریافت اعتبار 300 دلاری و یک حساب آزمایشی رایگان Cloud Billing هستید یا خیر.
  • اگر این نرم‌افزار کد را به‌عنوان بخشی از یک رویداد انجام می‌دهید، از سازمان‌دهنده خود بپرسید که آیا اعتبارات Cloud موجود است یا خیر.

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

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

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

  1. روی نماد وب کلیک کنید 58d6543a156e56f9.png برای ایجاد یک برنامه وب Firebase جدید.
  2. برنامه را با نام مستعار «چت دوستانه» ثبت کنید، سپس کادر کنار «همچنین میزبانی Firebase را برای این برنامه تنظیم کنید» علامت بزنید. روی ثبت برنامه کلیک کنید.
  3. در مرحله بعد، فرمانی برای نصب Firebase با استفاده از npm و یک شی پیکربندی خواهید دید. این شی را بعداً در Codelab کپی می‌کنید، بنابراین در حال حاضر، Next را فشار دهید.

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

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

Google Sign-in را برای احراز هویت Firebase فعال کنید

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

شما باید Google Sign-in را فعال کنید:

  1. در کنسول Firebase، قسمت Build را در پانل سمت چپ قرار دهید.
  2. Click Authentication , click Get Started if applicable, then click the Sign-in method tab (or click here to go directly there).
  3. ارائه دهنده ورود به سیستم Google را فعال کنید
  4. نام عمومی برنامه خود را روی چت دوستانه تنظیم کنید و یک ایمیل پشتیبانی پروژه را از منوی کشویی انتخاب کنید.
  5. روی ذخیره کلیک کنید

f96888973c3d00cc.png

Cloud Firestore را راه اندازی کنید

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

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

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

Cloud Storage را برای Firebase تنظیم کنید

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

در اینجا نحوه راه اندازی Cloud Storage برای Firebase در پروژه Firebase آمده است:

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

4. Firebase را پیکربندی کنید

از دایرکتوری appcheck-start ، تماس بگیرید:

firebase use --add

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

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

firebase-config.js

const config = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.firebasestorage.app",
  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 کلیک کنید. سپس در این قسمت یک نام نمایشی را مشخص کرده و یک کلید نوع وب سایت را انتخاب کنید. شما باید دامنه هایی را که برنامه شما روی آنها میزبانی می شود را مشخص کنید. Since you are planning on hosting this on Firebase Hosting, you use the default hosting name which is generally ${YOUR_PROJECT_ID}.web.app . می‌توانید دامنه میزبانی خود را در بخش Hosting Console Firebase پیدا کنید. پس از پر کردن این اطلاعات، Done را فشار دهید و کلید ایجاد کنید .

reCAPTCHA صفحه کلید ایجاد کنید

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

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

ادامه دهید و این شناسه را در کلیپ بورد خود کپی کنید. این کلیدی است که برای بررسی برنامه استفاده می کنید. در مرحله بعد، از قسمت App Check کنسول Firebase دیدن کنید و روی Get Started کلیک کنید. سپس روی Register کلیک کنید و سپس روی reCAPTCHA Enterprise کلیک کنید و شناسه کپی شده را در کادر متنی برای reCAPTCHA Enterprise Site Key قرار دهید. بقیه تنظیمات را به عنوان پیش فرض بگذارید. صفحه بررسی برنامه شما باید چیزی شبیه به این باشد:

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

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

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

داشبورد App Check که 100٪ درخواست های مشتری تأیید نشده برای برنامه شما را نشان می دهد.

بک‌اند 100% درخواست‌های تایید نشده دارد. این صفحه مفید است زیرا نشان می‌دهد که تقریباً تمام درخواست‌های مشتری از سوی کلاینت‌هایی می‌آیند که App Check را یکپارچه ندارند.

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

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

ادامه دهید و دکمه Enforce را از صفحه قبلی فشار دهید و سپس در صورت درخواست دوباره 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 ) و آن را به پیکربندی بررسی برنامه در منوی سرریز برنامه خود وصل کنید.

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

به نشانه یک نام منحصر به فرد بدهید که به خاطر بسپارید و روی ذخیره کلیک کنید. این گزینه به شما امکان می دهد از یک توکن تولید شده توسط مشتری با برنامه خود استفاده کنید که جایگزین ایمن تری نسبت به تولید رمز اشکال زدایی و جاسازی آن در برنامه خود است. جاسازی توکن در برنامه ممکن است به طور تصادفی بین کاربران نهایی توزیع شود و این کاربران نهایی می توانند با دور زدن چک های شما از آن سوء استفاده کنند. اگر می‌خواهید یک نشانه اشکال‌زدایی را، به عنوان مثال، در یک محیط 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 به اسناد زیر را بررسی کنید:

اسناد مرجع