ปกป้อง API ของคุณที่สร้างด้วย Express.js ด้วย JWT และ Logto

บทนำ#

เมื่อตัวคุณกำลังพัฒนาแอปพลิเคชันเว็บ เป็นสิ่งสำคัญอย่างยิ่งที่จะต้องปกป้องจุดปลายทาง API ของคุณจากการเข้าถึงที่ไม่ได้รับอนุญาต ลองจินตนาการว่าคุณกำลังสร้างเว็บไซต์ชอปปิ้งออนไลน์ แน่นอนว่าคุณไม่ต้องการมิจฉาชีพทางไซเบอร์มาโกง API ของคุณ

สมมติว่าคุณได้สร้างแอปพลิเคชัน Express.js ที่มีการยืนยันตัวตนผู้ใช้แล้ว ผู้ใช้ต้องลงชื่อเข้าใช้ก่อนที่จะดำเนินการบางอย่าง หากยังไม่ได้ คุณสามารถเริ่มต้นการเดินทางของคุณด้วย Logto ซึ่งต้องใช้เพียงไม่กี่บรรทัดของโค้ดเพื่อจัดตั้งกระบวนการยืนยันตัวตนผู้ใช้

อย่างไรก็ตาม แม้หลังจากการยืนยันตัวตนผู้ใช้แล้ว คุณยังมีทางเลือกหลากหลายวิธีในการปกป้องจุดปลายทางของ API ของคุณ น่าเสียดายที่ตัวเลือกส่วนใหญ่มีข้อเสียดังนี้:

• การยืนยันตัวตนแบบเซสชัน: ผูก API ของคุณกับที่เก็บเซสชัน ซึ่งไม่ขยายขนาดได้ดีและไม่เหมาะกับบริการไมโคร
• การเรียกบริการการยืนยันตัวตน: ซึ่งเพิ่มการเรียกเครือข่ายเพิ่มเติม ทำให้ความล่าช้าเพิ่มขึ้นและค่าใช้จ่าย บางบริการการยืนยันตัวตนยังคิดค่าบริการตามปริมาณการเรียก API ซึ่งอาจทำให้ค่าใช้จ่ายสูง

ในบทแนะนำนี้ เราจะแสดงให้คุณเห็นวิธีเสริมความแข็งแกร่งให้กับจุดปลายทาง API ของคุณด้วย JSON Web Tokens (JWT) และ Logto โดยวิธีนี้มีความสามารถในการขยายขนาดและค่าใช้จ่ายเพิ่มเติมที่ต่ำมาก

สิ่งที่ต้องมีก่อน#

ก่อนจะเริ่มต้น ตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้:

• บัญชี Logto หากคุณยังไม่มี สามารถ สมัครสมาชิกได้ฟรี
• โปรเจกต์ Express.js ที่ต้องการการป้องกัน API และแอปพลิเคชันไคลเอนต์ที่ใช้งาน API
• ความคุ้นเคยพื้นฐานกับ JSON Web Token (JWT)

กำหนดทรัพยากร API ของคุณใน Logto#

Logto ใช้ประโยชน์เต็มที่จาก RFC 8707: ตัวระบุทรัพยากรสำหรับ OAuth 2.0 เพื่อรักษาความปลอดภัยของจุดปลายทาง API ของคุณ หมายความว่าคุณสามารถกำหนดทรัพยากร API ของคุณโดยใช้ URL จริงของพวกมัน

ไปที่แท็บ "API resources" ใน Logto Console และคลิก "Create API resource" เพื่อสร้างใหม่ ตัวอย่างเช่น หากคุณต้องการปกป้องจุดปลายทาง /api/products คุณสามารถใช้ URL https://yourdomain.com/api/products เป็นตัวระบุ

รับโทเค็นการเข้าถึงในแอปพลิเคชันไคลเอนต์ของคุณ#

เพื่อดำเนินการต่อ คุณจะต้องผสานรวม Logto SDK ในแอปพลิเคชันไคลเอนต์ของคุณ แอปพลิเคชันนี้อาจแตกต่างจาก Express.js ด้านหลังของคุณ ตัวอย่างเช่น อาจมีแอป React ที่ใช้ Express.js เป็นเซิร์ฟเวอร์ API ด้านหลัง

คุณจะต้องปรับแต่งการกำหนดค่า Logto SDK เพื่อบอก Logto ว่าคุณต้องการขอโทเค็นการเข้าถึงสำหรับ API ของคุณในกรานต์นี้ นี่คือตัวอย่างใช้ React:

เมื่อผู้ใช้ลงชื่อเข้ากับ Logto isAuthenticated ภายใน Logto SDK จะกลายเป็น true:

ขณะนี้ คุณสามารถใช้เมธอด getAccessToken เพื่อดึงโทเค็นการเข้าถึงสำหรับ API ของคุณ:

สุดท้าย รวมโทเค็นการเข้าถึงนี้ในส่วนหัว Authorization เมื่อทำการเรียกถึง API ของคุณ:

ตรวจสอบโทเค็นการเข้าถึงใน API ของคุณ#

ในแอปพลิเคชัน Express.js ของคุณ ติดตั้งไลบรารี jose สำหรับการตรวจสอบ JWT:

เนื่องจากเรากำลังใช้การยืนยันตัวตนแบบ Bearer ให้ดึงโทเค็นการเข้าถึงจากส่วนหัว Authorization:

จากนั้น สร้าง middleware เพื่อตรวจสอบโทเค็นการเข้าถึง:

คุณสามารถใช้ middleware นี้เพื่อปกป้องจุดปลายทาง API ของคุณ:

ด้วยวิธีนี้ คุณไม่จำเป็นต้องติดต่อเซิร์ฟเวอร์ Logto ทุกครั้งที่มีคำร้องขอเข้ามาแทนที่จะทำอย่างนั้น คุณจะดึงชุดคีย์เว็บ JSON (JWKS) จากเซิร์ฟเวอร์ Logto ครั้งเดียวและตรวจสอบโทเค็นการเข้าถึงภายในเครื่อง

การควบคุมการเข้าถึงตามบทบาท#

จนถึงขณะนี้ เราได้ตรวจสอบเพียงว่าผู้ใช้ได้ลงชื่อเข้ากับ Logto แล้ว เราก็ยังไม่ทราบว่าผู้ใช้นั้นมีสิทธิ์ที่เหมาะสมในการเข้าถึงจุดปลายทาง API หรือไม่ นี่เป็นเพราะ Logto อนุญาตให้ใครก็ได้ขอโทเค็นการเข้าถึงสำหรับทรัพยากร API ที่มีอยู่

เพื่อแก้ไขปัญหานี้ เราสามารถใช้การควบคุมการเข้าถึงตามบทบาท (RBAC) ได้ ใน Logto คุณสามารถกำหนดบทบาทและมอบหมายสิทธิ์ให้กับพวกเขา ค้นหา บทเรียนนี่ เพื่อเรียนรู้วิธีการกำหนดบทบาทและสิทธิ์ใน Logto

หลังจากกำหนดบทบาทและสิทธิ์แล้ว คุณสามารถเพิ่มตัวเลือก scopes ให้กับคอมโพเนนต์ LogtoProvider:

จากนั้น Logto จะออกโทเค็นการเข้าถึงเท่านั้นที่มีสโคปที่เหมาะสมให้กับผู้ใช้ ตัวอย่างเช่น หากผู้ใช้มีสโคป read:products เท่านั้น โทเค็นการเข้าถึงจะมีเพียงสโคปนั้น:

หากผู้ใช้มีทั้งสโคป read:products และ write:products โทเค็นการเข้าถึงจะมีทั้งสองสโคปโดยมีเว้นวรรคเป็นตัวคั่น:

ในแอปพลิเคชัน Express.js ของคุณ คุณสามารถตรวจสอบว่าโทเค็นการเข้าถึงมีสโคปที่ถูกต้องก่อนอนุญาตให้เข้าถึงจุดปลายทาง API:

สรุป#

การปกป้องจุดปลายทาง API ขณะที่ยังคงความสามารถในการขยายขนาดไม่ได้เป็นเรื่องง่ายเลย ที่ Logto เราพยายามอย่างยิ่งที่จะทำให้การยืนยันตัวตนของคำร้องขอเป็นเรื่องง่ายสำหรับนักพัฒนา ทำให้คุณสามารถมุ่งเน้นไปที่ตรรกะทางธุรกิจของคุณได้มากขึ้น

หากมีคำถามใด ๆ สามารถเข้าร่วม เซิร์ฟเวอร์ Discord ของเราได้ ชุมชนของเรายินดีช่วยเหลือเสมอ