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में क्लाउड फ़ंक्शंस कोड होता है, और यह वह जगह है जहां आप ऑथ ब्लॉकिंग फ़ंक्शंस लिखेंगे। -
public/- में आपके चैट ऐप के लिए स्थिर फ़ाइलें शामिल हैं -
public/scripts/main.js- जहां आपका चैट ऐप JS कोड (src/index.js) संकलित किया गया है -
src/firebase-config.js- इसमें फ़ायरबेस कॉन्फ़िगरेशन ऑब्जेक्ट शामिल है जिसका उपयोग आपके चैट ऐप को प्रारंभ करने के लिए किया जाता है -
src/index.js- आपका चैट ऐप JS कोड
फायरबेस सीएलआई प्राप्त करें
एम्यूलेटर सुइट फायरबेस सीएलआई (कमांड-लाइन इंटरफ़ेस) का हिस्सा है, जिसे निम्नलिखित कमांड के साथ आपकी मशीन पर स्थापित किया जा सकता है:
$ npm install -g firebase-tools@latest
वेबपैक के साथ जावास्क्रिप्ट बनाएं, जो सार्वजनिक/स्क्रिप्ट/निर्देशिका के अंदर main.js बनाएगा।
webpack build
इसके बाद, पुष्टि करें कि आपके पास सीएलआई का नवीनतम संस्करण है। यह कोडलैब 11.14 या उच्चतर संस्करण के साथ काम करता है।
$ firebase --version 11.14.2
अपने फायरबेस प्रोजेक्ट से कनेक्ट करें
यदि आपके पास फायरबेस प्रोजेक्ट नहीं है, तो फायरबेस कंसोल में, एक नया फायरबेस प्रोजेक्ट बनाएं। आपके द्वारा चुनी गई प्रोजेक्ट आईडी को नोट कर लें, क्योंकि आपको बाद में इसकी आवश्यकता होगी।
अब आपको इस कोड को अपने फायरबेस प्रोजेक्ट से कनेक्ट करना होगा। सबसे पहले फायरबेस सीएलआई में लॉग इन करने के लिए निम्नलिखित कमांड चलाएँ:
$ firebase login
इसके बाद प्रोजेक्ट उपनाम बनाने के लिए निम्न कमांड चलाएँ। $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. एमएफए का कार्यान्वयन
इस रेपो में एमएफए आंशिक रूप से लागू किया गया है। आप पहले किसी उपयोगकर्ता को एमएफए में नामांकित करने के लिए और फिर एमएफए में नामांकित उपयोगकर्ताओं को दूसरे कारक के लिए संकेत देने के लिए कोड जोड़ेंगे।
अपने संपादक में, 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 फ़ंक्शन ढूंढें और निम्नलिखित नियंत्रण प्रवाह जोड़ें जो एमएफए में नामांकित उपयोगकर्ताओं को अपना दूसरा कारक दर्ज करने के लिए प्रेरित करता है:
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. एम्यूलेटर में एमएफए के साथ साइन इन करने का प्रयास करें
अब एमएफए कार्यान्वयन का प्रयास करें! सुनिश्चित करें कि आपके एमुलेटर अभी भी चल रहे हैं और स्थानीय रूप से होस्ट किए गए ऐप localhost:5170 पर जाएं। साइन इन करने का प्रयास करें, और जब आपसे एमएफए कोड प्रदान करने के लिए कहा जाएगा, तो आप अपनी टर्मिनल विंडो में एमएफए कोड देखेंगे।
चूंकि एमुलेटर मल्टी-फैक्टर ऑथेंटिकेशन का पूरी तरह से समर्थन करते हैं, इसलिए आपका विकास वातावरण पूरी तरह से आत्मनिर्भर हो सकता है।
एमएफए लागू करने के बारे में अधिक जानने के लिए, हमारे संदर्भ दस्तावेज़ देखें।
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 पर समाप्त होता है। खाता सफलतापूर्वक बन जाएगा.
ब्लॉकिंग फ़ंक्शंस के साथ, आप प्रमाणीकरण के आसपास अपनी ज़रूरत का कोई भी प्रतिबंध बना सकते हैं। अधिक जानने के लिए, संदर्भ दस्तावेज़ देखें।
संक्षिप्त
अच्छा काम! आपने उपयोगकर्ताओं को अपने खाते को सुरक्षित रखने में मदद करने के लिए एक वेब ऐप में मल्टी-फैक्टर प्रमाणीकरण जोड़ा, और फिर आपने ब्लॉकिंग फ़ंक्शन का उपयोग करके साइन अप करने के लिए उपयोगकर्ताओं के लिए कस्टम आवश्यकताएं बनाईं। आपने निश्चित रूप से एक GIF अर्जित कर लिया है!
