Logto x Hasura: วิธีใช้โซลูชันโอเพ่นซอร์ส auth + GraphQL เพื่อเพิ่มประสิทธิภาพให้โครงการของคุณ

บทนำ#

เมื่อต้องทำโครงการใหม่ คุณมักไม่สามารถข้ามสิ่งนี้ไปได้: APIs, การรับรองตัวตน + การจัดการสิทธิ์, อัตลักษณ์, และการลงชื่อเข้าใช้ของผู้ใช้ปลายทาง มันเคยเป็นเรื่องยากในการเริ่มต้นสิ่งเหล่านี้เพราะว่ามีแนวคิดและเทคโนโลยีมากมายที่แพร่หลาย: RESTful/GraphQL, หน้าเว็บ, ลูกค้าพื้นเมือง, การเชื่อมต่อลูกค้ากับ APIs, แนวทางปฏิบัติที่ดีที่สุดด้านการรับรองตัวตนเพื่อสร้างความสมดุลระหว่างความปลอดภัยและประสบการณ์ของผู้ใช้ เป็นต้น

นอกจากนี้ งานส่วนใหญ่ก็ยัง “ซ้ำซ้อน” ฉันหมายถึงมันจำเป็นและคล้าย ๆ กันในเกือบทุกโครงการ มีการแก้ไขเล็กน้อย

ฟังดูน่ากลัวและน่าเบื่อใช่ไหม? อย่าตื่นตระหนก ทุกวันนี้เรามีโอเพ่นซอร์สแล้ว ด้วยสองโครงการโอเพ่นซอร์สที่กล่าวถึงข้างล่างนี้ สิ่งต่างๆ จะไม่ซับซ้อนอีกต่อไป :

• Logto: ช่วยคุณสร้างระบบลงชื่อเข้าใช้ การรับรองตัวตน และอัตลักษณ์ของผู้ใช้ภายในไม่กี่นาที
• Hasura: APIs GraphQL ที่เร็วแรง ทันใจ และควบคุมสิทธิ์การเข้าถึงอย่างละเอียด

ในบทความนี้เราจะเน้นการเชื่อมต่อระหว่าง Logto และ Hasura ซึ่งจะช่วยให้คุณสามารถใช้ระบบรับรองตัวตน การจัดการสิทธิ์ และ GraphQL APIs ได้อย่างราบรื่น ดังนั้นคุณสามารถกระโดดเข้าสู่ธุรกิจของคุณได้อย่างรวดเร็วโดยไม่ต้องเรียนรู้เรื่องซับซ้อนยากเย็นนักวิทยาศาสตร์

เริ่มต้นใช้งาน#

ข้อกำหนดเบื้องต้น#

เนื่องจากทั้ง Logto และ Hasura มีคู่มือเริ่มต้นที่ดี เราสมมติว่าคุณอ่านแล้วและมีความรู้พื้นฐานแล้ว การเข้าถึงอินสแตนซ์ที่กำลังทำงานของทั้งคู่เป็นสิ่งจำเป็น

เราสมมติว่า endpoints ที่เข้าถึงได้คือ:

• Logto: http://localhost:3001
• Hasura: http://localhost:8080

นอกจากนี้ เราสมมติว่าคุณมีแพลตฟอร์มและเฟรมเวิร์คที่ต้องการเพื่อสร้างแอปไคลเอนต์ เช่น React หรือ Next.js

ตั้งค่า API ใน Logto#

ในแถบด้านซ้ายของ Logto Admin Console คลิก “ทรัพยากร API” แล้วคุณจะเห็นหน้าการจัดการทรัพยากร API

จากนั้นคลิกปุ่มใหญ่ “+ สร้างทรัพยากร API” ที่มุมด้านขวาบน ในโมดอลที่เปิดขึ้น ให้ป้อน Hasura สำหรับชื่อ API และ https://hasura.api สำหรับตัวระบุ API

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

คลิก “สร้างทรัพยากร API” และมันจะแสดงข้อความระบุว่าทรัพยากรถูกสร้างขึ้นเรียบร้อยแล้ว นั่นคือตอนนี้เราต้องการเท่านั้นใน Logto

สร้างบทบาทสำหรับ Hasura#

เพื่อใช้ประโยชน์จากการจัดสิทธิ์ของ Hasura เรากำลังจะสร้างบทบาทใน Logto และบทบาทเหล่านั้นจะสอดคล้องกับบทบาทของ Hasura

อย่าลืมกำหนดบทบาทให้กับผู้ใช้

เปิดการตรวจสอบสิทธิ์ webhook ใน Hasura#

Hasura ใช้การจัดการสิทธิ์เข้าถึงแบบใช้บทบาท ซึ่งจัดการเรื่องการอนุญาตาี ดังนั้นเราจำเป็นต้องตรวจสอบเรื่องการยืนยันตัวตนเท่านั้น โดยรองรับสองวิธี: Webhook และ JWT เราเลือก webhook เพราะมันยืดหยุ่นกว่า

ในการเปิดการตรวจสอบสิทธิ์ webhook คุณต้องตั้งค่ารหัสผ่าน admin และ endpoint ของ auth hook

• รหัสผ่าน admin ใช้สำหรับการเข้าถึง admin ของ Hasura เมื่อส่งคำขอ จะต้องใช้ก่อนเปิดการตรวจสอบสิทธิ์ webhook จำไว้ว่าต้องเก็บไว้อย่างปลอดภัย และอย่าใช้ในโปรดักชัน
• endpoint ของ auth hook คือ URL สำหรับส่งคำขอการรับรองตัวตน

คุณสามารถตั้งค่าผ่าน ตัวแปรสภาพแวดล้อม:

คุณอาจสังเกตเห็นว่าเราใช้ตัวระบุ API ที่กรอกใน Logto เพื่อสร้าง endpoint ของ auth hook เพื่อให้แน่ใจว่าผู้ใช้ผ่าน token bearer ที่ถูกต้องแทนที่จะเป็น token สุ่มที่อาจมาจากผู้ไม่หวังดี

คุณจำเป็นต้องอัปเดต endpoint ของ auth hook หากคุณมี endpoint Logto หรือ indicator API ที่ต่างออกไป สมมติว่าคุณมี https://logto.domain.com เป็น endpoint Logto และ https://graphql.domain.com เป็นตัวระบุ API จากนั้นมันจะเป็น:

จากนี้ไป ทุกคำขอ GraphQL ที่ส่งมา Hasura จะนำ headers ของคำขอทั้งหมดไป withto auth hook ของ Logto และ Logto จะตอบกลับอย่างถูกต้อง

ส่งคำขอ GraphQL ที่มีการป้องกัน#

สรุป#

เนื่องจากเราไม่จะใช้รหัสผ่าน admin ของ Hasura ในโปรดักชัน ทุกคำขอ GraphQL จึงมีการป้องกันด้วย headers ต่อไปนี้:

• Authorization token bearer มาตรฐานที่ Logto สร้างขึ้น
• Expected-Role บทบาทที่คุณต้องการให้ Logto แสดงในคำตอบของ auth hook

headers Authorization ต้องการ Access Token ที่ถูกต้องในรูปแบบ JWT พร้อมด้วยตัวระบุ API ของ Hasura เป็น audience เมื่อเราทบทวนทุกอย่างนี้แล้วอาจดูยากที่จะจำและประกอบสิ่งเหล่านี้ทั้งหมด โชคดีที่เรามี Logto SDKs ช่วยในส่วนที่ยากๆ นี้

ผสานรวม Logto SDK#

ทำตาม คู่มือการผสานรวม เพื่อผสานรวม Logto SDK ในแอปไคลเอนต์ของคุณ มันไม่เพียงแค่ให้ความสามารถในการสร้าง Access Token ที่ถูกต้องสำหรับคำขอ GraphQL เท่านั้น แต่ยังให้ประสบการณ์การลงชื่อเข้าใช้ที่ราบรื่นให้กับผู้ใช้ของคุณอีกด้วย

เมื่อคุณทำตามคู่มือเสร็จแล้ว เราต้องทำการปรับแก้แบบเล็กๆ ใน LogtoConfig: เพิ่มตัวระบุ API ที่คุณสร้างใน Logto Admin Console ไปที่ resources การใช้ React SDK เป็นตัวอย่าง:

ส่งคำขอ#

ในที่สุด! หลังจากที่ผู้ใช้ลงชื่อเข้าใช้ ใช้ getAccessToken() ใน Logto SDK เพื่อดึง Access Token สำหรับคำขอ Hasura GraphQL:

สรุป#

ด้วยความพยายามข้างบนนี้ เราสามารถจัดการกับสิ่งที่ไม่สามารถข้ามได้ในบทนำสำเร็จ:

• endpoint GraphQL API ที่ขับเคลื่อนด้วยโครงร่างฐานข้อมูล
• บริการรับรองตัวตนและอัตลักษณ์บนพื้นฐานโปรโตคอล OIDC
• การจัดการสถานะการลงชื่อเข้าใช้ของผู้ใช้ปลายทางและการจัดการสถานะ auth ที่สมบูรณ์
• การเข้าถึง API ที่มีการป้องกันบนพื้นฐานอัตลักษณ์ของผู้ใช้และบทบาท

ไม่ยากเกินไปใช่ไหม? หากคุณพบปัญหาใด ๆ อย่าลังเลที่จะร่วมเข้าไปในเซิร์ฟเวอร์ discord ของ Logto หรือ Hasura เพื่อแชทสดกับทีมงาน