รีวิว Logto ตัวช่วยสำหรับการทำระบบ Login
สวัสดีครับ วันนี้เราจะมารีวิว Logto ตัวช่วยสำหรับการทำระบบ Login จะเป็นอย่างไรนั้น เรามาดูกันเลย
การทำระบบ Login นั้นเป็นเรื่องที่ยุ่งยากและซับซ้อนมาก เพราะว่าการทำระบบ Login จะต้องมีความรู้เกี่ยวกับการทำเข้ารหัสว่าเราจะใช้ Login แบบไหน การสมัครสมาชิก การยืนยันตัวตน ยิ่งถ้ามีการยืนยันตัวตน ก็จะมีการยืนยันตัวตนด้วย Email, SMS หรือกรอก Password ต่าง ๆ และยังต้องทำหน้าเว็บ Frontend, Backend รวมไปถึง Session, Cookie อีก เป็นเรื่องที่บอกได้เลยว่าวุ่นวาย ยังไม่นับเรื่องการจด Domain การหา Service ผู้ให้บริการส่ง Email และ SMS ด้วยแล้ว ยุ่งยากและวุ่นวายมาก ๆ จะเป็นไรมั้ยที่เราจะมาใช้ตัวช่วยกัน โดยเราจะมารีวิวเครื่องมือที่ชื่อว่า Logto จะเป็นอย่างไรนั้น เรามาดูกันเลย
Logto เป็น Open Source ที่ไว้ทำระบบ Login เลย ก็คือ ที่ว่ามาข้างต้น ไม่ว่าจะเป็นการยืนยันตัวตนด้วย Email, SMS มีหน้าเว็บ UI ให้ มีการจัดการ Session, Cookie ทาง Logto มีให้หมด เพียงแค่เราต้องทำหน้าเว็บไว้สำหรับเรียกใช้หน้า Login และเชื่อมต่อ Service Email กับ SMS เพียงเท่านี้ก็จะใช้งานได้แล้ว สามารถเข้าไปดูรายละเอียดเพิ่มได้ที่เว็บไซต์และทาง Github ได้เลย
เอาล่ะ เดี๋ยวเราจะไปดูกันเลย ว่ามันมีอะไรให้เล่นบ้าง
การติดตั้ง
การติดตั้งนั้น สามารถติดตั้งแบบ Docker หรือใช้ Docker Compose ก็สามารถติดตั้งได้เลย โดยที่ตัว Logto นั้นใช้ Node.js เป็นหลัก และใช้ Database เป็น PostgreSQL
คู่มือหรือ Document
ต้องบอกว่าคู่มือหรือ Document ละเอียดมาก แต่ก็มีขาดหายไปบ้าง แต่ส่วนตัวคิดว่าละเอียดดี มีรูปภาพประกอบ สามารถเข้าไปดูรายละเอียดได้ที่นี่
UI
UI ในหน้า Login ค่อนข้างจะเข้าใจง่าย โดยที่เราสามารถปรับแต่งได้ในหน้า Admin
Admin
เมื่อเรา Login มาแล้ว เราจะเข้ามาที่หน้า UI โดยส่วนตัวคิดว่าเค้าแบ่งเป็นหมวดหมู่ให้เข้าใจง่ายดี และเค้าจะมี Get Started สำหรับเริ่มต้นให้เราทำ โดยจะเป็นฟีเจอร์หลัก ๆ ที่สำคัญของ Logto
Dashboard
มีหน้า Dashboard ให้ดูง่าย
Applications
ในส่วนนี้เป็นการสร้าง App ของเรานั่นเอง เริ่มต้นจะมี Demo App ให้เรา โดยเราจะสร้างใหม่ก็ได้ ซึ่งจากรูป ผู้เขียนได้สร้าง App ไว้สำหรับทดสอบคร่าว ๆ ก็ถือว่าโอเค
Applications ของ Logto นั้นสร้างได้ทั้งหมด 4 แบบ ด้วยกัน คือ
- Native App เป็นเว็บบนโทรศัพท์ เช่น IOS, Android
- Single Page App เป็นเว็บที่จะ Render เฉพาะส่วน ที่เราเห็นก็เช่น Admin Tool ที่เวลาเราคลิกที่เมนู ในส่วนของ Menu จะเหมือนเดิมหรือเพิ่มนิดเดียว แต่จะเปลี่ยนแปลงเฉพาะข้อมูล คือถ้าเป็น WordPress มันจะ Render ใหม่ทั้งหน้า แต่ถ้าเป็นเว็บแบบ Single Page เราจะเลือกได้ว่าให้ Render เฉพาะส่วนไหนบ้าง การทำเว็บแบบนี้ จะได้ Performance ที่ดีขึ้นอย่างมาก ภาษาที่รองรับก็จะเป็น Vanilla JS, React, Vue
- Traditional Web App เป็นเว็บที่รันในส่วนของ Server Side เป็นหลัก เว็บแบบนี้จะเป็นมิตรกับ SEO มาก ๆ เพราะถ้าเป็นเว็บแบบ Single Page จะทำการ Render หรือแสดงผลหน้าเว็บก่อน จากนั้นค่อยไปโหลดข้อมูลหรือยิง API ไปหลังบ้าน แต่ถ้าเป็นเว็บแบบ Traditional Web App จะเป็นการไปดึงข้อมูลก่อน จากนั้นค่อย Render แปลว่า มันสามารถปรับแต่งได้ตั้งแต่งส่วนไหนก็ได้ใน HTML ทำให้ได้ SEO ที่ดีกว่า (ต้องบอกก่อนว่าแบบ Traditional Web App ก็สามารถทำแบบ Render ก่อน แล้วค่อยยิง API ก็ได้ แต่แค่เว็บแบบนี้จะไว้สำหรับคนที่ต้องการ SEO มาก ๆ) ภาษาที่รองรับก็จะเป็น Next.js, Express, Go
- Machine to Machine เป็นการเชื่อมต่อ API ของทาง Logto สามารถอ่านรายละเอียดเพิ่มเติมได้ที่นี่
ต้องบอกก่อนว่า ภาษาที่รองรับที่เขียนไว้ข้างบนนั้น เป็นภาษาที่ทาง Logto มีตัวอย่างการเขียนให้ดู ซึ่งส่วนใหญ่แล้วจะเน้นไปทาง Javascript กับ Typescript เป็นหลัก (ใช้ Typescript จะไม่ค่อยมีปัญหา) สามารถดูตัวอย่างได้ที่นี่
API Resources
เป็นการยืนยันตัวตนในการเข้าใช้งาน API ซึ่งส่วนนี้ยังไม่เคยใช้ ถ้ามีโอกาสเดี๋ยวจะมาบอกอีกที
Sign-in experience
เป็นการปรับแต่งหน้า Login เช่น สี, Dark Mode, Logo, การ Login โดยใช้ Email, Phone number, Social ต่าง ๆ, ภาษา ต้องบอกว่าปรับแต่งได้เยอะมาก
Connectors
ในส่วนนี้จะเป็นเรื่องของการเชื่อมต่อ โดยจะแบ่งออกเป็น 2 ส่วน คือ Email and SMS connectors และ Social connectors
- Email and SMS connectors จะเป็นการเชื่อมต่อกับ Email และ SMS ซึ่งไว้ใช้สำหรับการสมัคร การยืนยันตัวตน การลืมรหัสผ่าน โดยที่ Email และ SMS ก็จะมีในส่วนของผู้ให้บริการหรือ Service ที่ไม่เหมือนกัน แต่ที่แนะนำก็คือ ถ้าใช้ SMS แนะนำให้ใช้ Twilio มีเครดิตให้นิดหน่อย และถ้าใครใช้ Email แนะนำให้ใช้ SendGrid มีโควต้าส่งฟรี ไม่ก็ Mailgun มีโควต้าส่งฟรีเช่นกัน
- Social connectors จะเป็นการเชื่อมต่อกับ Social ต่าง ๆ โดยที่เราสามารถ Authen หรือสมัครใช้งานโดยใช้ Social ได้
User Management
เป็นเรื่องของการจัดการกับผู้ใช้งาน ไม่ว่าจะเป็นการดู Log, เพิ่ม/แก้ไข/ลบ ข้อมูล หรือแม้กระทั่งการ Reset Password ก็ทำได้ในหน้านี้
Audit Logs
เป็นเหตุการณ์ต่าง ๆ ที่ทาง Logto เก็บไว้ให้
เรากล่าวถึงฟีเจอร์และเมนูหลัก ๆ ไปพอสมควรแล้ว เรามาดูข้อดีข้อเสียกัน
ข้อดี
- ใช้งานง่าย
- ประหยัดเวลา
- ทดสอบและเชื่อมต่อกับภายนอกได้ง่าย
ข้อเสีย
- การสมัครสมาชิกดันแยกกัน ไม่รู้ว่าแก้ไขได้เปล่า ไม่งั้นต้องเขียนเพิ่ม ก็คือ เวลาเราเลือกสมัครเป็น Username, Email, Phone number ทั้งหมดจะแยกออกจากกันหมด ทำให้บางทีเวลาเราจะทำ ต้องเลือกอย่างใดอย่างหนึ่ง ไม่งั้นเราต้องเขียนโค้ดเพิ่มในส่วนของการสมัครสมาชิกให้มีทั้งกรอก Username, Email, Phone number รวมเลย และเขียนเช็คแยกอีกที
- ต้องเรียนรู้เกี่ยวกับ Service ต่าง ๆ ที่ต้องการเชื่อมต่อ เช่น Email ต้องมี Domain และอาจต้องมีการตั้งค่า DNS เพิ่มเติม ส่วนการ Authen ด้วย Social ต่าง ๆ ต้องไปดูแต่ละ Social ว่าทำอย่างไร
เอาล่ะ จบไปแล้วกับการรีวิว Logto ตัวช่วยสำหรับการทำระบบ Login เป็นอย่างไรกันบ้าง ต้องบอกว่าบทความนี้แค่มารีวิวให้ดูเฉย ๆ ว่าทำอะไรได้บ้าง เดี๋ยวถ้ามีโอกาสจะมาเขียนวิธีติดตั้ง วิธีใช้งาน วิธีการเชื่อมต่อต่าง ๆ ว่าเป็นอย่างไร สำหรับวันนี้ สวัสดีครับ
ช่องทางการติดต่อ
Email: [email protected]
Website: https://blog.tichaky.com/
Facebook: https://www.facebook.com/tichaky
