[Logto](https://logto.io/) คือผู้ให้บริการการตรวจสอบสิทธิ์ระบุตัวตนที่ทันสมัยซึ่งนำเสนอการสนับสนุนการล็อกอินที่ปลอดภัย ครอบคลุม และใช้งานง่ายสำหรับแอปพลิเคชัน นอกจากนี้ยังมี SDK จำนวนมากและคำแนะนำในการผสานรวมในหลากหลายกรอบงานและภาษาโปรแกรม ทำให้คุณสามารถผสานรวมบริการตรวจสอบสิทธิ์ระบุตัวตนระดับองค์กรเข้าไปในแอปพลิเคชันของคุณได้อย่างราบรื่นในไม่กี่นาที บทความนี้มุ่งเน้นไปที่การอธิบายวิธีผสานรวม Supabase กับ Logto ## พื้นฐานของ Supabase Supabase ใช้ [การรักษาความปลอดภัยระดับแถวของ Postgres](https://www.postgresql.org/docs/current/ddl-rowsecurity.html) เพื่อควบคุมสิทธิ์การเข้าถึงข้อมูล ในคำง่าย ๆ โดยการสร้างนโยบายการรักษาความปลอดภัยระดับแถวสำหรับตารางในฐานข้อมูล เราสามารถจำกัดและจัดการว่าใครสามารถอ่าน เขียน และปรับปรุงข้อมูลในตารางได้ สมมติว่าคุณมีตารางชื่อ "posts" ในฐานข้อมูลของคุณ ซึ่งมีเนื้อหาตามที่แสดงด้านล่าง: Posts table

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

จากนั้น เมื่อเราใช้ SDK ของ Supabase เพื่อทำการร้องขอ Supabase เราจะใช้ความลับนี้ในการสร้าง JWT ของเราและแนบเป็นหัวข้อการตรวจสอบสิทธิ์ในการร้องขอ (โปรดทราบว่ากระบวนการนี้เกิดขึ้นภายในบริการแซคเอนด์ของแอปพลิเคชันของคุณ และความลับของ JWT ไม่ควรถูกเปิดเผยให้แก่บุคคลภายนอก) ```jsx import { createClient } from '@supabase/supabase-js'; import { sign } from 'jsonwebtoken'; / * หมายเหตุ: * คุณสามารถค้นหา SUPABASE_URL, SUPABASE_ANON_KEY ในที่เดียวกับที่คุณพบ JWT Secret */ const SUPABASE_URL = process.env.SUPABASE_URL; const SUPABASE_ANON_KEY = process.env.SUPABASE_ANON_KEY; const SUPABASE_JWT_SECRET = process.env.SUPABASE_JWT_SECRET; export const getSupabaseClient = (userId) => { const jwtPayload = { userId, }; const jwt = sign(jwtPayload, SUPABASE_JWT_SECRET, { expiresIn: '1h', // แค่เพื่อการสาธิต }); const client = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, { global: { headers: { Authorization: `Bearer ${jwt}`, }, }, }); return client; }; ``` ถัดไป ไปที่ตัวแก้ไข SQL ในแดชบอร์ดของ Supabase และสร้างฟังก์ชันเพื่อดึง userId ที่ส่งมาในการร้องขอ: Create get user ID function

โค้ดที่ใช้ในภาพมีดังนี้: ```sql create or replace function auth.user_id() returns text as $$ select nullif(current_setting('request.jwt.claims', true)::json->>'userId', '')::text; $$ language sql stable; ``` ตามที่แสดงในโค้ด ใน 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` ของโค้ดด้านล่าง ป้อน: ```sql auth.user_id() = user_id ``` Create RLS policy

โดยการใช้ประโยชน์จากนโยบายเหล่านี้ การควบคุมการเข้าถึงข้อมูลภายใน Supabase ได้รับการบรรลุ ในแอปพลิเคชันจริง คุณจะสร้างนโยบายต่าง ๆ เพื่อจำกัดการกระทำของผู้ใช้ เช่น การแทรกและการปรับปรุงข้อมูล อย่างไรก็ตาม นี้อยู่นอกกรอบของบทความนี้ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับความปลอดภัยระดับแถว (RLS) โปรดดูที่ [ปกป้องข้อมูลของคุณด้วยความปลอดภัยระดับแถวของ Postgres](https://supabase.com/docs/guides/database/postgres/row-level-security) ### กระบวนการผสานรวมพื้นฐานกับ Logto ตามที่กล่าวไว้ก่อนหน้าเนื่องจาก Supabase ใช้ RLS สำหรับการควบคุมการเข้าถึง การรวมกับ Logto (หรือบริการการตรวจสอบสิทธิ์อื่น ๆ) จะต้องได้รับ user id ของผู้ใช้ที่ได้รับอนุญาตและส่งไปยัง Supabase กระบวนการทั้งหมดแสดงอยู่ในแผนภาพด้านล่าง: ```mermaid sequenceDiagram Participant U as End user Participant Logto Participant B as App backend service Participant Supabase U->>Logto: Sign in with Logto Logto-->>U: `access_token` U->>B: Request data with `access_token` B->>B: Retrieve `user_id` from `access_token` B->>B: Generate jwt by `user_id` & `Supabase JWT secret` B->>Supabase: Request data with jwt Supabase-->>B: Responded data B-->>U: Responded data ``` ถัดไป เราจะอธิบายวิธีผสานรวม Logto กับ Supabase ตามแผนภาพกระบวนการนี้ ## การผสานรวม Logto Logto มีคำแนะนำการผสานรวมสำหรับกรอบงานต่าง ๆ และภาษาโปรแกรมต่าง ๆ โดยทั่วไป แอปที่สร้างด้วยกรอบงานและภาษานี้ตกอยู่ในหมวดหมู่เช่นแอปพื้นเมือง, SPA (แอปเพจเดี่ยว), แอปเว็บแบบดั้งเดิม และแอป M2M (เครื่องถึงเครื่อง) คุณสามารถเยี่ยมชมหน้า [การเริ่มต้นใช้งานอย่างรวดเร็วของ Logto](https://docs.logto.io/quick-starts/) เพื่อผสานรวม Logto เข้ากับแอปพลิเคชันของคุณตามกองเทคโนโลยีที่คุณใช้ จากนั้นทำตามคำแนะนำด้านล่างเพื่อผสานรวม Logto เข้ากับโครงการของคุณตามประเภทของแอปพลิเคชันของคุณ ### แอปพื้นเมืองหรือ SPA ทั้งแอปพื้นเมืองและ SPA ทำงานบนอุปกรณ์ของคุณและข้อมูลรับรอง (token เข้าถึง) ที่ได้รับหลังจากการล็อกอินจะถูกจัดเก็บไว้ในอุปกรณ์ของคุณ ดังนั้นเมื่อคุณผสานรวมแอปของคุณกับ Supabase คุณจำเป็นต้องติดต่อกับ Supabase ผ่านบริการแซคเอนด์ของคุณเนื่องจากคุณไม่สามารถเปิดเผยข้อมูลที่ละเอียดอ่อน (เช่น ความลับของ JWT ของ Supabase) บนอุปกรณ์ของผู้ใช้แต่ละคน สมมติคุณกำลังสร้าง SPA ของคุณโดยใช้ React และ Express คุณได้ผสานรวม Logto เข้ากับแอปพลิเคชันของคุณเรียบร้อยแล้วโดยทำตาม [คู่มือ SDK ของ Logto React](https://docs.logto.io/quick-starts/react/) (คุณสามารถอ้างอิงถึงโค้ดใน [ตัวอย่าง react ของเรา](https://github.com/logto-io/js/tree/master/packages/react-sample)). นอกจากนี้ คุณได้เพิ่มการยืนยัน token เข้าถึงของ Logto ไปยังเซิร์ฟเวอร์แบคเอนด์ของคุณตามการเอกสาร [ป้องกัน API ของคุณบน Node (Express)](https://docs.logto.io/docs/recipes/protect-your-api/node/) ถัดไป คุณจะใช้ token เข้าถึงที่ได้รับจาก Logto เพื่อขอข้อมูลผู้ใช้จากเซิร์ฟเวอร์แบคเอนด์ของคุณ: ```jsx import { useLogto } from '@logto/react'; import { useState, useEffect } from 'react'; import PostList from './PostList'; const endpoint = ''; const resource = ''; function PostPage() { const { isAuthenticated, getAccessToken } = useLogto(); const [posts, setPosts] = useState(); useEffect(() => { const fetchPosts = async () => { const response = await fetch(endpoint, { headers: { Authorization: `Bearer ${await getAccessToken(resource)}`, }, }); setPosts(response.json()); }; if (isAuthenticated) { void fetchPosts(); } }, [isAuthenticated, getAccessToken]); return ; } export default PostPage; ``` ในเซิร์ฟเวอร์แบคเอนด์ของคุณ คุณได้สกัด ID ของผู้ใช้ที่ล็อกอินจาก token เข้าถึงแล้วโดยใช้ middleware: ```jsx // auth-middleware.ts import { createRemoteJWKSet, jwtVerify } from 'jose'; //... export const verifyAuthFromRequest = async (ctx, next) => { // สกัด token const token = extractBearerTokenFromHeaders(ctx.request.headers); const { payload } = await jwtVerify( token, // Token ของ Bearer ดิบที่สกัดจากหัวข้อการร้องขอ createRemoteJWKSet(new URL('https:///oidc/jwks')), // สร้าง jwks โดยใช้ jwks_uri ที่สอบถามจากเซิร์ฟเวอร์ Logto { // ผู้ออกที่คาดหวังของ token ควรถูกออกโดยเซิร์ฟเวอร์ Logto issuer: 'https:///oidc', // ผู้ตรวจสอบ token ที่คาดหวัง ควรเป็นตัวชี้วัดของทรัพยากรของ API ปัจจุบัน audience: '', } ); // หากคุณใช้ RBAC assert(payload.scope.includes('some_scope')); // ตรรกะเพลโหลดที่กำหนดเอง ctx.auth = { userId: payload.sub, }; return next(); }; ``` ตอนนี้ คุณสามารถใช้ `getSupabaseClient` ที่อธิบายด้านบนเพื่อแนบ `userId` ไปยัง JWT ที่ใช้ในการร้องขอ Supabase ที่ตามมาได้ หรือคุณสามารถสร้าง middleware เพื่อสร้างลูกค้าของ Supabase สำหรับการร้องขอที่จำเป็นต้องติดต่อกับ Supabase: ```jsx export const withSupabaseClient = async (ctx, next) => { ctx.supabase = getSupabaseClient(ctx.auth.userId); return next(); }; ``` ในกระบวนการที่ตามมา คุณสามารถเรียกใช้ `ctx.supabase` เพื่อติดต่อกับ Supabase ได้โดยตรง: ```jsx const fetchPosts = async (ctx) => { cosnt { data } = await ctx.supabase.from('posts').select('*'); return data; } ``` ในโค้ดนี้ Supabase จะส่งคืนเฉพาะข้อมูลโพสต์ที่เป็นของผู้ใช้ปัจจุบันตามนโยบายที่ตั้งไว้ก่อนหน้า ### แอปเว็บแบบดั้งเดิม ความแตกต่างหลักระหว่างแอปเว็บแบบดั้งเดิมและแอปพื้นเมืองหรือ SPA คือแแอปเว็บแบบดั้งเดิมจะเรนเดอร์และอัปเดตหน้าเฉพาะที่เซิร์ฟเวอร์เว็บ ดังนั้น ข้อมูลรับรองของผู้ใช้จะถูกจัดการโดยตรงโดยเซิร์ฟเวอร์เว็บ ในขณะที่แอปพื้นเมืองและ SPA จะจัดเก็บไว้ในอุปกรณ์ของผู้ใช้ เมื่อคุณผสานรวม Logto กับแอปเว็บแบบดั้งเดิมใน Supabase คุณสามารถดึง ID ของผู้ใช้ที่เข้าสู่ระบบจากแซคเอนด์ได้โดยตรง โดยการใช้โปรเจ็กต์ Next.js เป็นตัวอย่าง หลังจากที่คุณผสานรวม Logto กับโปรเจ็กต์ของคุณโดยทำตาม [คู่มือ SDK ของ Next.js](https://docs.logto.io/quick-starts/next-app-router/) คุณสามารถใช้ SDK ของ Logto เพื่อดึงข้อมูลผู้ใช้และสร้าง JWT ที่เกี่ยวข้องสำหรับการติดต่อกับ Supabase ```jsx import { getLogtoContext } from '@logto/next-server-actions'; import { logtoConfig } from '@/logto'; import { getSupabaseClient } from '@/utils'; import PostList from './PostList'; export default async function PostPage() { const { cliams } = await getLogtoContext(logtoConfig); // `sub` value ใน `cliams` คือ user id const supabase = getSupabaseClient(cliams.sub); const { data: posts } = await supabase.from('posts').select('*'); return ; } ``` ### แอปเครื่องถึงเครื่อง เครื่องถึงเครื่อง (M2M) มักจะใช้เมื่อแอปของคุณต้องการสื่อสารโดยตรงกับเซิร์ฟเวอร์ทรัพยากร เช่น บริการที่ดึงโพสต์ประจำวันเป็นต้น คุณสามารถใช้ [เครื่องถึงเครื่อง: Auth with Logto](https://docs.logto.io/quick-starts/m2m/) คู่มือสำหรับการตรวจสอบสิทธิ์แอปเครื่องถึงเครื่อง การผสานรวมระหว่าง Supabase และแอปเครื่องถึงเครื่องนั้นคล้ายคลึงกับแอปพื้นเมืองและ SPA (ตามที่อธิบายในส่วน "แอปพื้นเมืองหรือแอปเพจเดี่ยว"). มันเกี่ยวข้องกับการรับ token เข้าถึงจาก Logto แล้วตรวจสอบด้วย API แซคเอนด์ที่ได้รับการป้องกัน อย่างไรก็ตาม เรื่องสำคัญที่ต้องทราบว่าแอปพื้นเมืองและ SPA มักจะถูกออกแบบมาเพื่อผู้ใช้ปลายทาง ดังนั้น ID ของผู้ใช้ที่ได้รับจะแทนผู้ใช้เอง แต่ token เข้าถึงของแอปเครื่องถึงเครื่องจะแทนแอปเอง และฟิลด์ `sub` ในเพลโหลดของ token เข้าถึงคือตัว ID ของแอป M2M ไม่ใช่ผู้ใช้เฉพาะ ดังนั้นในระหว่างการพัฒนา สำคัญที่จะระบุว่าใดที่ตั้งใจจะให้กับแอปเครื่องถึงเครื่อง ยิ่งไปกว่านั้น หากคุณต้องการให้แอป M2M เฉพาะตัวเข้าถึง Supabase ในนามของบริการทั้งหมดเพื่อข้ามข้อจำกัด RLS คุณสามารถใช้ความลับ `service_role` ของ Supabase เพื่อสร้างลูกค้า Supabase ที่สามารถเข้าถึงข้อมูลทั้งหมดได้โดยไม่ถูกจำกัดโดยนโยบายความปลอดภัยระดับแถวที่ตั้งขึ้นสำหรับผู้ใช้เฉพาะ คุณสามารถพบความลับ `service_role` ในที่เดียวกับความลับของ JWT: Service role secret

ขณะที่สร้างลูกค้า Supabase ให้ใช้ความลับ `service_role` แล้วลูกค้านี้จะสามารถเข้าถึงข้อมูลทั้งหมดในฐานข้อมูลได้: ```jsx import { createClient } from '@supabase/supabase-js'; // ... const SUPABASE_SERVICE_ROLE_SCRET = process.env.SUPABASE_SERVICE_ROLE_SCRET; const client = createClient(SUPABASE_URL, SUPABASE_SERVICE_ROLE_SCRET, { // ...ตัวเลือก }); ``` ## สรุป ในบทความนี้ เราได้ไปในเชิงลึกเกี่ยวกับการผสานรวม Logto กับ Supabase โดยสอดแทรกความเข้าใจสำคัญและประเด็นสำคัญของการผสานรวม เราสำรวจแนวคิดเช่นการตรวจสอบสิทธิ์ JWT และนโยบายความปลอดภัยระดับแถว แนะนำคุณผ่านกระบวนการของการผสานรวม Logto เข้ากับแอปพลิเคชันที่ใช้ Supabase ของคุณอย่างราบรื่น ด้วยความรู้ที่คุณได้เรียนรู้นั้น หวังว่าคุณจะสามารถเพิ่มความปลอดภัยและฟังก์ชันการทำงานของแอปพลิเคชันของคุณได้อย่างมั่นใจ รวมถึงขยายโครงการของคุณด้วยฟีเจอร์เพิ่มเติมได้