บทนำ#
เมื่อต้องทำโครงการใหม่ คุณมักไม่สามารถข้ามสิ่งนี้ไปได้: 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 เพื่อแชทสดกับทีมงาน
