১. সেট আপ করুন
সোর্স কোডটি পান
এই কোডল্যাবে, আপনি ফ্রেন্ডলি চ্যাট স্যাম্পল অ্যাপের একটি সংস্করণ দিয়ে শুরু করবেন যা প্রায় সম্পূর্ণ, তাই আপনাকে প্রথমে সোর্স কোডটি ক্লোন করতে হবে:
$ git clone https://github.com/firebase/codelab-friendlychat-web --branch security
তারপর, security-start ডিরেক্টরিতে যান, যেখানে আপনি এই কোডল্যাবের বাকি অংশের জন্য কাজ করবেন:
$ cd codelab-friendlychat-web/security-start
এখন, কোডটি চালানোর জন্য নির্ভরতাগুলি ইনস্টল করুন। যদি আপনার ইন্টারনেট সংযোগ ধীর হয় তবে এটি এক বা দুই মিনিট সময় নিতে পারে:
$ npm install && (cd functions && npm install)
এই রেপোটি জানুন
security-solution/ ডিরেক্টরিতে নমুনা অ্যাপের সম্পূর্ণ কোড থাকে। security-start ডিরেক্টরিতে আপনি কোডল্যাবটি পরিচালনা করবেন, এবং প্রমাণীকরণ বাস্তবায়নের কয়েকটি গুরুত্বপূর্ণ অংশ এতে অনুপস্থিত। security-start/ এবং security-solution/ এর মূল ফাইল এবং বৈশিষ্ট্যগুলি হল:
-
functions/index.jsক্লাউড ফাংশন কোড রয়েছে এবং এখানেই আপনি auth ব্লকিং ফাংশন লিখবেন। -
public/- আপনার চ্যাট অ্যাপের জন্য স্ট্যাটিক ফাইল ধারণ করে -
public/scripts/main.js- যেখানে আপনার চ্যাট অ্যাপ JS কোড (src/index.js) কম্পাইল করা হয় -
src/firebase-config.js- এতে Firebase কনফিগারেশন অবজেক্ট রয়েছে যা আপনার চ্যাট অ্যাপটি আরম্ভ করতে ব্যবহৃত হয়। -
src/index.js- আপনার চ্যাট অ্যাপের JS কোড
ফায়ারবেস সিএলআই পান
এমুলেটর স্যুটটি ফায়ারবেস সিএলআই (কমান্ড-লাইন ইন্টারফেস) এর অংশ, যা নিম্নলিখিত কমান্ডের সাহায্যে আপনার মেশিনে ইনস্টল করা যেতে পারে:
$ npm install -g firebase-tools@latest
ওয়েবপ্যাক দিয়ে জাভাস্ক্রিপ্ট তৈরি করুন, যা public/scripts/ ডিরেক্টরির ভিতরে main.js তৈরি করবে।
webpack build
এরপর, নিশ্চিত করুন যে আপনার কাছে CLI এর সর্বশেষ সংস্করণ আছে। এই কোডল্যাবটি ১১.১৪ বা তার উচ্চতর সংস্করণের সাথে কাজ করে।
$ firebase --version 11.14.2
আপনার Firebase প্রকল্পের সাথে সংযোগ করুন
একটি নতুন Firebase প্রকল্প তৈরি করুন
- আপনার গুগল অ্যাকাউন্ট ব্যবহার করে ফায়ারবেস কনসোলে সাইন ইন করুন।
- একটি নতুন প্রকল্প তৈরি করতে বোতামটি ক্লিক করুন, এবং তারপর একটি প্রকল্পের নাম লিখুন (উদাহরণস্বরূপ,
Authentication MFA Codelab)। - চালিয়ে যান ক্লিক করুন।
- যদি অনুরোধ করা হয়, তাহলে Firebase শর্তাবলী পর্যালোচনা করুন এবং গ্রহণ করুন, এবং তারপর Continue এ ক্লিক করুন।
- (ঐচ্ছিক) Firebase কনসোলে ("Gemini in Firebase" নামে পরিচিত) AI সহায়তা সক্ষম করুন।
- এই কোডল্যাবের জন্য, আপনার গুগল অ্যানালিটিক্সের প্রয়োজন নেই , তাই গুগল অ্যানালিটিক্স বিকল্পটি টগল করে বন্ধ করে দিন ।
- Create project এ ক্লিক করুন, আপনার province করার জন্য অপেক্ষা করুন, এবং তারপর Continue এ ক্লিক করুন।
আপনার কোডটি আপনার Firebase প্রকল্পের সাথে সংযুক্ত করুন
এখন আপনাকে এই কোডটি আপনার Firebase প্রজেক্টের সাথে সংযুক্ত করতে হবে। প্রথমে Firebase CLI তে লগ ইন করতে নিম্নলিখিত কমান্ডটি চালান:
$ firebase login
এরপর একটি প্রজেক্ট উপনাম তৈরি করতে নিম্নলিখিত কমান্ডটি চালান। $YOUR_PROJECT_ID আপনার Firebase প্রজেক্টের আইডি দিয়ে প্রতিস্থাপন করুন।
$ firebase use $YOUR_PROJECT_ID
এখন আপনি অ্যাপটি চালানোর জন্য প্রস্তুত!
2. এমুলেটরগুলি চালান
এই বিভাগে, আপনি স্থানীয়ভাবে অ্যাপটি চালাবেন। এর অর্থ হল এমুলেটর স্যুটটি বুট করার সময় এসেছে।
এমুলেটরগুলি শুরু করুন
কোডল্যাব সোর্স ডিরেক্টরির ভেতর থেকে, এমুলেটরগুলি শুরু করতে নিম্নলিখিত কমান্ডটি চালান:
$ firebase emulators:start
এটি আপনার অ্যাপটিকে http://127.0.0.1:5170 এ পরিবেশন করবে এবং পরিবর্তন করার সাথে সাথে আপনার সোর্স কোডটি ক্রমাগত পুনর্নির্মাণ করবে। আপনার পরিবর্তনগুলি দেখতে আপনার ব্রাউজারে স্থানীয়ভাবে কেবল হার্ড রিফ্রেশ (ctrl-shift-r) করতে হবে।
তুমি এরকম কিছু আউটপুট দেখতে পাবে:
i emulators: Starting emulators: auth, functions, firestore, hosting, storage ✔ functions: Using node@16 from host. i firestore: Firestore Emulator logging to firestore-debug.log ✔ firestore: Firestore Emulator UI websocket is running on 9150. i hosting[demo-example]: Serving hosting files from: ./public ✔ hosting[demo-example]: Local server: http://127.0.0.1:5170 i ui: Emulator UI logging to ui-debug.log i functions: Watching "[...]" for Cloud Functions... ✔ functions: Loaded functions definitions from source: beforecreated. ✔ functions[us-central1-beforecreated]: providers/cloud.auth/eventTypes/user.beforeCreate function initialized (http://127.0.0.1:5011/[...]/us-central1/beforecreated). i Running script: npm start > security@1.0.0 start > webpack --watch --progress [...] webpack 5.50.0 compiled with 1 warning in 990 ms
একবার আপনি " সমস্ত এমুলেটর প্রস্তুত " বার্তাটি দেখতে পেলে, অ্যাপটি ব্যবহারের জন্য প্রস্তুত।
৩. এমএফএ বাস্তবায়ন
এই রেপোতে MFA আংশিকভাবে বাস্তবায়িত হয়েছে। প্রথমে MFA-তে একজন ব্যবহারকারীকে নথিভুক্ত করার জন্য আপনি কোডটি যোগ করবেন এবং তারপরে MFA-তে নথিভুক্ত ব্যবহারকারীদের দ্বিতীয় ফ্যাক্টরের জন্য অনুরোধ করবেন।
আপনার এডিটরে, src/index.js ফাইলটি খুলুন এবং startEnrollMultiFactor() পদ্ধতিটি খুঁজুন। reCAPTCHA যাচাইকারী সেট আপ করতে নিম্নলিখিত কোডটি যোগ করুন যা ফোনের অপব্যবহার রোধ করবে (reCAPTCHA যাচাইকারীটি অদৃশ্য হিসাবে সেট করা আছে এবং ব্যবহারকারীদের কাছে দৃশ্যমান হবে না):
async function startEnrollMultiFactor(phoneNumber) {
const recaptchaVerifier = new RecaptchaVerifier(
"recaptcha",
{ size: "invisible" },
getAuth()
);
তারপর, finishEnrollMultiFactor() পদ্ধতিটি খুঁজুন এবং দ্বিতীয় ফ্যাক্টরটি নথিভুক্ত করতে নিম্নলিখিতটি যোগ করুন:
// Completes MFA enrollment once a verification code is obtained.
async function finishEnrollMultiFactor(verificationCode) {
// Ask user for the verification code. Then:
const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
// Complete enrollment.
await multiFactor(getAuth().currentUser)
.enroll(multiFactorAssertion)
.catch(function (error) {
alert(`Error finishing second factor enrollment. ${error}`);
throw error;
});
verificationId = null;
}
এরপর, signIn ফাংশনটি খুঁজুন এবং নিম্নলিখিত নিয়ন্ত্রণ প্রবাহ যোগ করুন যা MFA-তে নথিভুক্ত ব্যবহারকারীদের তাদের দ্বিতীয় ফ্যাক্টর প্রবেশ করতে অনুরোধ করে:
async function signIn() {
// Sign in Firebase using popup auth and Google as the identity provider.
var provider = new GoogleAuthProvider();
await signInWithPopup(getAuth(), provider)
.then(function (userCredential) {
// User successfully signed in and is not enrolled with a second factor.
})
.catch(function (error) {
if (error.code == "auth/multi-factor-auth-required") {
multiFactorResolver = getMultiFactorResolver(getAuth(), error);
displaySecondFactor(multiFactorResolver.hints);
} else {
alert(`Error signing in user. ${error}`);
}
});
}
এখানে উল্লেখিত ফাংশনগুলি সহ বাকি বাস্তবায়ন ইতিমধ্যেই সম্পন্ন হয়েছে। তারা কীভাবে কাজ করে তা দেখতে, বাকি ফাইলটি ব্রাউজ করুন।
৪. এমুলেটরগুলিতে MFA দিয়ে সাইন ইন করার চেষ্টা করুন।
এখন MFA বাস্তবায়ন চেষ্টা করে দেখুন! নিশ্চিত করুন যে আপনার এমুলেটরগুলি এখনও চলছে এবং localhost:5170 এ স্থানীয়ভাবে হোস্ট করা অ্যাপটি দেখুন। সাইন ইন করার চেষ্টা করুন, এবং যখন আপনাকে MFA কোড প্রদান করতে বলা হবে, তখন আপনি আপনার টার্মিনাল উইন্ডোতে MFA কোডটি দেখতে পাবেন।
যেহেতু এমুলেটরগুলি সম্পূর্ণরূপে মাল্টি-ফ্যাক্টর অথ সমর্থন করে, তাই আপনার ডেভেলপমেন্ট পরিবেশ সম্পূর্ণরূপে স্বয়ংসম্পূর্ণ হতে পারে।
MFA বাস্তবায়ন সম্পর্কে আরও জানতে, আমাদের রেফারেন্স ডক্স দেখুন।
৫. একটি ব্লকিং ফাংশন তৈরি করুন
কিছু অ্যাপ্লিকেশন শুধুমাত্র নির্দিষ্ট ব্যবহারকারীদের দ্বারা ব্যবহারের জন্য তৈরি করা হয়। এই ক্ষেত্রে, আপনি আপনার অ্যাপে সাইন আপ বা সাইন ইন করার জন্য ব্যবহারকারীর জন্য কাস্টম প্রয়োজনীয়তা তৈরি করতে সক্ষম হতে চান।
ব্লকিং ফাংশনগুলি এটাই প্রদান করে: কাস্টম প্রমাণীকরণের প্রয়োজনীয়তা তৈরি করার একটি উপায়। এগুলি ক্লাউড ফাংশন, কিন্তু বেশিরভাগ ফাংশনের বিপরীতে, যখন কোনও ব্যবহারকারী সাইন আপ বা সাইন ইন করার চেষ্টা করে তখন এগুলি সিঙ্ক্রোনাসভাবে চলে।
ব্লকিং ফাংশন তৈরি করতে, আপনার এডিটরে functions/index.js খুলুন এবং মন্তব্য করা beforecreated ফাংশনটি খুঁজুন।
এটিকে এই কোড দিয়ে প্রতিস্থাপন করুন যা শুধুমাত্র example.com ডোমেনের ব্যবহারকারীদের একটি অ্যাকাউন্ট তৈরি করতে দেয়:
exports.beforecreated = beforeUserCreated((event) => {
const user = event.data;
// Only users of a specific domain can sign up.
if (!user.email || !user.email.endsWith("@example.com")) {
throw new HttpsError("invalid-argument", "Unauthorized email");
}
});
৬. এমুলেটরগুলিতে ব্লকিং ফাংশনটি ব্যবহার করে দেখুন
ব্লকিং ফাংশনটি ব্যবহার করে দেখতে, নিশ্চিত করুন যে আপনার এমুলেটরগুলি চলছে, এবং localhost:5170 এ ওয়েব অ্যাপে সাইন আউট করুন।
তারপর, এমন একটি ইমেল ঠিকানা দিয়ে একটি অ্যাকাউন্ট তৈরি করার চেষ্টা করুন যার শেষে example.com লেখা নেই। ব্লকিং ফাংশনটি অপারেশনটি সফল হতে বাধা দেবে।
এখন, এমন একটি ইমেল ঠিকানা দিয়ে আবার চেষ্টা করুন যার শেষে example.com লেখা থাকবে। অ্যাকাউন্টটি সফলভাবে তৈরি হবে।
ব্লকিং ফাংশনের সাহায্যে, আপনি প্রমাণীকরণের চারপাশে আপনার প্রয়োজনীয় যেকোনো বিধিনিষেধ তৈরি করতে পারেন। আরও জানতে, রেফারেন্স ডক্স দেখুন।
সংক্ষিপ্তসার
দারুন! আপনি ব্যবহারকারীদের অ্যাকাউন্ট সুরক্ষিত রাখতে একটি ওয়েব অ্যাপে মাল্টি-ফ্যাক্টর অথেনটিকেশন যোগ করেছেন, এবং তারপর ব্লকিং ফাংশন ব্যবহার করে সাইন আপ করার জন্য ব্যবহারকারীদের জন্য কাস্টম প্রয়োজনীয়তা তৈরি করেছেন। আপনি অবশ্যই একটি জিআইএফ অর্জন করেছেন!
