Next.js में अपस्टैश रेडिस का उपयोग करके सुरक्षित सेशन मैनेजमेंट

इस गाइड में, हम Next.js ऐप में अपस्टैश रेडिस का उपयोग करके सेशन मैनेजमेंट के माध्यम से चलेंगे, यह सीखकर कि वेब एप्लिकेशन में "सेशन" का क्या अर्थ है, सेशन मैनेजमेंट के लिए रेडिस एक पसंदीदा विकल्प क्यों है, अपस्टैश रेडिस डेटाबेस कैसे सेट अप करें, और अंत में, इसे Next.js एप्लिकेशन में कैसे इंटीग्रेट करें।

"सेशन" क्या है?

वेब एप्लिकेशन में, "सेशन" एक अस्थायी, सर्वर-साइड स्टोरेज मैकेनिज्म है जिसका उपयोग एक निश्चित समय अंतराल में कई HTTP अनुरोधों में एप्लिकेशन के साथ उपयोगकर्ता की इंटरैक्शन की स्थिति को बनाए रखने के लिए किया जाता है।

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

सत्र आमतौर पर क्लाइंट साइड पर एक यूनिक सेशन ID स्टोर करके काम करते हैं, आमतौर पर कुकी में। सर्वर हर बार जब उपयोगकर्ता साइट के साथ इंटरैक्ट करता है तो इस ID का उपयोग सेशन स्टोरेज से उपयोगकर्ता सत्र से संबंधित डेटा प्राप्त करने के लिए करता है, जैसे इस ब्लॉग में रेडिस।

वेब एप्लिकेशन में सत्र निम्नलिखित उपयोगकर्ता इंटरैक्शन और स्टेट मैनेजमेंट को संभालने का एक शानदार तरीका है:

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

सेशन मैनेजमेंट के लिए रेडिस क्यों?

क्यों नहीं :)

रेडिस को सेशन स्टोर के रूप में सेशन मैनेजमेंट के लिए उपयोग करने के कई कारण हैं। यहां रेडिस की संरचना से उत्पन्न होने वाले कुछ फायदे हैं:

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

इसके अलावा, हम यूजर सत्र डेटा स्टोर करने के सबसे आम तरीकों में से एक, क्लाइंट-साइड कुकीज़ के साथ रेडिस की तुलना कर सकते हैं, यह तय करने के लिए कि हम अपने वेब एप्लिकेशन में किस तरीके का पालन करना चाहते हैं। क्लाइंट-साइड कुकीज़ पर रेडिस के कुछ फायदे सेशन स्टोरेज के रूप में:

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

अपस्टैश रेडिस डेटाबेस बनाना

अपस्टैश रेडिस सेटअप में कूदने से पहले, हमें पहले अपस्टैश रेडिस के फायदों को समझना चाहिए। उन टूल्स का उपयोग करने का कोई मतलब नहीं होगा जिन्हें हम उपयोग करने जा रहे हैं बिना यह समझे कि उनका उपयोग क्यों किया जाना चाहिए, है ना?

आइए अपस्टैश रेडिस का उपयोग करने के मुख्य लाभ देखें:

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

ठीक है, अगर हमारे पास अपस्टैश रेडिस का उपयोग सेशन मैनेजमेंट के लिए क्यों करते हैं, इस बारे में कोई और प्रश्न नहीं हैं, तो हम अपस्टैश रेडिस डेटाबेस बना सकते हैं।

हम अपस्टैश कंसोल के माध्यम से एक रेडिस डेटाबेस बनाएंगे।

आइए "Create Database" बटन पर क्लिक करके एक रेडिस डेटाबेस बनाएं। यह ट्यूटोरियल एक बार फिर दिखाएगा कि अपस्टैश रेडिस डेटाबेस बनाना कितना आसान और तेज़ है।

दिखाई देने वाले मोडल में, हम अपने डेटाबेस के लिए एक नाम चुनेंगे और इसके लिए एक क्षेत्र चुनेंगे। यह आपकी सर्विस के समान क्षेत्र को चुनने के लिए बेहतर हो सकता है।

नेक्स्ट बटन पर क्लिक करने के बाद, हम प्राइसिंग प्लान चुनेंगे। मैक्स बजट लिमिट के साथ पे ऐज़ यू गो मेरा पसंदीदा है!

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

Next.js में अपस्टैश रेडिस का उपयोग करके सुरक्षित सेशन मैनेजमेंट

बस इतना ही!

Nextjs ऐप में अपस्टैश रेडिस का उपयोग करना

आइए देखें कि रेडिस वेब एप्लिकेशन इंफ्रास्ट्रक्चर के भीतर कैसे काम करेगा:

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

यहां सर्विस का सीक्वेंस डायग्राम है और प्रक्रिया को बेहतर ढंग से विज़ुअलाइज़ करने के लिए रेडिस के साथ इसका कनेक्शन:

Next.js में अपस्टैश रेडिस का उपयोग करके सुरक्षित सेशन मैनेजमेंट

अगर सब कुछ अच्छा है, तो हम टर्मिनल में निम्न कमांड चलाकर एक Nextjs ऐप बना सकते हैं जब तक कि आपके पास पहले से Nextjs ऐप न हो।

npx create-next-app@latest

अब हमें अपस्टैश रेडिस टाइपस्क्रिप्ट SDK इंस्टॉल करने की आवश्यकता है।

cd  
npm install @upstash/redis

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

हम इस इंटरफेस को /app/lib/sessionManager.tsx फ़ाइल में लागू करेंगे।

import { Redis } from '@upstash/redis' 
import { cookies } from 'next/headers' 
export const redis = new Redis({ 
  url: '', 
  token: 'UPSTASH-REDIS-TOKEN', 
}) 
type SessionId = string; 
type Key = 'userName' | 'sessionStatus'; // सेशन डेटा की अन्य कीज़ जोड़ी जा सकती हैं। 
export async function getSessionId(): SessionId | undefined { 
  const cookieStore = await cookies(); 
  return cookieStore.get("session-id")?.value; 
} 
async function setSessionId(sessionId: SessionId): void { 
  const cookieStore = await cookies(); 
  cookieStore.set("session-id", sessionId); 
} 
export async function getSessionIdAndCreateIfMissing() { 
  const sessionId = await getSessionId(); 
  if (!sessionId) { 
    const newSessionId = crypto.randomUUID(); 
    await setSessionId(newSessionId); 
    return newSessionId; 
  } 
  return sessionId; 
} 
export async function get(key: Key, username: string = "") { 
  const sessionId = await getSessionId(); 
  if (!sessionId) { 
    return null; 
  } 
  return await redis.hget(`session-${username}-${sessionId}`, key); 
} 
export async function getAll(username: string = "") { 
  const sessionId = await getSessionId(); 
  if (!sessionId) { 
    return null; 
  } 
  return await redis.hgetall(`session-${username}-${sessionId}`); 
} 
export async function set(key: Key, value: string, username: string = "") { 
  const sessionId = await getSessionIdAndCreateIfMissing(); 
  await redis.hset(`session-${username}-${sessionId}`, { [key]: value }); 
  return redis.expire(`session-${username}-${sessionId}`, 900); 
}

आइए इन फंक्शन्स की जांच करें।

getSessionId: हम यूजर्स के ब्राउज़र की कुकीज़ में सेशन ID स्टोर करेंगे। यह फंक्शन HTTP कॉल के अंदर API को भेजी गई ब्राउज़र कुकीज़ से सेशन ID प्राप्त करने के लिए है।
setSessionId: यह फंक्शन दिए गए सेशन ID पैरामीटर को सेशन ID कुकी के रूप में सेट करता है।
getSessionIdAndCreateIfMissing: यह फंक्शन getSessionId को कॉल करके कुकीज़ से मौजूदा सेशन ID प्राप्त करता है और नए रैंडम UUID को नया सेशन ID सेट करता है जब तक कि यूजर के ब्राउज़र में पहले से सेशन ID न हो। यह फंक्शन नए सेशन ID को कुकीज़ में भी जोड़ता है ताकि ब्राउज़र को वापस भेजा जा सके।
getSessionData: हम इस फंक्शन को रेडिस से सेशन डेटा प्राप्त करने के लिए कॉल करेंगे। यह दिए गए की के सेशन डेटा को अपस्टैश रेडिस से प्राप्त करेगा और लौटाएगा।
getAllSessionData: यह फंक्शन सभी सेशन डेटा प्राप्त करता है। यह अपस्टैश रेडिस से सेशन हैश के सभी की-वैल्यू पेयर्स प्राप्त करता है।
setSessionData: हम इस फंक्शन में दिए गए सेशन के की-वैल्यू पेयर्स सेट करेंगे।

चूंकि सेशन IDs और अपस्टैश रेडिस के माध्यम से सेशन स्टोरेज को प्रबंधित करने के लिए यूटिलिटी फंक्शन्स हैं, हम अब इन फंक्शन्स का उपयोग करने वाला एक API लागू कर सकते हैं।

API बहुत सरल होगा। यह पथ से यूजरनेम प्राप्त करेगा। एक बार जब यह अनुरोध प्राप्त करता है, तो यह पहले जांचेगा कि कुकीज़ में सेशन ID मौजूद है या नहीं। यदि कुकीज़ में कोई सेशन ID नहीं है, तो यह एक नया ID जनरेट करेगा और प्रतिक्रिया में कुकीज़ में सेट करेगा। यदि सेशन ID मौजूद है, तो यह जांचेगा कि उस हैश में अपस्टैश रेडिस में कोई की है जो सत्र को दर्शाती है। यदि नहीं है, तो यह उस हैश में की-वैल्यू पेयर्स बनाएगा।

आइए कोड करें!

API को Nextjs के ऐप रूटर्स का उपयोग करके बनाया जाएगा।

हमें app/api/user/[username]नामroute.tsx` नामक फ़ाइल बनानी चाहिए।

 import * as sessionStore from '../../lib/session' 
export async function GET(request: Request,{ params }: { params: Promise<{ user: string }> }){ 
  const userName = (await params).user; 
  const sessionId = await sessionStore.getSessionIdAndCreateIfMissing(); 
  const sessionStatus = await sessionStore.get('sessionStatus', userName); 
  if(sessionStatus == null) { 
    console.log('There is no active session.'); 
    await sessionStore.set('sessionStatus', 'ACTIVE', userName); 
  } 
  return Response.json({ userName: userName, sessionId: sessionId }); 
}

यह रूट फ़ाइल Nextjs को <URL>:3000/api/user/<username> पर भेजे गए अनुरोध को स्वयं के अंदर परिभाषित HTTP मेथड्स पर रिजॉल्व करने की अनुमति देगी।

अब, हम इसे एक्शन में देखेंगे। आइए टर्मिनल से रूट डायरेक्टरी पर जाकर और निम्न कमांड चलाकर Nextjs ऐप चलाएं:

npm run dev

अब, हम ब्राउज़र पर API एंडपॉइंट, https://localhost:3000/api/user/noah खोल सकते हैं। जब आप इसे खोलते हैं, तो आपको यूजरनेम और सेशन ID लौटाया हुआ दिखना चाहिए:

{"userName":"noah","sessionId":"804814dc-10fc-4b0a-a4c1-321f4b54d399"}

यदि आप राइट-क्लिक करके इंस्पेक्ट करते हैं, तो आप "Application" टैब पर जाकर कुकीज़ में सेट session-id देखेंगे।

Next.js में अपस्टैश रेडिस का उपयोग करके सुरक्षित सेशन मैनेजमेंट

हम यह भी जांच सकते हैं कि अपस्टैश रेडिस में सेशन बना है या नहीं। इसे जांचने के लिए, हमें अपस्टैश रेडिस कंसोल पर वापस जाना चाहिए, रेडिस डेटाबेस खोलना चाहिए और Data Browser टैब खोलना चाहिए।

Data Browser टैब नीचे दिखाए अनुसार सेशन डेटा दिखाएगा।

Next.js में अपस्टैश रेडिस का उपयोग करके सुरक्षित सेशन मैनेजमेंट

निष्कर्ष

अपस्टैश रेडिस के साथ Next.js ऐप में सत्र प्रबंधन एक स्केलेबल और कुशल समाधान प्रदान करता है। इस ब्लॉग पोस्ट में, हमने एक Nextjs ऐप बनाया और इसे अपस्टैश रेडिस के साथ इंटीग्रेट किया ताकि इसे सेशन मैनेजमेंट स्टोरेज के रूप में उपयोग किया जा सके।

एक रेडिस डेटाबेस सेट अप करके और इसे Next.js के साथ सहजता से इंटीग्रेट करके, आप पारंपरिक सर्वर-साइड जटिलताओं के बिना सत्र स्टोरेज को प्रभावी ढंग से संभाल सकते हैं। यह दृष्टिकोण सेशन मैनेजमेंट में परफॉरमेंस और सादगी की तलाश कर रहे डेवलपर्स के लिए आदर्श है।

उम्मीद है, इस गाइड ने आपके Next.js एप्लिकेशन में अपस्टैश रेडिस को एक विश्वसनीय सेशन स्टोर के रूप में लागू करने के लिए एक स्पष्ट मार्ग प्रदान किया है।