App Check ওয়েব কোডল্যাব

১. ভূমিকা

শেষবার আপডেট করা হয়েছে: ২৩-০২-২০২৩

আপনার Firebase রিসোর্সে অননুমোদিত অ্যাক্সেস কীভাবে প্রতিরোধ করবেন?

আপনি Firebase App Check ব্যবহার করে অননুমোদিত ক্লায়েন্টদের আপনার ব্যাকএন্ড রিসোর্স অ্যাক্সেস করা থেকে আটকাতে পারেন। এর জন্য ইনকামিং অনুরোধের সাথে একটি অ্যাটেস্টেশন অ্যাটাচ করা থাকতে হবে যা প্রমাণ করবে যে অনুরোধটি আপনার আসল অ্যাপ থেকে এসেছে এবং সঠিক অ্যাটেস্টেশন না থাকা ট্রাফিক ব্লক করে দেবে। ক্লায়েন্টের সত্যতা যাচাই করার জন্য Firebase App Check প্ল্যাটফর্ম-নির্দিষ্ট অ্যাটেস্টেশন প্রোভাইডারের উপর নির্ভর করে: ওয়েব অ্যাপের জন্য, App Check অ্যাটেস্টেশন প্রোভাইডার হিসেবে reCAPTCHA v3 এবং reCAPTCHA Enterprise-কে সাপোর্ট করে।

Cloud Firestore, Realtime Database, Cloud Functions, Firebase Authentication with Identity Platform এবং আপনার হোস্ট করা ব্যাকএন্ডে অনুরোধ সুরক্ষিত করতে App Check ব্যবহার করা যেতে পারে।

আপনি কী তৈরি করবেন

এই কোডল্যাবে, আপনি প্রথমে App Check যোগ করে এবং তারপরে তা এনফোর্স করে একটি চ্যাট অ্যাপ্লিকেশন সুরক্ষিত করতে চলেছেন।

আপনি কী শিখবেন

• অননুমোদিত অ্যাক্সেসের জন্য আপনার ব্যাকএন্ড কীভাবে মনিটর করবেন
• Firestore ও Cloud Storage-এ কীভাবে এনফোর্সমেন্ট যোগ করবেন
• লোকাল ডেভেলপমেন্টের জন্য ডিবাগ টোকেন ব্যবহার করে কীভাবে আপনার অ্যাপ্লিকেশন রান করবেন

আপনার যা প্রয়োজন হবে

• আপনার পছন্দের IDE/টেক্সট এডিটর
• প্যাকেজ ম্যানেজার npm, যা সাধারণত Node.js-এর সাথে আসে
• আপনার অ্যাকাউন্টের সাথে কাজ করার জন্য Firebase CLI ইনস্টল ও কনফিগার করা আছে
• টার্মিনাল/কনসোল
• Chrome-এর মতো আপনার পছন্দের ব্রাউজার
• কোডল্যাবের স্যাম্পেল কোড (কোড কীভাবে পাবেন তা জানতে কোডল্যাবের পরবর্তী ধাপ দেখুন।)

২. স্যাম্পেল কোড পান

কমান্ড লাইন থেকে কোডল্যাবের GitHub রিপোজিটরি ক্লোন করুন:

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

অন্যথায়, আপনার Git ইনস্টল করা না থাকলে, আপনি ZIP ফাইল হিসেবে রিপোজিটরি ডাউনলোড করতে পারবেন।

স্টার্টার অ্যাপ ইমপোর্ট করা

আপনার IDE ব্যবহার করে, ক্লোন করা রিপোজিটরি থেকে 📁 appcheck-start ডিরেক্টরি খুলুন বা ইমপোর্ট করুন। এই 📁 appcheck-start ডিরেক্টরিতে কোডল্যাবের জন্য শুরুর কোড রয়েছে, যা সম্পূর্ণ কার্যকরী চ্যাট ওয়েব অ্যাপ হবে। 📁 appcheck ডিরেক্টরিতে কোডল্যাবের জন্য সম্পূর্ণ কোড থাকবে।

৩. Firebase প্রোজেক্ট তৈরি ও সেট-আপ করা

Firebase প্রোজেক্ট তৈরি করা

1. আপনার Google অ্যাকাউন্ট ব্যবহার করে Firebase কনসোলে সাইন-ইন করুন।
2. নতুন প্রোজেক্ট তৈরি করতে বোতামে ক্লিক করুন এবং তারপর প্রোজেক্টের নাম লিখুন (যেমন, FriendlyChat)।
   
3. চালিয়ে যান বিকল্পে ক্লিক করুন।
4. প্রম্পট করা হলে, Firebase-এর শর্তাবলী পর্যালোচনা করে সম্মতি জানান এবং তারপরে চালিয়ে যান বিকল্পে ক্লিক করুন।
5. (ঐচ্ছিক) Firebase কনসোলে AI অ্যাসিস্ট্যান্স চালু করুন (যাকে "Firebase-এ Gemini" বলা হয়)।
6. এই কোডল্যাবের জন্য, আপনার Google Analytics-এর প্রয়োজন নেই, তাই Google Analytics বিকল্পটি টগল করে বন্ধ করুন।
7. প্রোজেক্ট তৈরি করুন বিকল্পে ক্লিক করুন, আপনার প্রোজেক্টের প্রভিশন হওয়ার জন্য অপেক্ষা করুন এবং তারপর চালিয়ে যান বিকল্পে ক্লিক করুন।

আপনার Firebase-এর দাম সংক্রান্ত প্ল্যান আপগ্রেড করুন

Firebase-এর জন্য ক্লাউড স্টোরেজ ব্যবহার করতে, আপনার Firebase প্রোজেক্টকে যখন ব্যবহার করবেন তখন পেমেন্ট করুন (Blaze) প্রাইসিং প্ল্যান-এ থাকতে হবে, যার অর্থ হল এটি একটি Cloud Billing অ্যাকাউন্টের সাথে লিঙ্ক করা আছে।

• Cloud Billing অ্যাকাউন্টের জন্য ক্রেডিট কার্ডের মতো পেমেন্ট পদ্ধতি প্রয়োজন।
• আপনি Firebase ও Google Cloud-এ নতুন হলে, $৩০০ ক্রেডিট ও ফ্রি ট্রায়াল Cloud Billing অ্যাকাউন্টের জন্য উপযুক্ত কিনা তা চেক করুন।
• আপনি যদি কোনও ইভেন্টের অংশ হিসেবে এই কোডল্যাব করেন, তাহলে কোনও Cloud ক্রেডিট উপলভ্য আছে কিনা তা আপনার ইভেন্ট অর্গানাইজারকে জিজ্ঞাসা করুন।

আপনার প্রোজেক্ট Blaze প্ল্যানে আপগ্রেড করতে, এইসব ধাপ অনুসরণ করুন:

1. Firebase কনসোলে, আপনার প্ল্যান আপগ্রেড করুন বিকল্প বেছে নিন।
2. Blaze প্ল্যান বেছে নিন। আপনার প্রোজেক্টে Cloud Billing অ্যাকাউন্ট লিঙ্ক করতে অন-স্ক্রিন নির্দেশাবলী অনুসরণ করুন।
   এই আপগ্রেডের অংশ হিসেবে আপনাকে Cloud Billing অ্যাকাউন্ট তৈরি করতে হলে, আপগ্রেড সম্পূর্ণ করার জন্য আপনাকে Firebase কনসোলে আপগ্রেড ফ্লোতে ফিরে যেতে হতে পারে।

প্রোজেক্টে Firebase ওয়েব অ্যাপ যোগ করা

1. নতুন Firebase ওয়েব অ্যাপ তৈরি করতে, ওয়েব আইকনে ক্লিক করুন।
2. Friendly Chat ডাকনাম দিয়ে অ্যাপটি রেজিস্টার করুন, তারপর এই অ্যাপের জন্য Firebase Hosting সেট-আপ করুন বিকল্পের পাশে থাকা বক্সে টিকচিহ্ন দিন। অ্যাপ রেজিস্টার করুন বিকল্পে ক্লিক করুন।
3. পরবর্তী ধাপে, আপনি npm এবং একটি কনফিগারেশন অবজেক্ট ব্যবহার করে Firebase ইনস্টল করার একটি কমান্ড দেখতে পাবেন। আপনি পরে কোডল্যাবে এই অবজেক্ট কপি করবেন, তাই এখনকার মতো পরবর্তী বিকল্পে প্রেস করুন।

4. তারপর আপনি Firebase CLI ইনস্টল করার বিকল্প দেখতে পাবেন। আপনি যদি এটি আগে থেকে ইনস্টল না করে থাকেন, তাহলে এখন npm install -g firebase-tools কমান্ড ব্যবহার করে তা করুন। তারপর পরবর্তী বিকল্পে ক্লিক করুন।
5. তারপর আপনি Firebase-এ লগ-ইন করার এবং Firebase হোস্টিং-এ ডিপ্লয় করার বিকল্প দেখতে পাবেন। firebase login কমান্ড ব্যবহার করে Firebase-এ লগ-ইন করুন, তারপর কনসোলে যান বিকল্পে ক্লিক করুন। আপনি পরবর্তী কোনও ধাপে Firebase হোস্টিংয়ে ডিপ্লয় করেন।

Firebase প্রোডাক্ট সেট-আপ করা

আমরা যে অ্যাপ্লিকেশন তৈরি করতে চলেছি সেটি ওয়েব অ্যাপের জন্য উপলভ্য Firebase প্রোডাক্ট ব্যবহার করে:

• Firebase Authentication, যাতে আপনার ব্যবহারকারীরা সহজেই আপনার অ্যাপে সাইন-ইন করতে পারেন।
• ক্লাউডে স্ট্রাকচার্ড ডেটা সেভ করতে এবং ডেটা পরিবর্তন হলে সাথে সাথে বিজ্ঞপ্তি পেতে Cloud Firestore।
• ক্লাউডে ফাইল সেভ করার জন্য Firebase-এর জন্য ক্লাউড স্টোরেজ।
• আপনার অ্যাসেট হোস্ট ও পরিবেশন করার জন্য Firebase Hosting।
• পুশ বিজ্ঞপ্তি পাঠাতে এবং ব্রাউজার পপ-আপ বিজ্ঞপ্তি দেখাতে Firebase Cloud Messaging।
• আপনার অ্যাপের জন্য ব্যবহারকারীর পারফর্ম্যান্স ডেটা সংগ্রহ করতে Firebase পারফর্ম্যান্স মনিটরিং।

এইসব প্রোডাক্টের মধ্যে কিছু প্রোডাক্টের জন্য বিশেষ কনফিগারেশন প্রয়োজন অথবা Firebase কনসোল ব্যবহার করে চালু করতে হয়।

Firebase যাচাইকরণের জন্য Google সাইন-ইন চালু করুন

ব্যবহারকারীদের তাদের Google অ্যাকাউন্ট দিয়ে ওয়েব অ্যাপে সাইন-ইন করার অনুমতি দিতে, আমরা Google সাইন-ইন পদ্ধতি ব্যবহার করব।

আপনাকে Google সাইন-ইন চালু করতে হবে:

1. Firebase কনসোলে, বাঁদিকের প্যানেলে বিল্ড বিভাগটি খুঁজুন।
2. যাচাইকরণ বিকল্পে ক্লিক করুন, প্রযোজ্য হলে শুরু করুন বিকল্পে ক্লিক করুন, তারপর সাইন-ইন পদ্ধতি ট্যাবে ক্লিক করুন (অথবা সরাসরি সেখানে যেতে এখানে ক্লিক করুন)।
3. Google সাইন-ইন পরিষেবা প্রদানকারী চালু করুন
4. আপনার অ্যাপের সর্বজনীন নাম Friendly Chat হিসেবে সেট করুন এবং ড্রপডাউন মেনু থেকে প্রোজেক্ট সহায়তা ইমেল বেছে নিন।
5. সেভ করুন বিকল্পে ক্লিক করুন

Cloud Firestore সেট-আপ করা

চ্যাট মেসেজ সেভ করতে এবং নতুন চ্যাট মেসেজ পেতে ওয়েব অ্যাপ Cloud Firestore ব্যবহার করে।

আপনার Firebase প্রোজেক্টে Cloud Firestore কীভাবে সেট-আপ করবেন তা এখানে দেওয়া হল:

1. Firebase কনসোলের বাঁদিকের প্যানেলে, বিল্ড বিকল্প বড় করে দেখুন এবং তারপরে Firestore ডেটাবেস বেছে নিন।
2. ডেটাবেস তৈরি করুন বিকল্পে ক্লিক করুন।
3. ডেটাবেসের আইডি (default)-এ সেট করা অবস্থায় ছেড়ে দিন।
4. আপনার ডেটাবেসের জন্য একটি লোকেশন বেছে নিন, তারপর পরবর্তী বিকল্পে ক্লিক করুন।
   আসল অ্যাপের জন্য, আপনি এমন একটি লোকেশন বেছে নিতে চাইবেন যা আপনার ব্যবহারকারীদের কাছাকাছি।
5. টেস্ট মোডে শুরু করুন বিকল্পে ক্লিক করুন। নিরাপত্তা সংক্রান্ত নিয়ম সম্পর্কে ডিসক্লেমার পড়ুন।
   এই কোডল্যাবের পরবর্তী ধাপে, আপনার ডেটা সুরক্ষিত করতে নিরাপত্তা সংক্রান্ত নিয়ম যোগ করবেন। আপনার ডেটাবেসের জন্য নিরাপত্তা সংক্রান্ত নিয়ম যোগ না করে কোনও অ্যাপ সর্বজনীনভাবে ডিস্ট্রিবিউট বা প্রকাশ করবেন না।
6. তৈরি করুন বিকল্পে ক্লিক করুন।

Firebase-এর জন্য ক্লাউড স্টোরেজ সেট-আপ করা

ছবি স্টোর, আপলোড ও শেয়ার করার জন্য ওয়েব অ্যাপ Firebase-এর জন্য ক্লাউড স্টোরেজ ব্যবহার করে।

আপনার Firebase প্রোজেক্টে Firebase-এর জন্য ক্লাউড স্টোরেজ কীভাবে সেট-আপ করবেন তা এখানে দেওয়া হল:

1. Firebase কনসোলের বাঁদিকের প্যানেলে, বিল্ড বিকল্প বড় করে দেখুন এবং তারপর Storage বিকল্প বেছে নিন।
2. শুরু করুন বিকল্পে ক্লিক করুন।
3. আপনার ডিফল্ট স্টোরেজ বাকেটের জন্য একটি লোকেশন বেছে নিন।
   US-WEST1, US-CENTRAL1 এবং US-EAST1-এ থাকা বাকেট Google Cloud Storage-এর জন্য "সবসময় ফ্রি" টিয়ার-এর সুবিধা নিতে পারে। অন্যান্য সব লোকেশনে বাকেট Google Cloud Storage-এর দাম ও ব্যবহার সংক্রান্ত নীতি মেনে চলে।
4. টেস্ট মোডে শুরু করুন বিকল্পে ক্লিক করুন। নিরাপত্তা সংক্রান্ত নিয়ম সম্পর্কে ডিসক্লেমার পড়ুন।
   এই কোডল্যাবের পরবর্তী ধাপে, আপনার ডেটা সুরক্ষিত করতে নিরাপত্তা সংক্রান্ত নিয়ম যোগ করবেন। আপনার Storage বাকেটের জন্য নিরাপত্তা সংক্রান্ত নিয়ম যোগ না করে কোনও অ্যাপ সর্বজনীনভাবে ডিস্ট্রিবিউট বা প্রকাশ করবেন না।
5. তৈরি করুন বিকল্পে ক্লিক করুন।

৪. Firebase কনফিগার করুন

appcheck-start ডিরেক্টরি থেকে, কল করুন:

firebase use --add

প্রম্পট করা হলে, আপনার প্রোজেক্ট আইডি বেছে নিন, তারপর আপনার Firebase প্রোজেক্টের একটি উপনাম দিন। এই প্রোজেক্টের জন্য, আপনি শুধু ডিফল্ট অ্যালিয়াস দিতে পারেন। এরপর, Firebase-এর সাথে কাজ করার জন্য আপনাকে লোকাল প্রোজেক্ট কনফিগার করতে হবে।

1. আপনার Firebase কনসোলে প্রোজেক্ট সেটিংস বিকল্পে যান
2. "আপনার অ্যাপ" কার্ডে, যে অ্যাপের জন্য আপনার কনফিগারেশন অবজেক্ট প্রয়োজন সেটির ডাকনাম বেছে নিন।
3. 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

এটি ওয়েব ফ্রেমওয়ার্ক সাপোর্ট চালু করে, যার সাহায্যে এই প্রোজেক্ট তৈরি করা হয়েছে।

আপনার প্রোজেক্ট রান করার জন্য এবং ডিফল্ট প্রোজেক্ট কাজ করছে কিনা তা পরীক্ষা করার জন্য আমাদের এখন প্রস্তুত থাকা উচিত!

৫. App Check ছাড়াই অ্যাপ ব্যবহার করে দেখুন

এখন আপনার অ্যাপ কনফিগার করা এবং SDK সেট-আপ করা হয়ে গেছে, তাই অ্যাপটি যেভাবে ডিজাইন করা হয়েছে সেভাবে ব্যবহার করার চেষ্টা করুন। প্রথমে, সব ডিপেন্ডেন্সি ইনস্টল করে শুরু করুন। আপনার টার্মিনাল থেকে, appcheck-start/hosting ডিরেক্টরিতে নেভিগেট করুন। সেই ডিরেক্টরির মধ্যে থেকে npm install রান করুন। আপনার প্রোজেক্ট কাজ করার জন্য এটি সব ডিপেন্ডেন্সি ফেচ করে। অ্যাপটি তার বর্তমান অবস্থায় চালু করতে, আপনি firebase serve চালাতে পারেন। অ্যাপটি আপনাকে Google অ্যাকাউন্ট দিয়ে লগ-ইন করতে বলবে; সেটি করুন এবং তারপর চ্যাটে কয়েকটি চ্যাট মেসেজ ও ফটো পোস্ট করার চেষ্টা করুন।

আপনি এটি লোকাল ডিভাইসে পরীক্ষা করে দেখেছেন, এবার প্রোডাকশনে দেখার সময় এসেছে! ওয়েবে ওয়েব অ্যাপ্লিকেশন ডিপ্লয় করতে firebase deploy রান করুন। এই অংশটি বাস্তব জগতে App Check কীভাবে কাজ করে তা দেখানোর একটি গুরুত্বপূর্ণ ধাপ কারণ এর জন্য reCAPTCHA Enterprise অ্যাটেস্টেশন প্রোভাইডারের জন্য একটি ডোমেন কনফিগার করতে হয়।

আশা করি, অ্যাপটি যে ডিফল্ট ক্ষমতা প্রদান করে তা আপনি উপভোগ করছেন। চ্যাট মেসেজ পোস্ট করা এবং অন্য সবকিছু যা শুধুমাত্র এই ধরনের অ্যাপ থেকে করা উচিত। বর্তমান অবস্থার নেতিবাচক দিক হল, আগের ধাপ থেকে আপনার অ্যাপ কনফিগারেশন অ্যাক্সেস করতে পারা যেকোনও ব্যক্তি আপনার ব্যাকএন্ড রিসোর্স অ্যাক্সেস করতে পারবেন। তবে, Firestore ও Cloud Storage সিস্টেমের নিরাপত্তা সংক্রান্ত নিয়ম তাদের মেনে চলতে হবে। তাছাড়া, সেখানে স্টোর করা ডেটা তারা কোয়েরি, স্টোর ও অ্যাক্সেস করতে পারবে।

পরবর্তী কয়েকটি ধাপে, আপনি এগুলি করতে চলেছেন:

• App Check-এর জন্য রেজিস্টার করা
• এনফোর্সমেন্ট যাচাই করুন
• নিয়ম এনফোর্স করা শুরু করুন

৬. App Check ও এনফোর্সমেন্ট চালু করা

আপনার প্রোজেক্টের জন্য reCAPTCHA Enterprise কী নিয়ে এবং সেটি App Check-এ যোগ করে শুরু করা যাক। Google Cloud Console-এর reCAPTCHA Enterprise বিভাগে গিয়ে শুরু করুন। আপনার প্রোজেক্ট বেছে নিন এবং তারপরে আপনাকে reCAPTCHA Enterprise API চালু করার জন্য প্রম্পট করা হবে। API চালু করুন এবং এটি সম্পূর্ণ হওয়ার জন্য কয়েক মিনিট অপেক্ষা করুন। তারপর Enterprise কী-এর পাশে কী তৈরি করুন বিকল্পে ক্লিক করুন। তারপর এই বিভাগে, একটি ডিসপ্লে নাম উল্লেখ করুন এবং ওয়েবসাইট টাইপ কী বেছে নিন। আপনার অ্যাপ যেসব ডোমেনে হোস্ট করা হয়েছে সেগুলি উল্লেখ করতে হবে। আপনি যেহেতু Firebase হোস্টিংয়ে এটি হোস্ট করার পরিকল্পনা করছেন, তাই আপনি ডিফল্ট হোস্টিং নাম ব্যবহার করেন যা সাধারণত ${YOUR_PROJECT_ID}.web.app হয়। Firebase কনসোলের হোস্টিং বিভাগ থেকে আপনার হোস্টিং ডোমেন খুঁজে পাবেন। এই তথ্য পূরণ করার পরে, হয়ে গেছে এবং 'ডিজিটাল চাবি' তৈরি করুন বিকল্পে প্রেস করুন।

সম্পূর্ণ হয়ে গেলে, কী-এর বিবরণ পৃষ্ঠার সবচেয়ে উপরে আপনি একটি আইডি দেখতে পাবেন।

এগিয়ে যান এবং আপনার ক্লিপবোর্ডে এই আইডি কপি করুন। এটি হল সেই 'কী' যা আপনি App Check-এর জন্য ব্যবহার করেন। এরপর, Firebase কনসোলের App Check বিভাগে যান এবং শুরু করুন বিকল্পে ক্লিক করুন। তারপর, রেজিস্টার করুন বিকল্পে ক্লিক করুন এবং তারপর reCAPTCHA Enterprise বিকল্পে ক্লিক করুন এবং কপি করা আইডিটি reCAPTCHA Enterprise সাইট কী-এর জন্য টেক্সট বক্সে রাখুন। বাকি সেটিংস ডিফল্ট হিসেবে রেখে দিন। আপনার App Check পৃষ্ঠাটি দেখতে এরকম হওয়া উচিত:

যাচাই না করা এবং প্রয়োগ না করা অনুরোধ

Firebase কনসোলে আপনার রেজিস্টার করা কী আছে, তাই firebase serve রান করে ব্রাউজারে আপনার সাইট রান করার প্রসেসে ফিরে যান। এখানে আপনার ওয়েব অ্যাপ লোকালি চলছে এবং আপনি Firebase ব্যাকএন্ডের বিরুদ্ধে আবার অনুরোধ করা শুরু করতে পারবেন। Firebase ব্যাকএন্ডে অনুরোধ করা হয় বলে, এইসব অনুরোধ App Check-এর মাধ্যমে মনিটর করা হয়, তবে এনফোর্স করা হয় না। আপনি যদি আসা অনুরোধের স্ট্যাটাস দেখতে চান, তাহলে Firebase কনসোলে App Check পৃষ্ঠার API ট্যাবে Cloud Firestore বিভাগে যেতে পারেন। আপনি এখনও App Check ব্যবহার করার জন্য ক্লায়েন্ট কনফিগার করেননি, তাই আপনি এই ধরনের কিছু দেখতে পাবেন:

ব্যাকএন্ডে ১০০% যাচাই না করা অনুরোধ আসছে। এই স্ক্রিনটি উপযোগী কারণ এটি দেখায় যে প্রায় সব ক্লায়েন্ট অনুরোধ এমন ক্লায়েন্টদের থেকে আসছে যাদের App Check ইন্টিগ্রেট করা নেই।

এই ড্যাশবোর্ড থেকে কয়েকটি বিষয় বোঝা যেতে পারে। এটি প্রথম যে বিষয়টি ইঙ্গিত করতে পারে তা হল, আপনার ক্লায়েন্টের সব অ্যাপ আপনার ক্লায়েন্টের লেটেস্ট ভার্সন রান করছে কিনা। যদি তা হয়, তাহলে আপনার অ্যাপ্লিকেশনের আসল ক্লায়েন্টের অ্যাক্সেস বন্ধ হয়ে যাওয়ার চিন্তা না করেই আপনি নিরাপদে App Check এনফোর্স করতে পারবেন। এটি আপনাকে আরও একটি জিনিস জানাতে পারে, তা হল আপনার অ্যাপের মধ্যে থেকে না এসে কতগুলি প্রচেষ্টা আপনার ব্যাকএন্ড অ্যাক্সেস করার জন্য এসেছে। এটি এমন ব্যবহারকারী হতে পারে যারা আপনার অজান্তে সরাসরি আপনার ব্যাকএন্ডে কোয়েরি করছে। আপনি যেহেতু দেখতে পাচ্ছেন যে অনুরোধগুলি যাচাই করা হয়নি, তাই এখন সময় এসেছে সেইসব ব্যবহারকারীর কী হবে তা দেখার যাদের আপনার ব্যাকএন্ডে একটি যাচাই না করা অনুরোধ থাকতে পারে, তাদের অনুরোধ যাচাই করার জন্য এগিয়ে যাওয়ার আগে।

যাচাই না করা ও এনফোর্স করা অনুরোধ

আগের স্ক্রিনে গিয়ে এনফোর্স করুন বোতামে প্রেস করুন এবং প্রম্পট করা হলে আবার এনফোর্স করুন বোতামে প্রেস করুন।

এটি App Check এনফোর্স করা শুরু করবে; এটি এখন আপনার ব্যাকএন্ড পরিষেবার জন্য করা অনুরোধ ব্লক করবে যা আপনার বেছে নেওয়া অ্যাটেস্টেশন প্রোভাইডারের (এই ক্ষেত্রে reCAPTCHA Enterprise) মাধ্যমে যাচাই করা হয়নি। আপনার চালু থাকা ওয়েব অ্যাপে ফিরে যান যা http://localhost:5000-এ চালু থাকা উচিত। আপনি পৃষ্ঠা রিফ্রেশ করে ডেটাবেস থেকে ডেটা পাওয়ার চেষ্টা করলে, কিছুই হয় না। আপনি যদি সমস্যাগুলি পড়ার জন্য Chrome কনসোল খোলেন, তাহলে আপনি নিম্নলিখিতগুলির মতো কিছু দেখতে পাবেন:

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

এটি হল App Check-এর ব্লক করার অনুরোধ যা আপনার Firebase রিসোর্সে করা অনুরোধে সঠিক অ্যাটেস্টেশন টোকেন পাস করেনি। আপাতত, আপনি App Check এনফোর্সমেন্ট বন্ধ করতে পারেন এবং পরবর্তী বিভাগে, আপনি পরীক্ষা করে দেখতে পারেন যে কীভাবে Friendly Chat-এর উদাহরণে reCAPTCHA Enterprise App Check যোগ করতে হয়।

৭. সাইটে reCAPTCHA Enterprise কী যোগ করুন

আমরা আপনার অ্যাপ্লিকেশনে এন্টারপ্রাইজ কী যোগ করতে চলেছি। প্রথমে, hosting/src/firebase-config.js খুলুন এবং নিম্নলিখিত কোড স্নিপেটে আপনার reCAPTCHA Enterprise কী যোগ করুন:

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

এটি সম্পূর্ণ হয়ে গেলে, hosting/src/index.js খুলুন এবং ৫১ নম্বর লাইনে, আপনার reCAPTCHA কী ফেচ করার জন্য firebase-config.js থেকে একটি ইমপোর্ট যোগ করতে হবে এবং 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 অ্যাটেস্টেশন প্রোভাইডারের সাথে রেজিস্টার করেছেন, লোকালহোস্ট ডোমেন নয়। আপনার কখনই লোকালহোস্টকে অনুমোদিত ডোমেন হিসেবে রেজিস্টার করা উচিত নয় কারণ এটি ব্যবহারকারীদের তাদের মেশিনে স্থানীয়ভাবে চলা অ্যাপ্লিকেশন থেকে আপনার সীমাবদ্ধ ব্যাকএন্ড অ্যাক্সেস করার অনুমতি দেয়। পরিবর্তে, আপনি 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 কনফিগারেশন-এ প্লাগ-ইন করতে হবে।

টোকেনটির একটি অনন্য নাম দিন যা আপনি মনে রাখতে পারবেন এবং সেভ করুন বিকল্পে ক্লিক করুন। এই বিকল্প আপনাকে অ্যাপের সাথে ক্লায়েন্টের তৈরি করা টোকেন ব্যবহার করার অনুমতি দেয় যা ডিবাগ টোকেন তৈরি করা এবং আপনার অ্যাপ্লিকেশনের মধ্যে এটি এম্বেড করার চেয়ে একটি নিরাপদ বিকল্প। অ্যাপের মধ্যে টোকেন এম্বেড করলে, সেটি ভুলবশত ব্যবহারকারীদের কাছে ডিস্ট্রিবিউট হয়ে যেতে পারে এবং সেই ব্যবহারকারীরা আপনার চেক বাইপাস করে এটির অপব্যবহার করতে পারেন। আপনি যদি কোনও ডিবাগ টোকেন ডিস্ট্রিবিউট করতে চান, যেমন, CI এনভায়রনমেন্টে, তাহলে কীভাবে এটি ডিস্ট্রিবিউট করবেন সেই সম্পর্কে আরও জানতে এই ডকুমেন্টেশন পড়ুন।

Firebase কনসোলে ডিবাগ টোকেন রেজিস্টার করা হয়ে গেলে, আপনি App Check এনফোর্সমেন্ট আবার চালু করতে পারবেন এবং টার্মিনাল থেকে firebase serve কল করে অ্যাপের কন্টেন্ট লোকালি লোড হচ্ছে কিনা তা পরীক্ষা করতে পারবেন। আপনি আগে যে ডেটা লিখেছিলেন তা ওয়েব অ্যাপ্লিকেশনের লোকাল ভার্সনে দেখতে পাবেন। কনসোলে প্রিন্ট করা ডিবাগ টোকেন সহ মেসেজটি এখনও আপনার দেখতে পাওয়ার কথা।

প্রোডাকশনে এটি ব্যবহার করে দেখুন

App Check লোকাল ডিভাইসে কাজ করছে কিনা তা নিয়ে সন্তুষ্ট হওয়ার পরে, প্রোডাকশনে ওয়েব অ্যাপ্লিকেশন ডিপ্লয় করুন। আপনার টার্মিনাল থেকে আবার firebase deploy কল করুন এবং পৃষ্ঠাটি আবার লোড করুন। এটি Firebase হোস্টিংয়ে চালানোর জন্য আপনার ওয়েব অ্যাপ্লিকেশন প্যাকেজ করবে। Firebase হোস্টিংয়ে আপনার অ্যাপ্লিকেশন হোস্ট করা হয়ে গেলে, ${YOUR_PROJECT_ID}.web.app-এ গিয়ে আপনার অ্যাপ্লিকেশন দেখার চেষ্টা করুন। আপনি জাভাস্ক্রিপ্ট কনসোল খুলতে পারেন এবং সেখানে আর ডিবাগ টোকেন প্রিন্ট করা দেখতে পাবেন না এবং আপনার প্রোজেক্টে চ্যাট লোড হতে দেখতে পাবেন। এছাড়াও, অ্যাপ্লিকেশনের সাথে কিছুক্ষণ ইন্টার‍্যাক্ট করার পরে, আপনি Firebase কনসোলের App Check বিভাগে গিয়ে আপনার অ্যাপ্লিকেশনে আসা অনুরোধগুলি যাচাই করা হয়েছে কিনা তা চেক করতে পারবেন।

৮. অভিনন্দন!

অভিনন্দন, আপনি ওয়েব অ্যাপে Firebase App Check যোগ করেছেন!

আপনি প্রোডাকশন এনভায়রনমেন্টের জন্য reCAPTCHA Enterprise টোকেন ম্যানেজ করতে Firebase কনসোল সেট-আপ করেন এবং এমনকি লোকাল ডেভেলপমেন্টের জন্য ডিবাগ টোকেন সেট-আপ করেন। এটি নিশ্চিত করে যে আপনার অ্যাপ এখনও অনুমোদিত ক্লায়েন্টদের থেকে Firebase রিসোর্স অ্যাক্সেস করতে সক্ষম এবং আপনার অ্যাপ্লিকেশনের মধ্যে থেকে প্রতারণামূলক কার্যকলাপ ঘটতে বাধা দেয়।

এর পরে কী হবে?

এগুলিতে Firebase App Check যোগ করতে নিম্নলিখিত ডকুমেন্টেশন দেখুন:

• Cloud Functions-এ এনফোর্সমেন্ট চালু করা
• কাস্টম ব্যাকএন্ডে App Check টোকেন যাচাই করা

রেফারেন্স ডকুমেন্ট

• ওয়েব অ্যাপে reCAPTCHA Enterprise-এর সাথে App Check ব্যবহার করা শুরু করুন
• ওয়েব অ্যাপে ডিবাগ প্রোভাইডার ব্যবহার করা