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

1. ভূমিকা

শেষ আপডেট: 2023-02-23

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

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

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

আপনি কি নির্মাণ করবেন

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Firebase এ সাইন ইন করুন।
2. Firebase কনসোলে, Add Project এ ক্লিক করুন এবং তারপর আপনার Firebase প্রোজেক্টের নাম দিন FriendlyChat। আপনার ফায়ারবেস প্রকল্পের জন্য প্রজেক্ট আইডি মনে রাখবেন।
3. এই প্রকল্পের জন্য Google Analytics সক্ষম করুন থেকে টিক চিহ্ন সরিয়ে দিন
4. প্রকল্প তৈরি করুন ক্লিক করুন।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

আপনার ফায়ারবেস প্রকল্পে ক্লাউড ফায়ারস্টোর কীভাবে সেট আপ করবেন তা এখানে:

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

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

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

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

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

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

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

firebase use --add

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

1. Firebase কনসোলে আপনার প্রজেক্ট সেটিংসে যান
2. "আপনার অ্যাপস" কার্ডে, অ্যাপটির ডাকনাম নির্বাচন করুন যার জন্য আপনার একটি কনফিগার অবজেক্ট প্রয়োজন।
3. Firebase SDK স্নিপেট ফলক থেকে Config নির্বাচন করুন।
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. অ্যাপ চেক ছাড়াই অ্যাপটি ব্যবহার করে দেখুন

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7. সাইটে 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 খুলুন এবং লাইন 51 এ, আপনি আপনার reCAPTCHA কী আনতে Firebase-config.js থেকে একটি আমদানি যোগ করতে যাচ্ছেন এবং অ্যাপ চেক লাইব্রেরিও আমদানি করতে যাচ্ছেন যাতে আপনি 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
 }

অবশেষে, একবার আপনি নিশ্চিত হন যে অ্যাপটি আরম্ভ করা হয়েছে, তারপরে আপনি এইমাত্র তৈরি করা সেটআপঅ্যাপচেক ফাংশনটিতে কল করতে হবে। 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 ) এবং এটিকে আপনার অ্যাপের ওভারফ্লো মেনুর অধীনে অ্যাপ চেক কনফিগারেশনে প্লাগ করুন।

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

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

উত্পাদনে এটি চেষ্টা করুন

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

8. অভিনন্দন!

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

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

এরপর কি?

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

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

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

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