1. सेट अप करें
सोर्स कोड पाना
इस कोडलैब में, आपको Friendly Chat सैंपल ऐप्लिकेशन का लगभग पूरा वर्शन मिलता है. इसलिए, आपको सबसे पहले सोर्स कोड को क्लोन करना होगा:
$ 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में Cloud Functions का कोड होता है. यहीं पर आपको पुष्टि करने की प्रोसेस को रोकने वाले फ़ंक्शन लिखने होंगे.public/- इसमें आपके चैट ऐप्लिकेशन के लिए स्टैटिक फ़ाइलें होती हैंpublic/scripts/main.js- यहां आपके चैट ऐप्लिकेशन के JS कोड (src/index.js) को कंपाइल किया जाता हैsrc/firebase-config.js- इसमें Firebase कॉन्फ़िगरेशन ऑब्जेक्ट होता है. इसका इस्तेमाल, चैट ऐप्लिकेशन को शुरू करने के लिए किया जाता हैsrc/index.js- यह आपके चैट ऐप्लिकेशन का JS कोड है
Firebase CLI इंस्टॉल करना
Emulator Suite, Firebase CLI (कमांड-लाइन इंटरफ़ेस) का हिस्सा है. इसे अपनी मशीन पर इंस्टॉल करने के लिए, यह कमांड इस्तेमाल करें:
$ npm install -g firebase-tools@latest
webpack की मदद से JavaScript बनाएं. इससे public/scripts/ डायरेक्ट्री में main.js फ़ाइल बनेगी.
webpack build
इसके बाद, पुष्टि करें कि आपके पास सीएलआई का नया वर्शन है. यह कोडलैब, 11.14 या इसके बाद के वर्शन के साथ काम करता है.
$ firebase --version 11.14.2
अपने Firebase प्रोजेक्ट से कनेक्ट करना
नया Firebase प्रोजेक्ट बनाना
- अपने Google खाते का इस्तेमाल करके, Firebase कंसोल में साइन इन करें.
- नया प्रोजेक्ट बनाने के लिए, बटन पर क्लिक करें. इसके बाद, प्रोजेक्ट का नाम डालें. उदाहरण के लिए,
Authentication MFA Codelab.
- जारी रखें पर क्लिक करें.
- अगर आपसे कहा जाए, तो Firebase की शर्तें पढ़ें और स्वीकार करें. इसके बाद, जारी रखें पर क्लिक करें.
- (ज़रूरी नहीं) Firebase कंसोल में एआई की मदद पाने की सुविधा चालू करें. इसे "Firebase में Gemini" कहा जाता है.
- इस कोडलैब के लिए, आपको Google Analytics की ज़रूरत नहीं है. इसलिए, Google Analytics के विकल्प को टॉगल करके बंद करें.
- प्रोजेक्ट बनाएं पर क्लिक करें. इसके बाद, प्रोजेक्ट के प्रोविज़न होने का इंतज़ार करें. इसके बाद, जारी रखें पर क्लिक करें.
अपने कोड को Firebase प्रोजेक्ट से कनेक्ट करना
अब आपको इस कोड को अपने Firebase प्रोजेक्ट से कनेक्ट करना होगा. Firebase CLI में लॉग इन करने के लिए, सबसे पहले यह निर्देश चलाएं:
$ firebase login
इसके बाद, प्रोजेक्ट का उपनाम बनाने के लिए यह कमांड चलाएं. $YOUR_PROJECT_ID की जगह अपने Firebase प्रोजेक्ट का आईडी डालें.
$ firebase use $YOUR_PROJECT_ID
अब ऐप्लिकेशन चलाने के लिए तैयार हैं!
2. एम्युलेटर चलाना
इस सेक्शन में, ऐप्लिकेशन को स्थानीय तौर पर चलाया जाएगा. इसका मतलब है कि अब Emulator Suite को बूट अप करने का समय आ गया है.
एम्युलेटर शुरू करना
कोड लैब की सोर्स डायरेक्ट्री में जाकर, एम्युलेटर शुरू करने के लिए यह कमांड चलाएं:
$ 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 को आंशिक रूप से लागू किया गया है. आपको इस कोड को दो बार जोड़ना होगा. पहली बार, किसी उपयोगकर्ता को एमएफ़ए में रजिस्टर करने के लिए और दूसरी बार, एमएफ़ए में रजिस्टर किए गए उपयोगकर्ताओं को दूसरे फ़ैक्टर के लिए प्रॉम्प्ट करने के लिए.
अपने एडिटर में, 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. ब्लॉक करने वाला फ़ंक्शन बनाना
कुछ ऐप्लिकेशन, सिर्फ़ उपयोगकर्ताओं के किसी खास ग्रुप के लिए होते हैं. ऐसे मामलों में, आपको किसी उपयोगकर्ता के लिए, आपके ऐप्लिकेशन में साइन अप या साइन इन करने से जुड़ी कस्टम ज़रूरी शर्तें तय करनी पड़ सकती हैं.
ब्लॉक करने वाले फ़ंक्शन यही काम करते हैं. इनकी मदद से, पुष्टि करने की कस्टम ज़रूरी शर्तें बनाई जा सकती हैं. ये Cloud Functions हैं. हालांकि, ज़्यादातर फ़ंक्शन के उलट, ये तब सिंक्रोनस तरीके से काम करते हैं, जब कोई उपयोगकर्ता साइन अप या साइन इन करने की कोशिश करता है.
ब्लॉक करने की सुविधा बनाने के लिए, अपने एडिटर में 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 ज़रूर मिलेगा!
