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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. generateWebAuthnRegistrationOptions
2. verifyWebAuthnRegistration

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

1. generateWebAuthnLoginOptions
2. verifyWebAuthnLogin

นี่คือโค้ด:

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

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

สรุป#

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

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

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

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