ऐप चेक वेब कोडेलैब

1 परिचय

अंतिम अद्यतन: 2023-02-23

आप अपने फायरबेस संसाधनों तक अनधिकृत पहुंच को कैसे रोक सकते हैं?

आप अनधिकृत ग्राहकों को अपने बैकएंड संसाधनों तक पहुंचने से रोकने के लिए फायरबेस ऐप चेक का उपयोग कर सकते हैं, आने वाले अनुरोधों को एक सत्यापन के साथ संलग्न करने की आवश्यकता है कि अनुरोध आपके वास्तविक ऐप से आया है और ऐसे ट्रैफ़िक को अवरुद्ध कर सकते हैं जिनके पास उचित सत्यापन नहीं है। फायरबेस ऐप चेक क्लाइंट की प्रामाणिकता को सत्यापित करने के लिए प्लेटफ़ॉर्म-विशिष्ट सत्यापन प्रदाताओं पर निर्भर करता है: वेब ऐप्स के लिए, ऐप चेक सत्यापन प्रदाताओं के रूप में reCAPTCHA v3 और reCAPTCHA एंटरप्राइज़ का समर्थन करता है।

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

आप क्या बनाएंगे

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

आप क्या सीखेंगे

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

आपको किस चीज़ की ज़रूरत पड़ेगी

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

2. नमूना कोड प्राप्त करें

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

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

वैकल्पिक रूप से, यदि आपके पास Git इंस्टॉल नहीं है, तो आप रिपॉजिटरी को ज़िप फ़ाइल के रूप में डाउनलोड कर सकते हैं।

स्टार्टर ऐप आयात करें

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

3. एक फायरबेस प्रोजेक्ट बनाएं और सेट करें

एक फायरबेस प्रोजेक्ट बनाएं

1. फायरबेस में साइन इन करें।
2. फायरबेस कंसोल में, प्रोजेक्ट जोड़ें पर क्लिक करें और फिर अपने फायरबेस प्रोजेक्ट को फ्रेंडलीचैट नाम दें। अपने फायरबेस प्रोजेक्ट के लिए प्रोजेक्ट आईडी याद रखें।
3. इस प्रोजेक्ट के लिए Google Analytics सक्षम करें को अनचेक करें
4. प्रोजेक्ट बनाएं पर क्लिक करें.

हम जो एप्लिकेशन बनाने जा रहे हैं वह फायरबेस उत्पादों का उपयोग करता है जो वेब ऐप्स के लिए उपलब्ध हैं:

• फायरबेस प्रमाणीकरण आपके उपयोगकर्ताओं को आसानी से आपके ऐप में साइन इन करने की अनुमति देता है।
• क्लाउड फायरस्टोर क्लाउड पर संरचित डेटा को सहेजने और डेटा में बदलाव होने पर तुरंत सूचना प्राप्त करने के लिए है।
• क्लाउड में फ़ाइलों को सहेजने के लिए फायरबेस के लिए क्लाउड स्टोरेज।
• आपकी संपत्तियों की मेजबानी और सेवा के लिए फायरबेस होस्टिंग।
• पुश नोटिफिकेशन भेजने और ब्राउज़र पॉपअप नोटिफिकेशन प्रदर्शित करने के लिए फायरबेस क्लाउड मैसेजिंग।
• आपके ऐप के लिए उपयोगकर्ता प्रदर्शन डेटा एकत्र करने के लिए फायरबेस प्रदर्शन मॉनिटरिंग।

इनमें से कुछ उत्पादों को विशेष कॉन्फ़िगरेशन की आवश्यकता है या फायरबेस कंसोल का उपयोग करके सक्षम करने की आवश्यकता है।

प्रोजेक्ट में फायरबेस वेब ऐप जोड़ें

1. वेब आइकन पर क्लिक करें एक नया फायरबेस वेब ऐप बनाने के लिए।
2. ऐप को फ्रेंडली चैट उपनाम के साथ पंजीकृत करें, फिर इस ऐप के लिए फायरबेस होस्टिंग भी सेट करें के बगल में स्थित बॉक्स को चेक करें। ऐप रजिस्टर करें पर क्लिक करें.
3. अगले चरण पर, आपको npm और एक कॉन्फ़िगरेशन ऑब्जेक्ट का उपयोग करके फ़ायरबेस स्थापित करने के लिए एक कमांड दिखाई देगा। आप इस ऑब्जेक्ट को बाद में कोडलैब में कॉपी करें, इसलिए अभी के लिए, Next दबाएँ।

4. फिर आपको फायरबेस सीएलआई इंस्टॉल करने का विकल्प दिखाई देगा। यदि आपने इसे पहले से इंस्टॉल नहीं किया है, तो अभी कमांड npm install -g firebase-tools उपयोग करके ऐसा करें। फिर Next पर क्लिक करें।
5. फिर आपको फायरबेस में लॉग इन करने और फायरबेस होस्टिंग पर तैनात करने का विकल्प दिखाई देगा। आगे बढ़ें और firebase login कमांड का उपयोग करके फायरबेस में लॉगिन करें, फिर कंटिन्यू टू कंसोल पर क्लिक करें। आप भविष्य के चरण में फायरबेस होस्टिंग पर तैनात होंगे।

फायरबेस प्रमाणीकरण के लिए Google साइन-इन सक्षम करें

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

आपको Google साइन-इन सक्षम करना होगा:

1. फायरबेस कंसोल में, बाएं पैनल में बिल्ड अनुभाग का पता लगाएं।
2. प्रमाणीकरण पर क्लिक करें, यदि लागू हो तो प्रारंभ करें पर क्लिक करें, फिर साइन-इन विधि टैब पर क्लिक करें (या सीधे वहां जाने के लिए यहां क्लिक करें )।
3. Google साइन-इन प्रदाता सक्षम करें
4. अपने ऐप का सार्वजनिक-सामना करने वाला नाम फ्रेंडली चैट पर सेट करें और ड्रॉपडाउन मेनू से एक प्रोजेक्ट सपोर्ट ईमेल चुनें।
5. सहेजें पर क्लिक करें

क्लाउड फायरस्टोर सक्षम करें

वेब ऐप चैट संदेशों को सहेजने और नए चैट संदेश प्राप्त करने के लिए क्लाउड फायरस्टोर का उपयोग करता है।

आपको क्लाउड फायरस्टोर को सक्षम करना होगा:

1. फ़ायरबेस कंसोल के बिल्ड अनुभाग में, फ़ायरस्टोर डेटाबेस पर क्लिक करें।
2. क्लाउड फायरस्टोर फलक में डेटाबेस बनाएं पर क्लिक करें।

3. स्टार्ट इन टेस्ट मोड विकल्प चुनें, फिर सुरक्षा नियमों के बारे में अस्वीकरण पढ़ने के बाद नेक्स्ट पर क्लिक करें।

परीक्षण मोड यह सुनिश्चित करता है कि आप विकास के दौरान डेटाबेस पर स्वतंत्र रूप से लिख सकते हैं। स्टार्टर कोड में आपके लिए सुरक्षा नियम पहले से ही लिखे हुए हैं। आप इस कोडलैब के लिए उनका उपयोग करेंगे।

4. वह स्थान सेट करें जहां आपका क्लाउड फायरस्टोर डेटा संग्रहीत है। आप इसे डिफ़ॉल्ट के रूप में छोड़ सकते हैं या अपने निकट का क्षेत्र चुन सकते हैं। फायरस्टोर का प्रावधान करने के लिए सक्षम करें पर क्लिक करें।

क्लाउड स्टोरेज सक्षम करें

वेब ऐप चित्रों को संग्रहीत करने, अपलोड करने और साझा करने के लिए फायरबेस के लिए क्लाउड स्टोरेज का उपयोग करता है।

आपको क्लाउड स्टोरेज सक्षम करना होगा:

1. फायरबेस कंसोल के बिल्ड सेक्शन में, स्टोरेज पर क्लिक करें।
2. यदि कोई गेट स्टार्टेड बटन नहीं है, तो इसका मतलब है कि क्लाउड स्टोरेज पहले से ही सक्षम है, और आपको नीचे दिए गए चरणों का पालन करने की आवश्यकता नहीं है।
3. आरंभ करें पर क्लिक करें.
4. स्टार्ट इन टेस्ट मोड विकल्प चुनें, फिर सुरक्षा नियमों के बारे में अस्वीकरण पढ़ने के बाद नेक्स्ट पर क्लिक करें।

डिफ़ॉल्ट सुरक्षा नियमों के साथ, कोई भी प्रमाणित उपयोगकर्ता क्लाउड स्टोरेज पर कुछ भी लिख सकता है। हम बाद में इस कोडलैब में हमारे लिए पहले से लिखे गए सुरक्षा नियमों को तैनात करेंगे।

5. क्लाउड स्टोरेज स्थान उसी क्षेत्र के साथ पूर्व-चयनित है जिसे आपने अपने क्लाउड फायरस्टोर डेटाबेस के लिए चुना है। सेटअप पूरा करने के लिए Done पर क्लिक करें।

4. फायरबेस कॉन्फ़िगर करें

appcheck-start निर्देशिका से, कॉल करें:

firebase use --add

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

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

फायरबेस-config.js

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

उसी appcheck-start निर्देशिका से, फिर कॉल करें:

firebase experiments:enable webframeworks

यह वेब फ्रेमवर्क समर्थन को सक्षम बनाता है जिसके साथ यह प्रोजेक्ट बनाया गया था।

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

5. ऐप को बिना ऐप चेक के आज़माएं

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

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

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

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

• ऐप जांच के लिए पंजीकरण करें
• प्रवर्तन को मान्य करें
• नियम लागू करना शुरू करें

6. ऐप जांच और प्रवर्तन चालू करें

आइए आपके प्रोजेक्ट के लिए एक रीकैप्चा एंटरप्राइज कुंजी पकड़कर और उसे ऐप चेक में जोड़कर शुरुआत करें। आप Google क्लाउड कंसोल के reCAPTCHA एंटरप्राइज़ अनुभाग पर जाकर शुरुआत करें। अपना प्रोजेक्ट चुनें और फिर आपको reCAPTCHA एंटरप्राइज़ एपीआई सक्षम करने के लिए कहा जाएगा। एपीआई सक्षम करें और इसके समाप्त होने तक कुछ मिनट प्रतीक्षा करें। फिर एंटरप्राइज़ कुंजी के आगे कुंजी बनाएँ पर क्लिक करें। फिर इस अनुभाग में, एक प्रदर्शन नाम निर्दिष्ट करें और एक वेबसाइट प्रकार कुंजी चुनें। आपको वे डोमेन निर्दिष्ट करने होंगे जिन पर आपका ऐप होस्ट किया गया है। चूँकि आप इसे फायरबेस होस्टिंग पर होस्ट करने की योजना बना रहे हैं, आप डिफ़ॉल्ट होस्टिंग नाम का उपयोग करते हैं जो आम तौर पर ${YOUR_PROJECT_ID}.web.app है। आप अपना होस्टिंग डोमेन फ़ायरबेस कंसोल के होस्टिंग अनुभाग के अंतर्गत पा सकते हैं। यह जानकारी भरने के बाद Done दबाएं और Key बनाएं ।

एक बार पूरा होने पर, आपको मुख्य विवरण पृष्ठ के शीर्ष पर एक आईडी दिखाई देगी।

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

असत्यापित और अप्रवर्तित अनुरोध

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

बैकएंड में 100% असत्यापित अनुरोध आ रहे हैं। यह स्क्रीन उपयोगी है क्योंकि यह दिखाती है कि लगभग सभी क्लाइंट अनुरोध उन क्लाइंट से आ रहे हैं जिनमें ऐप चेक एकीकृत नहीं है।

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

असत्यापित और लागू अनुरोध

आगे बढ़ें और पिछली स्क्रीन से एनफोर्स बटन दबाएं और फिर संकेत मिलने पर एनफोर्स दोबारा दबाएं।

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

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

यह ऐप चेक ब्लॉकिंग अनुरोध है जो आपके फायरबेस संसाधनों के अनुरोधों में वैध सत्यापन टोकन पास नहीं करता है। कुछ समय के लिए, आप ऐप चेक प्रवर्तन को बंद कर सकते हैं और अगले भाग में, आप जांच करेंगे कि फ्रेंडली चैट उदाहरण में रीकैप्चा एंटरप्राइज ऐप चेक कैसे जोड़ा जाए।

7. साइट पर reCAPTCHA एंटरप्राइज़ कुंजी जोड़ें

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

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 से एक आयात जोड़ेंगे और ऐप चेक लाइब्रेरी भी आयात करेंगे ताकि आप reCAPTCHA के साथ काम कर सकें। उद्यम प्रदाता.

// 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

अब आपके चयनित प्रदाता के साथ काम करने के लिए ऐप चेक को आरंभ करने का समय आ गया है - इस मामले में, यह रीकैप्चा एंटरप्राइज है। फिर आप पृष्ठभूमि में अपने ऐप चेक टोकन को स्वचालित रूप से रीफ्रेश करना चाहेंगे, जिससे उपयोगकर्ता को आपकी सेवा के साथ इंटरैक्ट करने में किसी भी प्रकार की देरी से रोका जा सकेगा, यदि उनका ऐप चेक टोकन पुराना हो गया हो।

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 चलाएं। आपको ध्यान देना चाहिए कि एप्लिकेशन अभी भी स्थानीय रूप से लोड होने में विफल रहता है। ऐसा इसलिए है क्योंकि आपने अपना फायरबेस डोमेन केवल reCAPTCHA सत्यापन प्रदाता के साथ पंजीकृत किया है, लोकलहोस्ट डोमेन के साथ नहीं। आपको लोकलहोस्ट को कभी भी स्वीकृत डोमेन के रूप में पंजीकृत नहीं करना चाहिए क्योंकि यह उपयोगकर्ताओं को उनकी मशीन पर स्थानीय रूप से चल रहे एप्लिकेशन से आपके प्रतिबंधित बैकएंड तक पहुंचने की अनुमति देता है। इसके बजाय, चूंकि आपने self.FIREBASE_APPCHECK_DEBUG_TOKEN = true सेट किया है, इसलिए आप अपने जावास्क्रिप्ट कंसोल में कुछ इसी तरह दिखने वाली लाइन की जांच करना चाहेंगे:

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 serve कॉल करके परीक्षण कर सकते हैं कि ऐप सामग्री स्थानीय रूप से लोड होती है। आपको पहले दर्ज किया गया डेटा वेब एप्लिकेशन के स्थानीय संस्करण में परोसा जाता हुआ दिखना चाहिए। आपको अभी भी कंसोल पर मुद्रित डिबग टोकन वाला संदेश देखना चाहिए।

इसे उत्पादन में आज़माएँ

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

8. बधाई हो!

बधाई हो, आपने फ़ायरबेस ऐप चेक को वेब ऐप में सफलतापूर्वक जोड़ लिया है!

आप उत्पादन परिवेश के लिए रीकैप्चा एंटरप्राइज टोकन को संभालने के लिए फायरबेस कंसोल सेट करते हैं और यहां तक ​​कि स्थानीय विकास के लिए डिबग टोकन भी सेट करते हैं। यह सुनिश्चित करता है कि आपके ऐप्स अभी भी स्वीकृत ग्राहकों से फायरबेस संसाधनों तक पहुंचने में सक्षम हैं और आपके एप्लिकेशन के भीतर धोखाधड़ी वाली गतिविधि को होने से रोकते हैं।

आगे क्या होगा?

फ़ायरबेस ऐप चेक को इसमें जोड़ने के लिए निम्नलिखित दस्तावेज़ देखें:

• क्लाउड फ़ंक्शंस में प्रवर्तन सक्षम करें
• कस्टम बैकएंड पर ऐप चेक टोकन सत्यापित करें

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

• वेब ऐप्स में reCAPTCHA एंटरप्राइज के साथ ऐप चेक का उपयोग शुरू करें
• वेब ऐप्स में डिबग प्रदाता का उपयोग करें