यह लाइब्रेरी आपको अपने नेक्स्ट.जेएस एप्लिकेशन में Google प्रमाणीकरण को मूल रूप से एकीकृत करने में सक्षम बनाती है, जिससे इसे स्क्रैच से विकसित करने की आवश्यकता समाप्त हो जाती है।

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

शुरुआत से एक सुरक्षित प्रमाणीकरण बनाना एक समय लेने वाली प्रक्रिया हो सकती है जिसके लिए पूरी तरह से आवश्यकता होती है प्रमाणीकरण प्रोटोकॉल और प्रक्रियाओं की समझ, विशेष रूप से विभिन्न प्रमाणीकरण को संभालते समय प्रदाताओं।

NextAuth का उपयोग करके, आप अपना ध्यान मूल सुविधाओं के निर्माण पर केंद्रित कर सकते हैं। NextAuth का उपयोग करके अपने एप्लिकेशन में Google सामाजिक लॉगिन को एकीकृत करने का तरीका जानने के लिए आगे पढ़ें।

नेक्स्टऑथ कैसे काम करता है

NextAuth.js एक ओपन-सोर्स ऑथेंटिकेशन लाइब्रेरी है जो जोड़ने की प्रक्रिया को सरल बनाती है सत्यापन और प्राधिकरण

instagram viewer
नेक्स्ट.जेएस अनुप्रयोगों के साथ-साथ प्रमाणीकरण कार्यप्रवाह को अनुकूलित करने की कार्यक्षमता। यह ईमेल, पासवर्ड रहित प्रमाणीकरण जैसी कई सुविधाएँ प्रदान करता है, और विभिन्न प्रमाणीकरण प्रदाताओं जैसे Google, GitHub, और बहुत कुछ के लिए समर्थन करता है।

उच्च स्तर पर, NextAuth एक मिडलवेयर के रूप में कार्य करता है, जो आपके एप्लिकेशन और प्रदाता के बीच प्रमाणीकरण प्रक्रिया को सुविधाजनक बनाता है। हुड के तहत, जब कोई उपयोगकर्ता लॉग इन करने का प्रयास करता है, तो उसे Google के साइन-इन पृष्ठ पर रीडायरेक्ट कर दिया जाता है। सफल प्रमाणीकरण पर, Google एक पेलोड लौटाता है जिसमें उपयोगकर्ता का डेटा, जैसे उनका नाम और ईमेल पता शामिल होता है। इस डेटा का उपयोग एप्लिकेशन और उसके संसाधनों तक पहुंच को अधिकृत करने के लिए किया जाता है।

पेलोड डेटा का उपयोग करके, नेक्स्टएथ प्रत्येक प्रमाणित उपयोगकर्ता के लिए एक सत्र बनाता है और सत्र टोकन को सुरक्षित HTTP-केवल कुकी में संग्रहीत करता है। सत्र टोकन का उपयोग उपयोगकर्ता की पहचान को सत्यापित करने और उनकी प्रमाणीकरण स्थिति को बनाए रखने के लिए किया जाता है। यह प्रक्रिया कार्यान्वयन में थोड़े बदलाव के साथ अन्य प्रदाताओं पर भी लागू होती है।

Google डेवलपर कंसोल पर अपना Next.js एप्लिकेशन पंजीकृत करें

NextAuth Google प्रमाणीकरण सेवा के लिए सहायता प्रदान करता है। हालाँकि, आपके एप्लिकेशन के लिए Google API के साथ इंटरैक्ट करने और उपयोगकर्ताओं को प्रमाणित करने की अनुमति देने के लिए उनके Google क्रेडेंशियल्स, आपको Google डेवलपर कंसोल पर अपना ऐप पंजीकृत करना होगा और एक प्राप्त करें ग्राहक ID और क्लाइंट सीक्रेट.

ऐसा करने के लिए, पर नेविगेट करें Google डेवलपर कंसोल. अगला, कंसोल तक पहुंचने के लिए अपने Google खाते से साइन इन करें। लॉग इन करने के बाद, एक नया प्रोजेक्ट बनाएं।

प्रोजेक्ट के अवलोकन पृष्ठ पर, का चयन करें एपीआई और सेवाएं बाएं मेनू फलक पर सेवाओं की सूची से टैब और अंत में, साख विकल्प।

पर क्लिक करें क्रेडेंशियल बनाएं अपनी क्लाइंट आईडी और क्लाइंट सीक्रेट जनरेट करने के लिए बटन। अगला, दिए गए विकल्पों में से आवेदन का प्रकार निर्दिष्ट करें और फिर अपने आवेदन के लिए एक नाम प्रदान करें।

बाद में, अपने ऐप का होम रूट URL निर्दिष्ट करें और अंत में अपने एप्लिकेशन के लिए अधिकृत रीडायरेक्ट URI निर्दिष्ट करें। इस मामले के लिए यह होना चाहिए http://localhost: 3000/एपीआई/प्रमाणीकरण/कॉलबैक/google जैसा कि NextAuth की Google प्रदाता सेटिंग द्वारा निर्दिष्ट किया गया है।

सफल पंजीकरण पर, Google आपको आपके ऐप में उपयोग के लिए क्लाइंट आईडी और क्लाइंट सीक्रेट प्रदान करेगा।

नेक्स्टजेएस एप्लिकेशन सेट अप करें

आरंभ करने के लिए, स्थानीय रूप से एक Next.js प्रोजेक्ट बनाएं:

npx क्रिएट-नेक्स्ट-ऐप नेक्स्ट-ऑर्ट-ऐप

सेटअप पूरा होने के बाद, नई बनाई गई प्रोजेक्ट डायरेक्टरी पर नेविगेट करें और डेवलपमेंट सर्वर को स्पिन करने के लिए इस कमांड को रन करें।

एनपीएम रन देव

अपना ब्राउज़र खोलें और नेविगेट करें http://localhost: 3000. यह अपेक्षित परिणाम होना चाहिए।

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

.env फ़ाइल की स्थापना

अपने प्रोजेक्ट के रूट फोल्डर में, एक नई फाइल बनाएं और उसे नाम दें .env अपनी क्लाइंट आईडी, सीक्रेट और बेस यूआरएल रखने के लिए।

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'ग्राहक ID'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'गुप्त'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

NextAUTH URL का उपयोग आपके एप्लिकेशन के आधार URL को निर्दिष्ट करने के लिए किया जाता है, जिसका उपयोग प्रमाणीकरण पूरा होने के बाद उपयोगकर्ताओं को रीडायरेक्ट करने के लिए किया जाता है।

अपने Next.js ऐप्लिकेशन में NextAuth को एकीकृत करें

सबसे पहले, अपने प्रोजेक्ट में NextAuth की लाइब्रेरी इंस्टॉल करें।

npm नेक्स्ट-ऑर्ट स्थापित करें

अगला, में /pages निर्देशिका, एक नया फ़ोल्डर बनाएँ और इसे नाम दें एपीआई. निर्देशिका को में बदलें एपीआई फ़ोल्डर, और नामक एक अन्य फ़ोल्डर बनाएँ प्रमाणीकरण। ऑथ फोल्डर में, एक नई फाइल जोड़ें और उसे नाम दें [... अगला] .जेएस और कोड की निम्न पंक्तियां जोड़ें।

आयात अगला प्रमाणीकरण से"अगला-प्रमाणीकरण/अगला";
आयात Google प्रदाता से"अगला-प्रमाणीकरण/प्रदाता/गूगल";
निर्यातगलती करना अगला प्रमाणीकरण({
 प्रदाता: [
 Googleप्रदाता({
 clientId: process.env। NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 क्लाइंट सीक्रेट: process.env। NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

यह कोड Google को प्रमाणीकरण प्रदाता के रूप में कॉन्फ़िगर करता है। NextAuth फ़ंक्शन Google प्रदाता कॉन्फ़िगरेशन ऑब्जेक्ट को परिभाषित करता है जो दो गुणों को ग्रहण करता है: एक क्लाइंट आईडी और एक क्लाइंट सीक्रेट जो प्रदाता को इनिशियलाइज़ करता है।

अगला, खोलें पेज/_app.js फ़ाइल और कोड में निम्नलिखित परिवर्तन करें।

आयात'../styles/globals.css'
आयात {सत्र प्रदाता} से"अगला-लेखन/प्रतिक्रिया"
समारोहMyApp({घटक, पेजप्रॉप्स: {सत्र, ...पेजप्रॉप्स}}) {
वापस करना (


 </SessionProvider>
 )
}
निर्यातगलती करना MyApp

नेक्स्टऑथ का सत्र प्रदाता घटक नेक्स्ट.जेएस ऐप को प्रमाणीकरण स्थिति प्रबंधन कार्यक्षमता प्रदान करता है। यह एक लेता है सत्र प्रॉप जिसमें Google के एपीआई से लौटाया गया प्रमाणीकरण सत्र डेटा शामिल है जिसमें उपयोगकर्ता विवरण जैसे कि उनकी आईडी, ईमेल और एक्सेस टोकन शामिल हैं।

लपेट कर MyApp सत्रप्रदाता घटक के साथ घटक, उपयोगकर्ता विवरण के साथ प्रमाणीकरण सत्र वस्तु उपलब्ध कराई जाती है पूरे एप्लिकेशन में, एप्लिकेशन को उनकी प्रमाणीकरण स्थिति के आधार पर पृष्ठों को बनाए रखने और प्रस्तुत करने में सक्षम बनाता है।

index.js फ़ाइल को कॉन्फ़िगर करें

खोलें पेज/इंडेक्स.जेएस फ़ाइल, बॉयलरप्लेट कोड हटाएं, और लॉगिन बटन बनाने के लिए नीचे दिए गए कोड को जोड़ें जो उपयोगकर्ताओं को लॉगिन पेज पर रूट करता है।

आयात सिर से'अगला/सिर'
आयात शैलियों से'../styles/Home.module.css'
आयात {यूज़ राउटर} से'अगला/राउटर';
निर्यातगलती करनासमारोहघर() {
कॉन्स्ट राउटर = यूज़ राउटर ();

वापस करना (





क्रिएट नेक्स्ट ऐप<<span>/title></span><br> "description" content=<span>"जेनरेट बाय क्रिएट नेक्स्ट ऐप"</span> /> <br> "icon" href=<span>"/favicon.ico"</span> /><br> <<span>/Head></span><p> <br> </p>
<h1>
<br> <a href="<span">" में आपका स्वागत है https://nextjs.org">Next.js!<<span>/a></span><br> <<span>/h1></span><p> </p>
<p classname="{styles.description}"><br> <span>में</span>{<span>'' साइन इन करके शुरू करें </span>}<br> <code classname="{styles.code}"><span>with</span> आपका Google खाता<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => राऊटर.पुश(<span>'/Login'</span>)}> लॉगिन<<span>/button></span><br> <<span>/p></span><br> < <span>/main></span></button></code></p>
<p><code> <<span>/div></span><br> )<br>}<br></code> </p> <p>यह कोड राउटर ऑब्जेक्ट को परिभाषित करके एप्लिकेशन के भीतर रूटिंग को संभालने के लिए Next.js <strong>useRouter</strong> हुक का उपयोग करता है। जब लॉगिन बटन पर क्लिक किया जाता है, तो हैंडलर फ़ंक्शन रीडायरेक्ट करने के लिए <strong>router.push</strong> विधि को कॉल करता है उपयोगकर्ता को लॉगिन पृष्ठ पर।</p> <h3 id="create-a-login-authentication-page">एक लॉगिन प्रमाणीकरण बनाएँ पेज</h3> <p><strong>पृष्ठों</strong> निर्देशिका में, एक नई फ़ाइल <strong>Login.js</strong> बनाएं, फिर कोड की निम्नलिखित पंक्तियां जोड़ें।</p> <pre> <code><span> आयात करें </span> { useSession, साइन इन, साइन आउट } <span>से</span> <span>"next-auth/react"</span><br><span>आयात करें</span> { useRouter } <span>से</span> <span>'next /राउटर'</span>;<br><span>आयात</span> स्टाइल <span>से</span> <span>'../styles/Login.module.css'</span><p><span>निर्यात</span> <span>डिफ़ॉल्ट</span> <span><span>फ़ंक्शन</span> < स्पैन>लॉगिन</span>() {<br> <span>const</span> { <span>डेटा</span>: session } = useSession()<br> <span>const</span> राउटर = useRouter();<br> <span>if</span> (सत्र) {<br> <span>वापसी</span> (<br> </p>
<div classname="{styles.container}">
<br> <h1 classname="<span">"title">अगला ऐप बनाएं<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> हस्ताक्षरित < स्पैन>इन <span>as</span> {session.user.email} <br><<span>/h2> </span><br> <div classname="{styles.btns}">
<br> <button classname="{styles.button}" onclick="{()"> Router.push(<span>'/Profile'< /span>)}><br> उपयोगकर्ता प्रोफ़ाइल<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> साइनआउट()<br> }}><br> साइन आउट करें<br> <<span>/button></span> <br> <<span>/div></span><br> <<span>/div></span><br> <<span>/div></span><p><code> )<br> <br> <span>वापसी</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">Create Next App<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> आप <span>में</span> साइन इन नहीं हैं!!<<span>/h2></span><br> <button classname="{styles.button<br/"> onClick={() => साइन इन ()}>साइन करें <span>में</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  <p><strong>useSession</strong>, <strong>साइन इन</strong>, और <strong>साइन आउट</strong> <strong>next-auth</strong> द्वारा प्रदान किए गए हुक हैं। <strong>useSession</strong> हुक का उपयोग वर्तमान उपयोगकर्ता सत्र ऑब्जेक्ट तक पहुंचने के लिए किया जाता है जब एक बार उपयोगकर्ता साइन इन करता है और सफलतापूर्वक प्रमाणित हो जाता है Google।</p> <p>यह Next.js को प्रमाणीकरण स्थिति को जारी रखने और ऐप के ग्राहक पक्ष पर उपयोगकर्ता विवरण प्रस्तुत करने की अनुमति देता है, इस मामले में, ईमेल।</p> <p>इसके अलावा, सेशन ऑब्जेक्ट का उपयोग करके, आप आसानी से अपने एप्लिकेशन के लिए कस्टम उपयोगकर्ता प्रोफाइल बना सकते हैं और डेटा को डेटाबेस में स्टोर कर सकते हैं जैसे पोस्टग्रेएसक्यूएल के रूप में। आप <span>Prisma</span> का उपयोग करके PostgreSQL डेटाबेस को अपने Next.js एप्लिकेशन के साथ कनेक्ट कर सकते हैं।</p> <p>साइनआउट हुक उपयोगकर्ता को एप्लिकेशन से साइन आउट करने की अनुमति देता है। यह हुक साइन-इन प्रक्रिया के दौरान बनाए गए सत्र ऑब्जेक्ट को हटा देगा और उपयोगकर्ता को साइन आउट कर दिया जाएगा।</p> <p>आगे बढ़ें और विकास सर्वर को स्पिन अप करें परिवर्तनों को अपडेट करें और प्रमाणीकरण कार्यक्षमता का परीक्षण करने के लिए ब्राउज़र पर चल रहे अपने Next.js एप्लिकेशन पर जाएं।</p> <pre> <code>npm run dev</code> पूर्व> <p>इसके अलावा, आप प्रमाणीकरण मॉडल को शैलीबद्ध करने के लिए <span>अपने Next.js ऐप के साथ Tailwind CSS का उपयोग</span> कर सकते हैं।</p> <h2 id="authentication-using-nextauth"> प्रमाणीकरण का उपयोग करके NextAuth  एच2> </h2><p>NextAuth कई प्रमाणीकरण सेवाओं का समर्थन करता है जिन्हें क्लाइंट-साइड को संभालने के लिए आसानी से आपके Next.js अनुप्रयोगों में एकीकृत किया जा सकता है प्रमाणीकरण।</p> <p>इसके अतिरिक्त, आप अपने उपयोगकर्ताओं के डेटा को स्टोर करने के लिए एक डेटाबेस को एकीकृत कर सकते हैं और सर्वर-साइड को लागू करने के लिए एक्सेस टोकन बाद के प्रमाणीकरण अनुरोधों के लिए प्रमाणीकरण क्योंकि NextAuth विभिन्न डेटाबेस एकीकरण के लिए समर्थन प्रदान करता है।</p> </pre></button>
</h2>
</div>
</h1>
</div></code></p></button></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre></a>
</h1>