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

MooHyong Devoloper
Jul 22, 2017 · 3 min read

ในการทำระบบ 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.json

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

ติดตั้ง package

มาเริ่มลงมือทำกันเลย

ในส่วนของพาทแรกจะเริ่มส่วนของ เข้าสู่ระบบและสมัครแบบ Local ไฟล์ไหนจะทำอย่างไรมาเริ่มกันเลย

การตั้งค่าและกำหนดค่าให้กับแอปพลิเคชัน

  1. app.js เป็นไฟล์หลักที่แอปพลิเคชันของเราจะทำการรันไฟล์นี้ มีหน้าที่เซ็ตค่าต่าง ๆ และ start เว็ปเซิร์ฟเวอร์
code app.js

จากโค้ดข้างต้น ผมแบ่งเป็น ฟังก์ชันทั้งหมด 4 ฟังก์ชันหลักดังต่อไปนี้

  • handleDatabase เป็นฟังก์ชันที่ทำหน้าที่เชื่อมต่อดาต้าเบส
  • configureExpress เป็นฟังก์ชันที่ทำหน้าที่ตั้งค่าและกำหนดค่าให้กับ Express framework
  • configurePassport เป็นฟังก์ชันที่ทำหน้าที่ตั้งค่าและกำหนดค่าให้กับ Passport รวมถึงการเซ็ต routes ของเว็ปด้วย
  • start เป็นฟังก์ชันที่ทำหน้าที่ start เว็ปเซิร์ฟเวอร์ (Express framework)

เมื่อทำการเขียนเสร็จให้ใช้คำสั่ง node app.js เพื่อทำการรันโค้ดนี้ โดยถ้ารันผ่านจะแสดงผลลัพธ์ดังภาพ

แสดงผลการรันโปรแกรม

2. แสดงไฟล์ config ต่าง ๆ ที่ต้องใช้ในระบบ

ไฟล์ /configs/database.js
ไฟล์ /configs/passport.js

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 แล้วผมกัน ขอบคุณครับ

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade