มาลองทำ Login ด้วย Authentication แต่ละแบบกัน

☕️ สนับสนุนช่องเราด้วยการสมัครสมาชิกช่องทางนี้ได้เลย
/ @mikelopster
ลองไมค์สัปดาห์นี้ เราจะพามาทำ Authentication กับการ Login กัน ว่ามีกี่วิธีที่สามารถทำได้ และสามารถทำได้ยังไงกันบ้าง ซึ่งจะพาทำกันตั้งแต่ฝั่งของ API Backend จนถึงลองใช้งานกันที่ฝั่ง Frontend กันครับ
ใน Session นี้เราจะพาลองกัน 3 วิธีคือ
1. Login ผ่านการส่ง Token ให้ Frontend จัดการ
2. Login ผ่าน cookie
3. Login ผ่าน session
แต่ละวิธี implement ประมาณไหน และมีไอเดียการ implement อย่างไรบ้าง ติดตามกันในคลิปนี้ได้เลย
หัวข้อ
00:00 intro ว่าหัวข้อนี้เกี่ยวกับอะไร
03:10 เราจะทำ API อะไรบ้างใน session นี้ / พาสร้าง table
04:07 API Register สำหรับเก็บ email, password
10:33 API Login สำหรับเช็ค email, password (แบบเข้ารหัส)
17:14 วิธีที่ 1 Frontend token - เริ่มทำ JWT Token
22:25 วิธีที่ 1 Frontend token - ทดสอบ check JWT Token (ผ่าน Header)
28:09 วิธีที่ 1 Frontend token - recheck user มีอยู่ในระบบ
29:58 สร้างหน้า Frontend สำหรับ Login
31:11 เพิ่ม function login สำหรับส่งผ่าน API Login
34:36 วิธีที่ 1 Frontend token - เพิ่มเก็บ token ที่ localstorage / ใช้ token ผ่าน header
38:31 วิธีที่ 2 Cookie - เปลี่ยน code จาก return token เป็นเก็บผ่าน cookie แทน
41:27 วิธีที่ 2 Cookie - เปลี่ยน code ฝั่ง Frontend (axios) ให้ใช้ cookie
43:18 วิธีที่ 3 Session - เปลี่ยน code ฝั่ง Backend ใช้ Session ทั้งหมดแทน
47:42 ข้อดี / ข้อเสียของทั้ง 3 วิธี
อ่านเพิ่มเติมได้ที่
mikelopster.dev/posts/auth-ex...
ใครมีข้อสงสัยเพิ่มเติม มาพูดคุยแลกเปลี่ยนความรู้กันได้ที่
Facebook page: / mikelopster.dev กันได้เลย
Enjoy ครับ 😘
พิกัดของด้านหลัง : shope.ee/8A54c8cfkf

[@-eden-6162]

สอนเข้าใจง่ายดีครับ

[@NattapongPUN]

สอนดีจริงๆ ฟังแล้วเข้าใจไม่ยืดเยื้อ ทำต่อเรื่อยๆนะครับ

[@tod.photowalk]

เนื้อหาดีมาก ๆ ครับ เข้าใจง่าย

[@eloniascarlet]

ขอบคุณมากครับ ! วีดีโอนี้เข้าใจง่ายมากครับ ส่วนตัวอยากให้ลงคอนเทนต์เกี่ยวกับ svelte ด้วยครับตอนนี้ศึกษาภาษานี้อยู่ หาภาษาไทยยากมาก;;

[@bom-_-4283]

บรรลุ ขอบคุณครับ

[@middlewarejame9217]

สนุกมากๆ ครับ

[@tanabodee.d3v]

อยากให้พี่แนะนำการทำoauth หรือล็อกอินด้วย google แล้วสามารถนำusername หรือ email ไปต่อยอดในการใช้งานกับ databaseได้ครับ ส่วนตัวดูแล้วเข้าใจมากๆครับ ขอบคุณมากครับ❤

[@mikelopster]

ได้เลย เรื่อง oauth จริงๆทางผมก็สนใจอยู่เหมือนกันครับ จะขอเก็บไว้ใน checklist ก่อนนะครับ
จริงๆ login ด้วย google (Social auth) เดี๋ยวจะมีเร็วๆนี้ใน series ของ Vue Firebase Masterclass ส่วนของ Firebase Authentication นะครับ รอติดตามได้เลย 😁

[@spykj9085]

😍😍

[@user-lj8bq8qd6n]

ใช้ Django rest framework ไหมครับ

[@mikelopster]

ผมเคยมีใช้นะครับ แต่ไอเดียการทำ Authentication ไม่ต่างจากนี้เลยครับ

[@kruphaisal]

ขอบคุณที่มาแบ่งปันความรู้ดีๆ ครับ

[@Bannonn_Digital]

คำถาม การใช้ 2Fa ล็อกอิน ปลอดภัยแค่ไหนถ้าเทียบกับ สายแฮกเกอร์ เขาจะบายพาสได้ง่ายไหมครับ

[@mikelopster]

จริงๆ ถ้าทำ Authentication 2FA ได้ ดีกว่ารูปแบบปกติ (แบบในคลิปนี้) แน่นอนครับ อย่างน้อยก็มีตัวกันเพิ่มอีก 1 ชั้นเพิ่มมา (พวกเจ้าใหญ่ๆหลายๆเจ้าก็ปรับมาเป็น 2FA กัน)
ซึ่งตัวที่ support ทำเรื่องนี้ได้ง่ายๆคือ auth0 นะครับ ลองแวบดูหัวข้อนั้นเพิ่มเติมได้เช่นกันนะครับ

[@saysamone6144]

Theme code ของพี่ใช้ตัวไหนหรอครับสีสวยจัง

[@mikelopster]

ใช้ theme สี Dracula ครับ 😁

[@kittitop332]

jwt เก็บข้อมูลเป็น base64 ทำให้ใครก็อ่านขอมูลได้ แต่จะไม่สามารถแก้ไขข้อมูลแล้วส่งกลับไปหา server ได้ เพราะต้องใช้ secret key ที่ถูกต้องในการจัดทำ signature หากไม่มีแล้วพยายามแก้ไข server จะรู้ได้เพราะ signature จะไม่ตรงกันครับ

[@mikelopster]

server จะใช้ secret key ตัวเดียวกันในการเข้ารหัส jwt ที่ส่งเข้ามาครับ โดยการแกะ jwt ตัวนั้นออกมาแล้วทำการเข้ารหัสด้วย secret key ที่ server มี
แล้วทำการเปรียบเทียบว่า เข้ารหัสตรงกันหรือไม่ (ถ้าตรง แปลว่า signature หรือ secret key ที่ใช้เข้ารหัส ตรงกัน เท่ากับ อนุญาตให้ไปต่อได้) มันคือพวกคำสั่ง jwt verify ที่ jwt มีครับ เราจะได้แน่ใจได้ว่า token ที่ส่งมา เป็น key ที่ตรงกันกับที่เราเก็บไว้ในระบบจริงๆได้ครับ

[@jozjozkillwer5658]

อยากให้ทำ authorization ด้วยครับกำหนด role ให้ ต่อยอดจาก authentication

[@mikelopster]

ok เดี๋ยวผมหาจุดลงเพิ่มเติมเรื่องนี้ให้ครับ 😁

[@jozjozkillwer5658]

เป็นกำลังใจให้นะครับ @@mikelopster

[@PrincetoR]

+1 ​@@mikelopster please …

[@kasemwongwikarn9814]

ถ้าฝั่ง mobile app เค้าจะเก็บจะเก็บ jwt token ไว้ที่ไหนกันครับ

[@mikelopster]

ถ้าใน ios จะใช้ Keychain ในการเก็บส่วน android จะใช้ Keystore ในการเก็บครับ (ไอเดีย 2 ตัวนี้จะคล้ายๆกับ localstorage ใน Browser ครับ)

[@suphamongkolnounjun7253]

ผมเห็น api เช็ค user ตอนดึงข้อมูลของ user ที่ login มันต้องแสดง results แค่คนเดียวไหมนะครับพี่เพราะเรา login แค่ email เดียว พอดีผมทำตามแล้วเหมือนจะแสดงทั้งหมด users array เลยเป็น 2 หรือผมเข้าใจผิดไหมนะครับ หรือต้องแสดงทั้งหมดถูกแล้ว 46:48

[@mikelopster]

อ่อ จากตัวอย่างนี้คือตัวอย่างการกั้นสิทธิ์ผ่าน login ครับ
- users array นั้นเป็น result ตาม API ออกมา ซึ่งแสดงออกมาได้เมื่อเรา login ถูกต้องครับ (เป็นผลลัพธ์ผ่าน API เฉยๆน้า)
ให้อารมณ์เหมือนเรา login เป็น admin แล้วเราสามารถเห็น user ทุกคนได้ครับ เคสนี้ก็จะคล้ายๆกันครับ (user array ก็เหมือนกับ เราเป็น admin ที่เห็นทุกคนในระบบได้ครับ)

[@youwho16]

ผมลองทำใส่รหัสผิดไม่มี token ยังเข้าเว็บได้55

[@lilpux7390]

26:50

[@anitsir_kcookie3447]

นั้งๆฟังอย่าง มาหยุดขำตรง หวาย พิมพ์ document ก็ผิด 😂

[@wait3741]

โหหห สอนได้เข้าใจง่ายมากเลยครับ อยากให้พี่ทำคลิปเกี่ยวกับพาทำโปรเจค fullstack บ้างครับ เช่นพวกแอพแชท หรืออื่นๆก็ได้ อยากเห็นวิธีการทำโครงสร้างโปรเจค การรักษาความปลอดภัยส่วนต่างๆของระบบเป็นต้น

[@mikelopster]

ติดตามช่องกันไปยาวๆครับ เดี๋ยวมีมาแน่นอล 😆