ไทย

webauthn
รหัสผ่าน
mfa
nextjs

การใช้ WebAuthn ใน Next.js: คู่มือแบบลงมือปฏิบัติ

คู่มือแบบลงมือปฏิบัติในการใช้ WebAuthn ใน Next.js พร้อมตัวอย่างโค้ดสด

Sijie

Developer

11/15/2023

หยุดเสียเวลาเป็นสัปดาห์กับการยืนยันตัวตนผู้ใช้

เปิดตัวแอปที่ปลอดภัยเร็วขึ้นด้วย Logto ผสานการยืนยันตัวตนผู้ใช้ภายในไม่กี่นาทีและมุ่งเน้นที่ผลิตภัณฑ์หลักของคุณ

เริ่มต้นใช้งาน

ยินดีต้อนรับกลับสู่ซีรีส์ WebAuthn ของเรา ในบทความก่อนหน้านี้เราได้กล่าวถึง พื้นฐานของ WebAuthn, และ คู่มือ 101. หากคุณเพิ่งร่วมกับเรา สามารถตรวจสอบเนื้อหาในเบื้องต้นเหล่านี้เพื่อเริ่มต้นเรียนรู้ได้

วันนี้เราจะเริ่มปฏิบัติการลงมือจริง เราจะใช้ความสามารถของ Next.js กับฟีเจอร์ใหม่ "Server Actions" เป้าหมายของเราคือ การใช้ WebAuthn ในแอปพลิเคชัน Next.js เพื่อเตรียมความพร้อมสำหรับ WebAuthn

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

การแสดงพรีวิว

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

พร้อมที่จะออกผจญภัยที่น่าตื่นเต้นนี้หรือยัง? เริ่มกันเลย!

ข้อกำหนดเบื้องต้น

ก่อนที่เราจะเริ่มกัน การันตีว่าคุณมีสิ่งที่คุณต้องการ:

โปรเจ็กต์ Next.js: หากคุณยังไม่ได้ตั้งค่าโปรเจ็กต์ Next.js นี่คือ คู่มือเริ่มต้นอย่างรวดเร็ว ที่จะพาคุณเริ่มต้นได้
ไลบรารี Simple WebAuthn: มีแพ็คเกจหลายตัวเพื่อช่วยลดปริมาณงานที่ต้องรวม WebAuthn ลงในเว็บไซต์ ใช้ผู้จัดการแพ็คเกจที่คุณชื่นชอบเพื่อติดตั้ง @simplewebauthn/browser, @simplewebauthn/server และ @simplewebauthn/typescript-types
Session Storage: เราจะใช้การจัดเก็บเซสชันเพื่อจัดการกับ WebAuthn challenge เราจะใช้ KV ของ Vercel เพื่อบรรลุเป้าหมายนี้
ฐานข้อมูลผู้ใช้: สถานที่สำหรับเก็บรหัสผ่านของผู้ใช้ที่ลงทะเบียนของเรา เพื่อความเรียบง่าย เราก็จะใช้ KV ของ Vercel เพื่อนำเสนอ

ตอนนี้เมื่อเรามีเครื่องมือและวัสดุในมือ พร้อมที่เราจะเริ่มสร้าง

การใช้งานการจัดเก็บเซสชันกับ KV ของ Vercel

การตั้งค่าการจัดเก็บ KV

เป็นการง่ายที่จะเริ่มต้นการจัดเก็บ KV ทั้งในโหมดผู้ผลิตและการพัฒนาท้องถิ่น ปฏิบัติตามคู่มือนี้เพื่อเชื่อมต่อร้านค้า KV กับโปรเจ็กต์ของคุณและดึงค่าของสภาพแวดล้อม: https://vercel.com/docs/storage/vercel-kv/quickstart

การใช้ฟังก์ชันการจัดการเซสชัน

เราได้ส่งออกฟังก์ชัน 2 ฟังก์ชัน:

getCurrentSession: ใช้โอโนเชียนคุกกี้ของ Next.js เพื่อสร้างเซสชันสำหรับคำขอปัจจุบัน และส่งคืนค่า
updateCurrentSession: บันทึกข้อมูลไปยังเซสชันปัจจุบัน

การใช้งานฐานข้อมูลผู้ใช้กับ KV ของ Vercel

ในลักษณะเดียวกันกับการใช้งานเซสชันของเรา ลองสร้างฐานข้อมูลผู้ใช้ง่ายๆ

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

การจัดเตรียมฟังก์ชัน WebAuthn

ก่อนที่เราจะดำเนินการต่อ มาดูแผนภาพการลงทะเบียนและกระบวนการตรวจสอบสิทธิ์:

ตามที่เห็นในแผนภาพ เราจำเป็นต้องเตรียมฟังก์ชัน 2 ฟังก์ชัน:

generateWebAuthnRegistrationOptions
verifyWebAuthnRegistration

คล้ายกับการลงทะเบียน การเข้าสู่ระบบต้องมีฟังก์ชัน 2 ฟังก์ชัน:

generateWebAuthnLoginOptions
verifyWebAuthnLogin

นี่คือโค้ด:

สร้างหน้าเว็บ

เราได้เตรียมตัวจนเสร็จเรียบร้อยแล้ว มาสร้างหน้ากันเถอะ:

สรุป

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

ข้อพิจารณาสำคัญสำหรับการปรับใช้ในการผลิต

การปรับตัวบ่งชี้ผู้ใช้: ในการสอนนี้เราใช้อีเมลเป็นตัวบ่งชี้ผู้ใช้ อย่างไรก็ตาม ในสภาพแวดล้อมการผลิต คุณอาจต้องใช้ตัวบ่งชี้ที่ต่างออกไปเช่น userId หรือ username
การรวมฐานข้อมูล: ในขณะที่เราใช้ KV ของ Vercel เป็นตัวอย่างเรียบง่ายสำหรับการจัดการข้อมูลเซสชันและผู้ใช้ แอปพลิเคชันในโลกจริงควรรวมฐานข้อมูลที่มีความปลอดภัยมากกว่า (เช่น PostgreSQL, MongoDB ฯลฯ)
การปรับแต่งตัวเลือก WebAuthn: ตัวเลือก WebAuthn ที่เราได้สำรวจนั้นเป็นจุดเริ่มต้น ขึ้นอยู่กับความต้องการของแอปพลิเคชันของคุณและนโยบายความปลอดภัย คุณอาจจำเป็นต้องปรับค่าเหล่านี้ ศึกษา เอกสาร WebAuthn และเอกสารของ Simple WebAuthn library เพื่อแนะนำในการปรับแต่งตัวเลือกเหล่านี้ให้เหมาะสมกับความต้องการของคุณ

ขอบคุณที่ได้เข้าร่วมในการเดินทางทางการศึกษานี้ แม้ในตัวอย่างที่เล็กที่สุด การรวม WebAuthn ไม่ใช่เรื่องง่าย ยังมีอีกตัวเลือกหนึ่ง คุณสามารถลองใช้ WebAuthn ใน Logto's MFA:

ลองใช้การยืนยันตัวตนหลายปัจจัยของ Logto

ข้อกำหนดเบื้องต้น#

การใช้งานการจัดเก็บเซสชันกับ KV ของ Vercel#

การตั้งค่าการจัดเก็บ KV#

การใช้ฟังก์ชันการจัดการเซสชัน#

การใช้งานฐานข้อมูลผู้ใช้กับ KV ของ Vercel#

การจัดเตรียมฟังก์ชัน WebAuthn#

สร้างหน้าเว็บ#

สรุป#

ข้อพิจารณาสำคัญสำหรับการปรับใช้ในการผลิต#

ข้อกำหนดเบื้องต้น#

การใช้งานการจัดเก็บเซสชันกับ KV ของ Vercel#

การตั้งค่าการจัดเก็บ KV#

การใช้ฟังก์ชันการจัดการเซสชัน#

การใช้งานฐานข้อมูลผู้ใช้กับ KV ของ Vercel#

การจัดเตรียมฟังก์ชัน WebAuthn#

สร้างหน้าเว็บ#

สรุป#

ข้อพิจารณาสำคัญสำหรับการปรับใช้ในการผลิต#

ข้อกำหนดเบื้องต้น

การใช้งานการจัดเก็บเซสชันกับ KV ของ Vercel

การตั้งค่าการจัดเก็บ KV

การใช้ฟังก์ชันการจัดการเซสชัน

การใช้งานฐานข้อมูลผู้ใช้กับ KV ของ Vercel

การจัดเตรียมฟังก์ชัน WebAuthn

สร้างหน้าเว็บ

สรุป

ข้อพิจารณาสำคัญสำหรับการปรับใช้ในการผลิต

ข้อกำหนดเบื้องต้น

การใช้งานการจัดเก็บเซสชันกับ KV ของ Vercel

การตั้งค่าการจัดเก็บ KV

การใช้ฟังก์ชันการจัดการเซสชัน

การใช้งานฐานข้อมูลผู้ใช้กับ KV ของ Vercel

การจัดเตรียมฟังก์ชัน WebAuthn

สร้างหน้าเว็บ

สรุป

ข้อพิจารณาสำคัญสำหรับการปรับใช้ในการผลิต