การใช้การเข้าสู่ระบบแบบไร้รหัสผ่านในโครงการ Next.js 13 ด้วย NextAuth.js และ Prisma

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

การตรวจสอบสิทธิ์แบบไม่ใช้รหัสผ่านเป็นแนวทางใหม่ที่ช่วยลดความจำเป็นในการใช้ชื่อผู้ใช้และรหัสผ่านแบบเดิมๆ แต่จะมอบประสบการณ์การตรวจสอบสิทธิ์ที่ปลอดภัยและเป็นมิตรต่อผู้ใช้มากขึ้นโดยใช้ประโยชน์จากวิธีการอื่น เช่น ลิงก์เวทย์มนตร์อีเมลหรือรหัสแบบครั้งเดียวที่ส่งทาง SMS

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

นอกจากนี้ เราจะใช้ Prisma เป็นอะแดปเตอร์ฐานข้อมูลของเรา Prisma เป็นเครื่องมือ ORM (Object-Relational Mapping) ที่ทำให้การโต้ตอบฐานข้อมูลง่ายขึ้นโดยจัดให้มีตัวสร้างแบบสอบถามที่ปลอดภัยต่อประเภทและสร้างอัตโนมัติ รองรับฐานข้อมูลหลายฐานข้อมูล รวมถึง PostgreSQL, MySQL และ SQLite ทำให้เป็นตัวเลือกที่หลากหลายสำหรับการใช้งานการตรวจสอบสิทธิ์ของเรา

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

ตอนนี้เราจะสำรวจวิธีปรับปรุงความปลอดภัยและประสบการณ์ผู้ใช้ของแอปพลิเคชัน Next.js ของเราโดยใช้การตรวจสอบสิทธิ์แบบไม่ใช้รหัสผ่านและความสามารถของ NextAuth.js และ Prisma มาเริ่มกันเลย

การเข้าสู่ระบบแบบไร้รหัสผ่านคืออะไร?

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

หากต้องการใช้การเข้าสู่ระบบแบบไร้รหัสผ่านโดยใช้ลิงก์มายากลอีเมลหรือรหัสแบบใช้ครั้งเดียว เราจำเป็นต้องมีเซิร์ฟเวอร์ SMTP (Simple Mail Transfer Protocol)

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

มาเริ่มกันเลย!

ก่อนอื่น เราต้องสร้างโปรเจ็กต์ Next.js ใหม่ขึ้นมา เมื่อต้องการทำเช่นนี้ ใช้คำสั่งต่อไปนี้:

npx create-next-app@latest

เมื่อคุณสร้างโปรเจ็กต์ Next.js ใหม่แล้ว คุณสามารถนำทางไปยังไดเร็กทอรีโปรเจ็กต์ที่สร้างขึ้นใหม่ได้

ด้วยการเปลี่ยนไดเร็กทอรีเป็นโปรเจ็กต์ คุณจะสามารถสำรวจโฟลเดอร์และไฟล์ต่างๆ ที่ประกอบเป็นโครงสร้างโปรเจ็กต์ Next.js ได้

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

กำลังติดตั้งการพึ่งพาของเรา

หากต้องการเปิดใช้งานการตรวจสอบสิทธิ์แบบไม่ใช้รหัสผ่านในโครงการ Next.js ของเราโดยใช้ NextAuth.js เราต้องติดตั้งการขึ้นต่อกันที่จำเป็นก่อน รันคำสั่ง yarn add next-auth nodemailer เพื่อเพิ่มทั้ง NextAuth.js และ nodemailer ในโปรเจ็กต์ของเรา

เราใช้ nodemailer โดยเฉพาะเนื่องจากเป็นโมดูลยอดนิยมและอเนกประสงค์สำหรับการส่งอีเมลใน Node.js โดยให้วิธีการที่ตรงไปตรงมาและเชื่อถือได้ในการส่งลิงก์วิเศษหรือรหัสแบบครั้งเดียวที่จำเป็นสำหรับการตรวจสอบสิทธิ์แบบไร้รหัสผ่านผ่านทางอีเมล

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

yarn add @prisma/client @next-auth/prisma-adapter

แพ็คเกจเหล่านี้จะช่วยให้เกิดการสื่อสารที่ราบรื่นระหว่างแอปพลิเคชัน Next.js และฐานข้อมูลของเรา นอกจากนี้เรายังต้องติดตั้ง Prisma เป็นการพึ่งพา dev ด้วยการเรียกใช้:

yarn add prisma --dev

ขั้นตอนนี้ทำให้มั่นใจได้ว่าเรามีเครื่องมือที่จำเป็นในการทำงานกับ Prisma และตัวสร้างคิวรีที่สร้างขึ้นอัตโนมัติสำหรับการโต้ตอบกับฐานข้อมูล

ด้วยการติดตั้งการขึ้นต่อกันเหล่านี้ เราได้วางรากฐานสำหรับการดำเนินการตรวจสอบสิทธิ์แบบไม่ใช้รหัสผ่านโดยใช้ NextAuth.js และ Prisma ในโปรเจ็กต์ Next.js ของเรา

ตั้งค่าปริซึม

จำเป็นต้องตั้งค่า Prisma และมีสิทธิ์เข้าถึงเซิร์ฟเวอร์ SMTP สำหรับการส่งอีเมลเพื่อใช้การตรวจสอบสิทธิ์แบบไม่ใช้รหัสผ่านในโปรเจ็กต์ Next.js บทช่วยสอนนี้จะแนะนำคุณเกี่ยวกับการใช้บัญชี Gmail ส่วนตัวของคุณในการส่งอีเมล ทำตามขั้นตอนด้านล่างเพื่อการตั้งค่าที่สำเร็จ

ขั้นแรก สร้างโฟลเดอร์ "prisma" ที่รากของโปรเจ็กต์ของคุณ โฟลเดอร์นี้จะเก็บไฟล์และการกำหนดค่าที่เกี่ยวข้องกับ Prisma จากนั้น ภายในโฟลเดอร์ "prisma" ให้สร้างไฟล์ใหม่ชื่อ "schema.prisma" ไฟล์สคีมาจะกำหนดโครงสร้างของฐานข้อมูลของคุณและทำหน้าที่เป็นพิมพ์เขียวสำหรับโค้ดที่สร้างขึ้นอัตโนมัติของ Prisma

หากคุณยังใหม่ต่อแนวคิดของสคีมา ไม่ต้องกังวล! สคีมาจะระบุตาราง เขตข้อมูล ความสัมพันธ์ และข้อจำกัดของฐานข้อมูลของคุณ หากต้องการสร้างสคีมา โปรดดู เอกสารอย่างเป็นทางการของ NextAuth.js และคัดลอกสคีมาตัวอย่างที่ให้ไว้ที่นั่น สคีมานี้เป็นจุดเริ่มต้นและสามารถปรับแต่งให้เหมาะกับข้อกำหนดการใช้งานของคุณได้

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

EMAIL_SERVER_USER="YourGmailAddress"
EMAIL_SERVER_PASSWORD="GmailPassOrGeneratedPass"
EMAIL_SERVER_HOST=smtp.gmail.com
EMAIL_SERVER_PORT=587
EMAIL_FROM="noreply@example.com"

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=ThisNeedsToBeSuperSecret

เมื่อทำตามขั้นตอนเหล่านี้ คุณจะตั้งค่า Prisma และกำหนดค่าเซิร์ฟเวอร์ SMTP สำหรับการส่งอีเมลโดยใช้บัญชี Gmail ของคุณ การเตรียมการเหล่านี้มีความสำคัญอย่างยิ่งต่อการเปิดใช้งานขั้นตอนการตรวจสอบสิทธิ์แบบไม่ใช้รหัสผ่านในโปรเจ็กต์ Next.js ของคุณ

บันทึก

คุณต้องสร้างรหัสผ่านสำหรับแอปหากคุณได้เปิดใช้งานการตรวจสอบสิทธิ์แบบสองปัจจัย (2FA) สำหรับบัญชี Google ของคุณ รหัสผ่านสำหรับแอปคือรหัสผ่านเฉพาะที่ให้สิทธิ์เข้าถึงแอปหรืออุปกรณ์เฉพาะโดยไม่ต้องเปิดเผยรหัสผ่านบัญชี Google หลักของคุณ ทำตามคำแนะนำด้านล่างเพื่อสร้างรหัสผ่านสำหรับแอป

1. ไปที่หน้าการตั้งค่าบัญชี Google โดยไปที่ https://myaccount.google.com/

2. ไปที่แท็บ "ความปลอดภัย"

3. มองหาส่วน "2FA" เลื่อนลงและเลือก "รหัสผ่านสำหรับแอป"

4. คุณอาจได้รับแจ้งให้ป้อนรหัสผ่านบัญชี Google ของคุณอีกครั้งเพื่อตรวจสอบความปลอดภัย

5. ใต้เมนูแบบเลื่อนลง "เลือกแอป" ให้เลือก "เมล" หรือ "อื่นๆ (ชื่อที่กำหนดเอง)"

• หากมีตัวเลือก "จดหมาย" ให้เลือก

• หากไม่มีตัวเลือก "เมล" ให้เลือก "อื่นๆ (ชื่อที่กำหนดเอง)" และระบุชื่อที่กำหนดเองสำหรับการระบุตัวตน

6. คลิกที่ปุ่ม "สร้าง" หรือ "สร้างรหัสผ่าน"

7. Google จะสร้างรหัสผ่านสำหรับแอปเฉพาะสำหรับคุณ จดรหัสผ่านนี้ไว้ เนื่องจากเราจะใช้รหัสผ่านนี้ในแอปพลิเคชันของเราในการส่งอีเมล

8. ใช้รหัสผ่านแอปที่สร้างขึ้นนี้ในการกำหนดค่าเซิร์ฟเวอร์ SMTP ของแอปพลิเคชัน Next.js ของคุณ แทนที่รหัสผ่านบัญชี Gmail ปกติของคุณด้วยรหัสผ่านสำหรับแอปนี้

สิ่งนี้ทำให้แน่ใจได้ว่าแม้จะเปิดใช้งาน 2FA แล้ว แอปพลิเคชันของคุณก็สามารถส่งอีเมลได้อย่างปลอดภัยโดยใช้บัญชี Gmail ของคุณ

PostgreSQL โดยใช้ Supabase

ก่อนที่เราจะสามารถดำเนินการต่อได้ เราต้องตรวจสอบให้แน่ใจว่าฐานข้อมูลสำหรับโครงการของเราทำงานอย่างถูกต้อง สำหรับการสาธิตนี้ เราขอแนะนำให้ใช้ฐานข้อมูล Supabase PostgreSQL หากต้องการเริ่มต้นกับโปรเจ็กต์ Supabase และรับ URL การเชื่อมต่อ PostgreSQL ให้ทำตามขั้นตอนเหล่านี้:

1. ไปที่ supabase.io และลงชื่อเข้าใช้บัญชีของคุณหรือสร้างบัญชีใหม่หากคุณยังไม่มี

2. เมื่อคุณเข้าสู่ระบบ คุณจะถูกนำไปที่แดชบอร์ด Supabase คลิกที่ "สร้างโครงการใหม่" เพื่อเริ่มโครงการใหม่

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

4. เมื่อคุณสร้างโครงการแล้ว คุณจะถูกนำไปที่แดชบอร์ดโครงการ คลิก "ฐานข้อมูล" ที่แถบด้านข้างซ้ายเพื่อเข้าถึงการตั้งค่าฐานข้อมูล

5. ในส่วน "ฐานข้อมูล" คุณจะพบ URL การเชื่อมต่อ PostgreSQL URL นี้มีข้อมูลที่จำเป็นทั้งหมดเพื่อเชื่อมต่อกับฐานข้อมูลของโครงการ Supabase เช่น โฮสต์ พอร์ต ชื่อฐานข้อมูล ชื่อผู้ใช้ และรหัสผ่าน มันจะแสดงในรูปแบบ: postgres://<username>:<password>@<host>:<port>/<database>

6. คัดลอก URL การเชื่อมต่อ PostgreSQL และรักษาความปลอดภัย คุณจะต้องใช้เพื่อสร้างการเชื่อมต่อระหว่างแอปพลิเคชันของคุณกับฐานข้อมูล Supabase

    // .env
    
    DATABASE_URL=postgresql://postgres:[Password]@db.ixjsisbwdafsjvgifliu.supabase.co:5432/postgres
    ```

ตอนนี้ มาตรวจสอบให้แน่ใจว่าเราสร้างไคลเอนต์ Prisma ของเราโดยการรันคำสั่งต่อไปนี้: `npx prisma create`

Prisma Client เป็นไคลเอนต์ฐานข้อมูลที่สร้างขึ้นโดยอัตโนมัติตามสคีมาของคุณ ตามค่าเริ่มต้น Prisma Client จะถูกสร้างขึ้นในโฟลเดอร์ `node_modules/.prisma/client` แต่คุณสามารถ [ระบุตำแหน่งที่กำหนดเองได้หากจำเป็น](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path)

ต่อไป เราจะดำเนินการสร้างการโยกย้ายครั้งแรกของเรา เรียกใช้คำสั่งต่อไปนี้: `npx prisma โยกย้าย dev` คุณสามารถตั้งชื่อที่สื่อความหมายให้กับการย้ายข้อมูลแต่ละครั้งได้

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

ตอนนี้ ถ้าเราตรวจสอบฐานข้อมูลของเรา เราจะสามารถเห็นการเปลี่ยนแปลงจากการย้ายครั้งแรกของเราที่สะท้อนให้เห็นในส่วนของฐานข้อมูล

ในการดำเนินการย้ายครั้งแรก เราได้ใช้การแก้ไขกับสคีมาฐานข้อมูลของเราตามที่กำหนดไว้ในสคริปต์การย้าย

![Database Tables after Migration](https://drive.google.com/uc?export=view&id=1PZ6ban5h4VZs3UHQoJS_5kNYkhqs-MAx)

### การตั้งค่า NextAuthJS ด้วย Prisma Adapter

ในแอปพลิเคชัน Next.js นั้น NextAuthJS จะใช้เส้นทางที่รับทั้งหมด หรือที่เรียกว่าเส้นทางไวด์การ์ดหรือเส้นทางสำรอง เพื่อจัดการคำขอตรวจสอบสิทธิ์ เส้นทางไดนามิกนี้ถูกกำหนดโดยใช้ระบบการกำหนดเส้นทางตามไฟล์ใน Next.js

สร้างโฟลเดอร์ชื่อ "**api**" ภายในไดเรกทอรี "**app**" ของคุณ ภายในโฟลเดอร์ "**api**" ให้สร้างโฟลเดอร์ "**auth**" ภายในโฟลเดอร์ "**auth**" ให้สร้างเส้นทางที่รับทั้งหมดที่เรียกว่า "**[...nextauth]**" เป็นโฟลเดอร์ สุดท้าย สร้างไฟล์ "**route.ts**" ภายในโฟลเดอร์เส้นทางที่รับทั้งหมด และเพิ่มโค้ดต่อไปนี้

```jsx
// app/api/auth/[...nextauth]/route.ts
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import { PrismaClient } from '@prisma/client';
import NextAuth from 'next-auth';
import EmailProvider from 'next-auth/providers/email';

const prisma = new PrismaClient();

export const authOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        },
      },
      from: process.env.EMAIL_FROM,
    }),
  ]
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

ในไฟล์เส้นทางที่รับทั้งหมด เราจะนำเข้าไลบรารี NextAuthJS และตั้งค่าตัวเลือกการตรวจสอบสิทธิ์ ผู้ให้บริการ และการกำหนดค่า NextAuthJS จัดการการแยกวิเคราะห์คำขอที่เข้ามา ระบุการดำเนินการตรวจสอบสิทธิ์ที่จำเป็น และดำเนินการตรรกะที่เหมาะสมตามตัวเลือกที่ระบุ

รหัสที่ให้มาจะตั้งค่า NextAuthJS ด้วยอะแดปเตอร์ Prisma สำหรับการตรวจสอบสิทธิ์โดยใช้ผู้ให้บริการอีเมล มาอธิบายแต่ละข้อความกัน:

1. การนำเข้า:

• PrismaAdapter และ PrismaClient นำเข้าจาก @next-auth/prisma-adapter และ @prisma/client ตามลำดับ สิ่งเหล่านี้ใช้เพื่อรวม NextAuthJS กับ Prisma

• NextAuth นำเข้าจาก next-auth และเป็นไลบรารีหลักสำหรับจัดการการตรวจสอบสิทธิ์ในแอปพลิเคชัน Next.js

• EmailProvider นำเข้าจาก next-auth/providers/email และใช้เป็นผู้ให้บริการสำหรับการตรวจสอบความถูกต้องผ่านอีเมล

2. การตั้งค่าพริมา:

• อินสแตนซ์ของ PrismaClient ถูกสร้างขึ้นโดยใช้ PrismaClient ใหม่() ซึ่งช่วยให้สามารถสื่อสารกับ Prisma ORM และฐานข้อมูลพื้นฐานได้

3. ตัวเลือกการรับรองความถูกต้อง:

• authOptions เป็นออบเจ็กต์ที่กำหนดการกำหนดค่าสำหรับการตรวจสอบสิทธิ์ใน NextAuthJS

• คุณสมบัติ adapter ถูกตั้งค่าเป็น PrismaAdapter(prisma) ซึ่งเชื่อมต่อ NextAuthJS กับ Prisma โดยใช้ PrismaAdapter

• อาร์เรย์ providers มีผู้ให้บริการเพียงรายเดียว คือ EmailProvider มีการกำหนดค่าด้วยรายละเอียดเซิร์ฟเวอร์อีเมลที่จำเป็นและที่อยู่อีเมล จาก

4. ตัวจัดการ NextAuth:

• ฟังก์ชัน NextAuth ถูกเรียกโดยมี authOptions เป็นอาร์กิวเมนต์ เพื่อสร้างตัวจัดการการตรวจสอบสิทธิ์

• ตัวจัดการผลลัพธ์ถูกกำหนดให้กับตัวแปร ตัวจัดการ

5. ส่งออก:

• handler ส่งออกเป็น GET และ POST เพื่อรองรับทั้งคำขอ HTTP GET และ POST

ตอนนี้ เรามารันเซิร์ฟเวอร์ของเราและทดสอบการทำงานกันดีกว่า ขั้นแรก ให้เริ่มต้นเซิร์ฟเวอร์การพัฒนาด้วยการรัน yarn dev จากนั้น เปิดเบราว์เซอร์ของคุณแล้วไปที่ localhost:3000 เพื่อดูการทำงานของแอปพลิเคชัน

หากต้องการทดสอบฟังก์ชันการตรวจสอบสิทธิ์ โปรดไปที่ localhost:3000/api/auth/signin ที่นี่ คุณจะได้สัมผัสกับความมหัศจรรย์ของ NextAuthJS เทมเพลตที่ให้มาพร้อมกับ NextAuthJS เปิดใช้งานกระบวนการลงชื่อเข้าใช้โดยไม่ต้องใช้รหัสผ่าน หากต้องการทดลองใช้ ให้ป้อนที่อยู่อีเมลที่ถูกต้อง

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

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

เมื่อผู้ใช้คลิกอีเมลลงชื่อเข้าใช้ที่สร้างโดย NextAuthJS และได้รับการตรวจสอบสิทธิ์ การดำเนินการต่างๆ จะเกิดขึ้นเบื้องหลังเพื่ออำนวยความสะดวกในการเข้าสู่ระบบที่ราบรื่น

1. การตรวจสอบลิงก์อีเมล: เมื่อผู้ใช้คลิกลิงก์ลงชื่อเข้าใช้ NextAuthJS จะตรวจสอบโทเค็นการตรวจสอบสิทธิ์ที่ฝังอยู่ในลิงก์ โทเค็นนี้รับประกันความปลอดภัยและความสมบูรณ์ของกระบวนการตรวจสอบสิทธิ์

2. กระบวนการตรวจสอบสิทธิ์: เมื่อตรวจสอบโทเค็นสำเร็จ NextAuthJS จะระบุผู้ใช้และดำเนินการตรวจสอบสิทธิ์ให้เสร็จสิ้น โดยจะตรวจสอบข้อมูลระบุตัวตนของผู้ใช้ตามโทเค็นที่ให้มาและปัจจัยการตรวจสอบสิทธิ์เพิ่มเติมใดๆ ที่กำหนดค่าไว้ เช่น การตรวจสอบสิทธิ์แบบหลายปัจจัย

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

4. คุกกี้: NextAuthJS จะตั้งค่าคุกกี้ HTTP เท่านั้นที่ปลอดภัยในเบราว์เซอร์ของผู้ใช้เพื่อจัดการเซสชัน คุกกี้เหล่านี้มีบทบาทสำคัญในการรักษาสถานะการรับรองความถูกต้องของผู้ใช้ในคำขอหลายรายการ โดยทั่วไปคุกกี้จะรวมคุกกี้เซสชันและคุกกี้โทเค็นการรีเฟรช (ไม่บังคับ) ขึ้นอยู่กับการกำหนดค่าการรับรองความถูกต้อง

1. คุกกี้เซสชัน: คุกกี้เซสชันประกอบด้วยตัวระบุเซสชัน (เช่น สตริงที่สร้างแบบสุ่ม) ที่ระบุเซสชันของผู้ใช้โดยไม่ซ้ำกัน ช่วยให้ NextAuthJS เชื่อมโยงคำขอที่ตามมากับเซสชันและผู้ใช้ที่ถูกต้อง

2. คุกกี้โทเค็น CSRF: NextAuthJS ตั้งค่าคุกกี้โทเค็น CSRF (การปลอมแปลงคำขอข้ามไซต์) เพื่อป้องกันการโจมตี CSRF โทเค็น CSRF เป็นค่าเฉพาะที่สร้างโดย NextAuthJS และจัดเก็บไว้ในคุกกี้ ใช้เพื่อตรวจสอบความถูกต้องของคำขอที่ตามมาโดยผู้ใช้ เมื่อผู้ใช้ส่งแบบฟอร์มหรือดำเนินการที่มีความละเอียดอ่อน โทเค็น CSRF จะรวมอยู่ในส่วนหัวหรือเนื้อหาของคำขอเพื่อให้แน่ใจว่าคำขอนั้นมาจากเซสชันของผู้ใช้ที่ได้รับการตรวจสอบสิทธิ์และไม่ได้มาจากแหล่งที่เป็นอันตราย

3. คุกกี้ URL การโทรกลับ: NextAuthJS ตั้งค่าคุกกี้ URL การโทรกลับเพื่อจัดเก็บ URL ดั้งเดิมที่ผู้ใช้พยายามเข้าถึงก่อนที่จะเปลี่ยนเส้นทางไปยังขั้นตอนการตรวจสอบสิทธิ์ คุกกี้นี้ช่วยให้ NextAuthJS เปลี่ยนเส้นทางผู้ใช้กลับไปยังหน้าที่ต้องการหลังจากการตรวจสอบสิทธิ์สำเร็จ ช่วยให้มั่นใจได้ถึงประสบการณ์ผู้ใช้ที่ราบรื่นโดยส่งผู้ใช้กลับไปยังปลายทางที่ต้องการได้อย่างราบรื่น แทนที่จะเป็นหน้า Landing Page ทั่วไป

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

เยี่ยมยอดในการผสานรวม NextAuthJS กับอะแดปเตอร์ Prisma เข้ากับแอปพลิเคชัน Next.js ของคุณได้สำเร็จ! ด้วยความง่ายดายและความสามารถในการปรับเปลี่ยนของ NextAuthJS ตอนนี้คุณมีระบบการตรวจสอบความถูกต้องที่เชื่อถือได้

ตรวจสอบพื้นที่เก็บข้อมูล GitHub ที่ลิงก์ด้านล่างเพื่อดูโค้ดที่ใช้ในคู่มือนี้: https://github.com/codelabsacademy/next-auth-guide

แต่ทำไมต้องหยุดที่นี่? หากคุณหลงใหลในการพัฒนาเว็บและกระตือรือร้นที่จะพัฒนาทักษะของคุณ ลองสมัครเข้าร่วมหลักสูตรติวเข้มการพัฒนาเว็บของเรา หลักสูตรติวเข้มของเรามอบประสบการณ์การเรียนรู้ที่ครอบคลุม จัดเตรียมคุณด้วยความรู้และทักษะการปฏิบัติที่จำเป็นในการเป็นเลิศในโลกแบบไดนามิกของการพัฒนาเว็บไซต์

เมื่อเข้าร่วมหลักสูตรติวเข้มของเรา คุณจะได้รับประสบการณ์ตรงเกี่ยวกับเทคโนโลยีล้ำสมัย ทำงานในโครงการในโลกแห่งความเป็นจริง และรับคำแนะนำเฉพาะบุคคลจากผู้เชี่ยวชาญในอุตสาหกรรม ไม่ว่าคุณจะเป็นมือใหม่หรือนักพัฒนาที่มีประสบการณ์ โปรแกรมของเราได้รับการออกแบบมาเพื่อยกระดับทักษะการพัฒนาเว็บของคุณไปอีกระดับ

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