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

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 से पुष्टि करने की सुविधा के लिए किए गए अनुरोधों को सुरक्षित रखने के लिए किया जा सकता है. साथ ही, इसका इस्तेमाल खुद होस्ट किए गए बैकएंड पर भी किया जा सकता है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Firebase कंसोल में, अपना प्लान अपग्रेड करें को चुनें.
2. Blaze प्लान चुनें. अपने प्रोजेक्ट से क्लाउड बिलिंग खाता लिंक करने के लिए, स्क्रीन पर दिए गए निर्देशों का पालन करें.
   अगर आपको इस अपग्रेड के तहत क्लाउड बिलिंग खाता बनाना है, तो अपग्रेड की प्रोसेस पूरी करने के लिए, आपको 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 होस्टिंग पर डिप्लॉय करना होगा.

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

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

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

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

Firebase से पुष्टि करने के लिए, Google से साइन इन करने की सुविधा चालू करना

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

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

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

Cloud Firestore सेट अप करना

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

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

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

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

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

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

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