มาทำ Social Authentication ง่าย ๆ กับ NodeJS กันดีกว่า Part 1

ในการทำระบบ Login หรือ Authentication ใน Node อาจจะเป็นเรื่องที่ซับซ้อนและยุ่งยาก จริง ๆ แล้วไม่ใช่แค่ Node ที่เกิดปัญหานี้ อาจจะเป็นแอปพลิเคชันทั่ว ๆ ไปก็จะพบปัญหานี้เหมือนกัน แต่ในบทความนี้ผมใช้ทำระบบ Authentication บน Node ด้วย Passport ที่จะทำให้ชีวิตคุณง่ายขึ้นไปเยอะเลยที่เดียว
ก่อนอื่นมาดูว่าเราจะทำอะไรบ้าง
- เข้าสู่ระบบและสมัครแบบ Local (passport-local) Part 1
- เข้าสู่ระบบและลงทะเบียน Facebook (passport-facebook) Part 2
- เข้าสู่ระบบและลงทะเบียน Twitter (passport-twitter) Part 3
- เข้าสู่ระบบและลงทะเบียน Google+ (passport-google-oauth) Part 4
- รวมทุกระบบเข้ากันทั้ง 4 ข้อข้างต้น Part 5
โครงสร้างโฟลเดอร์
authentication-node-example/
+-- configs
¦ +-- auth.js
¦ +-- database.js
¦ +-- passport.js
+-- models
¦ +-- user.js
+-- routes
¦ +-- routes.js
+-- views
¦ +-- index.ejs
¦ +-- login.ejs
¦ +-- signup.ejs
¦ +-- profile.ejs
+-- app.js
+-- package.jsonไลบรารี่ที่ใช้
- Express → web framework for node
- EJS → JavaScript template engine
- Mongoose → MongoDB object modeling tool designed
- Passport → Unobtrusive authentication for Node.js.
- Connect-Flash → Flash messages are stored in the session
- Bcrypt → Lib to help you hash passwords.
Package Json File

หลังจากทำการเพิ่ม package ใน package.json เรียบร้อยแล้วให้พิมพ์คำสั่ง npm install เพิ่มทำการดาวน์โหลด package

มาเริ่มลงมือทำกันเลย
ในส่วนของพาทแรกจะเริ่มส่วนของ เข้าสู่ระบบและสมัครแบบ Local ไฟล์ไหนจะทำอย่างไรมาเริ่มกันเลย
การตั้งค่าและกำหนดค่าให้กับแอปพลิเคชัน
- app.js เป็นไฟล์หลักที่แอปพลิเคชันของเราจะทำการรันไฟล์นี้ มีหน้าที่เซ็ตค่าต่าง ๆ และ start เว็ปเซิร์ฟเวอร์
จากโค้ดข้างต้น ผมแบ่งเป็น ฟังก์ชันทั้งหมด 4 ฟังก์ชันหลักดังต่อไปนี้
- handleDatabase เป็นฟังก์ชันที่ทำหน้าที่เชื่อมต่อดาต้าเบส
- configureExpress เป็นฟังก์ชันที่ทำหน้าที่ตั้งค่าและกำหนดค่าให้กับ Express framework
- configurePassport เป็นฟังก์ชันที่ทำหน้าที่ตั้งค่าและกำหนดค่าให้กับ Passport รวมถึงการเซ็ต routes ของเว็ปด้วย
- start เป็นฟังก์ชันที่ทำหน้าที่ start เว็ปเซิร์ฟเวอร์ (Express framework)
เมื่อทำการเขียนเสร็จให้ใช้คำสั่ง node app.js เพื่อทำการรันโค้ดนี้ โดยถ้ารันผ่านจะแสดงผลลัพธ์ดังภาพ

2. แสดงไฟล์ config ต่าง ๆ ที่ต้องใช้ในระบบ
3. Application Routes
- หน้าหลัก (/)
- หน้าเข้าสู่ระบบ (/login)
- หน้าสมัครสมาชิก (/signup)
- จัดการการเข้าสู่ระบบ (POST Method)
- จัดการการสมัครสมาชิก (POST Method)
- หน้าโปรไฟล์หลังการเข้าสู่ระบบ (/profile)
4. หน้าเว็ปจะประกอบไปด้วยทั้งหมด 4 หน้าดังต่อไปนี้
หน้าหลัก (views/index.ejs)

หน้าเข้าสู่ระบบ (views/login.ejs)

หน้าสมัครสมาชิก (views/signup.js)

หน้าแสดงโปรไฟล์ (view/profile.js)

5. ดาต้าเบส จะมี method สองตัว คือ
- generateHash คือเป็นตัวสร้าง hash จาก password ที่ผู้ใช้ส่งเข้ามาเพื่อนำไปเก็บในดาต้าเบส
- validPassword คือเช็ค password ว่าถูกต้องหรือไม่
สุดท้ายนี้ถ้าตรงไหนที่ผมอธิบายไม่เข้าใจหรือไม่ระเอียดพอสามารถสอบถามได้ (พึ่งเขียนบล็อกครั้งแรง) ผมจะอัพโค้ดทั้งหมดไว้ที่ github สามารถดูได้ในลิ้งแบบ คลิก
ในพาทต่อไปจะเป็นการทำระบบเข้าสู่ระบบของ Facebook แล้วผมกัน ขอบคุณครับ
