การผสานรวมกับ Supabase

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

บทความนี้มุ่งเน้นไปที่การอธิบายวิธีผสานรวม Supabase กับ Logto

พื้นฐานของ Supabase#

Supabase ใช้ การรักษาความปลอดภัยระดับแถวของ Postgres เพื่อควบคุมสิทธิ์การเข้าถึงข้อมูล ในคำง่าย ๆ โดยการสร้างนโยบายการรักษาความปลอดภัยระดับแถวสำหรับตารางในฐานข้อมูล เราสามารถจำกัดและจัดการว่าใครสามารถอ่าน เขียน และปรับปรุงข้อมูลในตารางได้

สมมติว่าคุณมีตารางชื่อ "posts" ในฐานข้อมูลของคุณ ซึ่งมีเนื้อหาตามที่แสดงด้านล่าง:

ฟิลด์ user_id ในตารางแทนผู้ใช้ที่แต่ละโพสต์ข้อมูลเป็นของ คุณสามารถจำกัดให้แต่ละผู้ใช้สามารถเข้าถึงข้อมูลโพสต์ของตนเองเท่านั้นตามฟิลด์ user_id

อย่างไรก็ตาม ก่อนที่จะสามารถดำเนินการนี้ได้ Supabase จำเป็นต้องสามารถระบุตัวผู้ใช้ที่กำลังเข้าถึงฐานข้อมูลได้

เพิ่มข้อมูลผู้ใช้ลงในคำขอ Supabase#

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

ขั้นแรก เราสามารถรับความลับของ JWT ที่ Supabase จัดหาให้จาก “การตั้งค่าโครงการ” ในแดชบอร์ดของ Supabase:

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

ถัดไป ไปที่ตัวแก้ไข SQL ในแดชบอร์ดของ Supabase และสร้างฟังก์ชันเพื่อดึง userId ที่ส่งมาในการร้องขอ:

โค้ดที่ใช้ในภาพมีดังนี้:

ตามที่แสดงในโค้ด ใน Supabase คุณสามารถดึงเพลโหลดของ JWT ที่เราสร้างขึ้นได้โดยการเรียก request.jwt.claims ฟิลด์ userId ภายในเพลโหลดคือค่าที่เราตั้งขึ้น

ด้วยฟังก์ชันนี้ Supabase สามารถระบุตัวผู้ใช้ที่กำลังเข้าถึงฐานข้อมูล

สร้างนโยบายความปลอดภัยระดับแถว#

ถัดไป เราสามารถสร้างนโยบายความปลอดภัยระดับแถวเพื่อจำกัดให้ผู้ใช้แต่ละคนสามารถเข้าถึงข้อมูลโพสต์ของตนเองเท่านั้นตามฟิลด์ user_id ในตารางโพสต์

1. ไปที่หน้า Table Editor ในแดชบอร์ดของ Supabase และเลือกตารางโพสต์
2. คลิก "Add RLS Policy" ที่ส่วนบนของตาราง
3. ในช่องที่แจ้ง คลิก "Create policy"
4. ใส่ชื่อ Policy Name และเลือกคำสั่ง SELECT Policy
5. ในบล็อก using ของโค้ดด้านล่าง ป้อน:

โดยการใช้ประโยชน์จากนโยบายเหล่านี้ การควบคุมการเข้าถึงข้อมูลภายใน Supabase ได้รับการบรรลุ

ในแอปพลิเคชันจริง คุณจะสร้างนโยบายต่าง ๆ เพื่อจำกัดการกระทำของผู้ใช้ เช่น การแทรกและการปรับปรุงข้อมูล อย่างไรก็ตาม นี้อยู่นอกกรอบของบทความนี้ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับความปลอดภัยระดับแถว (RLS) โปรดดูที่ ปกป้องข้อมูลของคุณด้วยความปลอดภัยระดับแถวของ Postgres

กระบวนการผสานรวมพื้นฐานกับ Logto#

ตามที่กล่าวไว้ก่อนหน้าเนื่องจาก Supabase ใช้ RLS สำหรับการควบคุมการเข้าถึง การรวมกับ Logto (หรือบริการการตรวจสอบสิทธิ์อื่น ๆ) จะต้องได้รับ user id ของผู้ใช้ที่ได้รับอนุญาตและส่งไปยัง Supabase กระบวนการทั้งหมดแสดงอยู่ในแผนภาพด้านล่าง:

ถัดไป เราจะอธิบายวิธีผสานรวม Logto กับ Supabase ตามแผนภาพกระบวนการนี้

การผสานรวม Logto#

Logto มีคำแนะนำการผสานรวมสำหรับกรอบงานต่าง ๆ และภาษาโปรแกรมต่าง ๆ

โดยทั่วไป แอปที่สร้างด้วยกรอบงานและภาษานี้ตกอยู่ในหมวดหมู่เช่นแอปพื้นเมือง, SPA (แอปเพจเดี่ยว), แอปเว็บแบบดั้งเดิม และแอป M2M (เครื่องถึงเครื่อง) คุณสามารถเยี่ยมชมหน้า การเริ่มต้นใช้งานอย่างรวดเร็วของ Logto เพื่อผสานรวม Logto เข้ากับแอปพลิเคชันของคุณตามกองเทคโนโลยีที่คุณใช้ จากนั้นทำตามคำแนะนำด้านล่างเพื่อผสานรวม Logto เข้ากับโครงการของคุณตามประเภทของแอปพลิเคชันของคุณ

แอปพื้นเมืองหรือ SPA#

ทั้งแอปพื้นเมืองและ SPA ทำงานบนอุปกรณ์ของคุณและข้อมูลรับรอง (token เข้าถึง) ที่ได้รับหลังจากการล็อกอินจะถูกจัดเก็บไว้ในอุปกรณ์ของคุณ

ดังนั้นเมื่อคุณผสานรวมแอปของคุณกับ Supabase คุณจำเป็นต้องติดต่อกับ Supabase ผ่านบริการแซคเอนด์ของคุณเนื่องจากคุณไม่สามารถเปิดเผยข้อมูลที่ละเอียดอ่อน (เช่น ความลับของ JWT ของ Supabase) บนอุปกรณ์ของผู้ใช้แต่ละคน

สมมติคุณกำลังสร้าง SPA ของคุณโดยใช้ React และ Express คุณได้ผสานรวม Logto เข้ากับแอปพลิเคชันของคุณเรียบร้อยแล้วโดยทำตาม คู่มือ SDK ของ Logto React (คุณสามารถอ้างอิงถึงโค้ดใน ตัวอย่าง react ของเรา). นอกจากนี้ คุณได้เพิ่มการยืนยัน token เข้าถึงของ Logto ไปยังเซิร์ฟเวอร์แบคเอนด์ของคุณตามการเอกสาร ป้องกัน API ของคุณบน Node (Express)

ถัดไป คุณจะใช้ token เข้าถึงที่ได้รับจาก Logto เพื่อขอข้อมูลผู้ใช้จากเซิร์ฟเวอร์แบคเอนด์ของคุณ:

ในเซิร์ฟเวอร์แบคเอนด์ของคุณ คุณได้สกัด ID ของผู้ใช้ที่ล็อกอินจาก token เข้าถึงแล้วโดยใช้ middleware:

ตอนนี้ คุณสามารถใช้ getSupabaseClient ที่อธิบายด้านบนเพื่อแนบ userId ไปยัง JWT ที่ใช้ในการร้องขอ Supabase ที่ตามมาได้ หรือคุณสามารถสร้าง middleware เพื่อสร้างลูกค้าของ Supabase สำหรับการร้องขอที่จำเป็นต้องติดต่อกับ Supabase:

ในกระบวนการที่ตามมา คุณสามารถเรียกใช้ ctx.supabase เพื่อติดต่อกับ Supabase ได้โดยตรง:

ในโค้ดนี้ Supabase จะส่งคืนเฉพาะข้อมูลโพสต์ที่เป็นของผู้ใช้ปัจจุบันตามนโยบายที่ตั้งไว้ก่อนหน้า

แอปเว็บแบบดั้งเดิม#

ความแตกต่างหลักระหว่างแอปเว็บแบบดั้งเดิมและแอปพื้นเมืองหรือ SPA คือแแอปเว็บแบบดั้งเดิมจะเรนเดอร์และอัปเดตหน้าเฉพาะที่เซิร์ฟเวอร์เว็บ ดังนั้น ข้อมูลรับรองของผู้ใช้จะถูกจัดการโดยตรงโดยเซิร์ฟเวอร์เว็บ ในขณะที่แอปพื้นเมืองและ SPA จะจัดเก็บไว้ในอุปกรณ์ของผู้ใช้

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

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

แอปเครื่องถึงเครื่อง#

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

คุณสามารถใช้ เครื่องถึงเครื่อง: Auth with Logto คู่มือสำหรับการตรวจสอบสิทธิ์แอปเครื่องถึงเครื่อง การผสานรวมระหว่าง Supabase และแอปเครื่องถึงเครื่องนั้นคล้ายคลึงกับแอปพื้นเมืองและ SPA (ตามที่อธิบายในส่วน "แอปพื้นเมืองหรือแอปเพจเดี่ยว"). มันเกี่ยวข้องกับการรับ token เข้าถึงจาก Logto แล้วตรวจสอบด้วย API แซคเอนด์ที่ได้รับการป้องกัน

อย่างไรก็ตาม เรื่องสำคัญที่ต้องทราบว่าแอปพื้นเมืองและ SPA มักจะถูกออกแบบมาเพื่อผู้ใช้ปลายทาง ดังนั้น ID ของผู้ใช้ที่ได้รับจะแทนผู้ใช้เอง แต่ token เข้าถึงของแอปเครื่องถึงเครื่องจะแทนแอปเอง และฟิลด์ sub ในเพลโหลดของ token เข้าถึงคือตัว ID ของแอป M2M ไม่ใช่ผู้ใช้เฉพาะ ดังนั้นในระหว่างการพัฒนา สำคัญที่จะระบุว่าใดที่ตั้งใจจะให้กับแอปเครื่องถึงเครื่อง

ยิ่งไปกว่านั้น หากคุณต้องการให้แอป M2M เฉพาะตัวเข้าถึง Supabase ในนามของบริการทั้งหมดเพื่อข้ามข้อจำกัด RLS คุณสามารถใช้ความลับ service_role ของ Supabase เพื่อสร้างลูกค้า Supabase ที่สามารถเข้าถึงข้อมูลทั้งหมดได้โดยไม่ถูกจำกัดโดยนโยบายความปลอดภัยระดับแถวที่ตั้งขึ้นสำหรับผู้ใช้เฉพาะ

คุณสามารถพบความลับ service_role ในที่เดียวกับความลับของ JWT:

ขณะที่สร้างลูกค้า Supabase ให้ใช้ความลับ service_role แล้วลูกค้านี้จะสามารถเข้าถึงข้อมูลทั้งหมดในฐานข้อมูลได้:

สรุป#

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