रिएक्ट और Node.js का उपयोग करके भूले हुए पासवर्ड को कैसे हैंडल करें और पासवर्ड कैसे रीसेट करें

एक सहज और सुरक्षित उपयोगकर्ता अनुभव प्रदान करने में प्रमाणीकरण प्रणाली एक महत्वपूर्ण भूमिका निभाती है। एक प्रमाणीकरण वर्कफ़्लो में आमतौर पर दो प्रक्रियाएँ शामिल होती हैं: साइन-अप और लॉग-इन।

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

रिएक्ट प्रोजेक्ट सेट करें

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

जिस वर्कफ़्लो के बारे में आप यहाँ सीखेंगे उसमें निम्नलिखित चरण शामिल हैं:

प्रारंभ करना, जल्दी से एक रिएक्ट प्रोजेक्ट बूटस्ट्रैप करें. अगला, स्थापित करें Axios, एक जावास्क्रिप्ट HTTP अनुरोध पुस्तकालय.

एनपीएम अक्षीय स्थापित करें

आप इसमें प्रोजेक्ट का कोड पा सकते हैं गिटहब रिपॉजिटरी.

एक लॉगिन घटक बनाएँ

Src निर्देशिका में एक नया बनाएँ घटक/लॉगिन.जेएस फ़ाइल और निम्न कोड जोड़ें। पासवर्ड रीसेट प्रक्रिया को परिभाषित करके प्रारंभ करें:

आयात axios से"अक्षीय";
आयात प्रतिक्रिया, {useState} से"प्रतिक्रिया";
आयात {यूज़ कॉन्टेक्स्ट} से"प्रतिक्रिया";
आयात {रिकवरी कॉन्टेक्स्ट} से"../अनुप्रयोग";
आयात"./global.component.css";
निर्यातगलती करनासमारोहलॉग इन करें() {
कॉन्स्ट {setPage, setOTP, setEmail} = useContext (RecoveryContext);
कॉन्स्ट [उपयोगकर्ता ईमेल, सेट यूज़र ईमेल] = यूज़स्टेट (""); 
समारोहOTP भेजें() {
अगर (उपयोगकर्ता ईमेल) {
 axios.get(` http://localhost: 5000/चेक_ईमेल? ईमेल =${userEmail}`)।तब((जवाब) => {
अगर (प्रतिक्रिया। स्थिति 200) {
कॉन्स्ट ओटीपी = गणित।ज़मीन(गणित।अनियमित() * 9000 + 1000);
सांत्वना देनालॉग (ओटीपी);
 सेटओटीपी (ओटीपी);
 सेटईमेल (उपयोगकर्ताईमेल);
 axios.post (" http://localhost: 5000/भेजें_ईमेल", {
 ओटीपी,
 प्राप्तकर्ता_ईमेल: उपयोगकर्ता ईमेल,
 })
 ।तब(() => पृष्ठ स्थापित करें("ओटीपी"))
 ।पकड़ना(सांत्वना देना।लकड़ी का लट्ठा);
 } अन्य {
 चेतावनी("इस ईमेल वाला उपयोगकर्ता मौजूद नहीं है!");
सांत्वना देना.लॉग (प्रतिक्रिया.डेटा.संदेश);
 }})।पकड़ना(सांत्वना देना।लकड़ी का लट्ठा);
 } अन्य {
 चेतावनी("अपना ईमेल दर्ज करें");
 }}

यह कोड एक फ़ंक्शन बनाता है जो उपयोगकर्ता के ईमेल पते पर वन-टाइम पासवर्ड (OTP) भेजता है। यह पहले OTP जनरेट करने और भेजने से पहले डेटाबेस में उनके ईमेल की जांच करके उपयोगकर्ता को सत्यापित करता है। अंत में, यह ओटीपी पेज के साथ यूआई को अपडेट करता है।

लॉगिन JSX फॉर्म एलिमेंट को रेंडर करने के लिए कोड जोड़कर लॉगिन कंपोनेंट को पूरा करें:

वापस करना (


लॉगिन</h2>




 ईमेल: 
"ईमेल" value={userEmail} onChange={(e) => { setUserEmail (e.target.value) }} />
 पासवर्ड:
"पासवर्ड" />
"जमा करना">लॉगिन</button>
 </form>
"#" ऑनक्लिक = {() => SendOtp ()}>
 पासवर्ड भूल गए
 </a>
 </div>
 );
}

एक OTP सत्यापन घटक बनाएँ

उपयोगकर्ता द्वारा दर्ज किए गए कोड की वैधता सुनिश्चित करने के लिए, आपको इसकी तुलना उनके ईमेल पर भेजे गए कोड से करनी होगी।

कोई नया बनाएं घटक/OTPInput.js फ़ाइल और इस कोड को जोड़ें:

आयात प्रतिक्रिया, {useState, useContext, useEffect} से"प्रतिक्रिया";
आयात {रिकवरी कॉन्टेक्स्ट} से"../अनुप्रयोग";
आयात axios से"अक्षीय";
आयात"./global.component.css";
निर्यातगलती करनासमारोहओटीपी इनपुट() {
कॉन्स्ट {ईमेल, ओटीपी, सेटपेज} = यूज़ कॉन्टेक्स्ट (रिकवरी कॉन्टेक्स्ट);
कॉन्स्ट [OTPinput, setOTPinput] = useState( "");
समारोहसत्यापितOTP() {
अगर (parseInt(ओटीपीइनपुट) ओटीपी) {
 पृष्ठ स्थापित करें("रीसेट");
 } अन्य {
 चेतावनी("आपके द्वारा दर्ज किया गया कोड सही नहीं है, फिर से लिंक भेजने का प्रयास करें");
 }
 }

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

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

अंत में, इनपुट JSX तत्वों को रेंडर करें।

वापस करना (


ईमेल सत्यापन </h3>


हमने आपके ईमेल पर सत्यापन कोड भेज दिया है।</p>



"मूलपाठ" मूल्य = {OTPinput} onChange = {(ई) => { setOTPinput (e.target.value)}} /> 
 सत्यापितOTP ()}> खाता सत्यापित करें </button> 
 resendOTP ()}> कियाकोड प्राप्त नहीं हुआ? 
 {अक्षम करना? `ओटीपी को फिर से भेजें ${timerCount}एस`: " ओटीपी पुनः भेजें"}
 </a> 
 </form>
 </div>
 );}

रीसेट पासवर्ड घटक बनाएँ

कोई नया बनाएं घटक/रीसेट.जेएस फ़ाइल और इस कोड को जोड़ें:

आयात प्रतिक्रिया, {useState, useContext} से"प्रतिक्रिया";
आयात {रिकवरी कॉन्टेक्स्ट} से"../अनुप्रयोग";
आयात axios से"अक्षीय";
आयात"./global.component.css";
निर्यातगलती करनासमारोहरीसेट() {
कॉन्स्ट [पासवर्ड, सेटपासवर्ड] = यूज़स्टेट ("");
कॉन्स्ट {setPage, ईमेल} = useContext (RecoveryContext);
समारोहपासवर्ड बदलें() {
अगर (पासवर्ड) {
कोशिश {
 axios.put (" http://localhost: 5000/अपडेट-पासवर्ड", {
 ईमेल: ईमेल,
 नया पासवर्ड: पासवर्ड,
 })।तब(() => पृष्ठ स्थापित करें("लॉग इन करें"));
वापस करना चेतावनी("पासवर्ड सफलतापूर्वक बदल गया, कृपया लॉगिन करें!");
 } पकड़ना (गलती) {सांत्वना देनालॉग (त्रुटि);}}
वापस करना चेतावनी("कृपया अपना नया पासवर्ड दर्ज करें");
 }
वापस करना (


 पासवर्ड बदलें </h2>




 नया पासवर्ड: 
 टाइप ="पासवर्ड"
 प्लेसहोल्डर ="..."
 आवश्यक =""
 मूल्य = {पासवर्ड}
 onChange={(e) => setPassword (e.target.value)} />
 चेंजपासवर्ड ()}> पासवर्ड रीसेट करें </button>
 </form>
 </div>
 );
}

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

अपने App.js घटक को अपडेट करें

अपनी src/App.js फ़ाइल में नीचे परिवर्तन करें:

आयात {यूज़स्टेट, क्रिएट कॉन्टेक्स्ट} से"प्रतिक्रिया";
आयात लॉग इन करें से"./घटक/लॉगिन";
आयात ओटीपी इनपुट से"./components/OTPInput";
आयात रीसेट से"./घटक/रीसेट";
आयात"./App.css";
निर्यातकॉन्स्ट रिकवरी कॉन्टेक्स्ट = createContext ();
निर्यातगलती करनासमारोहअनुप्रयोग() {
कॉन्स्ट [पेज, सेटपेज] = यूज़स्टेट ("लॉग इन करें");
कॉन्स्ट [ईमेल, सेटईमेल] = यूज़स्टेट ("");
कॉन्स्ट [ओटीपी, सेटओटीपी] = यूज़स्टेट ("");
समारोहघटकों को नेविगेट करें() {
अगर (पृष्ठ "लॉग इन करें") वापस करना<लॉग इन करें />;
अगर (पृष्ठ "ओटीपी") वापस करना<ओटीपी इनपुट />;
अगर (पृष्ठ "रीसेट") वापस करना<रीसेट />;
 }
वापस करना (
"ऐप-हेडर"> 
 मान = {{पृष्ठ, सेटपेज, ओटीपी, सेटओटीपी, ईमेल, सेटईमेल}}>



 </div>
 </RecoveryContext.Provider>
 </div>
 );
}

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

इसमें एक फ़ंक्शन भी शामिल है जो पूरे घटकों को फिर से प्रस्तुत करने की आवश्यकता के बिना पृष्ठ नेविगेशन को आसानी से संभालता है।

एक Express.js सर्वर सेट करें

क्लाइंट सेटअप के साथ, पासवर्ड रीसेट कार्यक्षमता को संभालने के लिए बैकएंड प्रमाणीकरण सेवा को कॉन्फ़िगर करें।

प्रारंभ करना, एक एक्सप्रेस वेब सर्वर बनाएँ, और इन पैकेजों को स्थापित करें:

npm स्थापित करें cors dotenv nodemailer नेवला

अगला, एक MongoDB डेटाबेस बनाएँ या क्लाउड पर MongoDB क्लस्टर कॉन्फ़िगर करें. फिर प्रदान की गई कनेक्शन स्ट्रिंग को कॉपी करें, रूट डायरेक्टरी में एक ENV फ़ाइल बनाएं और कनेक्शन स्ट्रिंग पेस्ट करें।

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

एपीआई मार्गों को परिभाषित करें

एक बैकएंड सेवा में आदर्श रूप से कई मार्ग होते हैं जो ग्राहकों के HTTP अनुरोधों को संभालते हैं। इस मामले में, आपको तीन मार्गों को परिभाषित करने की आवश्यकता होगी जो रिएक्ट क्लाइंट से सेंड-ईमेल, ईमेल सत्यापन और अपडेट-पासवर्ड एपीआई अनुरोधों का प्रबंधन करेंगे।

रूट डायरेक्टरी में userRoutes.js नामक एक नई फाइल बनाएं और निम्नलिखित कोड जोड़ें:

कॉन्स्ट एक्सप्रेस = ज़रूरत होना('अभिव्यक्त करना');
कॉन्स्ट राउटर = एक्सप्रेस। राउटर ();
कॉन्स्ट उपयोगकर्ता नियंत्रक = ज़रूरत होना('../नियंत्रक/उपयोगकर्ता नियंत्रक');
राऊटर.गेट ('/इ मेल जांचिए', userControllers.checkEmail);
राऊटर.पुट ('/अपडेट-पासवर्ड', userControllers.updatePassword);
रूटर पोस्ट ('/ईमेल भेजें', userControllers.sendEmail);
मापांक.निर्यात = रूटर;

एपीआई मार्गों के लिए नियंत्रक

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

कोई नया बनाएं नियंत्रक/उपयोगकर्ता नियंत्रक.जेएस फ़ाइल और नीचे कोड जोड़ें।

इस रिपॉजिटरी में कोड का उपयोग करें ईमेल सत्यापन और अपडेट-पासवर्ड के लिए नियंत्रकों को परिभाषित करें एपीआई मार्ग।

भेजें ईमेल नियंत्रक को परिभाषित करके प्रारंभ करें:

निर्यात। ईमेल भेजें = (अनुरोध, Res) => {
कॉन्स्ट ट्रांसपोर्टर = नोडमेलर.क्रिएट ट्रांसपोर्ट ({
 सेवा: 'जीमेल लगीं',
 सुरक्षित: सत्य,
 प्रमाणीकरण: {
 उपयोगकर्ता: प्रक्रिया.env। मेरा ईमेल,
 पास: प्रक्रिया.env। APP_पासवर्ड,
 },
 });
कॉन्स्ट {recipient_email, OTP} = req.body;
कॉन्स्ट मेलविकल्प = {
से: प्रक्रिया.env। मेरा ईमेल,
 को: प्राप्तकर्ता_ईमेल,
 विषय: 'पासवर्ड रीसेट',
 एचटीएमएल: `


पासवर्ड रिकवरी</h2>


उपयोग यह अपना पासवर्ड रीसेट करने के लिए ओटीपी। ओटीपी मान्य है के लिए1 मिनट</p>

${OTP}</h3>
 </body>
 </html>`,
 };
 ट्रांसपोर्टर.सेंडमेल (मेलऑप्शन, (त्रुटि, जानकारी) => {
अगर (गलती) {
सांत्वना देनालॉग (त्रुटि);
 res.status (500)।भेजना({ संदेश: "ईमेल भेजते समय एक त्रुटि हुई" });
 } अन्य {
सांत्वना देना।लकड़ी का लट्ठा('ईमेल भेजा: ' + जानकारी। प्रतिक्रिया);
 res.status (200)।भेजना({ संदेश: "सफलतापूर्वक भेजा गया ईमेल" });
 }
 });
};

यह कोड एक फ़ंक्शन को परिभाषित करता है जो निर्दिष्ट प्राप्तकर्ता को ओटीपी रीसेट के साथ ईमेल भेजने के लिए नोडमेलर का उपयोग करता है। यह आपके अपने Gmail खाते और पासवर्ड का उपयोग करके ट्रांसपोर्टर सेट करता है।

अपना जीमेल ऐप पासवर्ड प्राप्त करने के लिए, आपको चाहिए अपनी Google खाता सेटिंग में एक ऐप पासवर्ड जनरेट करें. फिर आप नोडमेलर को प्रमाणित करने के लिए अपने नियमित जीमेल पासवर्ड के स्थान पर इस पासवर्ड का उपयोग करेंगे।

सर्वर एंट्री पॉइंट को कॉन्फ़िगर करें

रूट डायरेक्टरी में एक server.js फाइल बनाएं और इस कोड को जोड़ें:

कॉन्स्ट एक्सप्रेस = ज़रूरत होना('अभिव्यक्त करना');
कॉन्स्ट कॉर्स = ज़रूरत होना('कॉर्स');
कॉन्स्ट ऐप = एक्सप्रेस ();
कॉन्स्ट पोर्ट = 5000;
ज़रूरत होना('दोतेनव'.कॉन्फिग ();
कॉन्स्ट नोडमेलर = ज़रूरत होना('नोडमेलर');
कॉन्स्ट कनेक्टडीबी = ज़रूरत होना('./utils/dbconfig');
कनेक्टडीबी ();
app.use (express.json ());
app.use (express.urlencoded ({ विस्तारित: सत्य }));
app.use (cors ());
कॉन्स्ट उपयोगकर्ता मार्ग = ज़रूरत होना('./रूट्स/यूजररूट्स');
ऐप.उपयोग ('/', यूजर रूट्स);
app.listen (बंदरगाह, () => {
सांत्वना देना।लकड़ी का लट्ठा(`सर्वर सुन रहा है http://localhost:${पोर्ट}`);
});

क्लाइंट और सर्वर दोनों की स्थापना के साथ, आप पासवर्ड कार्यक्षमता का परीक्षण करने के लिए विकास सर्वर चला सकते हैं।

एक कस्टम पासवर्ड-रीसेट सेवा का निर्माण

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