Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

A hitelesítés az alkalmazásfejlesztés kulcsfontosságú eleme. Segít megvédeni a felhasználói adatokat és megakadályozni a rosszindulatú tevékenységeket. Egyszerűen fogalmazva, meghatározza a felhasználó identitásának hitelességét, biztosítva, hogy csak a jogosult felhasználók férhessenek hozzá az alkalmazáshoz és annak erőforrásaihoz.

Egy egyedi hitelesítési rendszer létrehozása időigényes feladat lehet, és itt jön jól a NextAuth.js. Biztonságos hitelesítési támogatást nyújt a Next.js keretrendszerrel épített alkalmazások számára.

Mi az a NextAuth.js?

NextAuth.js egy nyílt forráskódú, könnyű könyvtár, amely biztosítja hitelesítés és engedélyezés a Next.js alkalmazások támogatása. Segítségével a fejlesztők gyorsan és egyszerűen beállíthatnak hitelesítést és engedélyezést Next.js alkalmazásaikhoz. Olyan funkciókat biztosít, mint a több szolgáltatóval történő hitelesítés, az e-mail és a jelszó nélküli hitelesítés.

instagram viewer

Hogyan működik a NextAuth.js a hitelesítésben?

A NextAuth.js hitelesítési megoldása olyan ügyféloldali API-t biztosít, amelyre Ön is képes integrálja a Next.js alkalmazásba. Használhatja a különböző bejelentkezési szolgáltatókkal rendelkező felhasználók hitelesítésére, akiknél fiókot hoztak létre.

A motorháztető alatt a felhasználók átirányításra kerülnek a szolgáltató bejelentkezési oldalára. Sikeres hitelesítés esetén a szolgáltató visszaküldi a munkamenet-adatokat, amelyek a felhasználó rakományát tartalmazzák. Ez a rakomány ezután engedélyezheti a hozzáférést az alkalmazáshoz és erőforrásaihoz.

Új funkciófrissítések a NextAuth.js-ben (v4)

2022 decemberében a NextAuth.js kiadta negyedik verzióját. Ez a verzió a korábbi, v3-as verzióhoz képest új frissítésekkel és módosításokkal javult. A változtatások elsősorban a könyvtár használatának javítására irányulnak a hitelesítési folyamatban.

1. A useSession Hook frissítései

A useSession hook segítségével ellenőrizheti, hogy egy felhasználó bejelentkezett-e vagy sem. Ebben az új verzióban a useSession hook olyan objektumot ad vissza, amely egyszerűbb módot biztosít az állapotok tesztelésére, köszönhetően a status opciónak. Lásd az alábbi kódot:

import { useSession } tól től"next-auth/react"
exportalapértelmezettfunkcióÖsszetevő() {
const { adat: munkamenet, állapot } = useSession()


ha (állapot "hitelesített") { 
Visszatérés<p>Bejelentkezve: {session.user.email}p>
 }
Visszatérés<p> Nincs bejelentkezve p>
}

2. A SessionProvider kontextusa kötelezővé válik

Az új, negyedik verzió a SessionProvider környezet használatát írja elő. Ez azt jelenti, hogy be kell csomagolnia az alkalmazást a useSession Provider szolgáltatással. A NextAuth.js azt javasolja, hogy az alkalmazást a _app.jsx fájlt.

Ezenkívül a clientMaxAge metódust a refetchInterval helyettesítette. Ez megkönnyíti a munkamenet rendszeres lekérését a háttérben.

import { SessionProvider } tól től"next-auth/react"
exportalapértelmezettfunkcióApp({
 Component, pageProps: { session, ...pageProps }, 
}) {
Visszatérés ( 
<SessionProviderülés={ülés}refetchInterval={5 * 60}>
<Összetevő {...pageProps} />SessionProvider>
 )
}

3. Szolgáltatók egyéni importálása

A NextAuth.js számos szolgáltatói szolgáltatást biztosít, amelyek segítségével bejelentkezhet a felhasználókba. Tartalmazzák:

  • Beépített OAuth-szolgáltatók (pl. GitHub, Google) használata.
  • Az e-mail szolgáltató használata.

Ebben az új verzióban minden szolgáltatót külön kell importálni.

import GoogleProvider tól től"next-auth/providers/google"
import Auth0Provider tól től"next-auth/providers/auth0";

4. Egyéb kisebb változtatások

  • Az ügyféloldali importálás át lett nevezve a következő hitelesítésre/reagálásra a következő hitelesítésről/ügyfélről.
  • Változások a visszahívási metódusok argumentumaiban: 
    bejelentkezés ({ felhasználó, fiók, profil, e-mail, hitelesítő adatok })
    munkamenet ({ munkamenet, token, felhasználó })
    jwt({ token, user, account, profile, isNewUser })

A NextAuth.js használatának első lépései a hitelesítésben

A NextAuth.js Next.js alkalmazásaiba való integrálásához kövesse az alábbi lépéseket:

  1. Hozzon létre egy Next.js alkalmazást a következő parancs futtatásával: npx Create-next-app
  2. Fuss npm install next-ath termináljában a NextAuth.js telepítéséhez a Next.js alkalmazásban.
  3. Meglátogatni a NextAuth.js hivatalos dokumentációt, és válassza ki a kívánt szolgáltatót/szolgáltatókat a támogatottak listájából. Ezután hozzon létre egy fiókot a kiválasztott szolgáltató(k) fejlesztői konzoljában, és regisztrálja Next.js alkalmazását.
  4. A kiválasztott szolgáltató(k) fejlesztői konzoljában adja meg a otthoni útvonal URL-je és a visszahívási átirányítási URL, mentse el a módosításokat, és másolja a Ügyfélazonosító és Ügyfél titka.
  5. A Next.js alkalmazás gyökérkönyvtárában hozzon létre egy .env fájlt a Ügyfélazonosító és Ügyfél titka.
  6. Végül a /pages/api könyvtárban hozzon létre egy új mappát, melynek neve auth. Az auth mappában hozzon létre egy új fájlt, és nevezze el [...nextauth].js. A létrehozott fájlba adja hozzá az alábbi kódot. A kód a NextAuth.js kliensoldali API-t mutatja egy Google szolgáltató használatával: 
import GoogleProvider tól től"next-auth/providers/google";
szolgáltatók: [
 GoogleProvider({
Ügyfélazonosító: folyamat.env.GOOGLE_CLIENT_ID,
kliensTitkos: folyamat.env.GOOGLE_CLIENT_SECRET
 })
]

Most már létrehozhat egy bejelentkezési hitelesítési oldalt. Íme egy DOM-megjelenítés egy bejelentkezési összetevőhöz:

import Reagál tól től'reagál';
import { useSession, bejelentkezés, kijelentkezés } tól től"next-auth/react"
exportalapértelmezettfunkcióÖsszetevő() {
const { adat: session } = useSession()


 if (munkamenet) {
Visszatérés (
<>
<p> Bejelentkezve: {session.user.email} p>
<gombkattintásra={() => signOut()}>Kijelentkezésgomb>

 )
 }
Visszatérés (
<>
<p> Nincs bejelentkezve p>
<gombkattintásra={() => signIn()}>Jelentkezzen begomb>

 )
}

A useSession A Hook hozzáfér az aktuális felhasználói munkamenet objektumhoz. Amint a felhasználó bejelentkezik, és a Google hitelesíti, egy munkamenet-objektum kerül visszaadásra a felhasználói rakomány tartalmával. Ez lehetővé teszi, hogy a Next.js megjelenítse a felhasználói adatokat az alkalmazás ügyféloldalán, ebben az esetben az e-mailben.

Egyéni hitelesítési rendszerek vs. Használatra kész megoldások, mint például a NextAuth.js

Választhat az egyéni hitelesítési rendszer felépítése és a használatra kész hitelesítés integrálása között megoldás, mint például a NextAuth.js, fontos figyelembe venni mindegyik költségét, összetettségét és biztonságát megoldás.

Ha rendelkezik az egyéni hitelesítési rendszer fejlesztéséhez szükséges erőforrásokkal és szakértelemmel, ez lehet a legjobb megoldás az Ön számára. Ha azonban olyan kész megoldást keres, amely könnyen megvalósítható, biztonságos és költséghatékony, akkor a NextAuth.js jó választás lehet. Végső soron a választás az Ön igényeitől és preferenciáitól függ.