Kaptad már a szomszédod csomagját a bejárati ajtódnál? (Lehet, hogy véletlenül is kinyitotta?) Lehet, hogy érzékeny hangposta maradt másnak? Alkalmazásfejlesztőként az Ön feladata annak biztosítása, hogy az alkalmazásában tárolt érzékeny adatok véletlenül se kerüljenek más félhez. Számos technika áll rendelkezésre az ügyfelek adatainak biztonságos tárolására, és sok nagyon összetett és nehezen megvalósítható. Ideális esetben az összes ügyféladatot egyetlen adatbázisban lehetne védeni – így a funkció kialakítása egyszerű és biztonságos marad. az a képesség, hogy biztonságossá és vezérelhetővé váljon egy adatbázistáblán belüli meghatározott adatsorokhoz való hozzáférés. Ez egy hatékony eszköz, amely lehetővé teszi, hogy az összes ügyféladatot egyetlen adatbázisban tárolja anélkül, hogy aggódna a fiókok közötti adatszivárgás miatt. Az RLS helyes megvalósítása azonban bonyolult folyamat lehet, amely magában foglalja a bejelentkezési adatok és az adatbázis-engedélyek kombinálását. leegyszerűsíti ezt a folyamatot azáltal, hogy automatikusan integrálja az OAuth-szolgáltató hitelesítését a PostgreSQL-adatbázisba. A sorszintű biztonság (RLS) A Neon Authorize A Neon Authorize a meglévő hitelesítési réteget használja minden bejelentkezett felhasználó azonosítására, és az adatbázisban lévő összes adatot hozzárendeli a bejelentkezési hitelesítő adataihoz. Ez biztosítja, hogy az adatbázisban tárolt adatokhoz csak bejelentkezett felhasználók férhessenek hozzá – és csak a bejelentkezett felhasználók láthatják adataikat. Ez az oktatóanyag végigvezeti Önt, hogyan hozhat létre Remix alkalmazást a Clerk hitelesítési réteg használatával. egy népszerű felhasználói hitelesítési és -kezelő eszköz. Adatrétegként a Neon Postgres-t fogja használni, és a Neon Authorize segítségével biztosíthatja minden bejelentkezett ügyfél adatait. A táblázat minden sora kijelöl egy felhasználói azonosítót, amelyet a Clerk biztosít. Csak a felhasználói azonosítóval hitelesítettek léphetnek kapcsolatba a sorban lévő adatokkal. A Clerk Mintaalkalmazásunk egyszerű – minden bejelentkezést rögzít az RLS adatbázisba a felhasználói azonosító használatával. Az oldal betöltésekor a hitelesített felhasználó utolsó 10 bejelentkezése jelenik meg, és nem jelennek meg más felhasználók adatai (ugyanabban a PostgreSQL táblában tárolva). Kezdjük is! A Remix alkalmazás létrehozása Kezdje azzal, hogy hozzon létre egy Remix alkalmazást, és telepítse a függőségeket az alábbi kódrészlet segítségével. Részletesebb utasításokat a talál. Remix gyors üzembe helyezési útmutatójában ##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 Mivel a Remix a Vite-t, egy Javascript-összeállítási eszközt használja, hozza létre a gyökérkönyvtárban: vite.config.js import { vitePlugin as remix } from "@remix-run/dev"; import { defineConfig } from "vite"; export default defineConfig({ plugins: [remix()], }); Mielőtt bármilyen fejlesztést végzünk, fiókokat kell létrehoznunk a Clerknél és a Neonnál szolgáltatásaik használatához: Clerk és Neon példányok létrehozása Hivatalnok Új projekt létrehozásához jelentkezzen be a Clerk irányítópultra. A bal oldali navigációs panelen válassza lehetőséget. az API-kulcsok A Gyorsmásolás mezőben válassza a Remix lehetőséget, és másolja át a környezeti változókat. Illessze be őket egy fájlba a kódban. .env A bal oldali navigációs panelen válassza a „ ” JWT sablonok lehetőséget. Hozz létre egy sablont (az enyémet „ ” neveztem el). neon-remixnek Másolja ki a későbbi használatra. JWKS végpont URL-jét Neon Jelentkezzen be a Neon konzolba, és hozzon létre egy új projektet. A bal oldali navigációs menüben válassza . az Engedélyezés lehetőséget Hozzon létre egy új szolgáltatót, és illessze be a , amelyet korábban a Clerkről másolt. Clerk JWKS URL-címét Miután létrehozta a példányt, kattintson a „Kezdés” gombra. Megnyílik egy oldalsó panel a Neon Authorize integrációjának befejezéséhez szükséges lépések sorozatával. Az első lépések beállítás lépéseiből áll, hogy beállítson egy alap engedélyezési projektet a Clerk segítségével. 1. Set up Neon Extension and Roles Privileges. Run these steps in the Dashboard. 2. Grant privileges to the roles in the neondb database. A sorszintű biztonság beállítása A megadott kód egy todos alkalmazásra vonatkozik. Ahelyett, hogy egy todos alkalmazáshoz használnánk a Neon által biztosított általános kódot, létrehozunk egy táblát, és beállítjuk rajta az RLS-t. Nyissa meg az SQL-szerkesztőt a Neon irányítópulton, és futtassa az alábbi kódot. A tábla az egyes felhasználók bejelentkezési idejét tárolja. login_history login_history Vegye figyelembe, hogy csak három oszlopból áll: az id, a user_id és a login_at. Az utolsó két oszlopban a legutóbbi bejelentkezési adatok jelennek meg az alkalmazásban. login_history 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); Adja hozzá a megadott környezeti változókat fájlhoz .env Ha ezek a beállítási lépések befejeződtek, az fájlnak négy változóval kell rendelkeznie: kettő a Clerktől és kettő a Neontól: .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-... A Remix alkalmazás elkészítése Az alkalmazás készen áll a felépítésre. A teljes kód elérhető , de itt kiemeljük a legfontosabb funkciókat. Az alkalmazás magja fájlban található: a GitHubon 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; } } Az fájl befejezi a feladatokat a kiszolgálón, mielőtt az oldalt rendereli az ügyfél számára. Ebben az alkalmazásban a rakodó végzi az alkalmazás nehéz emelésének nagy részét. _index.tsx LoaderFunction A függvény először ellenőrzi, hogy a felhasználó nincs-e bejelentkezve, majd átirányítja a oldalra. A bejelentkezési oldal az Ügyintéző irányítópultján konfigurálható úgy, hogy különböző bejelentkezési típusokat fogadjon el, például Google és e-mail bejelentkezéseket: /sign-in A bejelentkezési oldal létrehozásához lépjen a Clerk irányítópultra, és állítsa be a projekthez szükséges bejelentkezési módokat. Ha a felhasználó be van jelentkezve, a függvény lekéri a és a Clerk-től. Ezek az értékek elengedhetetlenek ahhoz, hogy a felhasználó be legyen jelentkezve, majd a segítségével feltöltheti az adatbázis minden sorát. userId authToken userId Az RLS által védett adatbázis módosításához ki kell húznia a a környezeti változókból. DATABASE_AUTHENTCATED_URL Az RLS biztonság megvalósításának alapvető logikája a -ban rejlik. Az SQL Neon-példány inicializálása a környezeti változók és a hitelesítési token használatával történik. A függvény SQL-hívást indít, és beszúrja a user_id-t (és az aktuális időt) a PostgreSQL-adatbázisba, majd a függvény lekérdezi a DB-ben a 10 legutóbbi bejelentkezést. LoaderFunction loginResponse last10LoginsResponse Végül a visszaadásra kerül a betöltő függvény. last10LoginsResponse Az függvény fájlban az oldal elrendezését jeleníti meg az alábbi részletben látható módon: 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> ); } A fenti kód a válaszát kéri le, amely az utolsó 10 bejelentkezési bejegyzést tartalmazza. Ez a válasz létrehoz egy oldalt, amely közli a felhasználóval, hogy be van jelentkezve, felsorolja az utolsó 10 bejelentkezést, és egy Kijelentkezés gombot jelenít meg az alábbiak szerint: LoaderFunction Ebben a példában a is megjelenik, hogy egyértelműen jelezze, hogy csak a bejelentkezett felhasználó bejelentkezési adatai láthatók. user_id Egy inkognitóablak használatával bejelentkezhet egy második Google-fiókkal, és megtekintheti a különböző felhasználók adatait egymás mellett: Vegye figyelembe, hogy a bejelentkezési idők átfedésben vannak, de a sorszintű biztonság használatával az adatbázisban megakadályozhatja az adatszivárgást a fiókok között. A sorok csak a hitelesített felhasználó számára bonthatók ki és jeleníthetők meg. Következtetés Az adatok titkosságának megőrzése kritikus használati eset. Mivel az alkalmazások gyakran tárolnak személyes információkat, ezeket biztosítani kell, hogy az adatok megfelelő kezekben legyenek. A fogyasztók egyre több jogi védelmet élveznek, mint például a GDPR, és az olyan eszközök, mint a Neon Authorize, megkönnyítik a sorszintű biztonság bevezetését az ügyfelek adatainak védelme érdekében. Ebben a bejegyzésben végigjártuk azokat a lépéseket, amelyek szükségesek ahhoz, hogy engedélyezzük a sorszintű biztonságot a Neon adatbázisban. Az RLS használata ügyfeleink adataival biztosítja, hogy csak a bejelentkezett felhasználó rendelkezzen a saját adatainak kinyeréséhez szükséges hitelesítési adatokkal. Adja hozzá alkalmazásához még ma a Neon segítségével. a Row Layer Security-t
