Implementacija prijave brez gesla v projektu Next.js 13 z NextAuth.js in Prisma

Ta članek se bo poglobil v korake, potrebne za implementacijo avtentikacije brez gesla v projektu Next.js s knjižnico NextAuth.js. Poleg tega bomo za dosego tega uporabili Prismo kot naš adapter baze podatkov.

Preverjanje pristnosti brez gesla je inovativen pristop, ki odpravlja potrebo po tradicionalnih kombinacijah uporabniškega imena in gesla. Namesto tega ponuja varnejšo in uporabniku prijaznejšo izkušnjo preverjanja pristnosti z uporabo alternativnih metod, kot so e-poštne čarobne povezave ali enkratne kode, poslane prek SMS-a.

Next.js je priljubljeno ogrodje React za izdelavo spletnih aplikacij, znano po svoji preprostosti in učinkovitosti. Preverjanje pristnosti brez gesla lahko preprosto vključimo v naš projekt z integracijo NextAuth.js, knjižnice za preverjanje pristnosti, zasnovane izrecno za Next.js.

Poleg tega se bomo zanašali na Prismo kot naš adapter za bazo podatkov. Prisma je orodje ORM (Object-Relational Mapping), ki poenostavlja interakcije z bazo podatkov z zagotavljanjem varnega za tip in samodejno generiranega graditelja poizvedb. Podpira več baz podatkov, vključno s PostgreSQL, MySQL in SQLite, zaradi česar je vsestranska izbira za našo implementacijo avtentikacije.

V tem priročniku bomo podali navodila po korakih o tem, kako nastaviti in konfigurirati preverjanje pristnosti brez gesla z uporabo NextAuth.js v projektu Next.js. Prikazali bomo tudi, kako integrirati Prismo kot naš adapter za bazo podatkov, ki omogoča brezhibno komunikacijo med našo aplikacijo in bazo podatkov.

Zdaj bomo raziskali, kako izboljšati varnost in uporabniško izkušnjo naše aplikacije Next.js z uporabo preverjanja pristnosti brez gesla ter zmožnosti NextAuth.js in Prisma. Začnimo.

Kaj je prijava brez gesla?

Prijava brez gesla, kot že ime pove, je način preverjanja pristnosti, ki odpravlja potrebo po tradicionalnih kombinacijah uporabniškega imena in gesla. Namesto tega uporablja alternativne načine preverjanja identitete uporabnika, kot so čarobne povezave po e-pošti ali enkratne kode, poslane prek SMS-a. Ta pristop ponuja več prednosti pred tradicionalnimi načini prijave. Prvič, odpravlja tveganje ranljivosti, povezanih z gesli, kot so šibka gesla ali ponovna uporaba gesel. Drugič, poenostavlja uporabniško izkušnjo, saj ni več potrebe po pomnjenju in vnašanju zapletenih gesel.

Za implementacijo prijave brez gesla z uporabo e-poštnih čarobnih povezav ali enkratnih kod potrebujemo strežnik SMTP (Simple Mail Transfer Protocol).

Strežnik SMTP je odgovoren za pošiljanje e-pošte prek interneta. V okviru avtentikacije brez gesla strežnik pošlje čarobne povezave ali enkratne kode na registrirani e-poštni naslov uporabnika. Ko uporabnik sproži postopek prijave, se ustvari e-poštno sporočilo z edinstveno povezavo ali kodo, ki se pošlje uporabniku. Uporabnik lahko nato klikne povezavo ali vnese kodo za dokončanje postopka preverjanja pristnosti. Strežnik SMTP deluje kot posrednik med aplikacijo in uporabnikovo e-poštno storitvijo ter zagotavlja varno in zanesljivo dostavo sporočil za preverjanje pristnosti. Z uporabo strežnika SMTP lahko učinkovito implementiramo prijavo brez gesla in našim uporabnikom zagotovimo brezhibno izkušnjo preverjanja pristnosti.

Začnimo!

Najprej moramo ustvariti nov projekt Next.js. Če želite to narediti, uporabite naslednji ukaz:

npx create-next-app@latest

Ko ustvarite svež nov projekt Next.js, se lahko pomaknete do novo ustvarjenega imenika projekta.

Če spremenite imenik v projekt, boste lahko raziskovali različne mape in datoteke, ki sestavljajo strukturo projekta Next.js.

Razumevanje strukture projekta je bistveno za učinkovit razvoj in organizacijo vaše aplikacije Next.js. S sklicevanjem na uradno dokumentacijo lahko izkoristite najboljše prakse in pridobite vpogled v strukturiranje kode, upravljanje statičnih sredstev in ustvarite komponente za večkratno uporabo.

Namestitev naših odvisnosti

Če želimo omogočiti preverjanje pristnosti brez gesla v našem projektu Next.js z uporabo NextAuth.js, moramo najprej namestiti zahtevane odvisnosti. Zaženite ukaz yarn add next-auth nodemailer, da v naš projekt dodate tako NextAuth.js kot nodemailer.

Posebej uporabljamo nodemailer, saj je priljubljen in vsestranski modul za pošiljanje e-pošte v Node.js. Zagotavlja enostaven in zanesljiv način pošiljanja čarobnih povezav ali enkratnih kod, potrebnih za preverjanje pristnosti brez gesla, po e-pošti.

Nato integrirajmo Prismo kot naš adapter baze podatkov. Začnite z namestitvijo zahtevanih paketov Prisma z ukazom:

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

Ti paketi bodo omogočili brezhibno komunikacijo med našo aplikacijo Next.js in bazo podatkov. Poleg tega moramo Prismo namestiti tudi kot odvisnost od razvijalcev, tako da zaženemo:

yarn add prisma --dev

Ta korak zagotavlja, da imamo potrebna orodja za delo s Prismo in njenim samodejno ustvarjenim graditeljem poizvedb za interakcije z bazo podatkov.

Z namestitvijo teh odvisnosti smo postavili osnovo za implementacijo avtentikacije brez gesla z uporabo NextAuth.js in Prisma v našem projektu Next.js.

Nastavite Prismo

Za uporabo avtentikacije brez gesla v projektu Next.js morate nastaviti Prismo in imeti dostop do strežnika SMTP za pošiljanje e-pošte. Ta vadnica vas bo vodila skozi uporabo osebnega računa Gmail za pošiljanje e-pošte. Sledite spodnjim korakom za uspešno nastavitev.

Najprej ustvarite mapo "prisma" v korenu vašega projekta. V tej mapi bodo datoteke in konfiguracije, povezane s Prismo. Nato znotraj mape »prisma« ustvarite novo datoteko z imenom »schema.prisma« Datoteka sheme definira strukturo vaše zbirke podatkov in služi kot načrt za samodejno ustvarjeno kodo Prisma.

Če ste novi v konceptu sheme, ne skrbite! Shema določa tabele, polja, relacije in omejitve vaše zbirke podatkov. Če želite ustvariti shemo, se lahko obrnete na uradno dokumentacijo NextAuth.js in kopirate primer sheme, ki je tam na voljo. Ta shema je izhodišče in jo je mogoče prilagoditi zahtevam vaše aplikacije.

Nato ustvarite datoteko ".env" v korenu vašega projekta. Ta datoteka bo shranila vaše spremenljivke okolja, vključno s potrebnimi konfiguracijami za vaš strežnik SMTP. Če želite zapolniti datoteko ".env", lahko kopirate primere konfiguracij, ki so navedeni spodaj. Prepričajte se, da ste v ustrezna polja vnesli poverilnice računa Gmail in nastavitve strežnika SMTP.

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

Če sledite tem korakom, boste nastavili Prismo in konfigurirali strežnik SMTP za pošiljanje e-pošte z vašim računom Gmail. Te priprave so ključne za omogočanje toka preverjanja pristnosti brez gesla v vašem projektu Next.js.

Opomba

Ustvariti morate geslo za aplikacijo, če ste za svoj Google Račun omogočili dvofaktorsko preverjanje pristnosti (2FA). Geslo za aplikacijo je ločeno geslo, ki omogoča dostop do določenih aplikacij ali naprav, ne da bi razkrili geslo vašega primarnega računa Google. Sledite spodnjim navodilom za ustvarjanje gesla za aplikacijo.

1. Pojdite na stran z nastavitvami Google Računa tako, da obiščete https://myaccount.google.com/.

2. Pomaknite se do zavihka "Varnost".

3. Poiščite razdelek »2FA«, se pomaknite navzdol in izberite »Gesla za aplikacije«.

4. Morda boste pozvani, da znova vnesete geslo za Google Račun za varnostno preverjanje.

5. V spustnem meniju »Izberi aplikacijo« izberite »Pošta« ali »Drugo (ime po meri)«.

• Če je na voljo možnost »Pošta«, jo izberite.

• Če možnost »Pošta« ni na voljo, izberite »Drugo (ime po meri)« in navedite ime po meri za identifikacijo.

6. Kliknite na gumb "Ustvari" ali "Ustvari geslo".

7. Google bo za vas ustvaril edinstveno geslo za aplikacijo. Zabeležite si to geslo, saj ga bomo uporabljali v naši aplikaciji za pošiljanje e-pošte.

8. Uporabite to ustvarjeno geslo za aplikacijo v konfiguraciji strežnika SMTP aplikacije Next.js. Zamenjajte običajno geslo računa Gmail s tem geslom za aplikacijo.

To zagotavlja, da lahko vaša aplikacija tudi z omogočenim 2FA varno pošilja e-pošto z vašim računom Gmail.

PostgreSQL z uporabo Supabase

Preden lahko nadaljujemo, moramo zagotoviti, da baza podatkov za naš projekt deluje pravilno. Za to predstavitev priporočamo uporabo baze podatkov Supabase PostgreSQL. Če želite začeti s projektom Supabase in pridobiti URL povezave PostgreSQL, sledite tem korakom:

1. Pojdite na supabase.io in se prijavite v svoj račun ali ustvarite novega, če ga še nimate.

2. Ko se prijavite, boste preusmerjeni na nadzorno ploščo Supabase. Za začetek novega projekta kliknite »Ustvari nov projekt«.

3. Poimenujte svoj projekt in izberite regijo, ki je najbližja vaši trenutni lokaciji. Zapomnite si geslo, potrebovali ga boste pozneje.

4. Ko ustvarite projekt, boste preusmerjeni na nadzorno ploščo projekta. Za dostop do nastavitev baze podatkov kliknite »Zbirka podatkov« na levi stranski vrstici.

5. V razdelku »Zbirka podatkov« boste našli URL povezave PostgreSQL. Ta URL vsebuje vse potrebne informacije za povezavo z bazo podatkov vašega projekta Supabase, kot so gostitelj, vrata, ime baze podatkov, uporabniško ime in geslo. Prikazano bo v obliki: postgres://<uporabniško ime>:<geslo>@<gostitelj>:<vrata>/<baza podatkov>

6. Kopirajte URL povezave PostgreSQL in ga shranite na varno. Potrebovali ga boste za vzpostavitev povezave med vašo aplikacijo in bazo podatkov Supabase.

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

Zdaj pa zagotovimo, da ustvarimo našega odjemalca Prisma tako, da zaženemo naslednji ukaz: `npx prisma generate`.

Odjemalec Prisma je odjemalec baze podatkov, ki se samodejno ustvari na podlagi vaše sheme. Odjemalec Prisma je privzeto ustvarjen v mapi `node_modules/.prisma/client`, vendar lahko [po potrebi določite lokacijo po meri](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path).

Nato bomo nadaljevali z ustvarjanjem naše začetne selitve. Zaženite naslednji ukaz: `npx prisma migrate dev`. Vsaki selitvi lahko daste opisno ime.

V Prismi je selitev metoda, ki se uporablja za upravljanje prilagoditev vaše sheme baze podatkov, ko čas napreduje. Omogoča vam spreminjanje strukture baze podatkov, ne da bi pri tem izgubili že obstoječe podatke. Te migracije so ključnega pomena, saj zagotavljajo, da se shema vaše baze podatkov uskladi s potrebami vaše aplikacije, ko se spreminjajo. S Prisminim orodjem za selitev lahko te spremembe priročno različicite, uporabite in razveljavite, s čimer poenostavite timsko delo in vzdržujete enotno shemo baze podatkov v različnih okoljih.

Zdaj, če preverimo svojo zbirko podatkov, bomo lahko videli spremembe iz naše začetne selitve, ki se odražajo v razdelku baze podatkov.

Z izvedbo začetne selitve smo uporabili spremembe naše sheme baze podatkov, kot je opredeljeno v skriptu za selitev.

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

### Nastavitev NextAuthJS z adapterjem Prisma

V aplikaciji Next.js NextAuthJS uporablja vseobsegajočo pot, znano tudi kot nadomestni znak ali nadomestna pot, za upravljanje zahtev za preverjanje pristnosti. Ta dinamična pot je definirana z uporabo sistema usmerjanja na podlagi datotek v Next.js.

Ustvarite mapo z imenom "**api**" v vašem imeniku "**app**". Znotraj mape "**api**" ustvarite mapo "**auth**". Znotraj mape »**auth**« ustvarite vseobsegajočo pot z imenom »**[...nextauth]**« kot mapo. Nazadnje ustvarite datoteko "**route.ts**" znotraj mape vseobsegajoče poti in dodajte naslednjo kodo.

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

V datoteki catch-all route uvozimo knjižnico NextAuthJS in nastavimo možnosti avtentikacije, ponudnike in konfiguracije. NextAuthJS obravnava razčlenjevanje dohodnih zahtev, prepozna potrebno dejanje preverjanja pristnosti in izvede ustrezno logiko v skladu z navedenimi možnostmi.

Priložena koda nastavi NextAuthJS z adapterjem Prisma za preverjanje pristnosti s ponudnikom e-pošte. Razložimo vsako trditev:

1. Uvozi:

• PrismaAdapter in PrismaClient sta uvožena iz @next-auth/prisma-adapter oziroma @prisma/client. Ti se uporabljajo za integracijo NextAuthJS s Prismo.

• NextAuth je uvožen iz next-auth in je glavna knjižnica za upravljanje avtentikacije v aplikacijah Next.js.

• EmailProvider je uvožen iz next-auth/providers/email in se uporablja kot ponudnik za preverjanje pristnosti na podlagi e-pošte.

2. Nastavitev Prisma:

• Primerek PrismaClient je ustvarjen z uporabo new PrismaClient(). To omogoča komunikacijo s Prisma ORM in osnovno bazo podatkov.

3. Možnosti preverjanja pristnosti:

• authOptions je objekt, ki definira konfiguracijo za preverjanje pristnosti v NextAuthJS.

• Lastnost adapter je nastavljena na PrismaAdapter(prisma), ki povezuje NextAuthJS s Prismo z uporabo PrismaAdapter.

• Matrika ponudnikov vsebuje enega samega ponudnika, EmailProvider. Konfiguriran je s potrebnimi podrobnostmi e-poštnega strežnika in e-poštnim naslovom od.

4. Obravnavalec NextAuth:

• Funkcija NextAuth je poklicana z authOptions kot argumentom, kar ustvari upravljalnik za preverjanje pristnosti.

• Dobljeni upravljalnik je dodeljen spremenljivki handler.

5. Izvoz:

• obravnavalec je izvožen kot GET in POST, da podpira zahteve HTTP GET in POST.

Zdaj pa zaženimo naš strežnik in preizkusimo funkcionalnost. Najprej zaženite razvojni strežnik z zagonom yarn dev. Nato odprite brskalnik in obiščite localhost:3000, da vidite aplikacijo v akciji.

Če želite preizkusiti funkcijo preverjanja pristnosti, obiščite localhost:3000/api/auth/signin. Tukaj boste izkusili čarobnost NextAuthJS. Priložena predloga, vključena v NextAuthJS, omogoča postopek prijave brez gesla. Če ga želite preizkusiti, vnesite veljaven e-poštni naslov.

Ko pošljete e-poštno sporočilo, bo NextAuthJS obravnaval postopek v zakulisju. Najprej bo ustvaril in poslal e-poštno sporočilo z edinstveno povezavo za prijavo na navedeni e-poštni naslov. Ta povezava služi kot varen žeton za preverjanje pristnosti za uporabnika. Potem, ko uporabnik klikne povezavo, bo NextAuthJS preveril žeton in overil uporabnika.

Ta funkcija prijave brez gesla izboljša varnost in uporabniško izkušnjo, saj odpravlja potrebo po geslu. Uporabniki lahko hitro in varno dostopajo do svojih računov s preprostim klikom na povezavo, prejeto po e-pošti. Poenostavi postopek prijave in zmanjša tveganje ranljivosti, povezanih z geslom.

Ko uporabnik klikne e-poštno sporočilo za prijavo, ki ga ustvari NextAuthJS, in se potrdi pristnost, se v zakulisju izvede več dejanj, ki olajšajo brezhibno izkušnjo prijave.

1. Preverjanje e-poštne povezave: Ko uporabnik klikne povezavo za prijavo, NextAuthJS preveri žeton za preverjanje pristnosti, vdelan v povezavo. Ta žeton zagotavlja varnost in celovitost postopka avtentikacije.

2. Postopek preverjanja pristnosti: Po uspešnem preverjanju žetona NextAuthJS identificira uporabnika in dokonča postopek preverjanja pristnosti. Preveri identiteto uporabnika na podlagi posredovanega žetona in morebitnih dodatnih konfiguriranih dejavnikov preverjanja pristnosti, kot je večfaktorsko preverjanje pristnosti.

3. Ustvarjanje seje: po uspešnem preverjanju pristnosti NextAuthJS ustvari sejo za uporabnika. Seja je trajno stanje, ki predstavlja stanje preverjanja pristnosti uporabnika in mu omogoča dostop do zaščitenih virov, ne da bi se moral znova preverjati pri naslednjih zahtevah.

4. Piškotki: NextAuthJS nastavi varne piškotke samo HTTP v brskalniku uporabnika za upravljanje seje. Ti piškotki igrajo ključno vlogo pri ohranjanju stanja pristnosti uporabnika med več zahtevami. Piškotki običajno vključujejo piškotek seje in po izbiri piškotek žetona za osvežitev, odvisno od konfiguracije preverjanja pristnosti.

1. Piškotek seje: Piškotek seje vsebuje identifikator seje (npr. naključno ustvarjen niz), ki enolično identificira uporabnikovo sejo. Pomaga NextAuthJS povezati nadaljnje zahteve s pravilno sejo in uporabnikom.

2. CSRF Token Cookie: NextAuthJS nastavi žetonski piškotek CSRF (Cross-Site Request Forgery) za zaščito pred napadi CSRF. Žeton CSRF je edinstvena vrednost, ki jo ustvari NextAuthJS in shrani v piškotek. Uporablja se za potrditev in preverjanje pristnosti kasnejših zahtev uporabnika. Ko uporabnik odda obrazce ali izvede občutljiva dejanja, je žeton CSRF vključen v glave ali telo zahteve, da se zagotovi, da zahteva izvira iz seje overjenega uporabnika in ne iz zlonamernega vira.

3. Callback URL Cookie: NextAuthJS nastavi povratni URL piškotek za shranjevanje izvirnega URL-ja, do katerega je uporabnik poskušal dostopati, preden je bil preusmerjen v tok preverjanja pristnosti. Ta piškotek pomaga NextAuthJS preusmeriti uporabnika nazaj na želeno stran po uspešni avtentikaciji. Zagotavlja nemoteno uporabniško izkušnjo tako, da uporabnika neopazno vrne na predvideni cilj namesto na generično ciljno stran.

Z uporabo varnih piškotkov samo HTTP NextAuthJS zagotavlja, da stanje preverjanja pristnosti ostane varno in zaščiteno pred posegi. Piškotki so šifrirani in preprečujejo nepooblaščen dostop ali spreminjanje zlonamernih akterjev.

Odlično delo pri uspešni integraciji NextAuthJS z adapterjem Prisma v vašo aplikacijo Next.js! Z enostavnostjo in prilagodljivostjo, ki jo zagotavlja NextAuthJS, imate zdaj zanesljiv sistem za preverjanje pristnosti.

Oglejte si repozitorij GitHub s spodnjo povezavo za kodo, uporabljeno v tem priročniku: https://github.com/codelabsacademy/next-auth-guide.

Toda zakaj bi se ustavili tukaj? Če ste navdušeni nad spletnim razvojem in želite izboljšati svoje veščine, razmislite o prijavi na naš tečaj za spletni razvoj. Naš bootcamp ponuja obsežno učno izkušnjo, saj vas opremi z znanjem in praktičnimi veščinami, potrebnimi za uspeh v dinamičnem svetu spletnega razvoja.

Če se pridružite našemu zagonskemu kampu, boste pridobili praktične izkušnje z najsodobnejšimi tehnologijami, delali na projektih iz resničnega sveta in prejeli osebno vodenje strokovnjakov iz industrije. Ne glede na to, ali ste začetnik ali izkušen razvijalec, je naš program zasnovan tako, da popelje vaše veščine spletnega razvoja na naslednjo raven.

Ne zamudite te priložnosti, da pospešite svojo pot spletnega razvoja. Prijavite se na naš tečaj za spletni razvoj še danes in sprostite svoj polni potencial na vznemirljivem področju spletnega razvoja. Skupaj zgradimo osupljive digitalne izkušnje in oblikujmo prihodnost spleta.