Weligaa ma ka heshay baakadda deriskaaga albaabkaaga hore? (laga yaabaa in xitaa si lama filaan ah u furay?) Ma laga yaabaa in aad haysatid fariin cod ah oo xasaasi ah oo qof kale loogu tagay? Soo-saareyaasha arjiga ahaan, waa shaqadaada inaad hubiso in xogta xasaasiga ah ee ku kaydsan codsigaaga aan si lama filaan ah loogu geynin qolo kale.
Waxaa jira farsamooyin badan oo la heli karo si si ammaan ah loogu kaydiyo xogta macaamiisha, qaar badana waa kuwo aad u adag oo ay adag tahay in la hirgeliyo. Fikrad ahaan, mid ayaa ku sugi kara dhammaan xogta macaamiisha hal xog-ururin - iyada oo la ilaalinayo naqshadeynta sifada mid fudud oo sugan.
Nabadgelyada heerka safka ah (RLS) waa awooda lagu sugo laguna xakameeyo gelitaanka safafka xogta ee gudaha miiska xogta. Waa qalab awood leh oo kuu ogolaanaya inaad ku kaydiso dhammaan xogta macaamiishaada hal kayd iyada oo aan wax welwel ah laga qabin xogta ka daadanaya xisaabaadka. Si kastaba ha ahaatee, si sax ah u hirgalinta RLS waxay noqon kartaa nidaam adag oo ku lug leh isku darka faahfaahinta galitaanka iyo ogolaanshaha xogtaada. Neon Authorize ayaa habayn kara nidaamkan isagoo si toos ah ugu daraya xaqiijinta bixiyahaaga OAuth iyo xogtaada PostgreSQL.
Neon Authorize waxay isticmaashaa lakabka aqoonsiga ee jira si uu u aqoonsado isticmaale kasta oo soo galay oo uu ku xidho dhammaan xogta ku jirta xogtaada aqoonsigooda gelitaanka. Tani waxay hubinaysaa in xogta lagu kaydiyay kaydka ay geli karaan oo keliya isticmaalayaasha gudaha galay-iyo in isticmaalayaasha soo galay kaliya ay arki karaan xogtooda.
Casharkaan wuxuu ku dhex socon doonaa sida loo dhiso app Remix iyadoo la isticmaalayo karraaniga sida lakab xaqiijin ah. Karraaniga waa hubsiimo isticmaale iyo qalab maamul oo caan ah. Waxaad u isticmaali doontaa Neon Postgres sida lakabka xogtaada oo aad ka faa'iidaysato Neon Ogolaanshaha si aad u ilaaliso dhammaan xogta macmiil kasta oo soo gala. Saf kasta oo shaxda ku jira waxa uu qoondayn doonaa userID, kaas oo uu bixiyo karaani. Kaliya kuwa lagu xaqiijiyay userID ayaa la falgali kara xogta safka ku jirta.
Codsiga muunadayadu waa mid fudud-waxa ay diiwaan gelisaa gelista xogta RLS, iyadoo la isticmaalayo ID-ga isticmaalaha. Marka bogga la shubo, 10-ka ugu dambeeya ee login ee isticmaalaha la xaqiijiyay ayaa la soo bandhigi doonaa, mana soo baxayso xogta isticmaale kale (lagu kaydiyay isla shaxda PostgreSQL). Aan bilowno!
Ku billow abuurista arjiga Remix oo aad ku rakibto ku-tiirsanaanta adiga oo isticmaalaya godadka koodka ee hoose. Si aad u hesho tilmaamo faahfaahsan, tixraac hagaha bilawga degdega ah ee 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
Maadaama Remix uu isticmaalo Vite, qalab dhisme Javascript ah, ku samee vite.config.js
tusaha xididka:
import { vitePlugin as remix } from "@remix-run/dev"; import { defineConfig } from "vite"; export default defineConfig({ plugins: [remix()], });
Kahor intaanan samayn wax horumarin ah, waxaan u baahanahay inaan ka abuurno akoonno Karraaniga iyo Neon si aan uga faa'iidaysano adeegyadooda:
Soo gal dashboard-ka karraaniga si aad u abuurto mashruuc cusub.
Dhinaca bidixda, dooro furayaasha API .
.env
ee koodka.Dhanka bidix ee navigation, dooro " JWT templates. ”
Gal Neon console oo samee mashruuc cusub.
Ka menu navigation bidix, dooro Oggolaanshaha .
Abuur bixiye cusub oo dheji kararaaniga JWKS URL oo aad hore uga soo guurisay karraaniga.
Markaad abuurto tusaalaha, dhagsii "Bilow." Guddi dhinac ah ayaa ku furmi doona tillaabooyin taxane ah si loo dhammaystiro Oggolaanshaha Neonkaaga.
Habaynta bilawga ah waxay ku siinaysaa tillaabooyin aad ku samaynayso mashruuc Ogolaanshaha aasaasiga ah ee Karraaniga ah.
1. Set up Neon Extension and Roles Privileges. Run these steps in the Dashboard. 2. Grant privileges to the roles in the neondb database.
Koodhka la bixiyay waxaa loogu talagalay app todos. Halkii aad ka isticmaali lahayd koodka kululeeyaha ee Neon ee barnaamijka todos, waxaanu samayn doonaa miis login_history
waxaanan ku dul-samayn doonaa RLS. Fur tafatiraha SQL dashboard-ka Neon oo socodsii koodka hoose. Jadwalka login_history
waxa loo isticmaali doonaa in lagu kaydiyo wakhtiyada gelitaanka isticmaale kasta.
Ogow in
login_history
uu leeyahay saddex tiir oo keliya: id, user_id, iyo login_at. Labada tiir ee ugu dambeeya waxay muujinayaan galitaanka ugu dambeeyay ee codsiga.
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);
Ku dar doorsoomayaasha deegaanka ee la bixiyay .env
Marka tillaabooyinkan dejinta la dhammeeyo, .env
gaagu waa inuu lahaadaa afar doorsoomayaal: laba karraaniga ah iyo laba Neon:
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-...
Codsiga hadda waa diyaar in la dhiso. Koodhka buuxa ayaa laga heli karaa GitHub , laakiin astaamaha ugu muhiimsan ayaa halkan lagu muujiyey. Xudunta arjigu waxa uu ku yaalaa 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
ee faylka _index.tsx
wuxuu dhamaystiraa hawlaha server-ka ka hor inta aan loo samayn bogga macmiilka. Codsigan, raaraduhu waxa uu qabtaa in badan oo ka mid ah qaadista culus ee abka.
Shaqadu waxay marka hore hubisaa haddii isticmaaluhu aanu gudaha u galin ka dibna u jiheeyo isticmaalaha bogga /sign-in
. Bogga galitaanka waxa lagu habayn karaa dashboardka karraaniga si uu u aqbalo noocyada galitaanka ee kala duwan, sida Google iyo imaylka login:
Si aad u abuurto bogga galitaanka, u gudub dashboardka karraaniga oo deji hababka gelitaanka lagama maarmaanka u ah mashruuca.
Haddii isticmaaluhu gudaha u galo, shaqadu waxay ka soo ceshataa userId
iyo authToken
Karraaniga. Qiimayaashani waa lama huraan si loo hubiyo in isticmaaluhu gudaha u galay, ka dibna waxaad isticmaali kartaa userId
si aad u buuxiso saf kasta oo ku jira xogtaada.
Si aad isbeddel ugu samayso kaydka xogta ee RLS, waxaad u baahan tahay inaad ka soo saarto DATABASE_AUTHENTCATED_URL
doorsoomayaasha deegaanka.
Caqliga xudunta u ah fulinta amniga RLS wuxuu ku dhex jiraa LoaderFunction
. Tusaalaha SQL Neon waxaa lagu bilaabay iyadoo la isticmaalayo doorsoomayaasha deegaanka iyo calaamada aqoonsiga. Shaqada loginResponse
waxay samaysaa wicitaan SQL oo waxay gelisaa user_id (iyo wakhtiga hadda) galka xogta PostgreSQL, ka dib shaqada last10LoginsResponse
waxay waydiisaa DB 10-kii ugu dambeeyay ee la soo galay.
Ugu dambeyntii, jawaabta last10LoginsResponse
ayaa laga soo celiyay shaqada xamuulka.
Index()
ee ku jirta faylka _index.tsx
waxa uu sameeyaa qaabaynta bogga sida ku cad qaybta hoose:
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> ); }
Koodhka sare waxa uu ka soo celiyaa jawaabta LoaderFunction
, kaas oo ka kooban 10-kii gal ee ugu dambeeyay. Jawaabtaani waxay dhisaysaa bog u sheegaya isticmaalaha inay soo galeen, oo taxayaan 10-koodii u dambeeyay, oo tusa badhanka saxeexa sida hoos ku cad:
Tusaalahan, user_id
sidoo kale waa la soo bandhigay si uu si cad u muujiyo in kaliya xogta soo galitaanka ee isticmaaluhu uu muuqdo.
Adigoo isticmaalaya daaqad qarsoodi ah, waxaad ku gali kartaa koontada labaad ee Google, oo aad u aragto xogta dhinac-dhinac ee isticmaalayaasha kala duwan:
Ogsoonow in wakhtiyada gelitaanka ay is-dhaafsan yihiin, laakiin adiga oo isticmaalaya Heerka-Security Security ee kaydka, waxaad ka hortagi doontaa in xogta laga daadiyo akoonnada. Safafka waxa kaliya oo loo soo saari karaa oo loo soo bandhigi karaa isticmaalaha la xaqiijiyay.
In xogta la ilaaliyo waa arin muhiim ah oo la isticmaalo. Sida codsiyadu inta badan u kaydiyaan macluumaadka gaarka ah, waa in la xafidaa si xogta loogu hayo gacanta midig. Macaamiishu waxay leeyihiin ilaalin badan oo sharci sida GDPR, iyo aaladaha sida Neon Authorize waxay fududeeyaan hirgelinta Amniga Heerka Saf si loo ilaaliyo xogta macmiilkaaga.
Maqaalkan, waxaan ku dhex marnay tillaabooyinka loo baahan yahay si aan awood ugu siinno Amniga Heerka Saf ee xogta Neon. Isticmaalka RLS ee xogta macaamiisheena waxay xaqiijinaysaa in isticmaale ku soo galay kaliya uu haysto aqoonsiga si uu u soo saaro xogtooda.
Kudar Amniga Lakabka Safka abkaaga maanta Neon.