มาทำ Authentication ด้วย NestJS และ Passport.js กัน
Вставка
- Опубліковано 15 лип 2024
- ☕️ สนับสนุนช่องเราด้วยการสมัครสมาชิกช่องทางนี้ได้เลย
/ @mikelopster
ลองไมค์ สัปดาห์นี้ เราจะยังคงอยู่กับ NestJS กัน คราวนี้เราจะมาถึง use case อีก 1 case ที่ทำกันบ่อยมากในโลกของ Web application นั่นคือ Authentication ผ่าน library ยอดฮิตของ Node.js อย่าง Passport.js นั่นเอง (ในที่สุดก็มาซะที เป็นหนึ่งใน library ที่มีคนพูดถึงตั้งแต่เปิดช่อง mikelopster แรกๆเลย 😂)
โดยเนื้อหานั้นจะประกอบด้วย
1. แนะนำ Passport.js และพา setup project สำหรับทำ Authentication
2. พาเล่น 3 Strategy Login อย่าง Local Strategy (Email, Password), JWT Strategy (JWT token) และ Google Strategy (Google OAuth)
** ในหัวข้อนี้เป็น หัวข้อที่ผมตั้งใจทำต่อเนื่องจากหัวข้อ NestJS ที่เป็น Introduction ในหัวข้อก่อนหน้า ซึ่งจะมีเนื้อหาของ NestJS + RestAPI + MongoDB + ENV อยู่ แนะนำว่า ถ้ายังไม่รู้จัก 4 เรื่องนี้ ขอแนะนำให้ดูก่อนหน้าก่อนจะดูหัวข้อนี้ จะเข้าใจได้ไวขึ้นด้วยเช่นกันนะครับ
หัวข้อ
00:00 แนะนำหัวข้อ
01:45 แนะนำ Passport / Setup project
04:26 เราจะทำอะไรกันใน Session นี้บ้าง
06:29 สร้าง Module / ลง MongoDB / setup Config ENV
11:30 หลักการของ Passport.js / แนะนำ Local Strategy
15:12 1. API Register สำหรับสมัคร email + password
25:44 2. 2. API Login โดยเช็คจาก email + password ว่าถูกต้องหรือไม่ (Local Strategy)
43:55 3. API Get Profile เพิ่ม JWT Token และ ตัว check JWT (JWT Strategy)
59:03 เปลี่ยนมาเก็บ access token ด้วย cookie (และใช้ผ่าน cookie แทน)
1:04:27 เพิ่ม Google Sign in เข้ามา (Google Strategy) และใช้ร่วมกับ JWT
1:19:06 สรุปทั้งหมด
สามารถอ่าน Blog เพิ่มเติมได้ที่
mikelopster.dev/posts/nestjs-...
ใครมีข้อสงสัยเพิ่มเติม มาพูดคุยแลกเปลี่ยนความรู้กันได้ที่
Facebook page: / mikelopster.dev
Website: mikelopster.dev
แปะพิกัดของที่ผมใช้
shope.ee/8A54c8cfkf ของที่ตั้งอยู่ด้านหลัง
shope.ee/6fI75UuLEM osmo pocket 3
shope.ee/4VDcVixCW9 ไมค์ shure
shope.ee/6pbXI6d5xG กล้องวงจรปิด
Enjoy ครับ 😘 - Наука та технологія
กราบขอบพระทัยอย่างสุดซึ้งครับ
อยากให้มีการสอน refresh token เมื่อ accessToken เราหมดอายุ เพิ่มเติมครับ ขอบคุณมากครับ
ขอบคุณครับ
อยากให้เพิ่มเรื่องการนำไปใช้ในฝั่ง front end หน่อยคับ
ส่วนตัวใช้ trpc อยู่ แต่อยากเอา structure แบบนี้ไปใช้ทำ back end บาง
ตอนนี้ รกมาก 🥲
ติดตามเสมอนะคัฟ
ขอบคุณครับ รอบหน้าขอ Refresh Token ครับ🙏🏻🙏🏻🙏🏻
ขอบคุณมากๆครับสุดยอดเลย แต่อยากถามเพิ่มเติมนิดนึงครับ เหมือนยังงงๆ นึกภาพไม่ออก เช่นนาทีที่ 23:00 - 24:00
มีตัวนึง return User และอีกตัว return UserDocument อยากทราบว่าแตกต่างยังไงแบบไม่เห็นภาพจริงๆครับ พอจะอธิบายหรือมี source ให้ศึกษาต่อมั้ยครับ
User คือ class ที่กำหนดโครงสร้างของ document ใน MongoDB เป็นเหมือนตัวแทนของโครงสร้างข้อมูลที่เราต้องการจัดเก็บในฐานข้อมูล
UserDocument คือ type ที่สร้างขึ้นโดยการ ผสมระหว่าง class User และ Document ของ Mongoose เพื่อสร้างเป็น Document ที่มี function เพิ่มเติมจาก Mongoose เช่น save(), update() เป็นต้น
เหตุผลที่ใช้ UserDocument แทน User เพื่อให้สามารถใช้คำสั่งของ Mongoose ในการจัดการ Document ของ schema ได้ครับ แค่นี้เลย 😁
พี่ใช้ VS Code Theme อะไรหรอครับ สวยมาก อยากใช้บ้าง
ใช้ Theme Dracula ครับ สวยสดงดงามครับ 😁
ลอง implement nest กับ auth js ไหมครับ
น่าสนใจจ
ระหว่าง nest.js กับ next.js ทำ back-end ต่างกันมากไหม
nest.js = Backend Framework ที่มี node.js เป็น Backend
next.js = Fullstack Framework ที่มี React เป็น Frontend และ node.js เป็น Backend
แนะนำว่าถ้างานเฉพาะทางเป็น Backend ใช้ nest.js จะดีกว่า เพื่อที่จะได้ไม่ต้องมีส่วน Frontend มาผสมกันกับ project ที่เรากำลังทำอยู่นะครับ
แล้วถ้าเอาไปเชื่อมต่อกับ react สามารถใช้ cookie ใน nestjs ได้เลยได้หมครับ หรือต้องแบน token มาด้วย
จริงๆตามหลักการต้องแนบไปด้วยครับ แต่มันจะเป็นการให้ React บอกกับ Server ว่า ให้ดึง credential จาก cookie ไปใช้ครับ มันจะเป็น standard ที่ชื่อ withCredentials ซึ่งจะมีทั้งใน fetch และ axios ครับ มันจะเป็นตัวบอกให้ server ดึง credential ออกมาจาก cookie ได้โดยที่เราไม่ต้องเขียนแนบเองครับ 😁
developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials
Bro can you tell me about Bad Request TokenError: Bad Request why its happing i am geeting the userInfo but showing this error (For Google oAuth)
For this case, there may be an issue with the configuration, e.g., incorrect Client ID, Client Secret, or Redirect URI. Please recheck the configuration and try again. 😁
Yes I was hitting the callback URL instead of the actual Google url
ผมมีปัญตรงที่ .toObject() มันไม่มีครับ ช่วงนาทีที่ 36:03 ต้องแก้ไขยังไงดีครับ
ต้องดู object ที่ return จาก userService นะครับ ว่าเป็นข้อมุลประเภทเดียวกันหรือไม่นะครับ (อาจจะมีจุดที่ code เราไม่เหมือนกันได้) มันอาจจะเป็นข้อมูลประเภท object อยู่แล้ว ลองตรวจสอบจาก console.log ดูได้น้า
อยากให้จาร แนะนำextensionแจ่มๆ hotkey terminal toolต่างๆที่ใช้บ่อยๆหน่อยครับมือใหม่แต่อยากเฟียวฟาวแบบเก๋าๆครับ 55555
เอาจริง ผมก็ท่ามาตรฐานทั่วไปเลยนะ 😂 เดะผมอาจจะรวมไปตอบใน session Q&A น้า