AngularFire वेब कोडलैब

1. खास जानकारी

इस कोडलैब में, आपको Firebase के प्रॉडक्ट और सेवाओं का इस्तेमाल करके चैट क्लाइंट को लागू और डिप्लॉय करके, वेब ऐप्लिकेशन बनाने के लिए AngularFire का इस्तेमाल करने का तरीका पता चलेगा.

चैट ऐप्लिकेशन, जहां उपयोगकर्ता Firebase के बारे में बातचीत कर रहे हैं

आपको क्या जानकारी मिलेगी

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

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

  • GitHub खाता
  • अपने Firebase प्रोजेक्ट को Blaze कीमत वाले प्लान पर अपग्रेड करने की सुविधा
  • आपकी पसंद का आईडीई/टेक्स्ट एडिटर, जैसे कि WebStorm, Sublime या VS Code
  • पैकेज मैनेजर npm, जो आम तौर पर Node.js के साथ आता है
  • टर्मिनल/कंसोल
  • Chrome जैसा कोई ब्राउज़र
  • कोडलैब का सैंपल कोड (कोड पाने का तरीका जानने के लिए, कोडलैब का अगला चरण देखें.)

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

GitHub पर डेटा स्टोर करने की जगह बनाना

कोडलैब का सोर्स https://github.com/firebase/codelab-friendlychat-web पर देखा जा सकता है. इस रिपॉज़िटरी में कई प्लैटफ़ॉर्म के लिए सैंपल प्रोजेक्ट मौजूद हैं. हालांकि, यह कोडलैब सिर्फ़ angularfire-start डायरेक्ट्री का इस्तेमाल करता है.

angularfire-start फ़ोल्डर को अपनी रिपॉज़िटरी में कॉपी करें:

  1. टर्मिनल का इस्तेमाल करके, अपने कंप्यूटर पर नया फ़ोल्डर बनाएं और नई डायरेक्ट्री पर जाएं:
    mkdir codelab-friendlyeats-web

cd codelab-friendlyeats-web
  2. सिर्फ़ angularfire-start फ़ोल्डर को फ़ेच करने के लिए, giget एनपीएम पैकेज का इस्तेमाल करें:
    npx giget@latest gh:firebase/codelab-friendlychat-web/angularfire-start#master . --install
  3. git की मदद से, स्थानीय तौर पर बदलावों को ट्रैक करना:
    git init

git add .

git commit -m "codelab starting point"

git branch -M main
  4. GitHub पर नया डेटा स्टोर करने की जगह बनाएं: https://github.com/new. इसे अपनी पसंद के मुताबिक कोई भी नाम दें.
    1. GitHub आपको एक नया रिपॉज़िटरी यूआरएल देगा, जो https://github.com/[user-name]/[repository-name].git या git@github.com:[user-name]/[repository-name].git जैसा दिखेगा. इस यूआरएल को कॉपी करें.
  5. स्थानीय बदलावों को अपने नए GitHub रिपॉज़िटरी में पुश करें. your-repository-url प्लेसहोल्डर की जगह अपने रिपॉज़िटरी का यूआरएल डालकर, यह कमांड चलाएं.
    git remote add origin your-repository-url

git push -u origin main
  6. अब आपको अपने GitHub रिपॉज़िटरी में स्टार्टर कोड दिखेगा.

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

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

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

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

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

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

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

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

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

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

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

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

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

वेब ऐप्लिकेशन का स्क्रीनशॉट रजिस्टर करना

पुष्टि करने की सुविधा सेट अप करना

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

  1. Firebase कंसोल में, पुष्टि पर जाएं.
  2. शुरू करें पर क्लिक करें.
  3. अन्य सेवा देने वाली कंपनियां कॉलम में, Google > चालू करें पर क्लिक करें.
  4. प्रोजेक्ट के लिए सार्वजनिक नाम टेक्स्ट बॉक्स में, कोई ऐसा नाम डालें जो आपको याद रहे, जैसे कि My Next.js app.
  5. प्रोजेक्ट के लिए सहायता ईमेल ड्रॉप-डाउन से, अपना ईमेल पता चुनें.
  6. सेव करें पर क्लिक करें.

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 का कमांड-लाइन इंटरफ़ेस इंस्टॉल करना

Firebase कमांड-लाइन इंटरफ़ेस (CLI) की मदद से, Firebase होस्टिंग का इस्तेमाल करके अपने वेब ऐप्लिकेशन को स्थानीय तौर पर उपलब्ध कराया जा सकता है. साथ ही, अपने वेब ऐप्लिकेशन को Firebase प्रोजेक्ट में डिप्लॉय भी किया जा सकता है.

  1. npm का यह कमांड चलाकर, सीएलआई इंस्टॉल करें:
npm -g install firebase-tools@latest
  1. यह पुष्टि करने के लिए कि सीएलआई सही तरीके से इंस्टॉल हुआ है, यह कमांड चलाएं:
firebase --version

पक्का करें कि आपके पास Firebase CLI का vv13.9.0 या उसके बाद का वर्शन हो.

  1. यहां दिया गया कमांड चलाकर, Firebase CLI को अनुमति दें:
firebase login

आपने वेब ऐप्लिकेशन टेंप्लेट सेट अप किया है, ताकि Firebase होस्टिंग के लिए, अपने ऐप्लिकेशन के कॉन्फ़िगरेशन को ऐप्लिकेशन की लोकल डायरेक्ट्री (कोडलैब में पहले क्लोन की गई रिपॉज़िटरी) से खींचा जा सके. हालांकि, कॉन्फ़िगरेशन को खींचने के लिए, आपको अपने ऐप्लिकेशन को अपने Firebase प्रोजेक्ट से जोड़ना होगा.

  1. पक्का करें कि आपकी कमांड लाइन, आपके ऐप्लिकेशन की लोकल angularfire-start डायरेक्ट्री को ऐक्सेस कर रही हो.
  2. अपने ऐप्लिकेशन को Firebase प्रोजेक्ट से जोड़ने के लिए, यह कमांड चलाएं:
firebase use --add
  1. जब कहा जाए, तो अपना प्रोजेक्ट आईडी चुनें. इसके बाद, अपने Firebase प्रोजेक्ट को कोई दूसरा नाम दें.

अगर आपके पास एक से ज़्यादा एनवायरमेंट (प्रोडक्शन, स्टेजिंग वगैरह) हैं, तो कोई दूसरा नाम देना फ़ायदेमंद होता है. हालांकि, इस कोडलैब के लिए, सिर्फ़ default के उपनाम का इस्तेमाल करें.

  1. अपनी कमांड लाइन पर दिए गए बाकी निर्देशों का पालन करें.

5. AngularFire इंस्टॉल करना

प्रोजेक्ट चलाने से पहले, पक्का करें कि आपने Angular CLI और AngularFire सेट अप किया हो.

  1. कंसोल में यह कमांड चलाएं:
npm install -g @angular/cli
  1. इसके बाद, angularfire-start डायरेक्ट्री के कंसोल में, Angular CLI का यह कमांड चलाएं:
ng add @angular/fire

इससे आपके प्रोजेक्ट के लिए सभी ज़रूरी डिपेंडेंसी इंस्टॉल हो जाएंगी.

  1. जब कहा जाए, तो स्पेस बार का इस्तेमाल करके ng deploy -- hosting से सही का निशान हटाएं. ऐरो बटन और स्पेस बार का इस्तेमाल करके, इन सुविधाओं को चुनें:
    • Authentication
    • Firestore
    • Cloud Messaging
    • Cloud Storage
  2. enter दबाएं और बाकी निर्देशों का पालन करें.
  3. "Install AngularFire" कमिट मैसेज के साथ एक कमिट बनाएं और उसे अपने GitHub रिपॉज़िटरी में पुश करें.

6. ऐप्लिकेशन होस्टिंग बैकएंड बनाना

इस सेक्शन में, आपको अपनी Git रिपॉज़िटरी पर किसी शाखा को देखने के लिए, ऐप्लिकेशन होस्टिंग बैकएंड सेट अप करना होगा.

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

  1. Firebase कंसोल में, ऐप्लिकेशन होस्टिंग पेज पर जाएं:

ऐप्लिकेशन होस्टिंग कंसोल की शुरुआती स्थिति, जिसमें 'शुरू करें' बटन है

  1. बैकएंड बनाने का फ़्लो शुरू करने के लिए, "शुरू करें" पर क्लिक करें. अपने बैकएंड को इस तरह कॉन्फ़िगर करें:
  2. पहले चरण में दिए गए निर्देशों का पालन करके, पहले से बनाए गए GitHub रिपॉज़िटरी को कनेक्ट करें.
  3. डिप्लॉयमेंट सेटिंग सेट करें:
    1. रूट डायरेक्ट्री को / के तौर पर रखें
    2. लाइव शाखा को main पर सेट करें
    3. अपने-आप रोल आउट होने की सुविधा चालू करना
  4. अपने बैकएंड friendlychat-codelab को नाम दें.
  5. "Firebase वेब ऐप्लिकेशन बनाएं या जोड़ें" में जाकर, "मौजूदा Firebase वेब ऐप्लिकेशन चुनें" ड्रॉप-डाउन से वह वेब ऐप्लिकेशन चुनें जिसे आपने पहले कॉन्फ़िगर किया था.
  6. "पूरा करें और डिप्लॉय करें" पर क्लिक करें. कुछ देर बाद, आपको एक नए पेज पर ले जाया जाएगा. यहां आपको ऐप्लिकेशन होस्टिंग के नए बैकएंड का स्टेटस दिखेगा!
  7. रोल आउट पूरा होने के बाद, "डोमेन" में जाकर अपने मुफ़्त डोमेन पर क्लिक करें. डीएनएस प्रोपेगेशन की वजह से, इसे काम करने में कुछ मिनट लग सकते हैं.

आपने शुरुआती वेब ऐप्लिकेशन डिप्लॉय कर लिया है! जब भी GitHub रिपॉज़िटरी की main शाखा में कोई नया कमिट पुश किया जाता है, तो आपको Firebase कंसोल में नया बिल्ड और रोल आउट शुरू होने की जानकारी दिखेगी. रोल आउट पूरा होने के बाद, आपकी साइट अपने-आप अपडेट हो जाएगी.

ऐप्लिकेशन होस्टिंग कंसोल की शुरुआती स्थिति, जिसमें 'शुरू करें' बटन है

आपको FriendlyChat ऐप्लिकेशन की साइन-इन स्क्रीन दिखेगी, जो फ़िलहाल काम नहीं कर रही है.

फ़िलहाल, यह ऐप्लिकेशन कुछ नहीं कर सकता. हालांकि, आपकी मदद से यह जल्द ही काम करेगा!

अब रीयल-टाइम चैट ऐप्लिकेशन बनाते हैं.

7. Firebase इंपोर्ट और कॉन्फ़िगर करना

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

आपको Firebase SDK टूल को कॉन्फ़िगर करना होगा, ताकि यह पता चल सके कि किस Firebase प्रोजेक्ट का इस्तेमाल किया जा रहा है.

  1. Firebase कंसोल में प्रोजेक्ट सेटिंग पर जाएं
  2. "आपके ऐप्लिकेशन" कार्ड में, उस ऐप्लिकेशन का कोई दूसरा नाम चुनें जिसके लिए आपको कॉन्फ़िगरेशन ऑब्जेक्ट की ज़रूरत है.
  3. Firebase SDK टूल के स्निपेट पैनल से, "कॉन्फ़िगरेशन" चुनें.

आपको पता चलेगा कि आपके लिए एक एनवायरमेंट फ़ाइल /angularfire-start/src/environments/environment.ts जनरेट की गई है.

  1. कॉन्फ़िगरेशन ऑब्जेक्ट स्निपेट को कॉपी करें. इसके बाद, उसे angularfire-start/src/firebase-config.js में जोड़ें.

environment.ts

export const environment = {
  firebase: {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.firebasestorage.app",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
  },
};

AngularFire सेटअप देखना

आपको पता चलेगा कि आपने Console में जो सुविधाएं चुनी थीं वे /angularfire-start/src/app/app.config.ts फ़ाइल में अपने-आप जुड़ गई हैं. इससे आपके ऐप्लिकेशन को Firebase की सुविधाओं और फ़ंक्शन का इस्तेमाल करने में मदद मिलती है.

8. उपयोगकर्ता के साइन इन करने की सुविधा सेट अप करना

AngularFire अब इस्तेमाल के लिए तैयार है, क्योंकि इसे app.config.ts में इंपोर्ट और शुरू किया गया है. अब आपको Firebase Authentication का इस्तेमाल करके, उपयोगकर्ता के साइन इन करने की सुविधा लागू करनी है.

अनुमति वाला डोमेन जोड़ना

Firebase Authentication की मदद से, सिर्फ़ उन डोमेन से साइन इन किया जा सकता है जिनका कंट्रोल आपके पास है. डोमेन की सूची में, ऐप्लिकेशन होस्टिंग के लिए इस्तेमाल किया जाने वाला मुफ़्त डोमेन जोड़ें:

  1. ऐप्लिकेशन होस्टिंग पर जाएं.
  2. अपने बैकएंड का डोमेन कॉपी करें.
  3. पुष्टि करने की सेटिंग पर जाएं.
  4. अनुमति पा चुके डोमेन टैब को चुनें.
  5. डोमेन जोड़ें पर क्लिक करें और ऐप्लिकेशन होस्टिंग के बैकएंड का डोमेन चिपकाएं.

Google साइन-इन की मदद से, उपयोगकर्ताओं की पहचान की पुष्टि करना

जब कोई उपयोगकर्ता ऐप्लिकेशन में Google से साइन इन करें बटन पर क्लिक करता है, तो login फ़ंक्शन ट्रिगर हो जाता है. इस कोडलैब के लिए, आपको Firebase को पहचान की पुष्टि करने वाली सेवा के तौर पर Google का इस्तेमाल करने की अनुमति देनी होगी. इसके लिए, आपको पॉप-अप का इस्तेमाल करना होगा. हालांकि, Firebase में कई अन्य तरीके भी उपलब्ध हैं.

  1. सबडायरेक्ट्री /src/app/services/ में, chat.service.ts खोलें.
  2. फ़ंक्शन login ढूंढें.
  3. पूरे फ़ंक्शन को इस कोड से बदलें.

chat.service.ts

// Signs-in Friendly Chat.
login() {
    signInWithPopup(this.auth, this.provider).then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
        this.router.navigate(['/', 'chat']);
        return credential;
    })
}

जब उपयोगकर्ता लॉग आउट करें बटन पर क्लिक करता है, तो logout फ़ंक्शन ट्रिगर होता है.

  1. फ़ाइल src/app/services/chat.service.ts पर वापस जाएं.
  2. फ़ंक्शन logout ढूंढें.
  3. पूरे फ़ंक्शन को नीचे दिए गए कोड से बदलें.

chat.service.ts

// Logout of Friendly Chat.
logout() {
    signOut(this.auth).then(() => {
        this.router.navigate(['/', 'login'])
        console.log('signed out');
    }).catch((error) => {
        console.log('sign out error: ' + error);
    })
}

पुष्टि की स्थिति ट्रैक करना

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

  1. फ़ाइल src/app/services/chat.service.ts पर वापस जाएं.
  2. वैरिएबल असाइनमेंट user$ ढूंढें.

chat.service.ts

// observable that is updated when the auth state changes
user$ = user(this.auth);

ऊपर दिया गया कोड, AngularFire फ़ंक्शन user को कॉल करता है, जो निगरानी में रखा जा सकने वाला उपयोगकर्ता दिखाता है. पुष्टि की स्थिति में बदलाव होने पर (जब उपयोगकर्ता साइन इन या साइन आउट करता है), यह हर बार ट्रिगर होगा. FriendlyChat में मौजूद Angular टेंप्लेट कॉम्पोनेंट, इस ऑब्ज़र्वेबल का इस्तेमाल करके यूज़र इंटरफ़ेस (यूआई) को अपडेट करते हैं. इससे, उपयोगकर्ता को हेडर नेविगेशन में दिखाने, रीडायरेक्ट करने वगैरह में मदद मिलती है.

ऐप्लिकेशन में लॉग इन करने की जांच करना

  1. "Google Authentication जोड़ना" कमिट मैसेज के साथ एक कमिट बनाएं और उसे अपने GitHub रिपॉज़िटरी में पुश करें.
  2. Firebase कंसोल में, ऐप्लिकेशन होस्टिंग पेज खोलें और नए रोल आउट के पूरा होने का इंतज़ार करें.
  3. वेब ऐप्लिकेशन में, पेज को रीफ़्रेश करें. इसके बाद, साइन इन बटन और अपने Google खाते का इस्तेमाल करके, ऐप्लिकेशन में लॉग इन करें. अगर आपको auth/operation-not-allowed वाला गड़बड़ी का कोई मैसेज दिखता है, तो पक्का करें कि आपने Firebase कंसोल में, पुष्टि करने वाली सेवा के तौर पर Google साइन इन को चालू किया हो.
  4. लॉग इन करने के बाद, आपको अपनी प्रोफ़ाइल फ़ोटो और उपयोगकर्ता नाम दिखना चाहिए: angularfire-3.png

9. Cloud Firestore में मैसेज लिखना

इस सेक्शन में, आपको Cloud Firestore में कुछ डेटा डालना होगा, ताकि आप ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) को पॉप्युलेट कर सकें. Firebase कंसोल की मदद से, मैन्युअल तरीके से भी ऐसा किया जा सकता है. हालांकि, Cloud Firestore में डेटा डालने का बुनियादी तरीका दिखाने के लिए, आपको ऐप्लिकेशन में ही ऐसा करना होगा.

डेटा मॉडल

Cloud Firestore का डेटा, कलेक्शन, दस्तावेज़, फ़ील्ड, और सब-कलेक्शन में बांटा जाता है. चैट के हर मैसेज को दस्तावेज़ के तौर पर messages नाम के टॉप-लेवल कलेक्शन में सेव किया जाएगा.

688d7bc5fb662b57.png

Cloud Firestore में मैसेज जोड़ना

उपयोगकर्ताओं के लिखे गए चैट मैसेज सेव करने के लिए, Cloud Firestore का इस्तेमाल किया जाएगा.

इस सेक्शन में, आपको उपयोगकर्ताओं के लिए वह सुविधा जोड़नी होगी जिससे वे आपके डेटाबेस में नए मैसेज लिख सकें. भेजें बटन पर क्लिक करने पर, नीचे दिया गया कोड स्निपेट ट्रिगर हो जाएगा. यह messages कलेक्शन में, आपके Cloud Firestore इंस्टेंस में मैसेज फ़ील्ड के कॉन्टेंट के साथ मैसेज ऑब्जेक्ट जोड़ता है. add() तरीके से, कलेक्शन में अपने-आप जनरेट हुए आईडी वाला एक नया दस्तावेज़ जुड़ जाता है.

  1. फ़ाइल src/app/services/chat.service.ts पर वापस जाएं.
  2. फ़ंक्शन addMessage ढूंढें.
  3. पूरे फ़ंक्शन को नीचे दिए गए कोड से बदलें.

chat.service.ts

// Adds a text or image message to Cloud Firestore.
addMessage = async (
  textMessage: string | null,
  imageUrl: string | null,
): Promise<void | DocumentReference<DocumentData>> => {
  // ignore empty messages
  if (!textMessage && !imageUrl) {
    console.log(
      "addMessage was called without a message",
      textMessage,
      imageUrl,
    );
    return;
  }

  if (this.currentUser === null) {
    console.log("addMessage requires a signed-in user");
    return;
  }

  const message: ChatMessage = {
    name: this.currentUser.displayName,
    profilePicUrl: this.currentUser.photoURL,
    timestamp: serverTimestamp(),
    uid: this.currentUser?.uid,
  };

  textMessage && (message.text = textMessage);
  imageUrl && (message.imageUrl = imageUrl);

  try {
    const newMessageRef = await addDoc(
      collection(this.firestore, "messages"),
      message,
    );
    return newMessageRef;
  } catch (error) {
    console.error("Error writing new message to Firebase Database", error);
    return;
  }
};

मैसेज भेजने की सुविधा की जांच करना

  1. "Firestore में नई चैट पोस्ट करें" कमिट मैसेज के साथ एक कमिट बनाएं और उसे अपने GitHub डेटा स्टोर करने की जगह पर पुश करें.
  2. Firebase कंसोल में, ऐप्लिकेशन होस्टिंग पेज खोलें और नए रोल आउट के पूरा होने का इंतज़ार करें.
  3. FriendlyChat को रीफ़्रेश करें. लॉग इन करने के बाद, "नमस्ते!" जैसा कोई मैसेज डालें. इसके बाद, भेजें पर क्लिक करें. इससे मैसेज, Cloud Firestore में सेव हो जाएगा. हालांकि, आपको अभी तक अपने असल वेब ऐप्लिकेशन में डेटा नहीं दिखेगा, क्योंकि आपको अब भी डेटा प्राप्त करने की सुविधा लागू करनी होगी. यह सुविधा, कोडलैब का अगला सेक्शन है.
  4. आपके पास अपने Firebase कंसोल में, हाल ही में जोड़ा गया मैसेज देखने का विकल्प है. अपना Emulator suite यूज़र इंटरफ़ेस (यूआई) खोलें. बिल्ड सेक्शन में, Firestore डेटाबेस पर क्लिक करें. इसके अलावा, यहां क्लिक करें. ऐसा करने पर, आपको अपने नए मैसेज के साथ मैसेज कलेक्शन दिखेगा:

6812efe7da395692.png

10. मैसेज पढ़ना

मैसेज सिंक करना

ऐप्लिकेशन में मैसेज पढ़ने के लिए, आपको एक ऐसा ऑब्ज़र्वेबल जोड़ना होगा जो डेटा में बदलाव होने पर ट्रिगर होगा. इसके बाद, आपको एक यूज़र इंटरफ़ेस (यूआई) एलिमेंट बनाना होगा, जो नए मैसेज दिखाएगा.

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

  1. फ़ाइल src/app/services/chat.service.ts पर वापस जाएं.
  2. फ़ंक्शन loadMessages ढूंढें.
  3. पूरे फ़ंक्शन को इस कोड से बदलें.

chat.service.ts

// Loads chat message history and listens for upcoming ones.
loadMessages = () => {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(this.firestore, 'messages'), orderBy('timestamp', 'desc'), limit(12));
  // Start listening to the query.
  return collectionData(recentMessagesQuery);
}

डेटाबेस में मौजूद मैसेज सुनने के लिए, collection फ़ंक्शन का इस्तेमाल करके किसी कलेक्शन पर क्वेरी बनाई जाती है. इससे यह पता चलता है कि आपको किस कलेक्शन का डेटा सुनना है. ऊपर दिए गए कोड में, messages कलेक्शन में होने वाले बदलावों को ट्रैक किया जा रहा है. इस कलेक्शन में चैट मैसेज सेव किए जाते हैं. limit(12) का इस्तेमाल करके, सिर्फ़ पिछले 12 मैसेज सुनकर भी यह सीमा लागू की जा सकती है. साथ ही, orderBy('timestamp', 'desc') का इस्तेमाल करके मैसेज को तारीख के हिसाब से क्रम में लगाकर, 12 सबसे नए मैसेज भी सुने जा सकते हैं.

collectionData फ़ंक्शन, स्नैपशॉट का इस्तेमाल करता है. क्वेरी से मैच करने वाले दस्तावेज़ों में कोई बदलाव होने पर, कॉलबैक फ़ंक्शन ट्रिगर हो जाएगा. ऐसा तब हो सकता है, जब किसी मैसेज को मिटाया गया हो, उसमें बदलाव किया गया हो या कोई नया मैसेज जोड़ा गया हो. इस बारे में ज़्यादा जानने के लिए, Cloud Firestore के दस्तावेज़ पढ़ें.

मैसेज सिंक करने की जांच करना

  1. "यूज़र इंटरफ़ेस (यूआई) में नई चैट दिखाएं" कमिट मैसेज के साथ एक कमिट बनाएं और उसे अपने GitHub डेटा स्टोर करने की जगह पर पुश करें.
  2. Firebase कंसोल में, ऐप्लिकेशन होस्टिंग पेज खोलें और नए रोल आउट के पूरा होने का इंतज़ार करें.
  3. FriendlyChat को रीफ़्रेश करें. आपने डेटाबेस में पहले जो मैसेज बनाए थे वे FriendlyChat के यूज़र इंटरफ़ेस (यूआई) में दिखने चाहिए (नीचे देखें). नए मैसेज लिखें. ये तुरंत दिखने लगेंगे.
  4. (ज़रूरी नहीं) एम्युलेटर सुइट के Firestore सेक्शन में जाकर, मैन्युअल तरीके से नए मैसेज जोड़े जा सकते हैं, उनमें बदलाव किए जा सकते हैं या उन्हें मिटाया जा सकता है. ये बदलाव, यूज़र इंटरफ़ेस (यूआई) में दिखेंगे.

बधाई हो! आपके ऐप्लिकेशन में Cloud Firestore के दस्तावेज़ पढ़े जा रहे हैं!

angularfire-2.png

11. एआई की सुविधाएं जोड़ना

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

Google के एआई एपीआई पासकोड को पाना

  1. Google AI Studio पर जाएं और एपीआई पासकोड बनाएं पर क्लिक करें
  2. इस कोडलैब के लिए बनाया गया Firebase प्रोजेक्ट चुनें. यह प्रॉम्प्ट, Google Cloud प्रोजेक्ट के लिए है. हालांकि, हर Firebase प्रोजेक्ट एक Google Cloud प्रोजेक्ट होता है.
  3. मौजूदा प्रोजेक्ट में एपीआई पासकोड बनाएं पर क्लिक करें
  4. मिलने वाली एपीआई पासकोड कॉपी करें

एक्सटेंशन इंस्टॉल करना

यह एक्सटेंशन, एक क्लाउड फ़ंक्शन डिप्लॉय करेगा. यह फ़ंक्शन, Firestore में messages कलेक्शन में नया दस्तावेज़ जोड़े जाने पर ट्रिगर होगा. यह फ़ंक्शन, Gemini को कॉल करेगा और दस्तावेज़ में response फ़ील्ड में उसका जवाब लिख देगा.

  1. Gemini API की मदद से चैटबॉट बनाएं एक्सटेंशन पेज पर, Firebase कंसोल में इंस्टॉल करें पर क्लिक करें.
  2. स्क्रीन पर दिए गए निर्देशों का पालन करें. एक्सटेंशन कॉन्फ़िगर करें चरण पर पहुंचने के बाद, ये पैरामीटर वैल्यू सेट करें:
    • Gemini API की सेवा देने वाली कंपनी: Google AI
    • Google के एआई की एपीआई पासकोड: पहले बनाई गई पासकोड चिपकाएं और सीक्रेट बनाएं पर क्लिक करें.
    • Firestore कलेक्शन का पाथ: messages
    • प्रॉम्प्ट फ़ील्ड: text
    • रिस्पॉन्स फ़ील्ड: response
    • ऑर्डर फ़ील्ड: timestamp
    • कॉन्टेक्स्ट: Keep your answers short, informal, and helpful. Use emojis when possible.
  3. एक्सटेंशन इंस्टॉल करें पर क्लिक करें
  4. एक्सटेंशन के इंस्टॉल होने का इंतज़ार करें

एआई की सुविधा को टेस्ट करना

FriendlyChat में, एआई एक्सटेंशन से मिले जवाबों को पढ़ने के लिए पहले से ही कोड मौजूद है. इसे आज़माने के लिए, आपको बस एक नया चैट मैसेज भेजना होगा!

  1. FriendlyChat खोलें और कोई मैसेज भेजें.
  2. कुछ देर बाद, आपको अपने मैसेज के बगल में जवाब वाला पॉप-अप दिखेगा. इसकी आखिर में ✨ ai generated नोट होता है, ताकि यह साफ़ तौर पर पता चल सके कि इसे जनरेटिव एआई की मदद से बनाया गया है, न कि किसी असली उपयोगकर्ता ने.

12. इमेज भेजना

अब आपको इमेज शेयर करने की सुविधा जोड़नी होगी.

Cloud Firestore, स्ट्रक्चर्ड डेटा को सेव करने के लिए अच्छा है, जबकि फ़ाइलों को सेव करने के लिए Cloud Storage बेहतर है. Firebase के लिए Cloud Storage, फ़ाइल/ब्लॉब स्टोरेज सेवा है. इसका इस्तेमाल, उपयोगकर्ता के हमारे ऐप्लिकेशन का इस्तेमाल करके शेयर की गई इमेज को सेव करने के लिए किया जाता है.

इमेज को Cloud Storage में सेव करना

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

  1. चैट फ़ीड में "प्लेसहोल्डर" चैट मैसेज बनाता है, ताकि इमेज अपलोड करने के दौरान उपयोगकर्ताओं को "लोड हो रहा है" ऐनिमेशन दिखे.
  2. इमेज फ़ाइल को Cloud Storage में इस पाथ पर अपलोड करता है: /<uid>/<file_name>
  3. इमेज फ़ाइल के लिए, सार्वजनिक तौर पर पढ़ा जा सकने वाला यूआरएल जनरेट करता है.
  4. यह फ़ंक्शन, चैट मैसेज में लोड होने वाली इमेज के बजाय, नई इमेज फ़ाइल के यूआरएल को अपडेट करता है.

अब आपको इमेज भेजने की सुविधा जोड़नी होगी:

  1. फ़ाइल src/chat.service.ts पर वापस जाएं.
  2. फ़ंक्शन saveImageMessage ढूंढें.
  3. पूरे फ़ंक्शन को इस कोड से बदलें.

chat.service.ts

// Saves a new message containing an image in Firestore.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - Add a message with a loading icon that will get updated with the shared image.
    const messageRef = await this.addMessage(null, this.LOADING_IMAGE_URL);

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${this.auth.currentUser?.uid}/${file.name}`;
    const newImageRef = ref(this.storage, filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);

    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    messageRef ?
    await updateDoc(messageRef, {
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    }): null;
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

इमेज भेजने की सुविधा की जांच करना

  1. "इमेज पोस्ट करने की सुविधा जोड़ें" कमिट मैसेज के साथ एक कमिट बनाएं और उसे अपने GitHub रिपॉज़िटरी में पुश करें.
  2. Firebase कंसोल में, ऐप्लिकेशन होस्टिंग पेज खोलें और नए रोल आउट के पूरा होने का इंतज़ार करें.
  3. FriendlyChat को रीफ़्रेश करें. लॉग इन करने के बाद, सबसे नीचे बाईं ओर मौजूद इमेज अपलोड करने के बटन angularfire-4.png पर क्लिक करें. इसके बाद, फ़ाइल पिकर का इस्तेमाल करके कोई इमेज फ़ाइल चुनें. अगर आपको कोई इमेज चाहिए, तो इस कॉफ़ी कप की अच्छी तस्वीर का इस्तेमाल करें.
  4. ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) में, आपकी चुनी गई इमेज के साथ एक नया मैसेज दिखेगा: angularfire-2.png

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

13. सूचनाएं दिखाओ

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

FCM सेवा वर्कर जोड़ना

वेब ऐप्लिकेशन को सर्विस वर्कर की ज़रूरत होती है, जो वेब सूचनाएं पाएगा और उन्हें दिखाएगा.

AngularFire जोड़ने के समय, मैसेजिंग सेवा देने वाली कंपनी को पहले से सेट अप किया जा चुका होना चाहिए. पक्का करें कि /angularfire-start/src/app/app.config.ts के इंपोर्ट सेक्शन में यह कोड मौजूद हो

provideMessaging(() => {
    return getMessaging();
}),

app/app.config.ts

सेवा वर्कर को सिर्फ़ Firebase Cloud Messaging SDK टूल को लोड और शुरू करना होगा. इसके बाद, यह सूचनाएं दिखाने का काम करेगा.

FCM डिवाइस टोकन पाना

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

जब उपयोगकर्ता साइन इन करता है, तो saveMessagingDeviceToken फ़ंक्शन को कॉल किया जाता है. वहां आपको ब्राउज़र से FCM डिवाइस टोकन मिलेगा और उसे Cloud Firestore में सेव करना होगा.

chat.service.ts

  1. फ़ंक्शन saveMessagingDeviceToken ढूंढें.
  2. पूरे फ़ंक्शन को नीचे दिए गए कोड से बदलें.

chat.service.ts

// Saves the messaging device token to Cloud Firestore.
saveMessagingDeviceToken= async () => {
    try {
      const currentToken = await getToken(this.messaging);
      if (currentToken) {
        console.log('Got FCM device token:', currentToken);
        // Saving the Device Token to Cloud Firestore.
        const tokenRef = doc(this.firestore, 'fcmTokens', currentToken);
        await setDoc(tokenRef, { uid: this.auth.currentUser?.uid });
 
        // This will fire when a message is received while the app is in the foreground.
        // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
        onMessage(this.messaging, (message) => {
          console.log(
            'New foreground notification from Firebase Messaging!',
            message.notification
          );
        });
      } else {
        // Need to request permissions to show notifications.
        this.requestNotificationsPermissions();
      }
    } catch(error) {
      console.error('Unable to get messaging token.', error);
    };
}

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

सूचनाएं दिखाने के लिए अनुमतियों का अनुरोध करना

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

8b9d0c66dc36153d.png

  1. फ़ाइल src/app/services/chat.service.ts पर वापस जाएं.
  2. फ़ंक्शन requestNotificationsPermissions ढूंढें.
  3. पूरे फ़ंक्शन को नीचे दिए गए कोड से बदलें.

chat.service.ts

// Requests permissions to show notifications.
requestNotificationsPermissions = async () => {
    console.log('Requesting notifications permission...');
    const permission = await Notification.requestPermission();
    
    if (permission === 'granted') {
      console.log('Notification permission granted.');
      // Notification permission granted.
      await this.saveMessagingDeviceToken();
    } else {
      console.log('Unable to get permission to notify.');
    }
}

अपना डिवाइस टोकन पाना

  1. "इमेज पोस्ट करने की सुविधा जोड़ें" कमिट मैसेज के साथ एक कमिट बनाएं और उसे अपने GitHub रिपॉज़िटरी में पुश करें.
  2. Firebase कंसोल में, ऐप्लिकेशन होस्टिंग पेज खोलें और नए रोल आउट के पूरा होने का इंतज़ार करें.
  3. FriendlyChat को रीफ़्रेश करें. लॉग इन करने के बाद, सूचनाएं पाने की अनुमति वाला डायलॉग बॉक्स दिखेगा: bd3454e6dbfb6723.png
  4. अनुमति दें पर क्लिक करें.
  5. अपने ब्राउज़र का JavaScript कंसोल खोलें. आपको यह मैसेज दिखेगा: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  6. अपने डिवाइस का टोकन कॉपी करें. आपको कोडलैब के अगले चरण के लिए इसकी ज़रूरत पड़ेगी.

अपने डिवाइस पर सूचना भेजना

अब आपके पास डिवाइस टोकन है, इसलिए सूचना भेजी जा सकती है.

  1. Firebase कंसोल का Cloud Messaging टैब खोलें.
  2. "नई सूचना" पर क्लिक करें
  3. सूचना का टाइटल और सूचना का टेक्स्ट डालें.
  4. स्क्रीन की दाईं ओर, "जांच के लिए मैसेज भेजें" पर क्लिक करें
  5. अपने ब्राउज़र के JavaScript कंसोल से कॉपी किया गया डिवाइस टोकन डालें. इसके बाद, प्लस ("+") साइन पर क्लिक करें
  6. "जांच करें" पर क्लिक करें

अगर आपका ऐप्लिकेशन फ़ोरग्राउंड में है, तो आपको JavaScript कंसोल में सूचना दिखेगी.

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

de79e8638a45864c.png

14. Cloud Firestore के सुरक्षा नियम

डेटाबेस की सुरक्षा से जुड़े नियम देखना

Cloud Firestore, ऐक्सेस करने के अधिकार, सुरक्षा, और डेटा की पुष्टि करने के लिए, नियमों की खास भाषा का इस्तेमाल करता है.

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

फ़िलहाल, आपको डिफ़ॉल्ट नियम दिखेंगे. इन नियमों से डेटास्टोर के ऐक्सेस पर कोई पाबंदी नहीं होती. इसका मतलब है कि कोई भी उपयोगकर्ता आपके डेटास्टोर में मौजूद किसी भी कलेक्शन को पढ़ सकता है और उसमें डेटा जोड़ सकता है.

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

इन नियमों का इस्तेमाल करके, आपको नियमों को अपडेट करना होगा, ताकि कुछ चीज़ों पर पाबंदी लगाई जा सके:

firestore.rules

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

सुरक्षा के नियम, आपके एमुलेटर सुइट में अपने-आप अपडेट हो जाएंगे.

Cloud Storage के सुरक्षा नियम देखना

Cloud Storage for Firebase, ऐक्सेस के अधिकार, सुरक्षा, और डेटा की पुष्टि करने के लिए, खास नियमों की भाषा का इस्तेमाल करता है.

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

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

आपको ये काम करने के लिए, नियमों को अपडेट करना होगा:

  • हर उपयोगकर्ता को सिर्फ़ अपने फ़ोल्डर में लिखने की अनुमति देना
  • किसी भी व्यक्ति को Cloud Storage से डेटा पढ़ने की अनुमति देना
  • पक्का करें कि अपलोड की गई फ़ाइलें इमेज हों
  • अपलोड की जा सकने वाली इमेज का साइज़ ज़्यादा से ज़्यादा पांच एमबी होना चाहिए

इसे लागू करने के लिए, इन नियमों का इस्तेमाल किया जा सकता है:

storage.rules

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

15. बधाई हो!

आपने रीयल-टाइम चैट वेब ऐप्लिकेशन बनाने के लिए, Firebase का इस्तेमाल किया है!

आपने क्या कवर किया है

  • Firebase App Hosting
  • Firebase से पुष्टि करना
  • Cloud Firestore
  • Cloud Storage के लिए Firebase SDK टूल
  • Firebase क्लाउड से मैसेज
  • Firebase प्रदर्शन मॉनिटर करना

अगले चरण

ज़्यादा जानें

16. [ज़रूरी नहीं] ऐप्लिकेशन की जांच की सुविधा की मदद से लागू करना

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

सबसे पहले, आपको ऐप्लिकेशन की जांच करने की सुविधा और reCaptcha को चालू करना होगा.

reCaptcha Enterprise को चालू करना

  1. Cloud Console में, सुरक्षा सेक्शन में जाकर reCaptcha Enterprise ढूंढें और उसे चुनें.
  2. निर्देशों के मुताबिक सेवा चालू करें और की बनाएं पर क्लिक करें.
  3. पूछे जाने पर, कोई डिसप्ले नेम डालें. साथ ही, प्लैटफ़ॉर्म टाइप के तौर पर वेबसाइट चुनें.
  4. डिप्लॉय किए गए यूआरएल को डोमेन सूची में जोड़ें. साथ ही, पक्का करें कि "चेकबॉक्स चैलेंज का इस्तेमाल करें" विकल्प चुना न गया हो.
  5. कुंजी बनाएं पर क्लिक करें और जनरेट की गई कुंजी को सुरक्षित जगह पर सेव करें. आपको इस चरण में बाद में इसकी ज़रूरत पड़ेगी.

ऐप्लिकेशन की जांच करने की सुविधा चालू करना

  1. Firebase कंसोल में, बाएं पैनल में बिल्ड सेक्शन ढूंढें.
  2. ऐप्लिकेशन की जांच करें पर क्लिक करें. इसके बाद, ऐप्लिकेशन की जांच करें पर जाने के लिए, साइन इन करने का तरीका टैब पर क्लिक करें.
  3. रजिस्टर करें पर क्लिक करें. इसके बाद, जब कहा जाए, तब अपनी reCaptcha Enterprise कुंजी डालें. इसके बाद, सेव करें पर क्लिक करें.
  4. एपीआई व्यू में, स्टोरेज चुनें और लागू करें पर क्लिक करें. Cloud Firestore के लिए भी ऐसा ही करें.

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

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

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

अपनी environment.ts फ़ाइल पर जाएं और environment ऑब्जेक्ट में reCAPTCHAEnterpriseKey जोड़ें.

export const environment = {
  firebase: {
    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',
  },
  reCAPTCHAEnterpriseKey: {
    key: "Replace with your recaptcha enterprise site key"
  },
};

key की वैल्यू को अपने reCaptcha Enterprise टोकन से बदलें.

इसके बाद, app.config.ts फ़ाइल पर जाएं और ये इंपोर्ट जोड़ें:

import { getApp } from '@angular/fire/app';
import {
  ReCaptchaEnterpriseProvider,
  initializeAppCheck,
  provideAppCheck,
} from '@angular/fire/app-check';

उसी app.config.ts फ़ाइल में, यह ग्लोबल वैरिएबल एलान जोड़ें:

declare global {
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}

@NgModule({ ...

इंपोर्ट में, ReCaptchaEnterpriseProvider के साथ ऐप्लिकेशन की जांच शुरू करने की सुविधा जोड़ें. साथ ही, टोकन के अपने-आप रीफ़्रेश होने की अनुमति देने के लिए, isTokenAutoRefreshEnabled को true पर सेट करें.

imports: [
BrowserModule,
AppRoutingModule,
CommonModule,
FormsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => {
const appCheck = initializeAppCheck(getApp(), {
  provider: new ReCaptchaEnterpriseProvider(
  environment.reCAPTCHAEnterpriseKey.key
  ),
  isTokenAutoRefreshEnabled: true,
  });
  if (location.hostname === 'localhost') {
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
  }
  return appCheck;
}),

स्थानीय टेस्टिंग की अनुमति देने के लिए, self.FIREBASE_APPCHECK_DEBUG_TOKEN को true पर सेट करें. localhost में अपने ऐप्लिकेशन को रीफ़्रेश करने पर, कंसोल में एक डीबग टोकन लॉग होगा, जो इस तरह का होगा:

App Check debug token: CEFC0C76-7891-494B-B764-349BDFD00D00. You will need to add it to your app's App Check settings in the Firebase console for it to work.

अब, Firebase कंसोल में App Check के ऐप्लिकेशन व्यू पर जाएं.

ओवरफ़्लो मेन्यू पर क्लिक करें और डीबग टोकन मैनेज करें चुनें.

इसके बाद, डीबग टोकन जोड़ें पर क्लिक करें और अपने कंसोल से डीबग टोकन चिपकाएं.

chat.service.ts फ़ाइल पर जाएं और यहां दिया गया इंपोर्ट जोड़ें:

import { AppCheck } from '@angular/fire/app-check';

उसी chat.service.ts फ़ाइल में, Firebase की अन्य सेवाओं के साथ-साथ App Check को इंजेक्ट करें.

export class ChatService {
appCheck: AppCheck = inject(AppCheck);
...
  1. "बिना अनुमति वाले क्लाइंट को App Check की मदद से ब्लॉक करें" कमिट मैसेज के साथ एक कमिट बनाएं और उसे अपने GitHub रिपॉज़िटरी में पुश करें.
  2. Firebase कंसोल में, ऐप्लिकेशन होस्टिंग पेज खोलें और नए रोल आउट के पूरा होने का इंतज़ार करें.

बधाई हो! अब आपके ऐप्लिकेशन में, ऐप्लिकेशन की जांच करने की सुविधा काम करनी चाहिए.