การจัดการเซสชันที่ปลอดภัยใน Next.js โดยใช้ Upstash Redis

ในคู่มือนี้ เราจะอธิบายการจัดการเซสชันในแอป Next.js โดยใช้ Upstash Redis โดยการเรียนรู้ว่า "เซสชัน" หมายถึงอะไรในเว็บแอปพลิเคชัน เหตุใด Redis จึงเป็นตัวเลือกที่เหมาะสมสำหรับการจัดการเซสชัน วิธีตั้งค่าฐานข้อมูล Upstash Redis และสุดท้าย วิธีรวมเข้ากับแอปพลิเคชัน Next.js

“เซสชั่น” คืออะไร?

ในเว็บแอปพลิเคชัน “เซสชัน” เป็นกลไกการจัดเก็บข้อมูลฝั่งเซิร์ฟเวอร์ชั่วคราวที่ใช้เพื่อรักษาสถานะการโต้ตอบของผู้ใช้กับแอปพลิเคชันผ่านคำขอ HTTP หลายรายการในช่วงเวลาที่กำหนด

เนื่องจาก HTTP เป็นโปรโตคอลไร้สถานะ ซึ่งหมายความว่าแต่ละคำขอมีความเป็นอิสระและไม่ "จดจำ" การโต้ตอบก่อนหน้านี้ เซสชันจึงอนุญาตให้เซิร์ฟเวอร์ติดตามและจัดเก็บข้อมูลเฉพาะของผู้ใช้ เช่น สถานะการตรวจสอบสิทธิ์ การตั้งค่า หรือกิจกรรมประเภทใด ๆ ของผู้ใช้ในช่วงเวลาที่อยู่บนเว็บไซต์

โดยทั่วไปเซสชันจะทำงานโดยการจัดเก็บ ID เซสชันที่ไม่ซ้ำกันบนฝั่งไคลเอ็นต์ ซึ่งโดยปกติจะอยู่ในคุกกี้ เซิร์ฟเวอร์ใช้ ID นี้เพื่อดึงข้อมูลที่เกี่ยวข้องกับเซสชันผู้ใช้จากที่จัดเก็บเซสชัน เช่น Redis ในบล็อกนี้ ทุกครั้งที่ผู้ใช้โต้ตอบกับไซต์

เซสชันในเว็บแอปพลิเคชันเป็นวิธีที่ดีเยี่ยมในการจัดการการโต้ตอบของผู้ใช้และการจัดการสถานะต่อไปนี้:

• การตรวจสอบสิทธิ์ผู้ใช้ :เซสชันช่วยตรวจสอบสิทธิ์ผู้ใช้และจดจำสถานะการเข้าสู่ระบบในหน้าต่างๆ หรือแม้แต่หลังจากรีเฟรชแล้ว
• การปรับเปลี่ยนในแบบของคุณ :เซสชันอนุญาตให้เซิร์ฟเวอร์จัดเก็บและดึงข้อมูล เช่น การตั้งค่าผู้ใช้ สถานะการตรวจสอบสิทธิ์ ฯลฯ
• ความปลอดภัย :การจัดการเซสชันที่เหมาะสมสามารถปรับปรุงความปลอดภัยของแอปได้ เช่น การป้องกัน CSRF และการทำให้แน่ใจว่าผู้ใช้ที่ไม่ได้รับอนุญาตจะไม่เข้าถึงพื้นที่ที่ถูกจำกัด

เหตุใดจึงต้อง Redis สำหรับการจัดการเซสชัน

ทำไมไม่ :)

มีเหตุผลหลายประการในการใช้ Redis เป็นที่จัดเก็บเซสชันสำหรับการจัดการเซสชัน นี่คือข้อดีบางประการที่เกิดจากโครงสร้างของ Redis:

• สถาปัตยกรรมข้อมูล :Redis เป็นที่จัดเก็บคีย์-ค่าในหน่วยความจำ คู่คีย์-ค่าสามารถจัดเก็บไว้ในแฮชได้ โดยที่แฮชเป็นประเภทบันทึกที่มีโครงสร้างเป็นคอลเลกชันของคู่ค่าฟิลด์ โครงสร้างนี้เหมาะสมอย่างยิ่งกับประเภทข้อมูลการจัดการเซสชันเพื่อรักษาข้อมูลเซสชันทั้งหมด เช่น ชื่อผู้ใช้ การตั้งค่าผู้ใช้ ฯลฯ ในรูปแบบคีย์-ค่าในแฮชต่อเซสชันผู้ใช้

• ข้อมูลหมดอายุ :Redis มีฟังก์ชันในตัวเพื่อลบข้อมูลที่หมดอายุ ซึ่งจะช่วยให้แอปพลิเคชันเว็บสามารถจำกัดเซสชันของผู้ใช้ไว้ได้

• เวลาแฝงต่ำ :เนื่องจากลักษณะ "ในหน่วยความจำ" ทำให้ Redis ทำงานเร็วมาก นั่นเป็นสาเหตุที่มักใช้สำหรับเซสชันผู้ใช้และข้อมูลแคช

• ความสามารถในการขยายขนาด :Redis สร้างขึ้นเพื่อรองรับข้อมูลปริมาณมากและการรับส่งข้อมูลที่มีปริมาณข้อมูลสูง

นอกจากนี้ เรายังสามารถเปรียบเทียบ Redis กับวิธีหนึ่งที่ใช้กันทั่วไปในการจัดเก็บข้อมูลเซสชันผู้ใช้ คุกกี้ฝั่งไคลเอ็นต์ เพื่อตัดสินใจว่าเราต้องการติดตามวิธีใดในเว็บแอปพลิเคชันของเรา ข้อดีบางประการของ Redis เป็นที่จัดเก็บเซสชันเหนือคุกกี้ฝั่งไคลเอ็นต์:

• มีความเสี่ยงน้อยต่อการถูกปลอมแปลงโดยผู้ใช้ :คุกกี้จะปรากฏแก่ผู้ใช้และผู้ใช้สามารถจัดการได้ Redis ช่วยให้เราสามารถปกป้องข้อมูลผู้ใช้จากการถูกจัดการโดยผู้ใช้

• ถ่ายโอนข้อมูลระหว่างไคลเอนต์และเซิร์ฟเวอร์น้อยลง: เนื่องจากเราจัดเก็บข้อมูลเซสชันทั้งหมดไว้ใน Redis เราจึงไม่จำเป็นต้องจัดเก็บข้อมูลใดๆ ไว้ในเครื่องไคลเอ็นต์

• การจัดเก็บเฉพาะ “SessionId” ในเครื่องไคลเอ็นต์: หากเราใช้ Redis เราต้องการเพียง sessionId เพื่อรับสำหรับแต่ละคำขอเพื่อให้ทราบว่าคำขอนี้อยู่ในเซสชันใด

การสร้างฐานข้อมูล Upstash Redis

ก่อนที่จะกระโดดเข้าสู่การตั้งค่า Upstash Redis เราควรเข้าใจข้อดีของ Upstash Redis ก่อน คงไม่สมเหตุสมผลเลยที่จะใช้เครื่องมือที่เราจะใช้โดยไม่เข้าใจว่าทำไมจึงควรใช้เครื่องมือเหล่านั้น ใช่ไหม

มาดูประโยชน์หลักของการใช้ Upstash Redis:

• ไร้เซิร์ฟเวอร์: Upstash Redis เป็นฐานข้อมูลแบบไร้เซิร์ฟเวอร์ คุณไม่จำเป็นต้องบำรุงรักษาโครงสร้างพื้นฐาน กังวลเกี่ยวกับขนาดของฐานข้อมูลหรือการกำหนดค่าระดับต่ำอื่นๆ คุณเพียงแค่สร้างฐานข้อมูลและใช้งาน

• การกระจายข้อมูลทั่วโลก: Upstash ช่วยให้คุณสามารถปรับใช้อินสแตนซ์ Redis ในภูมิภาคที่ใกล้กับผู้ใช้ของคุณ ซึ่งลดเวลาแฝงลงไปอีก สิ่งนี้เป็นประโยชน์อย่างยิ่งสำหรับแอปพลิเคชันที่กระจายไปทั่วโลก ทำให้มั่นใจได้ว่าพื้นที่เก็บข้อมูลเซสชันจะรวดเร็วและตอบสนองไม่ว่าผู้ใช้จะอยู่ที่ใดก็ตาม

• จ่ายตามการใช้งาน: ไม่มีราคาเข้า คุณจ่ายเฉพาะสิ่งที่คุณใช้ คุณสามารถดูรายละเอียดราคาได้

ตกลง หากเราไม่มีคำถามเพิ่มเติมเกี่ยวกับสาเหตุที่เราใช้ Upstash Redis สำหรับการจัดการเซสชัน เราสามารถสร้างฐานข้อมูล Upstash Redis ได้

เราจะสร้างฐานข้อมูล Redis ผ่านคอนโซล Upstash

มาสร้างฐานข้อมูล Redis โดยคลิกปุ่ม "สร้างฐานข้อมูล" บทช่วยสอนนี้จะแสดงอีกครั้งว่าการสร้างฐานข้อมูล Upstash Redis นั้นง่ายและรวดเร็วเพียงใด

ในโมดอลที่ปรากฏขึ้น เราจะเลือกชื่อสำหรับฐานข้อมูลของเราและเลือกภูมิภาคสำหรับมัน การเลือกภูมิภาคเดียวกันกับบริการของคุณอาจเป็นการดีกว่า

หลังจากคลิกที่ปุ่มถัดไป เราจะเลือกแผนการกำหนดราคา ฉันชอบจ่ายตามที่คุณไปด้วยด้วยขีดจำกัดงบประมาณสูงสุด!

ตอนนี้ฐานข้อมูล Redis ของเราพร้อมแล้ว เราสามารถดูจุดสิ้นสุดของฐานข้อมูล รหัสผ่านเพื่อเชื่อมต่อกับฐานข้อมูล และพอร์ตบนแดชบอร์ด Redis เราจะต้องการข้อมูลนี้เมื่อเราต้องการเชื่อมต่อกับฐานข้อมูลจากเว็บแอปพลิเคชัน

แค่นั้นแหละ!

การใช้ Upstash Redis ในแอป Nextjs

มาดูกันว่า Redis จะทำงานอย่างไรภายในโครงสร้างพื้นฐานของเว็บแอปพลิเคชัน:

• ก่อนอื่นเราได้รับคำขอจากเบราว์เซอร์ไคลเอนต์โดยไม่มี sessionId ใด ๆ

• เนื่องจากไม่มี sessionId ในคำขอ เราจึงสร้าง sessionId หนึ่งรายการและสร้างแฮชใน Redis

• ส่งกลับ sessionId เป็นคุกกี้เพื่อตอบสนองต่อเครื่องไคลเอนต์

• เมื่อเราได้รับคำขอ HTTP ใหม่พร้อม sessionId เราจะดึงข้อมูลเซสชันที่จำเป็นจาก Redis และใช้ข้อมูลดังกล่าวเมื่อตอบสนองต่อไคลเอ็นต์

นี่คือแผนภาพลำดับของบริการและการเชื่อมต่อกับ Redis เพื่อให้เห็นภาพกระบวนการได้ดีขึ้น:

หากทุกอย่างดี เราสามารถสร้างแอป Nextjs ได้โดยการรันคำสั่งต่อไปนี้ในเทอร์มินัล เว้นแต่คุณจะมีแอป Nextjs

npx create-next-app@latest <project-name>

ตอนนี้เราจำเป็นต้องติดตั้ง Upstash Redis Typescript SDK

cd <project-name>
npm install @upstash/redis

หลังจากติดตั้งการขึ้นต่อกันที่จำเป็นแล้ว ตอนนี้เราสามารถสร้างอินเทอร์เฟซสำหรับจัดการ ID เซสชันในคุกกี้ของเบราว์เซอร์ของผู้ใช้และโต้ตอบกับ Upstash Redis ซึ่งเป็นที่เก็บข้อมูลเซสชันของแอปของเรา

เราจะใช้อินเทอร์เฟซนี้ใน 01 ไฟล์.

import { Redis } from '@upstash/redis'
import { cookies } from 'next/headers'
 
export const redis = new Redis({
 url: '<UPSTASH-REDIS-URL>',
 token: 'UPSTASH-REDIS-TOKEN',
})
 
type SessionId = string;
type Key = 'userName' | 'sessionStatus'; // other keys of the session data can be added.
 
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 :เราจะจัดเก็บรหัสเซสชันไว้ในคุกกี้ของเบราว์เซอร์ของผู้ใช้ ฟังก์ชันนี้รับรหัสเซสชันจากคุกกี้ของเบราว์เซอร์ที่ส่งไปยัง API ภายในการเรียก HTTP

• setSessionId :ฟังก์ชันนี้ตั้งค่าคุกกี้รหัสเซสชันเป็นพารามิเตอร์รหัสเซสชันที่กำหนด

• getSessionIdAndCreateIfMissing :ฟังก์ชันนี้เรียก 18 เพื่อรับรหัสเซสชันที่มีอยู่จากคุกกี้และตั้งค่า UUID แบบสุ่มใหม่เป็นรหัสเซสชันใหม่ เว้นแต่จะมีรหัสเซสชันในเบราว์เซอร์ของผู้ใช้อยู่แล้ว ฟังก์ชันนี้ยังเพิ่ม ID เซสชันใหม่ให้กับคุกกี้เพื่อส่งกลับไปยังเบราว์เซอร์

• getSessionData :เราจะเรียกใช้ฟังก์ชันนี้เพื่อรับข้อมูลเซสชันจาก Redis มันจะรับข้อมูลเซสชันของคีย์ที่กำหนดจาก Upstash Redis และส่งคืน

• getAllSessionData :ฟังก์ชันนี้รับข้อมูลเซสชันทั้งหมด โดยรับคู่คีย์-ค่าทั้งหมดของแฮชเซสชันจาก Upstash Redis

• setSessionData :เราจะตั้งค่าคู่คีย์-ค่าของเซสชันที่กำหนดในฟังก์ชันนี้

เนื่องจากฟังก์ชันยูทิลิตี้เพื่อจัดการ ID เซสชันและพื้นที่เก็บข้อมูลเซสชันผ่าน Upstash Redis ตอนนี้เราจึงสามารถใช้ API ที่ใช้ฟังก์ชันเหล่านี้ได้

API จะเรียบง่ายมาก มันจะได้รับชื่อผู้ใช้จากเส้นทาง เมื่อได้รับคำขอแล้ว จะตรวจสอบก่อนว่ามีรหัสเซสชันอยู่ในคุกกี้หรือไม่ หากไม่มีรหัสเซสชันในคุกกี้ มันจะสร้างรหัสใหม่และตั้งค่าไว้ในคุกกี้ในการตอบกลับ หากมี ID เซสชันอยู่ ระบบจะตรวจสอบว่ามีคีย์ใน Upstash Redis ในแฮชที่แสดงถึงเซสชันหรือไม่ หากไม่มี มันจะสร้างคู่คีย์-ค่าในแฮชนั้น

มาเขียนโค้ดกันดีกว่า!

API จะถูกสร้างขึ้นโดยใช้เราเตอร์แอปของ Nextjs

เราควรสร้างไฟล์ภายใต้ 28 [ชื่อผู้ใช้]35 เส้นทาง.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 });
}
 

npm run dev

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