តើ​អ្នក​ធ្លាប់​បាន​ទទួល​កញ្ចប់​របស់​អ្នក​ជិត​ខាង​នៅ​ទ្វារ​មុខ​របស់​អ្នក​ដែរ​ឬ​ទេ? (ប្រហែលជាសូម្បីតែបើកវាដោយចៃដន្យ?) ប្រហែលជាអ្នកបានទុកសារជាសំឡេងដ៏រសើបសម្រាប់នរណាម្នាក់ផ្សេងទៀត? ក្នុងនាមជាអ្នកបង្កើតកម្មវិធី វាជាការងាររបស់អ្នកដើម្បីធានាថាទិន្នន័យរសើបដែលបានរក្សាទុកក្នុងកម្មវិធីរបស់អ្នកមិនត្រូវបានគេបញ្ជូនដោយចៃដន្យទៅភាគីផ្សេងទេ។

មាន​បច្ចេកទេស​ជាច្រើន​ដែល​អាច​ប្រើ​បាន​ដើម្បី​រក្សា​ទុក​ទិន្នន័យ​របស់​អតិថិជន​ដោយ​សុវត្ថិភាព ហើយ​ជាច្រើន​មាន​ភាពស្មុគស្មាញ​ខ្ពស់​និង​ពិបាក​ក្នុង​ការ​អនុវត្ត។ តាមឧត្ដមគតិ មនុស្សម្នាក់អាចធានាបាននូវទិន្នន័យអតិថិជនទាំងអស់នៅក្នុងមូលដ្ឋានទិន្នន័យតែមួយ - រក្សាការរចនានៃលក្ខណៈពិសេសនេះសាមញ្ញ និងមានសុវត្ថិភាព។

Row-level security (RLS) គឺ​ជា​សមត្ថភាព​ធានា​សុវត្ថិភាព និង​គ្រប់គ្រង​ការ​ចូល​ទៅ​កាន់​ជួរ​ទិន្នន័យ​ជាក់លាក់​ក្នុង​តារាង​មូលដ្ឋាន​ទិន្នន័យ។ វាគឺជាឧបករណ៍ដ៏មានឥទ្ធិពលដែលអនុញ្ញាតឱ្យអ្នករក្សាទុកទិន្នន័យអតិថិជនរបស់អ្នកទាំងអស់នៅក្នុងមូលដ្ឋានទិន្នន័យតែមួយដោយគ្មានការព្រួយបារម្ភអំពីការលេចធ្លាយទិន្នន័យនៅលើគណនី។ ទោះជាយ៉ាងណាក៏ដោយ ការអនុវត្ត RLS យ៉ាងត្រឹមត្រូវអាចជាដំណើរការដ៏លំបាកមួយដែលពាក់ព័ន្ធនឹងការរួមបញ្ចូលព័ត៌មានលម្អិតនៃការចូលជាមួយនឹងការអនុញ្ញាតមូលដ្ឋានទិន្នន័យរបស់អ្នក។ Neon Authorize សម្រួលដំណើរការនេះដោយបញ្ចូលការផ្ទៀងផ្ទាត់ដោយស្វ័យប្រវត្តិពីអ្នកផ្តល់សេវា OAuth របស់អ្នកជាមួយនឹងមូលដ្ឋានទិន្នន័យ PostgreSQL របស់អ្នក។

Neon Authorize ប្រើប្រាស់ស្រទាប់ផ្ទៀងផ្ទាត់ដែលមានស្រាប់របស់អ្នកដើម្បីកំណត់អត្តសញ្ញាណរាល់អ្នកប្រើប្រាស់ដែលបានចូល និងភ្ជាប់ទិន្នន័យទាំងអស់នៅក្នុងមូលដ្ឋានទិន្នន័យរបស់អ្នកជាមួយនឹងព័ត៌មានសម្ងាត់នៃការចូលរបស់ពួកគេ។ នេះធានាថាទិន្នន័យដែលបានរក្សាទុកក្នុងមូលដ្ឋានទិន្នន័យអាចចូលប្រើបានតែដោយអ្នកប្រើប្រាស់ដែលបានចូលប៉ុណ្ណោះ ហើយមានតែអ្នកប្រើប្រាស់ដែលបានចូលប៉ុណ្ណោះអាចឃើញទិន្នន័យរបស់ពួកគេបាន។

ការបង្រៀននេះនឹងណែនាំអ្នកពីរបៀបបង្កើតកម្មវិធី Remix ដោយប្រើ Clerk ជាស្រទាប់ផ្ទៀងផ្ទាត់។ ស្មៀន គឺជាឧបករណ៍ផ្ទៀងផ្ទាត់ និងគ្រប់គ្រងអ្នកប្រើប្រាស់ដ៏ពេញនិយម។ អ្នកនឹងប្រើ Neon Postgres ជាស្រទាប់ទិន្នន័យរបស់អ្នក ហើយប្រើប្រាស់ Neon Authorize ដើម្បីការពារទិន្នន័យទាំងអស់សម្រាប់អតិថិជនដែលបានចូលនីមួយៗ។ ជួរនីមួយៗក្នុងតារាងនឹងកំណត់អត្តសញ្ញាណអ្នកប្រើប្រាស់ ដែលត្រូវបានផ្តល់ដោយស្មៀន។ មានតែអ្នកដែលបានផ្ទៀងផ្ទាត់ជាមួយ userID ប៉ុណ្ណោះដែលអាចធ្វើអន្តរកម្មជាមួយទិន្នន័យក្នុងជួរបាន។

កម្មវិធីគំរូរបស់យើងគឺសាមញ្ញ - វាកត់ត្រារាល់ការចូលចូលទៅក្នុងមូលដ្ឋានទិន្នន័យ RLS ដោយប្រើលេខសម្គាល់អ្នកប្រើប្រាស់។ នៅពេលដែលទំព័រត្រូវបានផ្ទុក ការចូលចំនួន 10 ចុងក្រោយសម្រាប់អ្នកប្រើប្រាស់ដែលបានផ្ទៀងផ្ទាត់នឹងត្រូវបានបង្ហាញ ហើយគ្មានទិន្នន័យរបស់អ្នកប្រើផ្សេងទៀត (រក្សាទុកក្នុងតារាង PostgreSQL ដូចគ្នា) នឹងលេចឡើង។ តោះចាប់ផ្តើម!

ការបង្កើតកម្មវិធី Remix

ចាប់ផ្តើមដោយបង្កើតកម្មវិធី Remix និងដំឡើងភាពអាស្រ័យដោយប្រើអត្ថបទកូដខាងក្រោម។ សម្រាប់ការណែនាំលម្អិតបន្ថែម សូមមើល ការណែនាំអំពីការចាប់ផ្តើមរហ័ស Remix ។

 ##make a directory and initialise your NPM project mkdir neon-authorize-remix-clerk-app cd neon-authorize-remix-clerk-app npm init -y ## install runtime dependecies for Remix npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom @remix-run/router drizzle-orm npm install @neondatabase/serverless npm install @clerk/remix npm i -D @remix-run/dev vite

ចាប់តាំងពី Remix ប្រើ Vite ដែលជាឧបករណ៍បង្កើត Javascript បង្កើត vite.config.js នៅក្នុងថត root៖

 import { vitePlugin as remix } from "@remix-run/dev"; import { defineConfig } from "vite"; export default defineConfig({ plugins: [remix()], });

មុននឹងធ្វើការអភិវឌ្ឍន៍ណាមួយ យើងត្រូវបង្កើតគណនីនៅ Clerk និង Neon ដើម្បីប្រើប្រាស់សេវាកម្មរបស់ពួកគេ៖

ការបង្កើតករណីស្មៀន និងណេអុង

ស្មៀន

ចូលទៅផ្ទាំងគ្រប់គ្រងស្មៀន ដើម្បីបង្កើតគម្រោងថ្មី។

1. នៅក្នុងការរុករកខាងឆ្វេង សូមជ្រើសរើស API Keys ។

   1. នៅក្នុងប្រអប់ Quick Copy ជ្រើសរើស Remix ហើយចម្លងអថេរបរិស្ថាន។
   2. បិទភ្ជាប់ពួកវាទៅក្នុងឯកសារ .env នៅក្នុងកូដរបស់អ្នក។

2. នៅក្នុងការរុករកខាងឆ្វេង ជ្រើសរើស “ គំរូ JWT ។ ”

   1. បង្កើតគំរូមួយ (ខ្ញុំដាក់ឈ្មោះខ្ញុំថា " neon-remix ")។
   2. ចម្លង JWKS Endpoint URL សម្រាប់ប្រើពេលក្រោយ។

អ៊ីយូន

1. ចូលទៅក្នុងកុងសូល Neon ហើយបង្កើតគម្រោងថ្មីមួយ។

2. ពីម៉ឺនុយរុករកខាងឆ្វេង សូមជ្រើសរើស អនុញ្ញាត ។

3. បង្កើតអ្នកផ្តល់សេវាថ្មី ហើយបិទភ្ជាប់ Clerk JWKS URL ដែលអ្នកបានចម្លងពីស្មៀនមុន។

   
   

   

នៅពេលអ្នកបានបង្កើតឧទាហរណ៍សូមចុច "ចាប់ផ្តើម" ។ បន្ទះចំហៀងនឹងបើកជាមួយនឹងជំហានជាច្រើនដើម្បីបញ្ចប់ការរួមបញ្ចូល Neon Authorize របស់អ្នក។

ការដំឡើងចាប់ផ្តើមផ្តល់ឱ្យអ្នកនូវជំហានដើម្បីរៀបចំគម្រោងផ្តល់សិទ្ធិជាមូលដ្ឋានជាមួយស្មៀន។

 1. Set up Neon Extension and Roles Privileges. Run these steps in the Dashboard. 2. Grant privileges to the roles in the neondb database. 

ការដំឡើងសុវត្ថិភាពកម្រិតជួរដេក

លេខកូដដែលបានផ្តល់គឺសម្រាប់កម្មវិធី todos ។ ជំនួសឱ្យការប្រើប្រាស់កូដ boilerplate ដែលបានផ្តល់ឱ្យពី Neon សម្រាប់កម្មវិធី todos យើងនឹងបង្កើតតារាង login_history ហើយដំឡើង RLS នៅលើវា។ បើក SQL Editor នៅក្នុងផ្ទាំងគ្រប់គ្រង Neon ហើយដំណើរការកូដខាងក្រោម។ តារាង login_history នឹង​ត្រូវ​បាន​ប្រើ​ដើម្បី​ទុក​ពេល​ចូល​សម្រាប់​អ្នក​ប្រើ​នីមួយៗ។

ចំណាំថា login_history មានជួរឈរបីប៉ុណ្ណោះ៖ លេខសម្គាល់ អ្នកប្រើប្រាស់_id និងចូល_at។ ជួរឈរពីរចុងក្រោយនឹងបង្ហាញការចូលថ្មីៗបំផុតនៅក្នុងកម្មវិធី។

 CREATE TABLE login_history ( id bigint generated by default as identity primary key, user_id text not null default (auth.user_id()), login_at timestamp not null default now() ); -- 1st enable row level security for your table ALTER TABLE login_history ENABLE ROW LEVEL SECURITY; -- 2nd create policies for your table CREATE POLICY "Individuals can add login." ON login_history FOR INSERT TO authenticated WITH CHECK ((select auth.user_id()) = user_id); CREATE POLICY "Individuals can view their own logins. " ON login_history FOR SELECT TO authenticated USING ((select auth.user_id()) = user_id);

បន្ថែមអថេរបរិស្ថានដែលបានផ្តល់ទៅ .env របស់អ្នក។

នៅពេលដែលជំហានដំឡើងទាំងនេះត្រូវបានបញ្ចប់ .env របស់អ្នកគួរតែមានអថេរចំនួនបួន៖ ពីរពីស្មៀន និងពីរពីណេអុង៖

 CLERK_PUBLISHABLE_KEY=pk_test_.... CLERK_SECRET_KEY=sk_test_... # Database owner connection string DATABASE_URL='postgresql://neondb_owner:...' # Neon "authenticated" role connection string DATABASE_AUTHENTICATED_URL='postgresql://authenticated@ep-...

បង្កើតកម្មវិធី Remix

ឥឡូវ​នេះ​កម្មវិធី​បាន​ត្រៀម​ខ្លួន​ជា​ស្រេច​ដើម្បី​ត្រូវ​បាន​បង្កើត​ឡើង។ កូដពេញលេញមាននៅលើ GitHub ប៉ុន្តែមុខងារសំខាន់ៗបំផុតត្រូវបានរំលេចនៅទីនេះ។ ស្នូលនៃកម្មវិធីគឺនៅក្នុង app/routes/_index.tsx ៖

 export const loader: LoaderFunction = async (args) => { const { userId, getToken } = await getAuth(args); if (!userId) { return redirect("/sign-in"); } const authToken = await getToken(); console.log(userId); if (!authToken) { return null; } const DATABASE_AUTHENTICATED_URL= process.env.NEXT_PUBLIC_DATABASE_AUTHENTICATED_URL; try { const sql = neon(DATABASE_AUTHENTICATED_URL ?? '', { authToken, }); const loginResponse = await sql(`INSERT INTO login_history ("user_id") VALUES ($1) RETURNING *`,[userId]); // Retrieve last 10 logins const last10LoginsResponse = await sql(`SELECT * FROM login_history WHERE user_id = $1 ORDER BY login_at DESC LIMIT 10`, [userId]); console.log(`loginResponse: ${JSON.stringify(loginResponse)}`); return last10LoginsResponse as Array<LoginHistory>; } catch (error) { console.error(`Error inserting into login_history table: ${error.message}`); console.error(`Error details: ${JSON.stringify(error)}`); throw error; } }

មុខងារ LoaderFunction នៅក្នុងឯកសារ _index.tsx បំពេញភារកិច្ចនៅលើម៉ាស៊ីនមេ មុនពេលបង្ហាញទំព័រសម្រាប់អតិថិជន។ នៅក្នុងកម្មវិធីនេះ កម្មវិធី loader ធ្វើការលើកច្រើននៃកម្មវិធី។

មុខងារដំបូងពិនិត្យមើលថាតើអ្នកប្រើប្រាស់មិនបានចូល ហើយបន្ទាប់មកបញ្ជូនអ្នកប្រើប្រាស់ទៅកាន់ទំព័រ /sign-in ។ ទំព័រចូលអាចត្រូវបានកំណត់រចនាសម្ព័ន្ធនៅក្នុងផ្ទាំងគ្រប់គ្រងស្មៀន ដើម្បីទទួលយកប្រភេទការចូលផ្សេងៗដូចជា Google និងការចូលអ៊ីមែល៖

ដើម្បីបង្កើតទំព័រចូល សូមចូលទៅកាន់ផ្ទាំងគ្រប់គ្រងស្មៀន ហើយរៀបចំវិធីសាស្ត្រចូលចាំបាច់សម្រាប់គម្រោង។

ប្រសិនបើអ្នកប្រើត្រូវបានចូល មុខងារទាញយក userId និង authToken ពីស្មៀន។ តម្លៃទាំងនេះគឺចាំបាច់ដើម្បីធានាថាអ្នកប្រើប្រាស់ត្រូវបានចូល ហើយបន្ទាប់មកអ្នកអាចប្រើ userId ដើម្បីបំពេញជួរនីមួយៗនៅក្នុងមូលដ្ឋានទិន្នន័យរបស់អ្នក។

ដើម្បីធ្វើការផ្លាស់ប្តូរទៅលើមូលដ្ឋានទិន្នន័យដែលមានសុវត្ថិភាព RLS អ្នកត្រូវទាញ DATABASE_AUTHENTCATED_URL ពីអថេរបរិស្ថាន។

តក្កវិជ្ជាស្នូលសម្រាប់ការអនុវត្តសុវត្ថិភាព RLS ស្ថិតនៅក្នុង LoaderFunction ។ ឧទាហរណ៍ SQL Neon ត្រូវបានចាប់ផ្តើមដោយប្រើអថេរបរិស្ថាន និងសញ្ញាសម្គាល់អត្តសញ្ញាណ។ មុខងារ loginResponse ធ្វើការហៅ SQL ហើយបញ្ចូល user_id (និងពេលវេលាបច្ចុប្បន្ន) ទៅក្នុងមូលដ្ឋានទិន្នន័យ PostgreSQL បន្ទាប់មកមុខងារ last10LoginsResponse សួរ DB សម្រាប់ការចូលថ្មីៗបំផុតចំនួន 10 ។

ទីបំផុត 10LoginsResponse last10LoginsResponse ត្រូវបានត្រឡប់ពីមុខងារកម្មវិធីផ្ទុក។

មុខងារ Index() នៅក្នុងឯកសារ _index.tsx បង្ហាញប្លង់នៃទំព័រដូចដែលបានបង្ហាញក្នុងអត្ថបទខាងក្រោម៖

 export default function Index() { const logins = useLoaderData(); return ( <div> <h1>Signed in</h1> <p>You are signed in!</p> <p> <UserButton /></p> <div> <h1>Recent Logins</h1> {logins?.map((logins) => ( <li key={logins.id}> {logins.user_id} login at: {logins.login_at} </li> ))} </div> <p>< SignOutButton > Sign Out</ SignOutButton ></p> </div> ); }

កូដខាងលើទាញយកការឆ្លើយតបពី LoaderFunction ដែលមានធាតុចូល 10 ចុងក្រោយ។ ការ​ឆ្លើយតប​នេះ​បង្កើត​ទំព័រ​ដែល​ប្រាប់​អ្នក​ប្រើ​ថា​ពួកគេ​បាន​ចូល រាយ​បញ្ជី​ការ​ចូល​ចុងក្រោយ​របស់​ពួកគេ​ចំនួន 10 និង​បង្ហាញ​ប៊ូតុង​ចេញ​ដូច​បង្ហាញ​ខាងក្រោម៖

ក្នុងឧទាហរណ៍នេះ user_id ក៏ត្រូវបានបង្ហាញផងដែរដើម្បីបញ្ជាក់យ៉ាងច្បាស់ថាមានតែទិន្នន័យចូលសម្រាប់អ្នកប្រើប្រាស់ដែលបានចូលប៉ុណ្ណោះដែលអាចមើលឃើញ។

ដោយប្រើវិនដូអនាមិក អ្នកអាចចូលដោយប្រើគណនី Google ទីពីរ ហើយមើលទិន្នន័យចំហៀងសម្រាប់អ្នកប្រើប្រាស់ផ្សេងៗគ្នា៖

ចំណាំថាពេលវេលាចូលត្រួតគ្នា ប៉ុន្តែដោយប្រើ Row-Level Security នៅក្នុងមូលដ្ឋានទិន្នន័យ អ្នកនឹងការពារការលេចធ្លាយទិន្នន័យនៅលើគណនីនានា។ ជួរ​ដេក​អាច​ត្រូវ​បាន​ស្រង់​ចេញ និង​បង្ហាញ​សម្រាប់​អ្នក​ប្រើ​ដែល​បាន​ផ្ទៀងផ្ទាត់​ប៉ុណ្ណោះ។

សេចក្តីសន្និដ្ឋាន

ការរក្សាទិន្នន័យជាឯកជនគឺជាករណីប្រើប្រាស់ដ៏សំខាន់។ ដោយសារកម្មវិធីតែងតែរក្សាទុកព័ត៌មានឯកជន វាត្រូវតែមានសុវត្ថិភាព ដើម្បីរក្សាទិន្នន័យនៅក្នុងដៃស្តាំ។ អ្នកប្រើប្រាស់មានការការពារផ្នែកច្បាប់កាន់តែច្រើនឡើងៗដូចជា GDPR ហើយឧបករណ៍ដូចជា Neon Authorize ធ្វើឱ្យមានភាពងាយស្រួលក្នុងការអនុវត្ត Row Level Security ដើម្បីការពារទិន្នន័យអតិថិជនរបស់អ្នក។

នៅក្នុងការប្រកាសនេះ យើងបានដើរតាមជំហានដែលត្រូវការដើម្បីបើកដំណើរការ Row Level Security នៅក្នុងមូលដ្ឋានទិន្នន័យ Neon។ ការប្រើប្រាស់ RLS ជាមួយនឹងទិន្នន័យរបស់អតិថិជនរបស់យើងធានាថាមានតែអ្នកប្រើប្រាស់ដែលបានចូលប៉ុណ្ណោះដែលមានលិខិតសម្គាល់ដើម្បីទាញយកទិន្នន័យផ្ទាល់ខ្លួនរបស់ពួកគេ។

បន្ថែម Row Layer Security ទៅកម្មវិធីរបស់អ្នកថ្ងៃនេះជាមួយ Neon ។