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

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

पिछले अपडेट की तारीख: 23-02-2023

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

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

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

आपको क्या बनाने को मिलेगा

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

आपको क्या सीखने को मिलेगा

• बिना अनुमति के ऐक्सेस के लिए, अपने बैकएंड की निगरानी कैसे करें
• Firestore और Cloud Storage में एनफ़ोर्समेंट की सुविधा कैसे जोड़ें
• स्थानीय डेवलपमेंट के लिए, डीबग टोकन के साथ अपने ऐप्लिकेशन को चलाने का तरीका

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

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

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

कमांड लाइन से, कोडलैब की GitHub रिपॉज़िटरी को क्लोन करें:

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

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

friendlychat-web रिपॉज़िटरी में, कई प्लैटफ़ॉर्म के लिए सैंपल प्रोजेक्ट मौजूद हैं.

इस कोडलैब में सिर्फ़ इन दो फ़ोल्डर का इस्तेमाल किया जाता है:

• 📁 appcheck-start: यह शुरुआती कोड है. इस कोडलैब के दौरान, आपको इसी कोड का इस्तेमाल करना होगा.
• 📁 appcheck: इसमें तैयार किए गए सैंपल ऐप्लिकेशन का पूरा कोड होता है.

ध्यान दें: अगर आपको तैयार ऐप्लिकेशन चलाना है, तो आपको Firebase कंसोल में एक Firebase प्रोजेक्ट बनाना होगा. इसके लिए, इस कोडलैब में Firebase प्रोजेक्ट बनाना और उसे सेट अप करना सेक्शन में दिए गए निर्देश देखें.

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

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

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

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

1. अपने Google खाते का इस्तेमाल करके, Firebase कंसोल में साइन इन करें.
2. नया प्रोजेक्ट बनाने के लिए, बटन पर क्लिक करें. इसके बाद, प्रोजेक्ट का नाम डालें. उदाहरण के लिए, FriendlyChat.
   

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

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

3. जारी रखें पर क्लिक करें.
4. अगर आपसे कहा जाए, तो Firebase की शर्तें पढ़ें और स्वीकार करें. इसके बाद, जारी रखें पर क्लिक करें.
5. (ज़रूरी नहीं) Firebase कंसोल में एआई की मदद पाने की सुविधा चालू करें. इसे "Firebase में Gemini" कहा जाता है.
6. इस कोडलैब के लिए, आपको Google Analytics की ज़रूरत नहीं है. इसलिए, Google Analytics के विकल्प को टॉगल करके बंद करें.
7. प्रोजेक्ट बनाएं पर क्लिक करें. इसके बाद, प्रोजेक्ट के प्रोविज़न होने का इंतज़ार करें. इसके बाद, जारी रखें पर क्लिक करें.

Firebase का प्राइसिंग प्लान अपग्रेड करना

Cloud Storage for Firebase का इस्तेमाल करने के लिए, आपका Firebase प्रोजेक्ट इस्तेमाल के हिसाब से शुल्क चुकाने वाले (ब्लेज़) प्लान पर होना चाहिए. इसका मतलब है कि यह Cloud Billing खाते से लिंक होना चाहिए.

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

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

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

ध्यान दें: इस कोडलैब को पूरा करने के बाद, अपने प्रोजेक्ट को बिना किसी शुल्क वाले (स्पार्क) प्राइसिंग प्लान पर डाउनग्रेड किया जा सकता है.

प्रोजेक्ट में 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 Hosting पर डिप्लॉय करना होगा.

Firebase प्रॉडक्ट सेट अप करना

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

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

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

Firebase Authentication के लिए, Google से साइन इन करने की सुविधा चालू करना

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

आपको Google खाते से साइन इन करने की सुविधा चालू करनी होगी:

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

Cloud Firestore सेट अप करना

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

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

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

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

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

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

1. Firebase कंसोल के बाएं पैनल में, Build को बड़ा करें. इसके बाद, Storage को चुनें.
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 स्निपेट पैनल में जाकर, Config चुनें.
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",
};

ऊपर दिए गए कोड में, आपके ऐप्लिकेशन के लिए Firebase कॉन्फ़िगरेशन ऑब्जेक्ट होना चाहिए, न कि प्लेसहोल्डर वैल्यू!

उसी appcheck-start डायरेक्ट्री से, फिर कॉल करें:

firebase experiments:enable webframeworks

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

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

5. App Check के बिना ऐप्लिकेशन आज़माना

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

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

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

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

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

6. App Check और एनफ़ोर्समेंट की सुविधा चालू करना

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

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

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

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

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

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

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

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

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

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

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

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

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वीं लाइन पर, आपको firebase-config.js से इंपोर्ट जोड़ना होगा, ताकि reCAPTCHA कुंजी को फ़ेच किया जा सके. साथ ही, 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';

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

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 को मंज़ूरी वाले डोमेन के तौर पर रजिस्टर नहीं करना चाहिए. इससे उपयोगकर्ताओं को, उनकी मशीन पर स्थानीय तौर पर चल रहे ऐप्लिकेशन से, आपके प्रतिबंधित बैकएंड को ऐक्सेस करने की अनुमति मिल जाती है. इसके बजाय, आपने 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 है) को अपने ऐप्लिकेशन के लिए, ओवरफ़्लो मेन्यू में मौजूद App Check कॉन्फ़िगरेशन में डालना होगा.

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

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

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

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

8. बधाई हो!

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

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

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

Firebase App Check को इन प्लैटफ़ॉर्म पर जोड़ने के लिए, यह दस्तावेज़ पढ़ें:

• Cloud Functions में एनफ़ोर्समेंट की सुविधा चालू करना
• कस्टम बैकएंड पर App Check टोकन की पुष्टि करना

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

• वेब ऐप्लिकेशन में reCAPTCHA Enterprise के साथ App Check का इस्तेमाल करना
• वेब ऐप्लिकेशन में डीबग प्रोवाइडर का इस्तेमाल करना