ऐप्लिकेशन की जांच के लिए वेब कोडलैब (कोड बनाना सीखना)

1. शुरुआती जानकारी

पिछली बार अपडेट किया गया: 23-02-2023

बिना अनुमति के अपने Firebase संसाधनों को ऐक्सेस करने से कैसे रोका जा सकता है?

Firebase App Check का इस्तेमाल करके, बिना अनुमति वाले क्लाइंट को अपने बैकएंड संसाधनों को ऐक्सेस करने से रोका जा सकता है. इसके लिए, आने वाले अनुरोधों के साथ यह पुष्टि करने वाला एटेस्टेशन अटैच करना ज़रूरी है कि अनुरोध आपके असली ऐप्लिकेशन से आया है. साथ ही, ऐसे ट्रैफ़िक को ब्लॉक करना होगा जिसके पास सही एटेस्टेशन नहीं है. Firebase App Check, क्लाइंट की पुष्टि करने के लिए प्लैटफ़ॉर्म के हिसाब से पुष्टि करने वाली सेवा देने वाली कंपनियों पर निर्भर करता है: वेब ऐप्लिकेशन के लिए, App Check पुष्टि करने वाली सेवा देने वाली कंपनियों के तौर पर reCAPTCHA वर्शन 3 और reCAPTCHA Enterprise के साथ काम करता है.

App Check का इस्तेमाल, Cloud Firestore, रीयल टाइम डेटाबेस, Cloud Functions, Identity Platform के साथ Firebase से पुष्टि करने की सुविधा, और खुद होस्ट किए जा रहे बैकएंड के अनुरोधों को सुरक्षित करने के लिए किया जा सकता है.

आपको क्या बनाना है

इस कोडलैब में, आपको चैट ऐप्लिकेशन को सुरक्षित करना है. इसके लिए, आपको सबसे पहले ऐप्लिकेशन की जांच करने की सुविधा जोड़नी होगी और फिर उसे लागू करना होगा.

आपको इनके बारे में जानकारी मिलेगी

• बिना अनुमति के ऐक्सेस होने से अपने बैकएंड को सुरक्षित रखने का तरीका
• Firestore और Cloud Storage में नीति उल्लंघन ठीक करने की सुविधा जोड़ने का तरीका
• लोकल डेवलपमेंट के लिए, डीबग टोकन की मदद से ऐप्लिकेशन को चलाने का तरीका

आपको इन चीज़ों की ज़रूरत होगी

• आपकी पसंद का आईडीई/टेक्स्ट एडिटर
• पैकेज मैनेजर npm, जो आम तौर पर Node.js के साथ आता है
• आपके खाते के साथ काम करने के लिए, Firebase CLI इंस्टॉल और कॉन्फ़िगर किया गया हो
• टर्मिनल/कंसोल
• Chrome जैसा कोई ब्राउज़र
• कोडलैब का सैंपल कोड (कोड पाने का तरीका जानने के लिए, कोडलैब का अगला चरण देखें.)

2. सैंपल कोड पाना

कमांड लाइन से, कोडलैब के GitHub डेटा स्टोर करने की जगह को क्लोन करें:

git clone https://github.com/firebase/codelab-friendlychat-web

इसके अलावा, अगर आपने Git इंस्टॉल नहीं किया है, तो रिपॉज़िटरी को ZIP फ़ाइल के तौर पर डाउनलोड किया जा सकता है.

स्टार्टर ऐप्लिकेशन इंपोर्ट करना

अपने IDE का इस्तेमाल करके, क्लोन की गई रिपॉज़िटरी से 📁 appcheck-start डायरेक्ट्री खोलें या इंपोर्ट करें. इस 📁 appcheck-start डायरेक्ट्री में, कोडलैब का शुरुआती कोड मौजूद है. यह एक पूरी तरह से काम करने वाला चैट वेब ऐप्लिकेशन होगा. 📁 appcheck डायरेक्ट्री में, कोडलैब का पूरा कोड मौजूद होगा.

3. Firebase प्रोजेक्ट बनाना और उसे सेट अप करना

Firebase प्रोजेक्ट बनाना

1. Firebase में साइन इन करें.
2. Firebase कंसोल में, 'प्रोजेक्ट जोड़ें' पर क्लिक करें. इसके बाद, अपने Firebase प्रोजेक्ट को FriendlyChat नाम दें. अपने Firebase प्रोजेक्ट का प्रोजेक्ट आईडी याद रखें.
3. इस प्रोजेक्ट के लिए Google Analytics चालू करें से सही का निशान हटाएं
4. 'प्रोजेक्ट बनाएं' पर क्लिक करें.

हम जो ऐप्लिकेशन बनाने जा रहे हैं वह वेब ऐप्लिकेशन के लिए उपलब्ध Firebase प्रॉडक्ट का इस्तेमाल करता है:

• Firebase Authentication, ताकि आपके उपयोगकर्ता आपके ऐप्लिकेशन में आसानी से साइन इन कर सकें.
• Cloud Firestore, ताकि क्लाउड पर स्ट्रक्चर्ड डेटा सेव किया जा सके और डेटा में बदलाव होने पर तुरंत सूचना मिल सके.
• क्लाउड में फ़ाइलें सेव करने के लिए, Firebase के लिए Cloud Storage.
• Firebase होस्टिंग, आपकी एसेट को होस्ट और दिखाने के लिए.
• Firebase Cloud Messaging, पुश नोटिफ़िकेशन भेजने और ब्राउज़र पॉप-अप नोटिफ़िकेशन दिखाने के लिए.
• Firebase की परफ़ॉर्मेंस मॉनिटरिंग सुविधा, ताकि आपके ऐप्लिकेशन के लिए उपयोगकर्ता की परफ़ॉर्मेंस का डेटा इकट्ठा किया जा सके.

इनमें से कुछ प्रॉडक्ट के लिए, खास कॉन्फ़िगरेशन की ज़रूरत होती है या इन्हें Firebase कंसोल का इस्तेमाल करके चालू करना पड़ता है.

Firebase के प्लान की कीमत अपग्रेड करना

'Firebase के लिए Cloud Storage' का इस्तेमाल करने के लिए, आपका Firebase प्रोजेक्ट पे-ऐज़-यू-गो (Blaze) कीमत वाले प्लान पर होना चाहिए. इसका मतलब है कि यह Cloud Billing खाते से लिंक होना चाहिए.

• Cloud Billing खाते के लिए, क्रेडिट कार्ड जैसा पेमेंट का कोई तरीका होना ज़रूरी है.
• अगर आपने Firebase और Google Cloud का इस्तेमाल पहले कभी नहीं किया है, तो देखें कि क्या आपको 300 डॉलर का क्रेडिट और मुफ़्त में आज़माने के लिए Cloud Billing खाता मिल सकता है.
• अगर आपने किसी इवेंट के तहत यह कोडलैब किया है, तो इवेंट के आयोजक से पूछें कि क्या कोई Cloud क्रेडिट उपलब्ध है.

अपने प्रोजेक्ट को Blaze प्लान पर अपग्रेड करने के लिए, यह तरीका अपनाएं:

1. Firebase कंसोल में, अपना प्लान अपग्रेड करें को चुनें.
2. ब्लेज़ प्लान चुनें. अपने प्रोजेक्ट से क्लाउड बिलिंग खाता लिंक करने के लिए, स्क्रीन पर दिए गए निर्देशों का पालन करें.
   अगर आपको इस अपग्रेड के तहत क्लाउड बिलिंग खाता बनाना पड़ा है, तो अपग्रेड पूरा करने के लिए, आपको Firebase Console में अपग्रेड फ़्लो पर वापस जाना पड़ सकता है.

प्रोजेक्ट में Firebase वेब ऐप्लिकेशन जोड़ना

1. नया Firebase वेब ऐप्लिकेशन बनाने के लिए, वेब आइकॉन पर क्लिक करें.
2. ऐप्लिकेशन को 'Friendly Chat' के नाम से रजिस्टर करें. इसके बाद, इस ऐप्लिकेशन के लिए Firebase होस्टिंग भी सेट अप करें के बगल में मौजूद बॉक्स को चुनें. ऐप्लिकेशन रजिस्टर करें पर क्लिक करें.
3. अगले चरण में, आपको npm और कॉन्फ़िगरेशन ऑब्जेक्ट का इस्तेमाल करके Firebase इंस्टॉल करने का निर्देश दिखेगा. इस ऑब्जेक्ट को बाद में कोडलैब में कॉपी किया जाएगा. इसलिए, फ़िलहाल आगे बढ़ें दबाएं.

4. इसके बाद, आपको Firebase CLI इंस्टॉल करने का विकल्प दिखेगा. अगर आपने इसे अभी तक इंस्टॉल नहीं किया है, तो npm install -g firebase-tools कमांड का इस्तेमाल करके इसे इंस्टॉल करें. इसके बाद, आगे बढ़ें पर क्लिक करें.
5. इसके बाद, आपको Firebase में लॉग इन करने और Firebase होस्टिंग पर डिप्लॉय करने का विकल्प दिखेगा. firebase login कमांड का इस्तेमाल करके, Firebase में लॉगिन करें. इसके बाद, कंसोल पर जाएं पर क्लिक करें. आने वाले समय में, Firebase होस्टिंग पर डिप्लॉय किया जा सकता है.

Firebase Authentication के लिए Google Sign-in की सुविधा चालू करना

उपयोगकर्ताओं को अपने Google खातों से वेब ऐप्लिकेशन में साइन इन करने की अनुमति देने के लिए, हम Google साइन इन के तरीके का इस्तेमाल करेंगे.

आपको Google Sign-in चालू करना होगा:

1. Firebase कंसोल में, बाएं पैनल में बिल्ड सेक्शन ढूंढें.
2. पुष्टि पर क्लिक करें. अगर लागू हो, तो शुरू करें पर क्लिक करें. इसके बाद, साइन इन करने का तरीका टैब पर क्लिक करें. इसके अलावा, सीधे वहां जाने के लिए यहां क्लिक करें.
3. Google साइन इन की सुविधा देने वाली कंपनी को चालू करना
4. अपने ऐप्लिकेशन का सार्वजनिक नाम, 'फ़्रेंडली चैट' पर सेट करें. इसके बाद, ड्रॉपडाउन मेन्यू से प्रोजेक्ट के सहायता ईमेल पते को चुनें.
5. सेव करें पर क्लिक करें

Cloud Firestore सेट अप करना

वेब ऐप्लिकेशन, चैट मैसेज सेव करने और नए चैट मैसेज पाने के लिए, Cloud Firestore का इस्तेमाल करता है.

अपने Firebase प्रोजेक्ट में Cloud Firestore सेट अप करने का तरीका यहां बताया गया है:

1. Firebase कंसोल के बाएं पैनल में, बिल्ड करें को बड़ा करें. इसके बाद, Firestore डेटाबेस चुनें.
2. डेटाबेस बनाएं पर क्लिक करें.
3. डेटाबेस आईडी को (default) पर सेट रहने दें.
4. अपने डेटाबेस के लिए कोई जगह चुनें. इसके बाद, आगे बढ़ें पर क्लिक करें.
   असल ऐप्लिकेशन के लिए, आपको ऐसी जगह चुननी होगी जो आपके उपयोगकर्ताओं के आस-पास हो.
5. टेस्ट मोड में शुरू करें पर क्लिक करें. सुरक्षा नियमों के बारे में डिसक्लेमर पढ़ें.
   इस कोडलैब में आगे, आपको अपने डेटा को सुरक्षित रखने के लिए सुरक्षा नियम जोड़ने होंगे. अपने डेटाबेस के लिए सुरक्षा नियम जोड़े बिना, ऐप्लिकेशन को सार्वजनिक तौर पर न डिस्ट्रिब्यूट या एक्सपोज़ करें.
6. बनाएं पर क्लिक करें.

Firebase के लिए Cloud Storage सेट अप करना

वेब ऐप्लिकेशन, फ़ोटो को स्टोर करने, अपलोड करने, और शेयर करने के लिए, Firebase के लिए Cloud Storage का इस्तेमाल करता है.

अपने Firebase प्रोजेक्ट में, 'Firebase के लिए Cloud Storage' सेट अप करने का तरीका यहां बताया गया है:

1. Firebase कंसोल के बाएं पैनल में, बिल्ड को बड़ा करें. इसके बाद, स्टोरेज चुनें.
2. शुरू करें पर क्लिक करें.
3. अपनी डिफ़ॉल्ट स्टोरेज बकेट के लिए कोई जगह चुनें.
   US-WEST1, US-CENTRAL1, और US-EAST1 में मौजूद बकेट, Google Cloud Storage के लिए "हमेशा मुफ़्त" टीयर का फ़ायदा ले सकती हैं. अन्य सभी जगहों की बकेट के लिए, Google Cloud Storage की कीमत और इस्तेमाल लागू होता है.
4. टेस्ट मोड में शुरू करें पर क्लिक करें. सुरक्षा नियमों के बारे में डिसक्लेमर पढ़ें.
   इस कोडलैब में आगे, आपको अपने डेटा को सुरक्षित रखने के लिए सुरक्षा नियम जोड़ने होंगे. अपनी स्टोरेज बकेट के लिए सुरक्षा नियम जोड़े बिना, न किसी ऐप्लिकेशन को सार्वजनिक तौर पर डिस्ट्रिब्यूट या एक्सपोज़ करें.
5. बनाएं पर क्लिक करें.

4. Firebase कॉन्फ़िगर करना

appcheck-start डायरेक्ट्री में जाकर, कॉल करें:

firebase use --add

जब कहा जाए, तो अपना प्रोजेक्ट आईडी चुनें. इसके बाद, अपने Firebase प्रोजेक्ट को कोई दूसरा नाम दें. इस प्रोजेक्ट के लिए, सिर्फ़ default का कोई दूसरा नाम दिया जा सकता है. इसके बाद, आपको Firebase के साथ काम करने के लिए, अपने लोकल प्रोजेक्ट को कॉन्फ़िगर करना होगा.

1. Firebase कंसोल में प्रोजेक्ट सेटिंग पर जाएं
2. "आपके ऐप्लिकेशन" कार्ड में, उस ऐप्लिकेशन का कोई दूसरा नाम चुनें जिसके लिए आपको कॉन्फ़िगरेशन ऑब्जेक्ट की ज़रूरत है.
3. Firebase SDK टूल के स्निपेट पैनल से, कॉन्फ़िगरेशन चुनें.
4. कॉन्फ़िगरेशन ऑब्जेक्ट स्निपेट को कॉपी करें. इसके बाद, उसे appcheck-start/hosting/src/firebase-config.js में जोड़ें. कोडलैब के बाकी हिस्से में, यह माना गया है कि वैरिएबल का नाम config है.

firebase-config.js

const config = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.firebasestorage.app",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

उसी appcheck-start डायरेक्ट्री से, इन नंबरों पर कॉल करें:

firebase experiments:enable webframeworks

इससे, वेब फ़्रेमवर्क के साथ काम करने की सुविधा चालू हो जाती है. इस सुविधा की मदद से, यह प्रोजेक्ट बनाया गया था.

अब हम आपका प्रोजेक्ट चलाने और यह जांचने के लिए तैयार हैं कि डिफ़ॉल्ट प्रोजेक्ट काम कर रहा है या नहीं!

5. ऐप्लिकेशन की जांच किए बिना ऐप्लिकेशन आज़माना

अब आपने ऐप्लिकेशन को कॉन्फ़िगर कर लिया है और SDK टूल सेट अप कर लिया है. अब ऐप्लिकेशन को उसी तरह इस्तेमाल करें जिस तरह इसे मूल रूप से डिज़ाइन किया गया था. सबसे पहले, सभी डिपेंडेंसी इंस्टॉल करें. अपने टर्मिनल से, appcheck-start/hosting डायरेक्ट्री पर जाएं. उस डायरेक्ट्री में जाकर, npm install चलाएं. इससे आपके प्रोजेक्ट के काम करने के लिए, सभी डिपेंडेंसी फ़ेच हो जाती हैं. ऐप्लिकेशन को उसकी मौजूदा स्थिति में शुरू करने के लिए, firebase serve चलाएं. ऐप्लिकेशन, आपसे Google खाते से लॉग इन करने के लिए कहता है. ऐसा करें और फिर चैट में कुछ मैसेज और फ़ोटो पोस्ट करें.

अब जब आपने इसे लोकल तौर पर टेस्ट कर लिया है, तो इसे प्रोडक्शन में देखें! वेब ऐप्लिकेशन को वेब पर डिप्लॉय करने के लिए, firebase deploy चलाएं. यह हिस्सा, असल दुनिया में App Check के काम करने के तरीके को डेमो करने के लिए अहम है. इसकी वजह यह है कि reCAPTCHA Enterprise की पुष्टि करने वाली कंपनी के लिए, डोमेन को कॉन्फ़िगर करना ज़रूरी है.

हमें उम्मीद है कि आपको ऐप्लिकेशन की डिफ़ॉल्ट सुविधा मिल रही होगी. चैट मैसेज पोस्ट करना और ऐसी ही अन्य चीज़ें करना. मौजूदा स्थिति का नुकसान यह है कि पिछले चरण में आपके ऐप्लिकेशन कॉन्फ़िगरेशन का इस्तेमाल करने वाला कोई भी व्यक्ति, आपके बैकएंड संसाधनों को ऐक्सेस कर सकता है. हालांकि, उन्हें अब भी आपके Firestore और Cloud Storage सिस्टम के सुरक्षा नियमों का पालन करना होगा. इसके अलावा, वे अब भी वहां सेव किए गए डेटा को क्वेरी कर सकते हैं, सेव कर सकते हैं, और ऐक्सेस कर सकते हैं.

अगले कुछ चरणों में, आपको ये काम करने होंगे:

• ऐप्लिकेशन की जांच के लिए रजिस्टर करना
• एनफ़ोर्समेंट की पुष्टि करना
• नियम लागू करना

6. ऐप्लिकेशन की जांच करने और नीति उल्लंघन ठीक करने की सुविधा चालू करना

सबसे पहले, अपने प्रोजेक्ट के लिए reCAPTCHA Enterprise की कुंजी पाएं और उसे App Check में जोड़ें. इसके लिए, Google Cloud Console के reCAPTCHA Enterprise सेक्शन पर जाएं. अपना प्रोजेक्ट चुनें. इसके बाद, आपको reCAPTCHA Enterprise API को चालू करने के लिए कहा जाएगा. एपीआई को चालू करें और कुछ मिनट इंतज़ार करें. इसके बाद, एंटरप्राइज़ पासकोड के बगल में मौजूद, पासकोड बनाएं पर क्लिक करें. इसके बाद, इस सेक्शन में कोई डिसप्ले नेम डालें और वेबसाइट टाइप की कोई कुंजी चुनें. आपको उन डोमेन की जानकारी देनी होगी जिन पर आपका ऐप्लिकेशन होस्ट किया गया है. आपको इसे Firebase Hosting पर होस्ट करना है, इसलिए होस्टिंग के लिए डिफ़ॉल्ट नाम का इस्तेमाल करें. आम तौर पर, यह नाम ${YOUR_PROJECT_ID}.web.app होता है. आपको अपना होस्टिंग डोमेन, Firebase कंसोल के होस्टिंग सेक्शन में दिखेगा. यह जानकारी भरने के बाद, हो गया और कुंजी बनाएं दबाएं.

प्रोसेस पूरी होने के बाद, आपको मुख्य जानकारी पेज पर सबसे ऊपर एक आईडी दिखेगा.

इस आईडी को क्लिपबोर्ड पर कॉपी करें. इस पासकोड का इस्तेमाल, ऐप्लिकेशन की जांच करने के लिए किया जाता है. इसके बाद, Firebase कंसोल के ऐप्लिकेशन की जांच सेक्शन पर जाएं और शुरू करें पर क्लिक करें. इसके बाद, रजिस्टर करें पर क्लिक करें. इसके बाद, reCAPTCHA Enterprise पर क्लिक करें और कॉपी किया गया आईडी, reCAPTCHA Enterprise साइट कुंजी के लिए टेक्स्ट बॉक्स में डालें. बाकी सेटिंग को डिफ़ॉल्ट पर रहने दें. आपका ऐप्लिकेशन जांच पेज कुछ ऐसा दिखेगा:

ऐसे अनुरोध जिनकी पुष्टि नहीं की गई है और जिन पर कार्रवाई नहीं की गई है

अब आपके पास Firebase कंसोल में रजिस्टर की गई एक कुंजी है. इसलिए, firebase serve को चलाकर, ब्राउज़र में अपनी साइट को फिर से चलाएं. यहां आपके पास वेब ऐप्लिकेशन, स्थानीय तौर पर चल रहा है और Firebase बैकएंड के लिए फिर से अनुरोध किए जा सकते हैं. ये अनुरोध, Firebase के बैकएंड के मुताबिक नहीं हैं. इसलिए, इन अनुरोधों को App Check से मॉनिटर किया जा रहा है, लेकिन इन्हें लागू नहीं किया जा रहा है. अगर आपको आने वाले अनुरोधों की स्थिति देखनी है, तो Firebase कंसोल में ऐप्लिकेशन की जांच वाले पेज के एपीआई टैब में, Cloud Firestore सेक्शन पर जाएं. आपने अब तक क्लाइंट को, ऐप्लिकेशन की जांच करने की सुविधा का इस्तेमाल करने के लिए कॉन्फ़िगर नहीं किया है. इसलिए, आपको कुछ ऐसा दिखेगा:

बैकएंड में 100% ऐसे अनुरोध आ रहे हैं जिनकी पुष्टि नहीं हुई है. यह स्क्रीन इसलिए काम की है, क्योंकि इससे पता चलता है कि ज़्यादातर क्लाइंट अनुरोध ऐसे क्लाइंट से आ रहे हैं जिनमें App Check इंटिग्रेट नहीं है.

इस डैशबोर्ड से कुछ बातों का पता चल सकता है. सबसे पहले, इससे यह पता चलता है कि आपके सभी क्लाइंट ऐप्लिकेशन, आपके क्लाइंट के नए वर्शन पर चल रहे हैं या नहीं. अगर ऐसा है, तो अपने ऐप्लिकेशन के किसी असली क्लाइंट के ऐक्सेस को बंद किए बिना, ऐप्लिकेशन की जांच करने की सुविधा को सुरक्षित तरीके से लागू किया जा सकता है. इससे आपको यह जानकारी भी मिल सकती है कि आपके ऐप्लिकेशन से बाहर से आपके बैकएंड को ऐक्सेस करने की कितनी कोशिशें की गईं. ऐसा हो सकता है कि ये उपयोगकर्ता आपकी जानकारी के बिना, सीधे आपके बैकएंड को क्वेरी कर रहे हों. आपके पास यह देखने का विकल्प है कि अनुरोधों की पुष्टि नहीं की गई है. इसलिए, यह देखना ज़रूरी है कि उन उपयोगकर्ताओं के साथ क्या होगा जिनके अनुरोधों की पुष्टि नहीं हुई है.

पुष्टि नहीं किए गए और लागू किए गए अनुरोध

पिछली स्क्रीन पर जाकर, लागू करें बटन दबाएं. इसके बाद, अगर कहा जाए, तो लागू करें बटन को फिर से दबाएं.

इससे, ऐप्लिकेशन की जांच की सुविधा लागू हो जाएगी. यह अब आपकी बैकएंड सेवाओं के उन अनुरोधों को ब्लॉक कर देगी जिनकी पुष्टि, आपके चुने गए पुष्टि करने वाले संगठन (इस मामले में reCAPTCHA Enterprise) के ज़रिए नहीं की गई है. अपने वेब ऐप्लिकेशन पर वापस जाएं, जो http://localhost:5000 पर चल रहा होगा. पेज को रीफ़्रेश करने और डेटाबेस से डेटा पाने की कोशिश करने पर, कुछ नहीं होता. गड़बड़ियों को पढ़ने के लिए Chrome कंसोल खोलने पर, आपको कुछ ऐसा दिखेगा:

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

इस इमेज में, App Check के उन अनुरोधों को ब्लॉक किया गया है जिन्होंने आपके Firebase संसाधनों के लिए किए गए अनुरोधों में, पुष्टि करने वाला मान्य टोकन नहीं दिया था. फ़िलहाल, ऐप्लिकेशन की जांच करने की सुविधा को बंद किया जा सकता है. अगले सेक्शन में, फ़्रेंडली चैट के उदाहरण में reCAPTCHA Enterprise ऐप्लिकेशन की जांच करने की सुविधा जोड़ने का तरीका बताया गया है.

7. साइट में reCAPTCHA Enterprise की कुंजी जोड़ना

हम आपके ऐप्लिकेशन में एंटरप्राइज़ पासकोड जोड़ने जा रहे हैं. सबसे पहले, hosting/src/firebase-config.js खोलें और नीचे दिए गए कोड स्निपेट में अपनी reCAPTCHA Enterprise कुंजी जोड़ें:

const reCAPTCHAEnterpriseKey = {
  // Replace with your recaptcha enterprise site key
  key: "Replace with your recaptcha enterprise site key"
};

यह पूरा होने के बाद, hosting/src/index.js खोलें और लाइन 51 पर, आपको अपनी reCAPTCHA कुंजी फ़ेच करने के लिए, firebase-config.js से इंपोर्ट जोड़ना होगा. साथ ही, आपको App Check लाइब्रेरी भी इंपोर्ट करनी होगी, ताकि आप reCAPTCHA Enterprise की सेवा देने वाली कंपनी के साथ काम कर सकें.

// add from here
 import {
   initializeAppCheck,
   ReCaptchaEnterpriseProvider,
 } from 'firebase/app-check';
// to here

// replace this line
import { getFirebaseConfig } from './firebase-config.js';
// with this line
import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';

इसके बाद, अगली लाइन में आपको ऐप्लिकेशन की जांच करने की सुविधा सेट अप करने के लिए एक फ़ंक्शन बनाना होगा. यह फ़ंक्शन सबसे पहले यह देखेगा कि आप डेवलपमेंट एनवायरमेंट में हैं या नहीं. अगर हां, तो यह एक डीबग टोकन प्रिंट करेगा. इसका इस्तेमाल, लोकल डेवलपमेंट के लिए किया जा सकता है.

import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';
// add from here
 function setupAppCheck(app) {
   if(import.meta.env.MODE === 'development') {
     self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
   }
 }
// to here

अब आपको अपने चुने गए प्रोवाइडर के साथ काम करने के लिए, App Check को शुरू करना होगा. इस मामले में, यह reCAPTCHA Enterprise है. इसके बाद, आपको बैकग्राउंड में अपने App Check टोकन को अपने-आप रीफ़्रेश करना होगा. इससे, अगर उपयोगकर्ता का App Check टोकन पुराना हो गया है, तो भी आपकी सेवा के साथ इंटरैक्ट करने में उसे किसी तरह की देरी नहीं होगी.

function setupAppCheck(app) {
   if(import.meta.env.MODE === 'development') {
     self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
   }
// add from here
   // Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
   // site key and pass it to initializeAppCheck().
   initializeAppCheck(app, {
     provider: new ReCaptchaEnterpriseProvider(getReCaptchaKey()),
     isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
   });
// to here
 }

आखिर में, यह पक्का करने के बाद कि ऐप्लिकेशन शुरू हो गया है, आपको अभी-अभी बनाए गए setupAppCheck फ़ंक्शन को कॉल करना होगा. hosting/src/index.js फ़ाइल में सबसे नीचे, हाल ही में जोड़े गए तरीके को कॉल करें.

const firebaseApp = initializeApp(getFirebaseConfig());
// add from here
setupAppCheck(firebaseApp);
// to here
getPerformance();
initFirebaseAuth();
loadMessages();

पहले स्थानीय तौर पर जांच करें

सबसे पहले, अपने ऐप्लिकेशन को स्थानीय तौर पर टेस्ट करें. अगर आपने ऐप्लिकेशन को पहले से ही स्थानीय तौर पर उपलब्ध नहीं कराया है, तो firebase serve चलाएं. आपको पता चलेगा कि ऐप्लिकेशन अब भी स्थानीय तौर पर लोड नहीं हो रहा है. ऐसा इसलिए है, क्योंकि आपने अपने Firebase डोमेन को सिर्फ़ reCAPTCHA की पुष्टि करने वाली कंपनी के साथ रजिस्टर किया है, न कि localhost डोमेन के साथ. आपको कभी भी localhost को अनुमति वाले डोमेन के तौर पर रजिस्टर नहीं करना चाहिए. ऐसा करने से, उपयोगकर्ता अपनी मशीन पर स्थानीय तौर पर चल रहे ऐप्लिकेशन से, पाबंदी वाले बैकएंड को ऐक्सेस कर सकते हैं. इसके बजाय, आपने self.FIREBASE_APPCHECK_DEBUG_TOKEN = true सेट किया है, इसलिए आपको अपने JavaScript कंसोल में इस तरह की लाइन देखनी होगी:

App Check debug token: 55183c20-de61-4438-85e6-8065789265be. You will need to add it to your app's App Check settings in the Firebase console for it to work.

आपको दिए गए डीबग टोकन (उदाहरण के मामले में यह : 55183c20-de61-4438-85e6-8065789265be है) को अपने ऐप्लिकेशन के ओवरफ़्लो मेन्यू में जाकर, ऐप्लिकेशन की जांच के कॉन्फ़िगरेशन में जोड़ना होगा.

टोकन को कोई ऐसा यूनीक नाम दें जो आपको याद रहे. इसके बाद, सेव करें पर क्लिक करें. इस विकल्प की मदद से, अपने ऐप्लिकेशन में क्लाइंट से जनरेट हुए टोकन का इस्तेमाल किया जा सकता है. यह, डीबग टोकन जनरेट करके उसे अपने ऐप्लिकेशन में जोड़ने के मुकाबले ज़्यादा सुरक्षित विकल्प है. ऐप्लिकेशन में टोकन जोड़ने पर, हो सकता है कि वह अनजाने में असली उपयोगकर्ताओं को भेज दिया जाए. ऐसे में, असली उपयोगकर्ता आपकी जांच को बायपास करके इसका गलत इस्तेमाल कर सकते हैं. अगर आपको किसी सीआई (कंट्रोल इंटिग्रेशन) एनवायरमेंट में डीबग टोकन उपलब्ध कराना है, तो उसे उपलब्ध कराने के तरीके के बारे में ज़्यादा जानने के लिए, यह दस्तावेज़ पढ़ें.

Firebase कंसोल में डीबग टोकन रजिस्टर करने के बाद, ऐप्लिकेशन की जांच करने की सुविधा को फिर से चालू किया जा सकता है. साथ ही, यह जांच की जा सकती है कि ऐप्लिकेशन का कॉन्टेंट, टर्मिनल से firebase serve को कॉल करके स्थानीय तौर पर लोड होता है या नहीं. आपको पहले डाला गया डेटा, वेब ऐप्लिकेशन के लोकल वर्शन में दिखेगा. आपको अब भी कंसोल में डीबग टोकन वाला मैसेज दिखेगा.

प्रोडक्शन में इसे आज़माना

जब आपको यह पक्का हो जाए कि ऐप्लिकेशन जांचने की सुविधा स्थानीय तौर पर काम करती है, तो वेब ऐप्लिकेशन को प्रोडक्शन में डिप्लॉय करें. अपने टर्मिनल से firebase deploy को फिर से कॉल करें और पेज को फिर से लोड करें. इससे आपके वेब ऐप्लिकेशन को Firebase होस्टिंग पर चलाने के लिए पैकेज किया जाएगा. जब आपका ऐप्लिकेशन Firebase होस्टिंग पर होस्ट हो जाए, तो ${YOUR_PROJECT_ID}.web.app पर जाकर अपने ऐप्लिकेशन को ऐक्सेस करें. JavaScript कंसोल खोलें. अब आपको वहां डीबग टोकन नहीं दिखेगा. साथ ही, आपको अपने प्रोजेक्ट में चैट लोड होती हुई दिखेंगी. इसके अलावा, कुछ समय तक ऐप्लिकेशन का इस्तेमाल करने के बाद, Firebase कंसोल के 'ऐप्लिकेशन की जांच' सेक्शन पर जाकर, यह पुष्टि की जा सकती है कि आपके ऐप्लिकेशन के अनुरोधों की पुष्टि हो गई है.

8. बधाई हो!

बधाई हो, आपने वेब ऐप्लिकेशन में Firebase App Check जोड़ दिया है!

प्रोडक्शन एनवायरमेंट के लिए reCAPTCHA Enterprise टोकन को मैनेज करने के लिए, Firebase कंसोल सेट अप किया जाता है. साथ ही, लोकल डेवलपमेंट के लिए डीबग टोकन भी सेट अप किए जाते हैं. इससे यह पक्का होता है कि आपके ऐप्लिकेशन, अब भी मंज़ूरी पा चुके क्लाइंट से Firebase के संसाधनों को ऐक्सेस कर पाएं. साथ ही, आपके ऐप्लिकेशन में धोखाधड़ी वाली गतिविधि को रोका जा सके.

आगे क्या करना है?

Firebase App Check को इनमें जोड़ने के लिए, नीचे दिया गया दस्तावेज़ देखें:

• Cloud Functions में नीति उल्लंघन ठीक करने की सुविधा चालू करना
• पसंद के मुताबिक बनाए गए बैकएंड पर, ऐप्लिकेशन की जांच करने वाले टोकन की पुष्टि करना

रेफ़रंस दस्तावेज़

• वेब ऐप्लिकेशन में reCAPTCHA Enterprise के साथ, ऐप्लिकेशन की जांच करने की सुविधा का इस्तेमाल शुरू करना
• वेब ऐप्लिकेशन में डीबग प्रोवाइडर का इस्तेमाल करना