1. সেট আপ করুন
সোর্স কোড পান
এই কোডল্যাবে, আপনি ফ্রেন্ডলি চ্যাট নমুনা অ্যাপের একটি সংস্করণ দিয়ে শুরু করেন যা প্রায় সম্পূর্ণ, তাই আপনাকে প্রথমে সোর্স কোড ক্লোন করতে হবে:
$ 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 কোড
Firebase CLI পান
এমুলেটর স্যুট হল Firebase CLI (কমান্ড-লাইন ইন্টারফেস) এর অংশ, যা আপনার মেশিনে নিম্নলিখিত কমান্ড দিয়ে ইনস্টল করা যেতে পারে:
$ npm install -g firebase-tools@latest
ওয়েবপ্যাক দিয়ে জাভাস্ক্রিপ্ট তৈরি করুন, যা public/scripts/ ডিরেক্টরির ভিতরে main.js তৈরি করবে।
webpack build
এরপর, নিশ্চিত করুন যে আপনার কাছে CLI এর সর্বশেষ সংস্করণ রয়েছে। এই কোডল্যাব 11.14 বা উচ্চতর সংস্করণের সাথে কাজ করে।
$ firebase --version 11.14.2
আপনার Firebase প্রকল্পের সাথে সংযোগ করুন
আপনার যদি Firebase প্রকল্প না থাকে, Firebase কনসোলে , একটি নতুন Firebase প্রকল্প তৈরি করুন৷ আপনি যে প্রজেক্ট আইডি বেছে নিয়েছেন তার একটি নোট করুন, কারণ আপনার পরে এটির প্রয়োজন হবে।
এখন আপনাকে এই কোডটি আপনার Firebase প্রকল্পের সাথে সংযুক্ত করতে হবে। প্রথমে Firebase CLI-তে লগ ইন করতে নিম্নলিখিত কমান্ডটি চালান:
$ firebase login
পরবর্তীতে একটি প্রকল্প উপনাম তৈরি করতে নিম্নলিখিত কমান্ডটি চালান। আপনার Firebase প্রকল্পের ID দিয়ে $YOUR_PROJECT_ID প্রতিস্থাপন করুন।
$ 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
একবার আপনি সমস্ত এমুলেটর প্রস্তুত বার্তাটি দেখতে পেলে, অ্যাপটি ব্যবহারের জন্য প্রস্তুত।
3. MFA বাস্তবায়ন
এই রেপোতে 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}`);
}
});
}
এখানে আমন্ত্রিত ফাংশন সহ বাকি বাস্তবায়ন ইতিমধ্যেই সম্পূর্ণ হয়েছে৷ তারা কিভাবে কাজ করে তা দেখতে, বাকি ফাইল ব্রাউজ করুন।
4. এমুলেটরগুলিতে MFA দিয়ে সাইন ইন করার চেষ্টা করুন৷
এখন MFA বাস্তবায়ন চেষ্টা করে দেখুন! নিশ্চিত করুন যে আপনার এমুলেটরগুলি এখনও চলছে এবং স্থানীয়ভাবে হোস্ট করা অ্যাপটি localhost:5170 এ যান। সাইন ইন করার চেষ্টা করুন, এবং যখন আপনাকে MFA কোড প্রদান করতে বলা হবে, আপনি আপনার টার্মিনাল উইন্ডোতে MFA কোড দেখতে পাবেন।
যেহেতু এমুলেটরগুলি সম্পূর্ণরূপে মাল্টি-ফ্যাক্টর অথকে সমর্থন করে আপনার উন্নয়ন পরিবেশ সম্পূর্ণরূপে স্বয়ংসম্পূর্ণ হতে পারে।
MFA বাস্তবায়ন সম্পর্কে আরও জানতে, আমাদের রেফারেন্স ডক্স দেখুন।
5. একটি ব্লকিং ফাংশন তৈরি করুন
কিছু অ্যাপ্লিকেশন শুধুমাত্র ব্যবহারকারীদের একটি নির্দিষ্ট গ্রুপ দ্বারা ব্যবহার করার জন্য বোঝানো হয়। এই ক্ষেত্রে, আপনি আপনার অ্যাপে সাইন আপ বা সাইন ইন করার জন্য ব্যবহারকারীর জন্য কাস্টম প্রয়োজনীয়তা তৈরি করতে সক্ষম হতে চান।
ব্লকিং ফাংশনগুলি এটিই প্রদান করে: কাস্টম প্রমাণীকরণের প্রয়োজনীয়তা তৈরি করার একটি উপায়। এগুলি ক্লাউড ফাংশন, তবে বেশিরভাগ ফাংশনগুলির বিপরীতে, যখন কোনও ব্যবহারকারী সাইন আপ বা সাইন ইন করার চেষ্টা করে তখন এগুলি সিঙ্ক্রোনাসভাবে চলে৷
একটি ব্লকিং ফাংশন তৈরি করতে, আপনার সম্পাদকে 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");
}
});
6. এমুলেটরগুলিতে ব্লকিং ফাংশন ব্যবহার করে দেখুন
ব্লকিং ফাংশনটি চেষ্টা করার জন্য, নিশ্চিত করুন যে আপনার এমুলেটরগুলি চলছে এবং localhost:5170 এ ওয়েব অ্যাপে সাইন আউট করুন।
তারপর, একটি ইমেল ঠিকানা দিয়ে একটি অ্যাকাউন্ট তৈরি করার চেষ্টা করুন যা example.com এ শেষ হয় না। ব্লকিং ফাংশন সফল হতে অপারেশন প্রতিরোধ করবে.
এখন, একটি ইমেল ঠিকানা দিয়ে আবার চেষ্টা করুন যা example.com এ শেষ হয়। অ্যাকাউন্টটি সফলভাবে তৈরি করা হবে।
ব্লকিং ফাংশনগুলির সাহায্যে, আপনি প্রমাণীকরণের চারপাশে আপনার প্রয়োজনীয় যেকোনো সীমাবদ্ধতা তৈরি করতে পারেন। আরও জানতে, রেফারেন্স ডক্স দেখুন।
রিক্যাপ
দারুণ কাজ! ব্যবহারকারীদের তাদের অ্যাকাউন্ট সুরক্ষিত রাখতে সাহায্য করার জন্য আপনি একটি ওয়েব অ্যাপে মাল্টি-ফ্যাক্টর প্রমাণীকরণ যোগ করেছেন এবং তারপরে আপনি ব্লকিং ফাংশন ব্যবহার করে ব্যবহারকারীদের সাইন আপ করার জন্য কাস্টম প্রয়োজনীয়তা তৈরি করেছেন। আপনি অবশ্যই একটি জিআইএফ অর্জন করেছেন!
