অ্যাপ চেক ওয়েব কোডল্যাব

1. ভূমিকা

শেষ আপডেট: ২০২৩-০২-২৩

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

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

অ্যাপ চেক ক্লাউড ফায়ারস্টোর, রিয়েলটাইম ডাটাবেস, ক্লাউড ফাংশন, আইডেন্টিটি প্ল্যাটফর্মের মাধ্যমে ফায়ারবেস প্রমাণীকরণ এবং আপনি নিজে হোস্ট করা ব্যাকএন্ডের অনুরোধগুলি সুরক্ষিত করতে ব্যবহার করা যেতে পারে।

তুমি কী তৈরি করবে

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

তুমি কি শিখবে

• অননুমোদিত অ্যাক্সেসের জন্য আপনার ব্যাকএন্ড কীভাবে পর্যবেক্ষণ করবেন
• ফায়ারস্টোর এবং ক্লাউড স্টোরেজে কীভাবে এনফোর্সমেন্ট যোগ করবেন
• স্থানীয় উন্নয়নের জন্য ডিবাগ টোকেন দিয়ে আপনার অ্যাপ্লিকেশনটি কীভাবে চালাবেন

তোমার যা লাগবে

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

2. নমুনা কোড পান

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

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

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

friendlychat-web সংগ্রহস্থলে একাধিক প্ল্যাটফর্মের জন্য নমুনা প্রকল্প রয়েছে।

এই কোডল্যাবটি শুধুমাত্র এই দুটি ফোল্ডার ব্যবহার করে:

• 📁 অ্যাপচেক-স্টার্ট : এই কোডল্যাবের সময় আপনি যে প্রারম্ভিক কোডটি ব্যবহার করবেন।
• 📁 অ্যাপচেক : সমাপ্ত নমুনা অ্যাপের সম্পূর্ণ কোড।

দ্রষ্টব্য : যদি আপনি সমাপ্ত অ্যাপটি চালাতে চান, তাহলে আপনাকে Firebase কনসোলে একটি Firebase প্রকল্প তৈরি করতে হবে (নির্দেশাবলীর জন্য এই কোডল্যাবে একটি Firebase প্রকল্প তৈরি করুন এবং সেট আপ করুন বিভাগটি দেখুন)।

স্টার্টার অ্যাপটি আমদানি করুন

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

৩. একটি ফায়ারবেস প্রকল্প তৈরি এবং সেট আপ করুন

একটি ফায়ারবেস প্রকল্প তৈরি করুন

1. আপনার গুগল অ্যাকাউন্ট ব্যবহার করে ফায়ারবেস কনসোলে সাইন ইন করুন।
2. একটি নতুন প্রকল্প তৈরি করতে বোতামটি ক্লিক করুন, এবং তারপর একটি প্রকল্পের নাম লিখুন (উদাহরণস্বরূপ, FriendlyChat )।
   

   এই প্রকল্পের নামটি Firebase ইন্টারফেসে একটি প্রদর্শন নাম হিসেবে ব্যবহৃত হয় এবং Firebase এই প্রকল্পের নামের উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে একটি অনন্য প্রকল্প আইডি তৈরি করে। মনে রাখবেন যে আপনি ঐচ্ছিকভাবে এখনই সম্পাদনা আইকনে ক্লিক করে আপনার পছন্দের প্রকল্প আইডি সেট করতে পারেন, তবে প্রকল্প তৈরির পরে আপনি এই আইডি পরিবর্তন করতে পারবেন না।

   আপনার প্রজেক্ট আইডি মনে রাখবেন কারণ পরে Firebase CLI তে আপনার Firebase প্রজেক্ট সনাক্ত করার জন্য এটির প্রয়োজন হবে। যদি আপনি আপনার আইডি ভুলে যান, তাহলে আপনি এটি পরে Project Settings এ খুঁজে পেতে পারেন।

3. চালিয়ে যান ক্লিক করুন।
4. যদি অনুরোধ করা হয়, তাহলে Firebase শর্তাবলী পর্যালোচনা করুন এবং গ্রহণ করুন, এবং তারপর Continue এ ক্লিক করুন।
5. (ঐচ্ছিক) Firebase কনসোলে ("Gemini in Firebase" নামে পরিচিত) AI সহায়তা সক্ষম করুন।
6. এই কোডল্যাবের জন্য, আপনার গুগল অ্যানালিটিক্সের প্রয়োজন নেই , তাই গুগল অ্যানালিটিক্স বিকল্পটি টগল করে বন্ধ করে দিন ।
7. Create project এ ক্লিক করুন, আপনার province করার জন্য অপেক্ষা করুন, এবং তারপর Continue এ ক্লিক করুন।

আপনার Firebase মূল্য পরিকল্পনা আপগ্রেড করুন

Firebase-এর জন্য ক্লাউড স্টোরেজ ব্যবহার করার জন্য, আপনার Firebase প্রকল্পটি pay-as-you go (Blaze) মূল্য পরিকল্পনায় থাকা প্রয়োজন, যার অর্থ এটি একটি ক্লাউড বিলিং অ্যাকাউন্টের সাথে লিঙ্ক করা আছে।

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

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

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

দ্রষ্টব্য : এই কোডল্যাবটি সম্পন্ন করার পরে আপনি আপনার প্রকল্পটিকে নো-কস্ট (স্পার্ক) মূল্য পরিকল্পনায় ডাউনগ্রেড করতে পারেন।

প্রকল্পে একটি Firebase ওয়েব অ্যাপ যোগ করুন

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

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

Firebase পণ্য সেট আপ করুন

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

• আপনার ব্যবহারকারীদের সহজেই আপনার অ্যাপে সাইন ইন করার অনুমতি দেওয়ার জন্য ফায়ারবেস প্রমাণীকরণ।
• ক্লাউড ফায়ারস্টোর ক্লাউডে স্ট্রাকচার্ড ডেটা সংরক্ষণ করে এবং ডেটা পরিবর্তন হলে তাৎক্ষণিক বিজ্ঞপ্তি পায়।
• ক্লাউডে ফাইল সংরক্ষণের জন্য ফায়ারবেসের জন্য ক্লাউড স্টোরেজ।
• আপনার সম্পদ হোস্ট এবং পরিবেশন করার জন্য ফায়ারবেস হোস্টিং।
• পুশ বিজ্ঞপ্তি পাঠাতে এবং ব্রাউজার পপআপ বিজ্ঞপ্তি প্রদর্শন করতে ফায়ারবেস ক্লাউড মেসেজিং।
• আপনার অ্যাপের জন্য ব্যবহারকারীর কর্মক্ষমতা ডেটা সংগ্রহ করার জন্য Firebase পারফরম্যান্স মনিটরিং।

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

Firebase প্রমাণীকরণের জন্য Google সাইন-ইন সক্ষম করুন

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

আপনাকে গুগল সাইন-ইন সক্ষম করতে হবে:

1. ফায়ারবেস কনসোলে, বাম প্যানেলে বিল্ড বিভাগটি সনাক্ত করুন।
2. Authentication এ ক্লিক করুন, প্রযোজ্য হলে Get Started এ ক্লিক করুন, তারপর Sign-in method ট্যাবে ক্লিক করুন (অথবা সরাসরি সেখানে যেতে এখানে ক্লিক করুন )।
3. Google সাইন-ইন প্রদানকারী সক্ষম করুন
4. আপনার অ্যাপের পাবলিক-ফেসিং নাম ফ্রেন্ডলি চ্যাটে সেট করুন এবং ড্রপডাউন মেনু থেকে একটি প্রজেক্ট সাপোর্ট ইমেল বেছে নিন।
5. সংরক্ষণ করুন ক্লিক করুন

ক্লাউড ফায়ারস্টোর সেট আপ করুন

ওয়েব অ্যাপটি চ্যাট বার্তা সংরক্ষণ এবং নতুন চ্যাট বার্তা গ্রহণের জন্য ক্লাউড ফায়ারস্টোর ব্যবহার করে।

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

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

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

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

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

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

৪. ফায়ারবেস কনফিগার করুন

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

firebase use --add

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

1. Firebase কনসোলে আপনার প্রোজেক্ট সেটিংসে যান।
2. "আপনার অ্যাপস" কার্ডে, যে অ্যাপটির জন্য আপনার একটি কনফিগ অবজেক্ট প্রয়োজন তার ডাকনাম নির্বাচন করুন।
3. Firebase SDK স্নিপেট প্যান থেকে Config নির্বাচন করুন।
4. কনফিগ অবজেক্ট স্নিপেটটি কপি করুন, তারপর এটি appcheck-start/hosting/src/firebase-config.js এ যোগ করুন। কোডল্যাবের বাকি অংশ ধরে নেয় যে ভেরিয়েবলটির নাম config ।

ফায়ারবেস-কনফিগ.জেএস

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

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

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

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

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

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

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

পরবর্তী কয়েকটি ধাপে, আপনি যা করবেন:

• অ্যাপ চেকের জন্য নিবন্ধন করুন
• প্রয়োগ যাচাই করুন
• নিয়ম প্রয়োগ শুরু করুন

৬. অ্যাপ চেক এবং এনফোর্সমেন্ট চালু করুন

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

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

এই আইডিটি আপনার ক্লিপবোর্ডে কপি করুন। এটিই হল সেই কী যা আপনি অ্যাপ চেকের জন্য ব্যবহার করেন। এরপর, Firebase কনসোলের অ্যাপ চেক অংশে যান এবং Get Started এ ক্লিক করুন। তারপর, Register এ ক্লিক করুন এবং তারপর reCAPTCHA Enterprise এ ক্লিক করুন এবং কপি করা আইডিটি reCAPTCHA Enterprise Site Key এর টেক্সট বক্সে রাখুন। বাকি সেটিংস ডিফল্ট হিসাবে ছেড়ে দিন। আপনার অ্যাপ চেক পৃষ্ঠাটি দেখতে এরকম কিছু হওয়া উচিত:

যাচাই না করা এবং জোরপূর্বক না করা অনুরোধগুলি

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

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

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

যাচাই না করা এবং জোরপূর্বক অনুরোধগুলি

এগিয়ে যান এবং পূর্ববর্তী স্ক্রিন থেকে Enforce বোতাম টিপুন এবং তারপর অনুরোধ করা হলে আবার Enforce টিপুন।

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

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

এটি হল অ্যাপ চেক ব্লকিং অনুরোধ যা আপনার ফায়ারবেস রিসোর্সে তাদের অনুরোধে একটি বৈধ প্রত্যয়ন টোকেন পাস করেনি। আপাতত, আপনি অ্যাপ চেক এনফোর্সমেন্ট বন্ধ করতে পারেন এবং পরবর্তী বিভাগে, আপনি পরীক্ষা করবেন কিভাবে ফ্রেন্ডলি চ্যাট উদাহরণে reCAPTCHA এন্টারপ্রাইজ অ্যাপ চেক যোগ করবেন।

৭. সাইটে reCAPTCHA এন্টারপ্রাইজ কী যোগ করুন

আমরা আপনার অ্যাপ্লিকেশনে এন্টারপ্রাইজ কী যোগ করতে যাচ্ছি। প্রথমে, 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 খুলুন এবং ৫১ নম্বর লাইনে, আপনি firebase-config.js থেকে একটি আমদানি যোগ করে আপনার reCAPTCHA কী আনবেন এবং অ্যাপ চেক লাইব্রেরিটিও আমদানি করবেন যাতে আপনি 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';

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

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

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

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 চালান। আপনার লক্ষ্য করা উচিত যে অ্যাপ্লিকেশনটি এখনও স্থানীয়ভাবে লোড হচ্ছে না। এর কারণ হল আপনি শুধুমাত্র reCAPTCHA প্রত্যয়ন প্রদানকারীর সাথে আপনার Firebase ডোমেন নিবন্ধন করেছেন, localhost ডোমেন নয়। আপনার কখনই 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 কল করে অ্যাপের কন্টেন্ট স্থানীয়ভাবে লোড হচ্ছে কিনা তা পরীক্ষা করতে পারেন। আপনি ওয়েব অ্যাপ্লিকেশনের স্থানীয় সংস্করণে পূর্বে প্রবেশ করা ডেটা পরিবেশিত হচ্ছে তা দেখতে পাবেন। আপনি এখনও কনসোলে ডিবাগ টোকেন প্রিন্ট করা বার্তাটি দেখতে পাবেন।

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

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

৮. অভিনন্দন!

অভিনন্দন, আপনি সফলভাবে একটি ওয়েব অ্যাপে Firebase অ্যাপ চেক যোগ করেছেন!

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

এরপর কী?

Firebase অ্যাপ চেক যোগ করতে নিম্নলিখিত ডকুমেন্টেশনগুলি দেখুন:

• ক্লাউড ফাংশনে এনফোর্সমেন্ট সক্ষম করুন
• কাস্টম ব্যাকএন্ডে অ্যাপ চেক টোকেন যাচাই করুন

রেফারেন্স ডক্স

• ওয়েব অ্যাপে reCAPTCHA এন্টারপ্রাইজ দিয়ে অ্যাপ চেক ব্যবহার শুরু করুন
• ওয়েব অ্যাপে ডিবাগ প্রোভাইডার ব্যবহার করুন