Jelszó nélküli bejelentkezés megvalósítása Next.js 13 projektben NextAuth.js és Prisma segítségével

Ez a cikk a jelszó nélküli hitelesítés megvalósításához szükséges lépésekkel foglalkozik egy Next.js projektben a NextAuth.js könyvtár használatával. Ezenkívül a Prismát használjuk adatbázis-adapterként ennek eléréséhez.

A jelszó nélküli hitelesítés egy innovatív megközelítés, amely kiküszöböli a hagyományos felhasználónév és jelszó kombinációk szükségességét. Ehelyett biztonságosabb és felhasználóbarátabb hitelesítési élményt kínál alternatív módszerek, például e-mail-varázslinkek vagy SMS-ben küldött egyszeri kódok felhasználásával.

A Next.js egy népszerű React keretrendszer webes alkalmazások készítésére, amely egyszerűségéről és hatékonyságáról ismert. Könnyedén beépíthetjük projektünkbe a jelszó nélküli hitelesítést, ha integráljuk a NextAuth.js-t, egy kifejezetten a Next.js-hez tervezett hitelesítési könyvtárat.

Ezenkívül a Prismára fogunk támaszkodni adatbázis-adapterünkként. A Prisma egy ORM (Object-Relational Mapping) eszköz, amely típusbiztonságos és automatikusan generált lekérdezéskészítővel egyszerűsíti az adatbázis-interakciókat. Több adatbázist támogat, beleértve a PostgreSQL-t, a MySQL-t és az SQLite-t, így sokoldalú választás a hitelesítési megvalósításunkhoz.

Ebben az útmutatóban lépésről lépésre útmutatást adunk a jelszó nélküli hitelesítés beállításához és konfigurálásához a NextAuth.js használatával egy Next.js projektben. Azt is bemutatjuk, hogyan integrálhatjuk a Prismát adatbázis-adapterünkként, lehetővé téve az alkalmazásunk és az adatbázis közötti zökkenőmentes kommunikációt.

Most megvizsgáljuk, hogyan javíthatjuk Next.js alkalmazásunk biztonságát és felhasználói élményét a jelszó nélküli hitelesítés, valamint a NextAuth.js és a Prisma képességeivel. Kezdjük.

Mi az a jelszó nélküli bejelentkezés?

A jelszó nélküli bejelentkezés, ahogy a neve is sugallja, egy olyan hitelesítési módszer, amely szükségtelenné teszi a hagyományos felhasználónév és jelszó kombinációkat. Ehelyett alternatív módszereket használ a felhasználó személyazonosságának ellenőrzésére, például e-mail-hivatkozásokat vagy SMS-ben küldött egyszeri kódokat. Ez a megközelítés számos előnnyel rendelkezik a hagyományos bejelentkezési módszerekkel szemben. Először is, kiküszöböli a jelszóval kapcsolatos sebezhetőségek kockázatát, mint például a gyenge jelszavak vagy a jelszavak újrafelhasználása. Másodszor, leegyszerűsíti a felhasználói élményt azáltal, hogy nem kell emlékezni és beírni összetett jelszavakat.

A jelszó nélküli bejelentkezés megvalósításához e-mail varázshivatkozások vagy egyszeri kódok használatával szükségünk van egy SMTP (Simple Mail Transfer Protocol) szerverre.

Egy SMTP-szerver felelős az e-mailek interneten keresztüli küldéséért. A jelszó nélküli hitelesítés keretében a szerver elküldi a mágikus hivatkozásokat vagy egyszeri kódokat a felhasználó regisztrált e-mail címére. Amikor a felhasználó elindítja a bejelentkezési folyamatot, egy egyedi hivatkozást vagy kódot tartalmazó e-mail generálódik, amelyet elküld a felhasználónak. A felhasználó ezután rákattinthat a hivatkozásra, vagy beírhatja a kódot a hitelesítési folyamat befejezéséhez. Az SMTP szerver közvetítőként működik az alkalmazás és a felhasználó e-mail szolgáltatása között, biztosítva a hitelesítési üzenetek biztonságos és megbízható kézbesítését. Az SMTP-szerver használatával hatékonyan tudjuk megvalósítani a jelszó nélküli bejelentkezést, és zökkenőmentes hitelesítési élményt biztosítunk felhasználóinknak.

Kezdjük el!

Először is létre kell hoznunk egy új Next.js projektet. Ehhez használja a következő parancsot:

npx create-next-app@latest

Miután létrehozta a friss, új Next.js projektet, navigálhat az újonnan létrehozott projektkönyvtárba.

A projekt könyvtárának megváltoztatásával felfedezheti a Next.js projektstruktúrát alkotó különféle mappákat és fájlokat.

A projekt szerkezetének megértése elengedhetetlen a Next.js alkalmazás hatékony fejlesztéséhez és szervezéséhez. A hivatalos dokumentáció segítségével hasznosíthatja a bevált módszereket, és betekintést nyerhet a kód felépítésébe, a statikus eszközök kezelésébe és újrafelhasználható alkatrészeket hozzon létre.

Függőségeink telepítése

A jelszó nélküli hitelesítés engedélyezéséhez a Next.js projektben a NextAuth.js használatával, először telepítenünk kell a szükséges függőségeket. Futtassa a yarn add next-auth nodemailer parancsot a NextAuth.js és a nodemailer hozzáadásához a projektünkhöz.

Kifejezetten a nodemailert használjuk, mivel ez egy népszerű és sokoldalú modul az e-mailek Node.js-ben történő küldésére. Egyszerű és megbízható módot biztosít a jelszó nélküli hitelesítéshez szükséges mágikus linkek vagy egyszeri kódok e-mailben történő elküldésére.

Ezután integráljuk a Prismát adatbázis-adapterünkként. Kezdje a szükséges Prisma csomagok telepítésével a következő paranccsal:

yarn add @prisma/client @next-auth/prisma-adapter

Ezek a csomagok zökkenőmentes kommunikációt tesznek lehetővé Next.js alkalmazásunk és az adatbázis között. Ezenkívül telepítenünk kell a Prismát fejlesztői függőként a következő futtatással:

yarn add prisma --dev

Ez a lépés biztosítja, hogy rendelkezünk a szükséges eszközökkel a Prismával és annak automatikusan generált lekérdezéskészítőjével az adatbázis-interakciókhoz.

E függőségek telepítésével megalapozzuk a Next.js projektünkben a NextAuth.js és Prisma használatával történő jelszó nélküli hitelesítés megvalósítását.

A Prisma beállítása

A Next.js projektben jelszó nélküli hitelesítés használatához be kell állítani a Prismát, és hozzá kell férni egy SMTP-kiszolgálóhoz e-mail küldéshez. Ez az oktatóanyag végigvezeti Önt személyes Gmail-fiókja használatán e-mailek küldésére. A sikeres beállításhoz kövesse az alábbi lépéseket.

Először hozzon létre egy "prisma" mappát a projekt gyökerében. Ez a mappa tartalmazza a Prismával kapcsolatos fájlokat és konfigurációkat. Ezután a „prisma” mappában hozzon létre egy új fájlt „schema.prisma” néven. A sémafájl meghatározza az adatbázis szerkezetét, és a Prisma automatikusan generált kódjának tervezeteként szolgál.

Ha még nem ismeri a séma fogalmát, ne aggódjon! A séma meghatározza az adatbázis tábláit, mezőit, kapcsolatait és megszorításait. A séma létrehozásához tekintse meg a NextAuth.js hivatalos dokumentációját, és másolja át az ott található példasémát. Ez a séma kiindulópont, és testreszabható az alkalmazási követelményeknek megfelelően.

Ezután hozzon létre egy ".env" fájlt a projekt gyökerében. Ez a fájl tárolja a környezeti változókat, beleértve az SMTP-kiszolgálóhoz szükséges konfigurációkat. A „.env” fájl feltöltéséhez másolja át az alábbi példakonfigurációkat. Ügyeljen arra, hogy a megfelelő mezőkbe adja meg Gmail-fiókja hitelesítő adatait és az SMTP-szerver beállításait.

EMAIL_SERVER_USER="YourGmailAddress"
EMAIL_SERVER_PASSWORD="GmailPassOrGeneratedPass"
EMAIL_SERVER_HOST=smtp.gmail.com
EMAIL_SERVER_PORT=587
EMAIL_FROM="noreply@example.com"

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=ThisNeedsToBeSuperSecret

Az alábbi lépések végrehajtásával beállítja a Prismát, és beállítja az SMTP-kiszolgálót a Gmail-fiók használatával történő e-mailek küldésére. Ezek az előkészületek kulcsfontosságúak a jelszó nélküli hitelesítési folyamat engedélyezéséhez a Next.js projektben.

Jegyzet

Létre kell hoznia egy alkalmazásjelszót, ha engedélyezte a kéttényezős hitelesítést (2FA) a Google-fiókjában. Az alkalmazásjelszó egy különálló jelszó, amely hozzáférést biztosít bizonyos alkalmazásokhoz vagy eszközökhöz anélkül, hogy felfedné az elsődleges Google-fiók jelszavát. Kövesse az alábbi utasításokat az alkalmazásjelszó létrehozásához.

1. A https://myaccount.google.com/ oldalon nyissa meg a Google Fiók beállításait.

2. Lépjen a "Biztonság" fülre.

3. Keresse meg a "2FA" részt, görgessen le, és válassza az "Alkalmazásjelszavak" lehetőséget.

4. Előfordulhat, hogy a rendszer megkéri, hogy adja meg ismét Google-fiókja jelszavát a biztonsági ellenőrzés érdekében.

5. Az "Alkalmazás kiválasztása" legördülő menüben válassza a "Levelezés" vagy az "Egyéb (egyéni név)" lehetőséget.

• Ha elérhető a "Mail" opció, válassza ki.

• Ha a "Mail" opció nem elérhető, válassza az "Egyéb (Egyéni név)" lehetőséget, és adjon meg egy egyéni nevet az azonosításhoz.

6. Kattintson a "Létrehozás" vagy a "Jelszó generálása" gombra.

7. A Google egyedi alkalmazásjelszót generál Önnek. Jegyezze fel ezt a jelszót, mert ezt fogjuk használni az e-mailek küldésére szolgáló alkalmazásunkban.

8. Használja ezt a generált alkalmazásjelszót a Next.js alkalmazás SMTP-kiszolgáló konfigurációjában. Cserélje le szokásos Gmail-fiókjának jelszavát erre az alkalmazásjelszóra.

Ez biztosítja, hogy alkalmazása még a 2FA engedélyezése esetén is biztonságosan küldhessen e-maileket Gmail-fiókjával.

PostgreSQL a Supabase használatával

Mielőtt folytatnánk, meg kell győződnünk arról, hogy a projektünk adatbázisa megfelelően működik. Ehhez a bemutatóhoz a Supabase PostgreSQL adatbázis használatát javasoljuk. A Supabase projekt megkezdéséhez és a PostgreSQL kapcsolat URL-címének beszerzéséhez kövesse az alábbi lépéseket:

1. Nyissa meg a supabase.io webhelyet, és jelentkezzen be fiókjába, vagy hozzon létre egy újat, ha még nem rendelkezik vele.

2. Miután bejelentkezett, a Supabase irányítópultjára kerül. Új projekt indításához kattintson az "Új projekt létrehozása" gombra.

3. Nevezze el a projektet, és válassza ki a jelenlegi helyéhez legközelebb eső régiót. Ne felejtse el jelszavát, később szüksége lesz rá.

4. Amikor létrehozta a projektet, a projekt irányítópultjára kerül. Kattintson az "Adatbázis" elemre a bal oldalsávon az adatbázis-beállítások eléréséhez.

5. Az "Adatbázis" részben megtalálja a PostgreSQL kapcsolat URL-címét. Ez az URL tartalmazza a Supabase projekt adatbázisához való csatlakozáshoz szükséges összes információt, például a gazdagépet, portot, adatbázisnevet, felhasználónevet és jelszót. A következő formátumban jelenik meg: postgres://<felhasználónév>:<jelszó>@<host>:<port>/<adatbázis>

6. Másolja ki a PostgreSQL kapcsolat URL-címét, és őrizze meg biztonságban. Szüksége lesz rá, hogy kapcsolatot létesítsen az alkalmazása és a Supabase adatbázis között.

    // .env
    
    DATABASE_URL=postgresql://postgres:[Password]@db.ixjsisbwdafsjvgifliu.supabase.co:5432/postgres
    ```

Most pedig biztosítsuk, hogy a következő parancs futtatásával generáljuk Prisma kliensünket: `npx prisma generate`.

A Prisma Client egy adatbázis-ügyfél, amelyet automatikusan generálnak a séma alapján. A Prisma Client alapértelmezés szerint a `node_modules/.prisma/client' mappában jön létre, de [szükség esetén megadhat egyéni helyet](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path).

Ezután folytatjuk a kezdeti migráció létrehozását. Futtassa a következő parancsot: `npx prisma migrate dev`. Minden áttelepítésnek megadhat egy leíró nevet.

A Prismában az áttelepítés az adatbázisséma idő előrehaladtával történő módosításainak kezelésére szolgáló módszer. Lehetővé teszi az adatbázis-struktúra módosítását anélkül, hogy elveszítené a már meglévő adatokat. Ezek az áttelepítések kulcsfontosságúak, mivel biztosítják, hogy az adatbázisséma igazodjon az alkalmazás igényeihez, amikor azok változnak. A Prisma migrációs eszközével kényelmesen módosíthatja, alkalmazhatja és visszaállíthatja ezeket a változtatásokat, leegyszerűsítve a csapatmunkát, és egységes adatbázissémát tarthat fenn a különböző környezetekben.

Most, ha ellenőrizzük az adatbázisunkat, látni fogjuk a kezdeti migráció során bekövetkezett változásokat az adatbázis részben.

A kezdeti áttelepítés végrehajtásával a módosításokat alkalmaztuk az adatbázissémánk az áttelepítési parancsfájlban meghatározottak szerint.

![Database Tables after Migration](https://drive.google.com/uc?export=view&id=1PZ6ban5h4VZs3UHQoJS_5kNYkhqs-MAx)

### A NextAuthJS beállítása Prisma Adapterrel

A Next.js alkalmazásokban a NextAuthJS a gyűjtőútvonalat, más néven helyettesítő karakteres vagy tartalék útvonalat használja a hitelesítési kérelmek kezelésére. Ezt a dinamikus útvonalat a Next.js fájl alapú útválasztási rendszere határozza meg.

Hozzon létre egy „**api**” nevű mappát az „**app**” könyvtárban. Az „**api**” mappán belül hozzon létre egy „**auth**” mappát. A „**auth**” mappában hozzon létre egy „**[...nextauth]**” összesítő útvonalat mappaként. Végül hozzon létre egy "**route.ts**" fájlt a gyűjtőútvonal mappában, és adja hozzá a következő kódot.

```jsx
// app/api/auth/[...nextauth]/route.ts
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import { PrismaClient } from '@prisma/client';
import NextAuth from 'next-auth';
import EmailProvider from 'next-auth/providers/email';

const prisma = new PrismaClient();

export const authOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        },
      },
      from: process.env.EMAIL_FROM,
    }),
  ]
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

Az összesítő útvonalfájlban importáljuk a NextAuthJS könyvtárat, és beállítjuk a hitelesítési beállításokat, a szolgáltatókat és a konfigurációkat. A NextAuthJS kezeli a bejövő kérések elemzését, azonosítja a szükséges hitelesítési műveletet, és végrehajtja a megfelelő logikát a megadott beállításoknak megfelelően.

A mellékelt kód beállítja a NextAuthJS-t a Prisma adapterrel az e-mail szolgáltató segítségével történő hitelesítéshez. Magyarázzuk meg az egyes állításokat:

1. Import:

• A PrismaAdapter és PrismaClient a @next-auth/prisma-adapter és a @prisma/client címről importálva. Ezeket a NextAuthJS és a Prisma integrálására használják.

• A NextAuth a next-auth fájlból van importálva, és ez a fő könyvtár a Next.js alkalmazások hitelesítésének kezelésére.

• Az EmailProvider a next-auth/providers/email mappából van importálva, és szolgáltatóként szolgál az e-mail alapú hitelesítéshez.

2. Prisma beállítása:

• A PrismaClient példánya a new PrismaClient() használatával jön létre. Ez lehetővé teszi a kommunikációt a Prisma ORM-mel és az alapul szolgáló adatbázissal.

3. Hitelesítési lehetőségek:

• Az authOptions egy objektum, amely meghatározza a hitelesítés konfigurációját a NextAuthJS-ben.

• Az adapter tulajdonság beállítása PrismaAdapter(prisma), amely a PrismaAdapter segítségével köti össze a NextAuthJS-t a Prismával.

• A providers tömb egyetlen szolgáltatót tartalmaz, az EmailProvider-t. A szükséges e-mail szerver adataival és a feladó e-mail címmel van konfigurálva.

4. NextAuth-kezelő:

• A NextAuth függvény meghívása az authOptions argumentummal együtt hitelesítéskezelőt hoz létre.

• Az eredményül kapott kezelő a handler változóhoz van rendelve.

5. Exportálás:

• A handler GET és POST formátumban van exportálva a HTTP GET és POST kérések támogatásához.

Most futtassuk a szerverünket, és teszteljük a funkcionalitást. Először indítsa el a fejlesztőkiszolgálót a "yarn dev" futtatásával. Ezután nyissa meg a böngészőt, és látogasson el a „localhost:3000” oldalra, hogy megtekinthesse az alkalmazás működését.

A hitelesítési funkció teszteléséhez látogasson el a localhost:3000/api/auth/signin oldalra. Itt megtapasztalhatja a NextAuthJS varázsát. A NextAuthJS-hez mellékelt sablon lehetővé teszi a jelszó nélküli bejelentkezési folyamatot. A kipróbáláshoz adjon meg egy érvényes e-mail címet.

Miután elküldte az e-mailt, a NextAuthJS kezeli a színfalak mögötti folyamatot. Először egy egyedi bejelentkezési linket tartalmazó e-mailt generál és küld a megadott e-mail címre. Ez a hivatkozás biztonságos hitelesítési tokenként szolgál a felhasználó számára. Ezután, amikor a felhasználó a hivatkozásra kattint, a NextAuthJS érvényesíti a tokent, és hitelesíti a felhasználót.

Ez a jelszó nélküli bejelentkezési funkció növeli a biztonságot és a felhasználói élményt azáltal, hogy nincs szükség jelszavakra. A felhasználók gyorsan és biztonságosan hozzáférhetnek fiókjukhoz, egyszerűen az e-mailben kapott linkre kattintva. Leegyszerűsíti a bejelentkezési folyamatot, és csökkenti a jelszóval kapcsolatos biztonsági rések kockázatát.

Amikor a felhasználó rákattint a NextAuthJS által generált bejelentkezési e-mailre, és hitelesítést kap, a színfalak mögött számos művelet történik a zökkenőmentes bejelentkezés megkönnyítése érdekében.

1. E-mail link érvényesítése: Amikor a felhasználó a bejelentkezési linkre kattint, a NextAuthJS ellenőrzi a linkbe ágyazott hitelesítési tokent. Ez a token biztosítja a hitelesítési folyamat biztonságát és integritását.

2. Hitelesítési folyamat: Sikeres tokenellenőrzést követően a NextAuthJS azonosítja a felhasználót, és befejezi a hitelesítési folyamatot. Ellenőrzi a felhasználó személyazonosságát a megadott token és a további konfigurált hitelesítési tényezők, például a többtényezős hitelesítés alapján.

3. Munkamenet létrehozása: A sikeres hitelesítés után a NextAuthJS munkamenetet hoz létre a felhasználó számára. A munkamenet egy állandó állapot, amely a felhasználó hitelesítési állapotát jelzi, és lehetővé teszi számára a védett erőforrásokhoz való hozzáférést anélkül, hogy a későbbi kérésekhez újra hitelesíteni kellene.

4. Cookie-k: A NextAuthJS biztonságos, csak HTTP-alapú cookie-kat állít be a felhasználó böngészőjében a munkamenet kezeléséhez. Ezek a sütik kulcsfontosságú szerepet játszanak a felhasználó hitelesített állapotának fenntartásában több kérés során. A cookie-k jellemzően munkamenet cookie-t és opcionálisan egy frissítési jogkivonat cookie-t tartalmaznak, a hitelesítési konfigurációtól függően.

1. Session Cookie: A munkamenet-cookie egy munkamenet-azonosítót (pl. egy véletlenszerűen generált karakterláncot) tartalmaz, amely egyedileg azonosítja a felhasználó munkamenetét. Segít a NextAuthJS-nek abban, hogy a következő kéréseket a megfelelő munkamenethez és felhasználóhoz társítsa.

2. CSRF Token Cookie: A NextAuthJS egy CSRF (Cross-Site Request Forgery) token cookie-t állít be a CSRF támadások elleni védelem érdekében. A CSRF token a NextAuthJS által generált és a cookie-ban tárolt egyedi érték. A felhasználó által benyújtott későbbi kérések érvényességének és hitelességének ellenőrzésére szolgál. Amikor a felhasználó űrlapokat küld el vagy bizalmas műveleteket hajt végre, a CSRF-jogkivonat szerepel a kérés fejlécében vagy törzsében annak biztosítása érdekében, hogy a kérés a hitelesített felhasználó munkamenetéből származzon, és ne rosszindulatú forrásból.

3. Visszahívási URL-cookie: A NextAuthJS egy visszahívási URL-cookie-t állít be az eredeti URL-cím tárolására, amelyhez a felhasználó megpróbált hozzáférni, mielőtt átirányította volna a hitelesítési folyamatba. Ez a cookie segít a NextAuthJS-nek, hogy a sikeres hitelesítés után visszairányítsa a felhasználót a kívánt oldalra. Zökkenőmentes felhasználói élményt biztosít azáltal, hogy zökkenőmentesen visszaküldi a felhasználót a tervezett céloldalra az általános céloldal helyett.

A csak HTTP-alapú biztonságos cookie-k használatával a NextAuthJS biztosítja, hogy a hitelesítési állapot biztonságos és hamisításmentes maradjon. A cookie-k titkosítottak, így megakadályozzák a rosszindulatú szereplők jogosulatlan hozzáférését vagy módosítását.

Nagyszerű munka a NextAuthJS és a Prisma adapter sikeres integrálása során a Next.js alkalmazásba! A NextAuthJS által nyújtott könnyedséggel és alkalmazkodóképességgel most egy megbízható hitelesítési rendszerrel rendelkezik.

Tekintse meg az alábbi linkre hivatkozott GitHub-tárat az útmutatóban használt kódért: https://github.com/codelabsacademy/next-auth-guide.

De miért álljunk meg itt? Ha szenvedélyesen rajong a webfejlesztésért, és szívesen fejleszti képességeit, fontolja meg, hogy jelentkezzen webfejlesztési kezdőtáborunkra. Bootcampünk átfogó tanulási élményt kínál, felvértezve Önt azokkal a tudással és gyakorlati készségekkel, amelyek szükségesek ahhoz, hogy kitűnjön a webfejlesztés dinamikus világában.

Ha csatlakozik bootcamp-ünkhöz, gyakorlati tapasztalatokat szerezhet a legmodernebb technológiák terén, valós projekteken dolgozhat, és személyre szabott útmutatást kaphat az iparági szakértőktől. Akár kezdő, akár tapasztalt fejlesztő, programunk célja, hogy webfejlesztési készségeit a következő szintre emelje.

Ne hagyja ki ezt a lehetőséget, hogy felgyorsítsa webfejlesztési útját. Jelentkezzen webfejlesztési indítótáborunkra még ma, és tárja fel teljes potenciálját a webfejlesztés izgalmas területén. Építsünk együtt csodálatos digitális élményeket, és alakítsuk a web jövőjét.