ทำระบบล็อกอินด้วย JWT และ Passport (Node.js)
หลังจากที่ทั้ง 2 บทความที่ผ่านมาเราได้ทำการเริ่มต้นเขียน Node.js เบื้องต้น และระบบสมัครสมาชิกกันไปแล้ว ในบทความนี้เราจะมาต่อกันที่ระบบล็อกอินกัน
แน่นอนว่าฟังก์ชั่นหลักของทุกระบบย่อมต้องมีการยืนยันตัวตนหรือระบบล็อกอินนั่นเอง ดังนั้นในบทความนี้ผมจะมาพาทำระบบล็อกอินของ Node.js ด้วย library ที่มีชื่อว่า jsonwebtoken passport และ passport-jwt กันครับ
และเช่นเคย ก่อนที่เราจะทำการเรียกใช้ เราก็ต้องทำการติดตั้งผ่านโดยผ่านทาง npm โดยมีคำสั่งดังนี้
จากนั้นให้เราทำการสร้าง path สำหรับล็อกอินขึ้นมา โดยผมจะทำการสร้าง path ที่มีชื่อว่า /login ในไฟล์ routes.js และรับค่า 2 ค่าคือ username และ password จะได้ดังนี้
และแน่นอนว่าการจะล็อกอินได้นั้นเราก็จะต้องทำการค้นหาชื่อผู้ใช้ที่ตรงกับที่ผู้ใช้ได้ทำการกรอกเข้ามา ดังนั้นผมจะทำการสร้างโฟลเดอร์ src/services/users และไฟล์ index.js ขึ้นมาเพื่อรวม service ที่จะทำการเชื่อมต่อไปที่ collection users ผ่านไฟล์นี้ จะเป็นดังนี้
จากรูปข้างบนจะเห็นได้ว่าผมได้ทำการสร้างมา 2 ฟังก์ชั่น 1 คือการค้นหาชื่อผู้ใช้เพื่อจะนำมาทำการเปรียบเทียบรหัสผ่านว่าตรงกันหรือไม่ และอีกฟังก์ชั่นหนึ่งก็เพื่อเป็นการรีเทิร์นข้อมูลกลับไปให้กับผู้ใช้งานโดยจะไม่มีรหัสผ่านนั่นเอง
เนื่องจากบทความที่แล้วนั้นเราได้ทำการเข้ารหัสให้กับรหัสผ่านของผู้ใช้ เพราะฉนั้นเราจะไม่สามารถทำการเปรียบเทียบรหัสผ่านของผู้ใช้กับรหัสผ่านที่กรอกเข้ามาได้ ดังนั้นผมจะทำการสร้างโฟลเดอร์ /src/utils/bcrypt และทำการสร้างไฟล์ index.js เพื่อทำการสร้างฟังก์ชั่นสำหรับเทียบรหัสผ่านขึ้นมา จะได้ดังนี้
จากนั้นในไฟล์ routes.js ให้เราทำการ import bcrypt เข้ามาและเรียกใช้เพื่อทำการเทียบรหัสผ่าน และถ้าหากรหัสผ่านถูกต้องเราจะทำการรีเทิร์นข้อมูลผู้ใช้ไปพร้อมกับ token ที่จะใช้สำหรับการยืนยันตัวตน จะได้ดังนี้
ต่อไปเราจะมาทำการสร้างไฟล์ passport และไฟล์ users_route.js เพื่อทำการ guard ให้กับ route ที่มี path เป็น /api/auth/ และทำการดูข้อมูลผู้ใช้ผ่าน path /api/auth/profile กันครับ
โดยเราจะทำการสร้างไฟล์ /src/config/passport.js ขึ้นมาดังนี้
จากนั้นให้ทำการสร้างไฟล์ /src/routes/secure_routes/index.js และ /src/routes/secure_routes/users/profile.js จะได้ดังนี้
จากรูปจะเป็นการเรียกใช้ profile.js และทำการสร้าง route /profile สำหรับดูข้อมูลผู้ใช้งาน
จากรูปข้างบนจะเห็นได้ว่าเราสามารถเรียกข้อมูล user ได้จาก request ได้เลย เพราะเราได้ทำการเซ็ตค่า user ให้กับ request ในไฟล์ passport.js ไปแล้ว ดังนั้นในไฟล์นี้เราเลยสามารถเรียกใช้ userService โดยโยนค่า userId ไปได้เลย
จากนั้นให้เราทำการ import ไฟล์ passport.js มาและทำการ setup passport ให้กับ api ของเรา
ต่อมาให้เราทำการสร้าง route /api/auth ซึ่งจะเป็น path สำหรับผู้ที่ยืนยันตัวตนแล้วเท่านั้น โดยจะทำการตรวจสอบจาก jwt ที่ผู้ใช้ทำการส่งมา
จากนั้นให้เราทำการทดลองเรียกใช้ api /login ผ่านทาง postman ด้วย method POST สำหรับล็อกอิน จะได้ดังนี้
โดยผลลัพธ์ที่ได้จะเป็นดังนี้
จากนั้นให้เราทำการเรียกใช้ api ไปที่ route /api/auth/profile สำหรับดูข้อมูลของผู้ใช้งาน โดยจะได้ผลลัพธ์ดังนี้
การที่เราจะเรียก route profile นั้นก่อนอื่นเราจะต้องทำการ setup Authorization หรือว่าวิธีการยืนยันตัวตนใน postman ก่อนครับ โดยให้เราเข้ามาที่แท็บ Authorization และตั้งค่า TYPE เป็น Bearer Token และจากนั้นก็ให้เราใส่ค่า token ที่ได้มาจากการเรียกใช้ api login ข้างบนเข้าไป ตามรูปเลยครับ
และผลลัพธ์ที่ได้จากการเรียกใช้ api profile จะเป็นตามรูปด้านข้างนี่เองครับ
สำหรับบทความนี้ก็จบลงไปแล้วนะครับ สำหรับการทำระบบยืนยันตัวตนด้วย jwt และ passport ให้กับระบบของเรา โดยในบทความต่อไปเราจะมาทำระบบการอัปโหลดรูปภาพด้วย base64 และทำ static directory ให้กับโฟลเดอร์รูปภาพให้กับผู้ใช้งานกันครับ
และเช่นเคยครับ ผู้อ่านสามารถไปดู source code ได้ที่ github นี้ได้เลยครับ
