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