प्रमाणीकरण अनुप्रयोग विकास का एक प्रमुख घटक है। यह उपयोगकर्ता डेटा की सुरक्षा और दुर्भावनापूर्ण गतिविधियों को रोकने में मदद करता है। सीधे शब्दों में कहें, यह उपयोगकर्ता की पहचान की विश्वसनीयता निर्धारित करता है, यह सुनिश्चित करता है कि केवल अधिकृत उपयोगकर्ता ही किसी एप्लिकेशन और उसके संसाधनों तक पहुंच बना सकते हैं।
एक कस्टम प्रमाणीकरण प्रणाली बनाना एक समय लेने वाला कार्य हो सकता है, और यहीं पर NextAuth.js काम आता है। यह नेक्स्ट.जेएस ढांचे के साथ निर्मित अनुप्रयोगों के लिए सुरक्षित प्रमाणीकरण समर्थन प्रदान करता है।
NextAuth.js क्या है?
NextAuth.js एक ओपन-सोर्स लाइटवेट लाइब्रेरी है जो प्रदान करती है सत्यापन और प्राधिकरण Next.js अनुप्रयोगों के लिए समर्थन। यह डेवलपर्स को उनके Next.js ऐप्स के लिए प्रमाणीकरण और प्राधिकरण को जल्दी और आसानी से सेट करने देता है। यह कई प्रदाताओं के साथ प्रमाणीकरण, ईमेल और पासवर्ड रहित प्रमाणीकरण जैसी सुविधाएँ प्रदान करता है।
NextAuth.js ऑथेंटिकेशन में कैसे काम करता है?
NextAuth.js का प्रमाणीकरण समाधान क्लाइंट-साइड API प्रदान करता है जो आप कर सकते हैं अपने Next.js एप्लिकेशन में एकीकृत करें. आप इसका उपयोग विभिन्न साइन-इन प्रदाताओं वाले उपयोगकर्ताओं को प्रमाणित करने के लिए कर सकते हैं जिनके साथ उन्होंने खाते बनाए हैं।
हुड के तहत, उपयोगकर्ता प्रदाता के साइन-इन पृष्ठ पर पुनर्निर्देशित हो जाते हैं। सफल प्रमाणीकरण पर, प्रदाता सत्र डेटा लौटाता है जिसमें उपयोगकर्ता का पेलोड होता है। यह पेलोड तब एप्लिकेशन और उसके संसाधनों तक पहुंच को अधिकृत कर सकता है।
NextAuth.js (v4) में नए फ़ीचर अपडेट
दिसंबर 2022 में NextAuth.js ने इसका चौथा संस्करण जारी किया। इस संस्करण को इसके पिछले संस्करण v3 से नए अपडेट और संशोधनों के साथ सुधारा गया है। परिवर्तन मुख्य रूप से प्रमाणीकरण प्रक्रिया में पुस्तकालय के उपयोग में सुधार लाने पर ध्यान केंद्रित करते हैं।
1. उपयोग सत्र हुक के लिए अद्यतन
उपयोगकर्ता साइन इन है या नहीं, यह जांचने के लिए आप उपयोग सत्र हुक का उपयोग कर सकते हैं। इस नए संस्करण में, useSession हुक एक ऑब्जेक्ट लौटाता है जो स्टेट्स का परीक्षण करने के लिए अधिक सरल तरीका प्रदान करता है, स्टेटस विकल्प के अतिरिक्त धन्यवाद। कोड नीचे देखें:
आयात {उपयोग सत्र} से"अगला-लेखन/प्रतिक्रिया"निर्यातगलती करनासमारोहअवयव() {
कॉन्स्ट { आंकड़े: सत्र, स्थिति} = उपयोग सत्र ()अगर (दर्जा "प्रमाणित") {
वापस करना<पी>{session.user.email} के रूप में साइन इनपी>
}
वापस करना<पी> प्रवेश नहीं किया पी>
}
2. सत्रप्रदाता प्रसंग अनिवार्य हो जाता है
नया संस्करण चार सत्र प्रदाता संदर्भ के उपयोग को अनिवार्य करता है। इसका मतलब है कि आपको अपने ऐप को उपयोग सत्र प्रदाता के साथ लपेटना होगा। NextAuth.js अनुशंसा करता है कि आप अपने ऐप को इसमें रैप करें _app.jsx फ़ाइल।
साथ ही, clientMaxAge पद्धति को refetchInterval से बदल दिया गया है। इससे सत्र को समय-समय पर पृष्ठभूमि में लाना आसान हो जाएगा।
आयात {सत्र प्रदाता} से"अगला-लेखन/प्रतिक्रिया"
निर्यातगलती करनासमारोहअनुप्रयोग({
घटक, पेजप्रॉप्स: {सत्र, ...पेजप्रॉप्स},
}) {
वापस करना (
<सत्र प्रदातासत्र={सत्र}अंतराल={5 * 60}>
<अवयव {...पेजप्रॉप्स} />सत्र प्रदाता>
)
}
3. प्रदाताओं को व्यक्तिगत रूप से आयात करना
NextAuth.js कई प्रदाता सेवाएं प्रदान करता है जिनका उपयोग आप किसी उपयोगकर्ता में साइन इन करने के लिए कर सकते हैं। वे सम्मिलित करते हैं:
- अंतर्निहित OAuth प्रदाताओं (जैसे GitHub, Google) का उपयोग करना।
- ईमेल प्रदाता का उपयोग करना।
इस नए संस्करण में, आपको प्रत्येक प्रदाता को अलग-अलग आयात करना होगा।
आयात Google प्रदाता से"अगला-प्रमाणीकरण/प्रदाता/गूगल"
आयात Auth0 प्रदाता से"अगला-प्रमाणीकरण/प्रदाता/प्रमाण0";4. अन्य छोटे परिवर्तन
- क्लाइंट-साइड इम्पोर्ट का नाम बदलकर नेक्स्ट-ऑर्ट/रिएक्शन फ्रॉम नेक्स्ट-ऑथ/क्लाइंट कर दिया गया है।
- कॉलबैक विधियों के तर्कों में परिवर्तन:
साइन इन ({उपयोगकर्ता, खाता, प्रोफ़ाइल, ईमेल, क्रेडेंशियल्स})
सत्र ({सत्र, टोकन, उपयोगकर्ता})
jwt({टोकन, उपयोगकर्ता, खाता, प्रोफ़ाइल, isNewUser})
प्रमाणीकरण में NextAuth.js के साथ प्रारंभ करना
NextAuth.js को अपने Next.js ऐप्लिकेशन में एकीकृत करने के लिए, नीचे दिए गए चरणों का पालन करें:
- यह कमांड चलाकर एक Next.js एप्लिकेशन बनाएं: npx क्रिएट-नेक्स्ट-ऐप
- दौड़ना npm नेक्स्ट-ऑर्ट स्थापित करें अपने नेक्स्ट.जेएस एप्लिकेशन में नेक्स्टऑथ.जेएस स्थापित करने के लिए अपने टर्मिनल में।
- दौरा करना NextAuth.js आधिकारिक दस्तावेज और समर्थित लोगों की सूची से अपने पसंदीदा प्रदाता का चयन करें। इसके बाद, अपने चयनित प्रदाता/ओं के डेवलपर कंसोल में एक खाता बनाएं और अपना Next.js एप्लिकेशन पंजीकृत करें।
- आपके चयनित प्रदाता/ओं के डेवलपर कंसोल में, निर्दिष्ट करें होम रूट यूआरएल और यह कॉलबैक रीडायरेक्ट यूआरएल, परिवर्तनों को सहेजें और कॉपी करें ग्राहक ID और क्लाइंट सीक्रेट.
- अपने नेक्स्ट.जेएस एप्लिकेशन रूट डायरेक्टरी में, एक .env फाइल को होल्ड करने के लिए बनाएं ग्राहक ID और क्लाइंट सीक्रेट.
- अंत में, /pages/api निर्देशिका में, नामक एक नया फ़ोल्डर बनाएँ प्रमाणन. प्रमाणन फ़ोल्डर में, एक नई फ़ाइल बनाएँ, और इसे [...nextauth].js नाम दें। बनाई गई फ़ाइल में, नीचे दिया गया कोड जोड़ें। कोड Google प्रदाता का उपयोग करके NextAuth.js क्लाइंट-साइड API दिखाता है:
आयात Google प्रदाता से"अगला-प्रमाणीकरण/प्रदाता/गूगल";
प्रदाता: [
Googleप्रदाता({
ग्राहक ID: प्रक्रिया.env.GOOGLE_CLIENT_ID,
clientsecret: प्रक्रिया.env.GOOGLE_CLIENT_SECRET
})
]
अब आप आगे बढ़ सकते हैं और लॉगिन प्रमाणीकरण पृष्ठ बना सकते हैं। यहाँ एक लॉगिन घटक के लिए एक DOM रेंडरिंग है:
आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {उपयोग सत्र, साइन इन, साइन आउट} से"अगला-लेखन/प्रतिक्रिया"निर्यातगलती करनासमारोहअवयव() {
कॉन्स्ट { आंकड़े: सत्र} = उपयोग सत्र ()अगर (सत्र) {
वापस करना (
<>
<पी> {session.user.email} के रूप में साइन इन पी>
<बटनक्लिक पर={() => साइनआउट ()}> साइन आउट करेंबटन>
)
}
वापस करना (
<>
<पी> प्रवेश नहीं किया पी>
<बटनक्लिक पर={() => साइन इन ()}> साइन इन करेंबटन>
)
}
सत्र हुक वर्तमान उपयोगकर्ता सत्र वस्तु तक पहुँचता है। एक बार जब कोई उपयोगकर्ता साइन इन करता है और Google द्वारा प्रमाणित किया जाता है, तो उपयोगकर्ता पेलोड के साथ एक सत्र ऑब्जेक्ट वापस आ जाता है। यह Next.js को ऐप के क्लाइंट साइड पर उपयोगकर्ता विवरण प्रस्तुत करने की अनुमति देता है, इस मामले में ईमेल के लिए।
कस्टम प्रमाणीकरण प्रणाली बनाम। उपयोग के लिए तैयार समाधान जैसे कि NextAuth.js
एक कस्टम प्रमाणीकरण प्रणाली के निर्माण और उपयोग के लिए तैयार प्रमाणीकरण को एकीकृत करने के बीच चयन करना समाधान जैसे कि NextAuth.js, प्रत्येक की लागत, जटिलता और सुरक्षा पर विचार करना महत्वपूर्ण है समाधान।
यदि आपके पास कस्टम प्रमाणीकरण प्रणाली विकसित करने के लिए संसाधन और विशेषज्ञता है, तो यह आपके लिए सबसे अच्छा तरीका हो सकता है। हालांकि, यदि आप एक ऐसे आउट-ऑफ़-द-बॉक्स समाधान की तलाश कर रहे हैं जो लागू करने में आसान, सुरक्षित और लागत प्रभावी हो तो NextAuth.js विचार करने के लिए एक अच्छा विकल्प हो सकता है। अंततः, चुनाव आपकी आवश्यकताओं और प्राथमिकताओं पर निर्भर करेगा।
