Token-todennus on suosittu strategia, jota käytetään suojaamaan verkko- ja mobiilisovelluksia luvattomalta käytöltä. Next.js: ssä voit hyödyntää Next-authin tarjoamia todennusominaisuuksia.

Vaihtoehtoisesti voit kehittää mukautetun merkkipohjaisen todennusjärjestelmän käyttämällä JSON Web Tokens (JWT) -tunnisteita. Näin varmistat, että hallitset todennuslogiikkaa paremmin. lähinnä mukauttaa järjestelmä vastaamaan tarkasti projektisi vaatimuksia.

Määritä Next.js-projekti

Aloita asentamalla Next.js suorittamalla alla oleva komento päätteessäsi.

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

Tämä opas käyttää Next.js 13, joka sisältää sovellushakemiston.

Asenna seuraavaksi nämä riippuvuudet projektiisi käyttämällä npm, Node Package Manager.

npm install jose universal-cookie

Jose on JavaScript-moduuli, joka tarjoaa joukon apuohjelmia JSON Web Tokenien kanssa työskentelyyn, kun

universaali eväste riippuvuus tarjoaa yksinkertaisen tavan työskennellä selaimen evästeiden kanssa sekä asiakas- että palvelinpuolen ympäristöissä.

Löydät tämän projektin koodin tästä GitHub-arkisto.

Luo kirjautumislomakkeen käyttöliittymä

Avaa src/app hakemistoon, luo uusi kansio ja anna sille nimi Kirjaudu sisään. Lisää tähän kansioon uusi page.js tiedosto ja sisällytä alla oleva koodi.

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



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

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

Yllä oleva koodi luo kirjautumissivulle toiminnallisen komponentin, joka tekee selaimessa yksinkertaisen kirjautumislomakkeen, jonka avulla käyttäjät voivat kirjoittaa käyttäjätunnuksen ja salasanan.

The käytä asiakasta lauseke koodissa varmistaa, että vain palvelimen ja vain asiakaskoodin välillä ilmoitetaan raja sovellus hakemistosta.

Tässä tapauksessa sitä käytetään ilmoittamaan, että kirjautumissivulla oleva koodi, erityisesti käsitteleLähetätoiminto suoritetaan vain asiakkaalle; Muussa tapauksessa Next.js antaa virheilmoituksen.

Nyt määritellään koodi käsitteleLähetä toiminto. Lisää toiminnallisen komponentin sisään seuraava koodi.

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

Kirjautumisen todennuslogiikkaa hallita tämä toiminto kaappaa käyttäjän tunnistetiedot kirjautumislomakkeesta. Sitten se lähettää POST-pyynnön API-päätepisteeseen ja välittää käyttäjätiedot tarkistettavaksi.

Jos tunnistetiedot ovat kelvollisia, mikä osoittaa, että kirjautuminen onnistui – API palauttaa vastauksessa onnistumistilan. Käsittelijätoiminto käyttää sitten Next.js: n reititintä navigoidakseen käyttäjän määritettyyn URL-osoitteeseen, tässä tapauksessa suojattu reitti.

Määritä Login API -päätepiste

Sisällä src/app hakemistoon, luo uusi kansio ja anna sille nimi api. Lisää tähän kansioon uusi login/route.js tiedosto ja sisällytä alla oleva koodi.

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

Tämän API: n ensisijainen tehtävä on tarkistaa POST-pyynnöissä välitetyt kirjautumistiedot käyttämällä valetietoja.

Onnistuneen vahvistuksen jälkeen se luo salatun JWT-tunnuksen, joka liittyy todennettuihin käyttäjätietoihin. Lopuksi se lähettää onnistuneen vastauksen asiakkaalle, mukaan lukien vastausevästeiden tunnuksen; muussa tapauksessa se palauttaa virhetilan vastauksen.

Ota käyttöön Token Verification Logic

Token-todennuksen ensimmäinen vaihe on tunnuksen luominen onnistuneen kirjautumisprosessin jälkeen. Seuraava askel on tunnuksen vahvistuksen logiikka.

Käytännössä käytät jwtVerify tarjoama toiminto Jose moduuli tarkistaaksesi myöhempien HTTP-pyyntöjen yhteydessä välitetyt JWT-tunnukset.

Vuonna src hakemistoon, luo uusi libs/auth.js tiedosto ja sisällytä alla oleva koodi.

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

Salaista avainta käytetään tokenien allekirjoittamiseen ja vahvistamiseen. Vertaamalla dekoodattua tunnuksen allekirjoitusta odotettuun allekirjoitukseen palvelin voi tehokkaasti varmistaa, että toimitettu merkki on kelvollinen, ja lopulta valtuuttaa käyttäjien pyynnöt.

Luoda .env tiedosto juurihakemistoon ja lisää yksilöllinen salainen avain seuraavasti:

NEXT_PUBLIC_JWT_SECRET_KEY=your_secret_key

Luo suojattu reitti

Nyt sinun on luotava reitti, johon vain todennetut käyttäjät voivat päästä. Luo uusi suojattu/page.js tiedosto tiedostoon src/app hakemistosta. Lisää tähän tiedostoon seuraava koodi.

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

Luo koukku todennustilan hallintaan

Luo uusi kansio src hakemistoon ja nimeä se koukut. Lisää tähän kansioon uusi useAuth/index.js tiedosto ja sisällytä alla oleva koodi.

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

Tämä koukku hallitsee todennustilaa asiakaspuolella. Se hakee ja tarkistaa evästeissä olevan JWT-tunnuksen oikeellisuuden käyttämällä vahvistaJwtToken -toiminto ja asettaa sitten todetun käyttäjän tiedot arvoon tod osavaltio.

Näin tehdessään se mahdollistaa muiden komponenttien pääsyn ja hyödyntää todennettuja käyttäjän tietoja. Tämä on välttämätöntä skenaarioissa, kuten käyttöliittymäpäivitysten tekemisessä todennuksen tilan perusteella, myöhempien API-pyyntöjen tekemisessä tai erilaisen sisällön renderöimisessä käyttäjäroolien perusteella.

Tässä tapauksessa käytät koukkua eri sisällön hahmontamiseen Koti reitin, joka perustuu käyttäjän todennustilaan.

Vaihtoehtoinen lähestymistapa, jota voit harkita, on käsittely tilanhallinta Redux Toolkitillä tai työllistää a valtionhallinnon työkalu, kuten Jotai. Tämä lähestymistapa takaa, että komponentit voivat saada maailmanlaajuisen pääsyn todennustilaan tai mihin tahansa muuhun määritettyyn tilaan.

Mene eteenpäin ja avaa app/page.js tiedosto, poista yleiskoodi Next.js-koodi ja lisää seuraava koodi.

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

Yllä oleva koodi käyttää useAuth koukku todennustilan hallintaan. Näin tehdessään se tekee ehdollisesti julkisen kotisivun, jossa on linkki Kirjaudu sisään sivun reitti, kun käyttäjää ei ole todennettu, ja näyttää kappaleen todennettua käyttäjää varten.

Lisää väliohjelmisto pakottaaksesi valtuutetun pääsyn suojatuille reiteille

Vuonna src hakemistoon, luo uusi middleware.js tiedosto ja lisää alla oleva koodi.

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

Tämä väliohjelmistokoodi toimii vartijana. Se tarkistaa varmistaakseen, että kun käyttäjät haluavat päästä suojatuille sivuille, he ovat todennettuja ja valtuutettuja käyttämään reittejä sekä ohjaavat luvattomat käyttäjät kirjautumissivulle.

Next.js-sovellusten suojaaminen

Token-todennus on tehokas turvamekanismi. Se ei kuitenkaan ole ainoa käytettävissä oleva strategia sovellusten suojaamiseen luvattomalta käytöltä.

Sovellusten vahvistamiseksi dynaamista kyberturvallisuusmaisemaa vastaan ​​on tärkeää ottaa käyttöön kattava tietoturva lähestymistapa, joka puuttuu kokonaisvaltaisesti mahdollisiin tietoturva-aukoihin ja haavoittuvuuksiin perusteellisen toiminnan takaamiseksi suojaa.