Провера аутентичности токеном је популарна стратегија која се користи за заштиту веб и мобилних апликација од неовлашћеног приступа. У Нект.јс можете да користите функције провјере аутентичности које пружа Нект-аутх.

Алтернативно, можете се одлучити за развој прилагођеног система аутентификације заснованог на токенима користећи ЈСОН веб токене (ЈВТ). На тај начин осигуравате да имате већу контролу над логиком аутентификације; у суштини, прилагођавање система да прецизно одговара захтевима вашег пројекта.

Подесите пројекат Нект.јс

Да бисте започели, инсталирајте Нект.јс тако што ћете покренути наредбу испод на свом терминалу.

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

Овај водич ће користити Нект.јс 13 који укључује директоријум апликације.

Затим инсталирајте ове зависности у свој пројекат користећи нпм, менаџер пакета чворова.

npm install jose universal-cookie

Јосе је ЈаваСцрипт модул који пружа скуп услужних програма за рад са ЈСОН веб токенима док универзални колачић зависност пружа једноставан начин рада са колачићима претраживача и на клијентском и на серверском окружењу.

Овде можете пронаћи код овог пројекта ГитХуб спремиште.

Креирајте кориснички интерфејс обрасца за пријаву

Отвори срц/апп директоријум, креирајте нови фолдер и дајте му име Пријавите се. Унутар овог фолдера додајте нови паге.јс датотеку и укључите код испод.

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



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

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

Горњи код креира функционалну компоненту странице за пријаву која ће приказати једноставан образац за пријаву у претраживачу како би омогућио корисницима да унесу корисничко име и лозинку.

Тхе користите клијента изјава у коду осигурава да је граница између серверског и клијентског кода у апликација именик.

У овом случају, користи се за декларисање да је код на страници за пријаву, посебно, хандлеСубмитфункција се извршава само на клијенту; у супротном, Нект.јс ће приказати грешку.

Сада, хајде да дефинишемо код за хандлеСубмит функција. Унутар функционалне компоненте додајте следећи код.

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");
 }
 };

За управљање логиком аутентификације за пријављивање, ова функција хвата корисничке акредитиве из обрасца за пријаву. Затим шаље ПОСТ захтев крајњој тачки АПИ-ја, преносећи податке корисника ради верификације.

Ако су акредитиви важећи, што указује да је процес пријављивања био успешан—АПИ враћа статус успеха у одговору. Функција обрађивача ће затим користити рутер Нект.јс да навигира корисника до одређене УРЛ адресе, у овом случају, заштићени рута.

Дефинишите крајњу тачку АПИ-ја за пријаву

Унутар срц/апп директоријум, креирајте нови фолдер и дајте му име апи. Унутар овог фолдера додајте нови логин/роуте.јс датотеку и укључите код испод.

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 });
}

Примарни задатак за овај АПИ је да верификује акредитиве за пријаву прослеђене у ПОСТ захтевима користећи лажне податке.

Након успешне верификације, генерише шифровани ЈВТ токен повезан са детаљима аутентификованог корисника. Коначно, шаље успешан одговор клијенту, укључујући токен у колачићима одговора; у супротном, враћа одговор статуса грешке.

Имплементирајте логику верификације токена

Почетни корак у аутентификацији токена је генерисање токена након успешног процеса пријављивања. Следећи корак је имплементација логике за верификацију токена.

У суштини, користићете јвтВерифи функцију коју обезбеђује Јосе модул за верификацију ЈВТ токена прослеђених са наредним ХТТП захтевима.

У срц директоријум, креирајте нови либс/аутх.јс датотеку и укључите код испод.

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;
 }
}

Тајни кључ се користи за потписивање и верификацију токена. Упоређујући декодирани потпис токена са очекиваним потписом, сервер може ефикасно да провери да ли је обезбеђени токен валидан и на крају да овласти захтеве корисника.

Креирај .енв датотеку у основном директоријуму и додајте јединствени тајни кључ на следећи начин:

NEXT_PUBLIC_JWT_SECRET_KEY=your_secret_key

Направите заштићену руту

Сада морате да креирате руту којој само провјерени корисници могу приступити. Да бисте то урадили, креирајте нову протецтед/паге.јс фајл у срц/апп именик. Унутар ове датотеке додајте следећи код.

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

Направите куку за управљање стањем аутентификације

Креирајте нову фасциклу у срц именик и именовати га куке. Унутар овог фолдера додајте нови усеАутх/индек.јс датотеку и укључите код испод.

"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;
}

Ова кука управља стањем аутентификације на страни клијента. Он преузима и проверава валидност ЈВТ токена присутног у колачићима користећи верифиЈвтТокен функцију, а затим поставља аутентификоване податке о кориснику на аутх држава.

На тај начин омогућава другим компонентама да приступе и користе информације о аутентификованом кориснику. Ово је од суштинског значаја за сценарије као што је прављење ажурирања корисничког интерфејса на основу статуса аутентификације, накнадних захтева за АПИ или приказивање различитог садржаја на основу корисничких улога.

У овом случају, користићете куку за приказивање различитог садржаја на кућа рута заснована на стању аутентификације корисника.

Алтернативни приступ који бисте могли размотрити је руковање управљање стањем користећи Редук Тоолкит или запошљавање а алат за управљање државом као што је Јотаи. Овај приступ гарантује да компоненте могу добити глобални приступ стању аутентификације или било ком другом дефинисаном стању.

Само напред и отвори апп/паге.јс датотеку, избришите шаблон Нект.јс код и додајте следећи код.

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

Код изнад користи усеАутх кука за управљање стањем аутентификације. При томе, условно приказује јавну почетну страницу са везом до Пријавите се путања странице када корисник није аутентификован и приказује пасус за аутентификованог корисника.

Додајте међуверски софтвер да бисте применили овлашћени приступ заштићеним рутама

У срц директоријум, креирајте нови Миддлеваре.јс датотеку и додајте код испод.

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*"] };

Овај међуверски код делује као чувар. Он проверава да би се осигурало да када корисници желе да приступе заштићеним страницама, они су аутентификовани и овлашћени за приступ рутама, поред тога што преусмерава неовлашћене кориснике на страницу за пријаву.

Обезбеђивање Нект.јс апликација

Провера аутентичности токеном је ефикасан безбедносни механизам. Међутим, то није једина доступна стратегија за заштиту ваших апликација од неовлашћеног приступа.

Да бисте ојачали апликације у односу на динамички пејзаж сајбер безбедности, важно је усвојити свеобухватну безбедност приступ који холистички решава потенцијалне безбедносне рупе и рањивости како би се гарантовао темељ заштите.