A token hitelesítés egy népszerű stratégia, amelyet a webes és mobilalkalmazások illetéktelen hozzáféréstől való megvédésére használnak. A Next.js-ben használhatja a Next-auth által biztosított hitelesítési funkciókat.

Alternatív megoldásként egyéni token-alapú hitelesítési rendszert is fejleszthet JSON Web Tokens (JWT) használatával. Ezzel biztosíthatja, hogy jobban kézben tartsa a hitelesítési logikát; lényegében a rendszer testreszabása, hogy pontosan megfeleljen a projekt követelményeinek.

Állítson be egy Next.js projektet

A kezdéshez telepítse a Next.js-t az alábbi parancs futtatásával a terminálon.

npx create-next-app@latest next-auth-jwt --experimental-app

Ez az útmutató hasznosítani fogja Next.js 13, amely tartalmazza az alkalmazáskönyvtárat.

Ezután telepítse ezeket a függőségeket a projektbe a használatával npm, a Node Package Manager.

npm install jose universal-cookie

Jose egy JavaScript modul, amely egy sor segédprogramot biztosít a JSON Web Tokenekkel való munkához, miközben a univerzális-süti A függőség egyszerű módot biztosít a böngésző cookie-kkal való munkavégzésére mind kliens-, mind szerveroldali környezetben.

A projekt kódját itt találja meg GitHub adattár.

Hozza létre a Bejelentkezési űrlap felhasználói felületét

Nyissa meg a src/app könyvtárba, hozzon létre egy új mappát, és nevezze el Belépés. Adjon hozzá egy újat ebben a mappában page.js fájlt, és mellékelje az alábbi kódot.

"use client";
import { useRouter } from"next/navigation";
exportdefaultfunctionLoginPage() {
return (



 Username:
"text" name="username" />
 </label>

 Password:
"password" name="password" />
 </label>
"submit">Login</button>
 </form>
 );
}

A fenti kód egy bejelentkezési oldal funkcionális összetevőt hoz létre, amely egy egyszerű bejelentkezési űrlapot jelenít meg a böngészőben, amely lehetővé teszi a felhasználók számára, hogy megadják a felhasználónevet és a jelszót.

A kliens használata A kódban található utasítás biztosítja, hogy határvonal legyen deklarálva a csak kiszolgáló és a csak kliens kódja között kb Könyvtár.

Ebben az esetben azt deklarálja, hogy a bejelentkezési oldalon lévő kód, különösen a handleSubmitfunkció csak a kliensen kerül végrehajtásra; ellenkező esetben a Next.js hibát dob.

Most határozzuk meg a kódot a handleSubmit funkció. A funkcionális komponensen belül adja hozzá a következő kódot.

const router = useRouter();
const handleSubmit = async (event) => {
 event.preventDefault();
const formData = new FormData(event.target);
const username = formData.get("username");
const password = formData.get("password");
const res = await fetch("/api/login", {
 method: "POST",
 body: JSON.stringify({ username, password }),
 });
const { success } = await res.json();
if (success) { 
 router.push("/protected");
 router.refresh();
 } else {
 alert("Login failed");
 }
 };

A bejelentkezési hitelesítési logika kezeléséhez ez a funkció rögzíti a felhasználói hitelesítő adatokat a bejelentkezési űrlapról. Ezután POST-kérelmet küld egy API-végpontnak, amely ellenőrzés céljából továbbítja a felhasználói adatokat.

Ha a hitelesítő adatok érvényesek, ami azt jelzi, hogy a bejelentkezési folyamat sikeres volt – az API sikeres állapotot ad vissza a válaszban. A kezelő funkció ezután a Next.js útválasztóját fogja használni, hogy a felhasználót egy megadott URL-re navigálja, ebben az esetben a védett útvonal.

Határozza meg a Bejelentkezés API végpontját

Benne src/app könyvtárba, hozzon létre egy új mappát, és nevezze el api. Adjon hozzá egy újat ebben a mappában login/route.js fájlt, és mellékelje az alábbi kódot.

import { SignJWT } from"jose";
import { NextResponse } from"next/server";
import { getJwtSecretKey } from"@/libs/auth";
exportasyncfunctionPOST(request) {
const body = await request.json();
if (body.username "admin" && body.password "admin") {
const token = awaitnew SignJWT({
 username: body.username,
 })
 .setProtectedHeader({ alg: "HS256" })
 .setIssuedAt()
 .setExpirationTime("30s") 
 .sign(getJwtSecretKey());
const response = NextResponse.json(
 { success: true },
 { status: 200, headers: { "content-type": "application/json" } }
 );
 response.cookies.set({
 name: "token",
 value: token,
 path: "/",
 });
return response;
 }
return NextResponse.json({ success: false });
}

Ennek az API-nak az elsődleges feladata a POST-kérésekben átadott bejelentkezési hitelesítő adatok áladatok segítségével történő ellenőrzése.

Sikeres ellenőrzés után létrehoz egy titkosított JWT tokent a hitelesített felhasználói adatokhoz társítva. Végül sikeres választ küld az ügyfélnek, beleértve a válasz cookie-kban található tokent; ellenkező esetben hibaállapot-választ ad vissza.

Token ellenőrzési logika megvalósítása

A jogkivonat hitelesítésének kezdeti lépése a token generálása a sikeres bejelentkezési folyamat után. A következő lépés a token-ellenőrzés logikájának megvalósítása.

Lényegében a jwtVerify által biztosított funkció Jose modult a következő HTTP-kérésekkel átadott JWT-tokenek ellenőrzésére.

Ban,-ben src könyvtárat, hozzon létre egy újat libs/auth.js fájlt, és mellékelje az alábbi kódot.

import { jwtVerify } from"jose";
exportfunctiongetJwtSecretKey() {
const secret = process.env.NEXT_PUBLIC_JWT_SECRET_KEY;
if (!secret) {
thrownewError("JWT Secret key is not matched");
 }
returnnew TextEncoder().encode(secret);
}
exportasyncfunctionverifyJwtToken(token) {
try {
const { payload } = await jwtVerify(token, getJwtSecretKey());
return payload;
 } catch (error) {
returnnull;
 }
}

A titkos kulcsot a tokenek aláírására és ellenőrzésére használják. A dekódolt token-aláírás és a várt aláírás összehasonlításával a kiszolgáló hatékonyan ellenőrizheti, hogy a megadott token érvényes-e, és végül engedélyezheti a felhasználók kéréseit.

Teremt .env fájlt a gyökérkönyvtárba, és adjon hozzá egy egyedi titkos kulcsot az alábbiak szerint:

NEXT_PUBLIC_JWT_SECRET_KEY=your_secret_key

Hozzon létre egy védett útvonalat

Most létre kell hoznia egy útvonalat, amelyhez csak a hitelesített felhasználók férhetnek hozzá. Ehhez hozzon létre egy újat protected/page.js fájl a src/app Könyvtár. Ebben a fájlban adja hozzá a következő kódot.

exportdefaultfunctionProtectedPage() {
return<h1>Very protected pageh1>;
 }

Hook létrehozása a hitelesítési állapot kezeléséhez

Hozzon létre egy új mappát a src könyvtárat, és nevezd el horgok. Ebben a mappában adjon hozzá egy újat useAuth/index.js fájlt, és mellékelje az alábbi kódot.

"use client" ;
import React from"react";
import Cookies from"universal-cookie";
import { verifyJwtToken } from"@/libs/auth";
exportfunctionuseAuth() {
const [auth, setAuth] = React.useState(null);
const getVerifiedtoken = async () => {
const cookies = new Cookies();
const token = cookies.get("token")?? null;
const verifiedToken = await verifyJwtToken(token);
 setAuth(verifiedToken);
 };
 React.useEffect(() => {
 getVerifiedtoken();
 }, []);
return auth;
}

Ez a hook kezeli a hitelesítési állapotot a kliens oldalon. Lekéri és ellenőrzi a cookie-kban lévő JWT token érvényességét a verifyJwtToken funkciót, majd beállítja a hitelesített felhasználói adatokat a auth állapot.

Ezzel lehetővé teszi más összetevők számára, hogy hozzáférjenek és felhasználják a hitelesített felhasználó adatait. Ez elengedhetetlen olyan forgatókönyvekhez, mint például a felhasználói felület hitelesítési állapota alapján történő frissítése, későbbi API-kérések végrehajtása, vagy a felhasználói szerepkörök alapján eltérő tartalom megjelenítése.

Ebben az esetben a hook segítségével különböző tartalmat jeleníthet meg az oldalon itthon útvonalat a felhasználó hitelesítési állapota alapján.

Alternatív megoldás, amelyet fontolóra vehet, a kezelés állapotkezelés Redux Toolkit segítségével vagy a államirányítási eszköz, mint a Jotai. Ez a megközelítés garantálja, hogy az összetevők globális hozzáférést kapjanak a hitelesítési állapothoz vagy bármely más meghatározott állapothoz.

Menjen előre, és nyissa ki a app/page.js fájlt, törölje a sablont Next.js kódot, és adja hozzá a következő kódot.

"use client" ;
import { useAuth } from"@/hooks/useAuth";
import Link from"next/link";
exportdefaultfunctionHome() {
const auth = useAuth();
return<>
Public Home Page</h1>

A fenti kód a useAuth horog a hitelesítési állapot kezeléséhez. Ennek során feltételesen megjelenít egy nyilvános kezdőlapot a következő linkkel Belépés oldalútvonal, ha a felhasználó nincs hitelesítve, és egy bekezdést jelenít meg a hitelesített felhasználó számára.

Köztes szoftver hozzáadása a védett útvonalakhoz való engedélyezett hozzáférés kényszerítéséhez

Ban,-ben src könyvtárat, hozzon létre egy újat middleware.js fájlt, és adja hozzá az alábbi kódot.

import { NextResponse } from"next/server";
import { verifyJwtToken } from"@/libs/auth";
const AUTH_PAGES = ["/login"];
const isAuthPages = (url) => AUTH_PAGES.some((page) => page.startsWith(url));
exportasyncfunctionmiddleware(request) {
const { url, nextUrl, cookies } = request;
const { value: token } = cookies.get("token")?? { value: null };
const hasVerifiedToken = token && (await verifyJwtToken(token));
const isAuthPageRequested = isAuthPages(nextUrl.pathname);
if (isAuthPageRequested) {
if (!hasVerifiedToken) {
const response = NextResponse.next();
 response.cookies.delete("token");
return response;
 }
const response = NextResponse.redirect(new URL(`/`, url));
return response;
 }
if (!hasVerifiedToken) {
const searchParams = new URLSearchParams(nextUrl.searchParams);
 searchParams.set("next", nextUrl.pathname);
const response = NextResponse.redirect(
new URL(`/login?${searchParams}`, url)
 );
 response.cookies.delete("token");
return response;
 }
return NextResponse.next();
}
exportconst config = { matcher: ["/login", "/protected/:path*"] };

Ez a köztes szoftver kód őrként működik. Ellenőrzi, hogy amikor a felhasználók hozzá akarnak férni a védett oldalakhoz, akkor hitelesítve vannak-e és jogosultak legyenek az útvonalak elérésére, emellett a jogosulatlan felhasználókat a bejelentkezési oldalra irányítja.

A Next.js alkalmazások védelme

A token hitelesítés hatékony biztonsági mechanizmus. Azonban nem ez az egyetlen stratégia, amellyel megvédheti alkalmazásait a jogosulatlan hozzáféréstől.

Ahhoz, hogy az alkalmazásokat megerősítsük a dinamikus kiberbiztonsági környezettel szemben, fontos egy átfogó biztonság elfogadása olyan megközelítés, amely holisztikusan kezeli a lehetséges biztonsági réseket és sebezhetőségeket, hogy garantálja az alaposságot védelem.