फायरबेस प्रमाणीकरण सेवाएं प्रदान करता है जो आपको उपयोगकर्ताओं को आसानी से पंजीकृत और साइन-इन करने की अनुमति देता है। आप Google और Facebook जैसे ईमेल, पासवर्ड, फ़ोन नंबर और पहचान प्रदाताओं का उपयोग कर सकते हैं।

इस ट्यूटोरियल में, आप सीखेंगे कि आप ईमेल और पासवर्ड का उपयोग करके उपयोगकर्ताओं को प्रमाणित करने के लिए रिएक्ट में फायरबेस ऑथेंटिकेशन का उपयोग कैसे कर सकते हैं। आप फायरस्टोर में एकत्र किए गए उपयोगकर्ता डेटा को स्टोर करेंगे, एक नोएसक्यूएल क्लाउड डेटाबेस भी फायरबेस से।

ध्यान दें कि यह ट्यूटोरियल फायरबेस v9 और रिएक्ट राउटर v6 का उपयोग करता है।

एक फायरबेस एप्लिकेशन बनाएं

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

फायरबेस एप्लिकेशन बनाने के लिए, निम्न चरणों का पालन करें।

1. के लिए सिर फायरबेस कंसोल और क्लिक करें एक प्रोजेक्ट बनाएं।
2. अपने प्रोजेक्ट को एक नाम दें और क्लिक करें सृजन करना प्रक्रिया शुरू करने के लिए।
3. पर क्लिक करें वेब आइकन (
instagram viewer
4. अपने ऐप को अपनी पसंद का नाम दें और क्लिक करें रजिस्टर ऐप. आपको फायरबेस होस्टिंग सक्षम करने की आवश्यकता नहीं है।
5. कॉन्फ़िगरेशन ऑब्जेक्ट को नीचे कॉपी करें फायरबेस एसडीके जोड़ें.

एक प्रतिक्रिया आवेदन बनाएँ

उपयोग क्रिएट-रिएक्शन-ऐप एक प्रतिक्रिया ऐप को मचान करने के लिए।

एनपीएक्स क्रिएट-रिएक्शन-ऐप रिएक्ट-ऑथ-फायरबेस

फ़ोल्डर में नेविगेट करें और एप्लिकेशन प्रारंभ करें।

सीडी प्रतिक्रिया-प्रमाण-फायरबेस
एनपीएम रन स्टार्ट

फायरबेस फ़ंक्शन के साथ उपयोगकर्ताओं को प्रमाणित करें

फायरबेस का उपयोग करने से पहले, इसे स्थापित करें।

एनपीएम मैं फायरबेस

एक नई फ़ाइल बनाएँ, फायरबेस.जेएस, और फायरबेस को इनिशियलाइज़ करें।

"firebase/app" से आयात {initialApp};
कॉन्स्ट फायरबेस कॉन्फिग = {
 एपीआई कुंजी: ,
 प्रामाणिक डोमेन: ,
 प्रोजेक्ट आईडी: ,
 भंडारण बाल्टी: ,
 संदेश भेजने वाला आईडी: ,
 ऐप आईडी: 
};
// फायरबेस को इनिशियलाइज़ करें
कॉन्स्ट ऐप = इनिशियलाइज़ऐप (फ़ायरबेसकॉन्फ़िग);

ऐप को पंजीकृत करते समय आपके द्वारा कॉपी की गई कॉन्फ़िगरेशन ऑब्जेक्ट का उपयोग करें।

अगला फायरबेस मॉड्यूल आयात करें जिसका आप उपयोग करेंगे।

आयात {
 प्राप्त प्रमाणीकरण,
 createUserWithEmailAndPassword,
 साइन इनविथईमेलएंडपासवर्ड,
 साइन आउट,
} "firebase/auth" से;
आयात {getFirestore, addDoc, संग्रह} "firebase/firestore" से;
कॉन्स्ट डीबी = गेटफायरस्टोर ();
कॉन्स्ट ऑथ = getAuth ();

प्रति उपयोगकर्ताओं को प्रमाणित करें, आपको तीन फ़ंक्शन बनाने होंगे: साइनअप, साइन इन और साइनआउट।

साइन अप करें फ़ंक्शन ईमेल और पासवर्ड को पास करता है createUserWithEmailAndPassword एक नया उपयोगकर्ता पंजीकृत करने के लिए। createUserWithEmailAndPassword उपयोगकर्ता डेटा लौटाता है जिसका उपयोग आप डेटाबेस में एक नया उपयोगकर्ता रिकॉर्ड बनाने के लिए करेंगे।

कॉन्स्ट साइनअप = async (ईमेल, पासवर्ड) => {
 कोशिश करो {
 const उपयोगकर्ता क्रेडेंशियल = प्रतीक्षा करें createUserWithEmailAndPassword (
 प्रमाणीकरण,
 ईमेल,
 पासवर्ड
 );
 const उपयोगकर्ता = userCredential.user;
 प्रतीक्षा ऐडडॉक (संग्रह (डीबी, "उपयोगकर्ता"), {
 यूआईडी: user.uid,
 ईमेल: user.email,
 });
 सच लौटो
 } पकड़ (त्रुटि) {
 वापसी {त्रुटि: त्रुटि संदेश}
 }
};

ध्यान दें कि आप जांच नहीं कर रहे हैं कि पंजीकरण से पहले ईमेल पहले से उपयोग में है या नहीं क्योंकि फायरबेस आपके लिए इसे संभालता है।

अगला, में साइन इन करें फ़ंक्शन को ईमेल और पासवर्ड पास करें साइन इनविथईमेलऔरपासवर्ड एक पंजीकृत उपयोगकर्ता में साइन इन करने के लिए कार्य।

कॉन्स्ट साइनइन = async (ईमेल, पासवर्ड) => {
 कोशिश करो {
 कॉन्स्ट यूजर क्रेडेंशियल = प्रतीक्षा करें साइनइनविथईमेलएंडपासवर्ड (
 प्रमाणीकरण,
 ईमेल,
 पासवर्ड
 );
 const उपयोगकर्ता = userCredential.user;
 सच लौटो
 } पकड़ (त्रुटि) {
 वापसी {त्रुटि: त्रुटि संदेश}
 }
};

सफल होने पर साइनअप और साइनऑट दोनों फ़ंक्शन सही होते हैं और त्रुटि होने पर त्रुटि संदेश।

साइनऑट फ़ंक्शन काफी सीधा है। यह कॉल करता है साइन आउट() Firebase से कार्य करता है।

कॉन्स्ट साइनऑट = async () => {
 कोशिश करो {
 साइनआउट की प्रतीक्षा करें (प्रमाणीकरण)
 सच लौटो
 } पकड़ (त्रुटि) {
 विवरण झूठा है
 }
};

प्रतिक्रिया प्रपत्र बनाएँ

साइन-इन और साइन-अप फॉर्म उपयोगकर्ता से ईमेल और पासवर्ड एकत्र करेंगे।

एक नया घटक बनाएं साइनअप.जेएस और निम्नलिखित जोड़ें।

"प्रतिक्रिया" से आयात {useState};
"रिएक्ट-राउटर-डोम" से आयात {लिंक};
आयात { साइनअप } "./firebase" से;
कॉन्स्ट साइनअप = () => {
 कॉन्स्ट [ईमेल, सेटईमेल] = यूज़स्टेट ("");
 कॉन्स्ट [पासवर्ड, सेटपासवर्ड] = यूज़स्टेट ("");
 कॉन्स [त्रुटि, सेटरर] = यूज़स्टेट ("");
 कॉन्स्ट हैंडलसबमिट = एसिंक्स (ई) => {
 e.preventDefault ();
 अगर (पासवर्ड! == पासवर्ड 2) {
 सेटरर ("पासवर्ड मेल नहीं खाते");
 } अन्य {
 सेटईमेल ("");
 सांकेतिक शब्द लगना("");
 कॉन्स्ट रेस = साइनअप की प्रतीक्षा करें (ईमेल, पासवर्ड);
 अगर (res.error) सेटरर (res.error)
 }
 };
 वापसी (
 <>
साइन अप करें



 {त्रुटि? 
{त्रुटि}
: शून्य}


 टाइप = "ईमेल"
 नाम = "ईमेल"
 मूल्य = {ईमेल}
 प्लेसहोल्डर = "आपका ईमेल"
 आवश्यक
 onChange={(e) => setEmail (e.target.value)}
 />
 टाइप = "पासवर्ड"
 नाम = "पासवर्ड"
 मूल्य = {पासवर्ड}
 प्लेसहोल्डर = "आपका पासवर्ड"
 आवश्यक
 onChange={(e) => setPassword (e.target.value)}
 />
प्रस्तुत करना




 पहले से पंजीकृत? लॉग इन करें





 );
};
निर्यात डिफ़ॉल्ट साइनअप;

यहां आप एक साइनअप फॉर्म बना रहे हैं और राज्य का उपयोग करके ईमेल और पासवर्ड का ट्रैक रख रहे हैं। एक बार जब आप फॉर्म जमा कर देते हैं, तो ऑनसबमिट घटना को ट्रिगर करता है हैंडल सबमिट करें () फ़ंक्शन जो कॉल करता है साइन अप करें() से समारोह firebase.js. यदि फ़ंक्शन कोई त्रुटि देता है, तो त्रुटि स्थिति को अपडेट करें और त्रुटि संदेश प्रदर्शित करें।

साइन-इन फॉर्म के लिए, बनाएं साइनइन.जेएस और निम्नलिखित जोड़ें।

"प्रतिक्रिया" से आयात {useState};
आयात {साइनइन} "./firebase" से;
कॉन्स्ट लॉग इन = () => {
 कॉन्स्ट [ईमेल, सेटईमेल] = यूज़स्टेट ("");
 कॉन्स्ट [पासवर्ड, सेटपासवर्ड] = यूज़स्टेट ("");
 कॉन्स [त्रुटि, सेटरर] = यूज़स्टेट ("");
 कॉन्स्ट हैंडलसबमिट = एसिंक्स (ई) => {
 e.preventDefault ();
 सेटईमेल ("");
 सांकेतिक शब्द लगना("");
 const res = प्रतीक्षा साइन इन (ईमेल, पासवर्ड);
 अगर (res.error) सेटरर (res.error);
 };
 वापसी (
 <>
 {त्रुटि? 
{त्रुटि}
: शून्य}


 टाइप = "टेक्स्ट"
 नाम = "ईमेल"
 मूल्य = {ईमेल}
 प्लेसहोल्डर = "आपका ईमेल"
 onChange={(e) => setEmail (e.target.value)}
 />
 टाइप = "पासवर्ड"
 नाम = "पासवर्ड"
 मूल्य = {पासवर्ड}
 प्लेसहोल्डर = "आपका पासवर्ड"
 onChange={(e) => setPassword (e.target.value)}
 />




 );
};
निर्यात डिफ़ॉल्ट लॉगिन;

साइन-इन फॉर्म साइनअप पेज से काफी मिलता-जुलता है, सिवाय इसके कि सबमिशन कॉल्स साइन इन करें() समारोह।

अंत में, प्रोफाइल पेज बनाएं। सफल प्रमाणीकरण के बाद यह वह पेज है जिस पर ऐप उपयोगकर्ताओं को रीडायरेक्ट करेगा।

सृजन करना प्रोफाइल.जेएस और निम्नलिखित जोड़ें।

आयात {साइनआउट} "./firebase" से;
कॉन्स्ट प्रोफाइल = () => {
 कॉन्स्ट हैंडललॉगआउट = async () => {
 साइनआउट का इंतजार करें ();
 };
 वापसी (
 <>
प्रोफ़ाइल

लॉग आउट
 );
};
निर्यात डिफ़ॉल्ट प्रोफ़ाइल;

इस घटक में, आपके पास प्रोफ़ाइल शीर्षक और लॉगआउट बटन है। क्लिक पर बटन पर हैंडलर ट्रिगर करता है हैंडल लॉगआउट फ़ंक्शन जो उपयोगकर्ता को साइन आउट करता है।

प्रमाणीकरण मार्ग बनाएं

आपके द्वारा ब्राउज़र में बनाए गए पृष्ठों की सेवा के लिए, r. सेट करेंएक्ट-राउटर-डोम।

इंस्टॉल प्रतिक्रिया-राउटर-डोम:

एनपीएम मैं प्रतिक्रिया-राउटर-डोम

में index.js, कॉन्फ़िगर प्रतिक्रिया-राउटर-डोम:

"प्रतिक्रिया" से आयात प्रतिक्रिया;
"रिएक्ट-डोम" से रिएक्टडॉम आयात करें;
"रिएक्शन-राउटर-डोम" से {ब्राउज़र राउटर, रूट, रूट} आयात करें;
"./App" से ऐप आयात करें;
"./Login" से लॉग इन आयात करें;
"./Profile" से प्रोफ़ाइल आयात करें;
ReactDOM.render(




} />
} />
} />



,
 document.getElementById ("रूट")
);

इस बिंदु तक, एप्लिकेशन एक उपयोगकर्ता को पंजीकृत कर सकता है, उन्हें साइन अप कर सकता है और उन्हें लॉग आउट कर सकता है। तो आप कैसे जानते हैं कि कोई उपयोगकर्ता लॉग इन है या नहीं?

इस ट्यूटोरियल के अगले भाग में, आप देखेंगे कि आप पूरे एप्लिकेशन में उपयोगकर्ता की प्रमाणीकरण स्थिति का ट्रैक रखने के लिए रिएक्ट संदर्भ का उपयोग कैसे कर सकते हैं।

प्रतिक्रिया संदर्भ API के साथ प्रमाणीकरण प्रबंधित करें

रिएक्ट कॉन्टेक्स्ट एक स्टेट मैनेजमेंट टूल है जो सभी ऐप्स में डेटा शेयरिंग को आसान बनाता है। यह प्रोप ड्रिलिंग के लिए एक बेहतर विकल्प है, जहां डेटा पेड़ से माता-पिता से बच्चे तक तब तक गुजरता है जब तक कि वह उस घटक तक नहीं पहुंच जाता जिसे इसकी आवश्यकता होती है।

प्रमाणीकरण प्रसंग बनाएँ

में एसआरसी फ़ोल्डर, जोड़ें AuthContext.js फ़ाइल और बनाएँ और निर्यात करें AuthContext.

"प्रतिक्रिया" से आयात { createContext };
कॉन्स्ट ऑथकॉन्टेक्स्ट = createContext ();
निर्यात डिफ़ॉल्ट AuthContext;

इसके बाद, प्रदाता बनाएं AuthProvider.js. यह घटकों को उपयोग करने की अनुमति देगा AuthContext.

आयात {getAuth, onAuthStateChanged} "firebase/auth" से;
'प्रतिक्रिया' से आयात {useState, useEffect};
'./AuthContext' से AuthContext आयात करें
कॉन्स्ट ऑथ = getAuth ()
एक्सपोर्ट कॉन्स्ट ऑथप्रोवाइडर = ({बच्चों}) => {
 कॉन्स [उपयोगकर्ता, सेटयूसर] = यूज़स्टेट (अशक्त);
 उपयोग प्रभाव (() => {
 onAuthStateChanged (प्राधिकरण, (उपयोगकर्ता) => {
 सेट यूज़र (उपयोगकर्ता)
 })
 }, []);
वापसी (
{बच्चे}
 );
 };

यहां, आप का उपयोग करके उपयोगकर्ता मूल्य प्राप्त कर रहे हैं onAuthStateChanged () फायरबेस से विधि। यदि यह उपयोगकर्ता को प्रमाणित करता है तो यह विधि उपयोगकर्ता ऑब्जेक्ट लौटाती है और यदि यह नहीं कर सकती है तो शून्य। का उपयोग करके उपयोग प्रभाव () हुक, उपयोगकर्ता मान हर बार प्रमाणीकरण स्थिति में परिवर्तन होने पर अपडेट किया जाता है।

में index.js, मार्गों को के साथ लपेटें प्रामाणिक प्रदाता यह सुनिश्चित करने के लिए कि सभी घटक संदर्भ में उपयोगकर्ता तक पहुंचें:

आयात { AuthProvider } "./AuthProvider" से;
ReactDOM.render(




} />
} />
} />



 ,
,
 document.getElementById ("रूट")
);

संरक्षित मार्ग बनाएं

प्रति संवेदनशील मार्गों की रक्षा करें, प्रोफ़ाइल पृष्ठ जैसे किसी संरक्षित पृष्ठ पर नेविगेट करने का प्रयास करने वाले उपयोगकर्ता की प्रमाणीकरण स्थिति की जांच करें।

संशोधित प्रोफाइल.जेएस उपयोगकर्ता को पुनर्निर्देशित करने के लिए यदि वे प्रमाणित नहीं हैं।

"प्रतिक्रिया" से आयात {useContext};
"./AuthContext" से AuthContext आयात करें;
"रिएक्ट-राउटर-डोम" से आयात {useNavigate, नेविगेट};
आयात {साइनआउट} "./firebase" से;
कॉन्स्ट प्रोफाइल = () => {
 कॉन्स्ट {उपयोगकर्ता} = उपयोग कॉन्टेक्स्ट (AuthContext);
 कॉन्स नेविगेट = यूजनेविगेट ();
 कॉन्स्ट हैंडललॉगआउट = async () => {
 साइनआउट का इंतजार करें ();
 };
 अगर (! उपयोगकर्ता) {
 वापसी ;
 }
 वापसी (
 <>
प्रोफ़ाइल

लॉग आउट
 );
};
निर्यात डिफ़ॉल्ट प्रोफ़ाइल;

अप्प सशर्त रूप से प्रस्तुत करता है प्रोफ़ाइल पृष्ठ उपयोगकर्ता को लॉगिन पृष्ठ पर पुनर्निर्देशित करके यदि वे प्रमाणित नहीं हैं।

फायरबेस प्रमाणीकरण के साथ आगे बढ़ना

इस ट्यूटोरियल में, आपने उपयोगकर्ताओं को उनके ईमेल और पासवर्ड का उपयोग करके प्रमाणित करने के लिए Firebase का उपयोग किया था। आपने फायरस्टोर में उपयोगकर्ता रिकॉर्ड भी बनाए हैं। फायरबेस Google, फेसबुक और ट्विटर जैसे प्रमाणीकरण प्रदाताओं के साथ काम करने के लिए कार्य प्रदान करता है।

10 प्रतिक्रियात्मक सर्वोत्तम अभ्यास जिन्हें आपको 2022 में पालन करने की आवश्यकता है

आगे पढ़िए

लेखक के बारे में