Hierdie artikel sal delf in die stappe wat nodig is om wagwoordlose verifikasie te implementeer in 'n Next.js-projek deur die NextAuth.js-biblioteek te gebruik. Daarbenewens sal ons Prisma as ons databasisadapter gebruik om dit te bereik.
Wagwoordlose verifikasie is 'n innoverende benadering wat die behoefte aan tradisionele gebruikersnaam en wagwoord kombinasies uitskakel. In plaas daarvan bied dit 'n veiliger en gebruikersvriendelike verifikasie-ervaring deur alternatiewe metodes te gebruik, soos e-pos magiese skakels of eenmalige kodes wat per SMS gestuur word.
Next.js is 'n gewilde React-raamwerk vir die bou van webtoepassings, bekend vir sy eenvoud en doeltreffendheid. Ons kan maklik wagwoordlose verifikasie in ons projek inkorporeer deur NextAuth.js, 'n verifikasiebiblioteek wat eksplisiet vir Next.js ontwerp is, te integreer.
Daarbenewens sal ons staatmaak op Prisma as ons databasisadapter. Prisma is 'n ORM-instrument (Object-Relational Mapping) wat databasisinteraksies vereenvoudig deur 'n tipe-veilige en outo-gegenereerde navraagbouer te verskaf. Dit ondersteun verskeie databasisse, insluitend PostgreSQL, MySQL en SQLite, wat dit 'n veelsydige keuse maak vir ons verifikasie-implementering.
Dwarsdeur hierdie gids sal ons stap-vir-stap instruksies verskaf oor hoe om wagwoordlose verifikasie op te stel en op te stel deur NextAuth.js in 'n Next.js-projek te gebruik. Ons sal ook demonstreer hoe om Prisma as ons databasisadapter te integreer, wat naatlose kommunikasie tussen ons toepassing en die databasis moontlik maak.
Ons sal nou ondersoek hoe om die sekuriteit en gebruikerservaring van ons Next.js-toepassing te verbeter deur wagwoordlose verifikasie en die vermoëns van NextAuth.js en Prisma te gebruik. Kom ons begin.
Wat is wagwoordlose aanmelding?
Wagwoordlose aanmelding, soos die naam aandui, is 'n metode van verifikasie wat die behoefte aan tradisionele gebruikersnaam- en wagwoordkombinasies verwyder. In plaas daarvan gebruik dit alternatiewe maniere om 'n gebruiker se identiteit te verifieer, soos e-pos magiese skakels of eenmalige kodes wat per SMS gestuur word. Hierdie benadering bied verskeie voordele bo tradisionele aanmeldmetodes. Eerstens skakel dit die risiko van wagwoordverwante kwesbaarhede uit, soos swak wagwoorde of wagwoordhergebruik. Tweedens vergemaklik dit die gebruikerservaring deur die behoefte om te onthou en komplekse wagwoorde in te voer, te verwyder.
Om wagwoordlose aanmelding te implementeer deur e-pos magiese skakels of eenmalige kodes te gebruik, benodig ons 'n SMTP (Simple Mail Transfer Protocol) bediener.
'n SMTP-bediener is verantwoordelik vir die stuur van e-posse oor die internet. In die konteks van wagwoordlose verifikasie, stuur die bediener die magiese skakels of eenmalige kodes na die gebruiker se geregistreerde e-posadres. Wanneer 'n gebruiker die aanmeldproses begin, word 'n e-pos met 'n unieke skakel of kode gegenereer en aan die gebruiker gestuur. Die gebruiker kan dan op die skakel klik of die kode invoer om die stawingsproses te voltooi. Die SMTP-bediener dien as die tussenganger tussen die toepassing en die gebruiker se e-posdiens, wat verseker dat verifikasieboodskappe se veilige en betroubare aflewering. Deur 'n SMTP-bediener te gebruik, kan ons wagwoordlose aanmelding effektief implementeer en 'n naatlose verifikasie-ervaring vir ons gebruikers bied.
Kom ons begin!
Eerstens moet ons 'n vars nuwe Next.js-projek genereer. Om dit te doen, gebruik die volgende opdrag:
npx create-next-app@latest
Sodra jy die vars nuwe Next.js-projek gegenereer het, kan jy na die nuutgeskepte projekgids navigeer.
Deur die gids in die projek te verander, sal jy die verskillende dopgehou en lêers kan verken waaruit die Next.js-projekstruktuur bestaan.
Om die projekstruktuur te verstaan is noodsaaklik vir effektiewe ontwikkeling en organisasie van jou Next.js-toepassing. Deur na die amptelike dokumentasie te verwys, kan jy beste praktyke benut en insigte kry in hoe om jou kode te struktureer, statiese bates te bestuur, en skep herbruikbare komponente.
Installeer ons afhanklikhede
Om wagwoordlose verifikasie in ons Next.js-projek deur NextAuth.js te gebruik, moet ons eers die vereiste afhanklikhede installeer. Voer die opdrag yarn add next-auth nodemailer uit om beide NextAuth.js en nodemailer by ons projek te voeg.
Ons gebruik spesifiek nodemailer aangesien dit 'n gewilde en veelsydige module is om e-posse in Node.js te stuur. Dit bied 'n eenvoudige en betroubare manier om die magiese skakels of eenmalige kodes wat nodig is vir wagwoordlose verifikasie per e-pos te stuur.
Laat ons dan Prisma integreer as ons databasisadapter. Begin deur die vereiste Prisma-pakkette te installeer met die opdrag:
yarn add @prisma/client @next-auth/prisma-adapter
Hierdie pakkette sal naatlose kommunikasie tussen ons Next.js-toepassing en die databasis moontlik maak. Daarbenewens moet ons ook Prisma as 'n ontwikkelaarafhanklikheid installeer deur te hardloop:
yarn add prisma --dev
Hierdie stap verseker dat ons die nodige gereedskap het om met Prisma en sy outo-gegenereerde navraagbouer vir databasisinteraksies te werk.
Deur hierdie afhanklikhede te installeer, lê ons die grondslag vir die implementering van wagwoordlose verifikasie deur NextAuth.js en Prisma in ons Next.js-projek te gebruik.
Stel Prisma op
Dit is nodig om Prisma op te stel en toegang te hê tot 'n SMTP-bediener vir e-posversending om wagwoordlose verifikasie in 'n Next.js-projek te gebruik. Hierdie handleiding sal jou lei deur jou persoonlike Gmail-rekening te gebruik om e-posse te stuur. Volg die stappe hieronder vir 'n suksesvolle opstelling.
Skep eers 'n "prisma"-lêergids by die wortel van jou projek. Hierdie gids sal die Prisma-verwante lêers en konfigurasies huisves. Skep dan, binne die "prisma"-lêergids, 'n nuwe lêer genaamd "schema.prisma" Die skemalêer definieer die struktuur van jou databasis en dien as 'n bloudruk vir Prisma se outo-gegenereerde kode.
As jy nuut is met die konsep van 'n skema, moenie bekommerd wees nie! 'n Skema spesifiseer jou databasis se tabelle, velde, verhoudings en beperkings. Om die skema te skep, kan jy na die amptelike dokumentasie van NextAuth.js verwys en die voorbeeldskema wat daar verskaf word, kopieer. Hierdie skema is 'n beginpunt en kan aangepas word om by jou toepassingsvereistes te pas.
Skep dan 'n ".env"-lêer by die wortel van jou projek. Hierdie lêer sal jou omgewingsveranderlikes stoor, insluitend die nodige konfigurasies vir jou SMTP-bediener. Om die ".env"-lêer te vul, kan jy die voorbeeldkonfigurasies wat hieronder verskaf word, kopieer. Maak seker dat u u Gmail-rekeningbewyse en SMTP-bedienerinstellings in die ooreenstemmende velde invoer.
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
Deur hierdie stappe te volg, sal jy Prisma opgestel en die SMTP-bediener gekonfigureer het vir die stuur van e-posse met jou Gmail-rekening. Hierdie voorbereidings is van kardinale belang om die wagwoordlose verifikasievloei in jou Next.js-projek moontlik te maak.
Let wel
Jy moet 'n programwagwoord skep as jy Twee-faktor-stawing (2FA) vir jou Google-rekening geaktiveer het. 'n Programwagwoord is 'n duidelike wagwoord wat toegang tot spesifieke toepassings of toestelle verleen sonder om jou primêre Google-rekeningwagwoord bloot te stel. Volg die instruksies hieronder om 'n programwagwoord te genereer.
-
Gaan na die Google-rekeninginstellingsbladsy deur https://myaccount.google.com/ te besoek.
-
Navigeer na die "Sekuriteit"-oortjie.
-
Soek die "2FA"-afdeling, blaai af en kies "Toepassingwagwoorde".
-
Jy sal dalk gevra word om jou Google-rekeningwagwoord weer in te voer vir sekuriteitsverifikasie.
-
Onder die "Kies toepassing" aftreklys, kies "Pos" of "Ander (Gepasmaakte naam)".
-
As "Mail" opsie beskikbaar is, kies dit.
-
As "Pos" opsie nie beskikbaar is nie, kies "Ander (Gepasmaakte naam)" en verskaf 'n pasgemaakte naam vir identifikasie.
-
Klik op die "Generate" of "Generate Password" knoppie.
-
Google sal 'n unieke programwagwoord vir jou genereer. Maak 'n nota van hierdie wagwoord, aangesien ons hierdie een in ons aansoek sal gebruik om e-posse te stuur.
-
Gebruik hierdie gegenereerde programwagwoord in jou Next.js-toepassing se SMTP-bedienerkonfigurasie. Vervang jou gewone Gmail-rekeningwagwoord met hierdie programwagwoord.
Dit verseker dat selfs met 2FA geaktiveer, jou toepassing veilig e-pos kan stuur met jou Gmail-rekening.
PostgreSQL met behulp van Supabase
Voordat ons kan voortgaan, moet ons seker maak dat die databasis vir ons projek reg funksioneer. Vir hierdie demonstrasie beveel ons aan om die Supabase PostgreSQL-databasis te gebruik. Volg hierdie stappe om met 'n Supabase-projek te begin en die PostgreSQL-verbindings-URL te verkry:
-
Gaan na supabase.io en meld aan by jou rekening of skep 'n nuwe een as jy nie een het nie.
-
Sodra jy aangemeld is, sal jy na die Supabase-kontroleskerm gelei word. Klik op "Skep nuwe projek" om 'n nuwe projek te begin.
-
Noem jou projek en kies die streek naaste aan jou huidige ligging. Onthou jou wagwoord, jy sal dit later nodig hê.
-
Wanneer jy die projek geskep het, sal jy na die projekkontroleskerm geneem word. Klik op "Databasis" op die linkerkantbalk om toegang tot die databasisinstellings te kry.
-
In die "Databasis" afdeling, sal jy die PostgreSQL verbinding URL vind. Hierdie URL bevat al die nodige inligting om aan jou Supabase-projek se databasis te koppel, soos die gasheer, poort, databasisnaam, gebruikersnaam en wagwoord. Dit sal vertoon word in die formaat:
postgres://<gebruikersnaam>:<wagwoord>@<gasheer>:<poort>/<databasis>
- Kopieer die PostgreSQL-verbindings-URL en hou dit veilig. Jy sal dit nodig hê om 'n verbinding tussen jou toepassing en die Supabase-databasis te vestig.
// .env
DATABASE_URL=postgresql://postgres:[Password]@db.ixjsisbwdafsjvgifliu.supabase.co:5432/postgres
```
Kom ons maak nou seker dat ons ons Prisma-kliënt genereer deur die volgende opdrag uit te voer: `npx prisma genereer`.
Die Prisma-kliënt is 'n databasiskliënt wat outomaties gegenereer word op grond van jou skema. By verstek word die Prisma-kliënt in die `node_modules/.prisma/client`-lêergids gegenereer, maar jy kan ['n pasgemaakte ligging spesifiseer indien nodig](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path).
Vervolgens gaan ons voort om ons aanvanklike migrasie te skep. Voer die volgende opdrag uit: `npx prisma migrate dev`. Jy kan elke migrasie 'n beskrywende naam gee.
In Prisma is 'n migrasie 'n metode wat gebruik word om aanpassings aan jou databasisskema te bestuur soos die tyd vorder. Dit laat jou toe om jou databasisstruktuur te verander sonder om enige voorafbestaande data te verloor. Hierdie migrasies is van kardinale belang aangesien dit verseker dat jou databasisskema in lyn is met jou toepassing se behoeftes soos hulle verander. Met Prisma se migrasie-instrument kan jy hierdie veranderinge gerieflik weergawe, toepas en terugdraai, wat spanwerk vereenvoudig en 'n eenvormige databasisskema oor verskeie omgewings handhaaf.
Nou, as ons ons databasis nagaan, sal ons die veranderinge van ons aanvanklike migrasie kan sien wat in die databasisafdeling weerspieël word.
Deur die aanvanklike migrasie uit te voer, het ons die wysigings op ons databasisskema toegepas soos gedefinieer in die migrasieskrip.
### Stel NextAuthJS op met Prisma Adapter
In 'n Next.js-toepassing gebruik NextAuthJS die opvangroete, ook bekend as die wildcard of terugvalroete, om stawingversoeke te bestuur. Hierdie dinamiese roete word gedefinieer deur die lêergebaseerde roetestelsel in Next.js te gebruik.
Skep 'n vouer met die naam "**api**" in jou "**app**"-gids. Skep 'n "**auth**"-vouer binne die "**api**"-lêergids. Binne die "**auth**"-lêergids, skep 'n opvangroete genaamd "**[...nextauth]**" as 'n vouer. Laastens, skep 'n "**route.ts**"-lêer binne die catch-all route-lêergids en voeg die volgende kode by.
```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 };
In die vang-alle-roetelêer voer ons die NextAuthJS-biblioteek in en stel die verifikasie-opsies, verskaffers en konfigurasies op. NextAuthJS hanteer die ontleding van inkomende versoeke, identifiseer die nodige stawingsaksie en voer die toepaslike logika uit volgens die gespesifiseerde opsies.
Die verskafde kode stel NextAuthJS op met die Prisma-adapter vir verifikasie met behulp van 'n e-posverskaffer. Kom ons verduidelik elke stelling:
- Invoere:
-
PrismaAdapterenPrismaClientword ingevoer vanaf@next-auth/prisma-adapteren@prisma/client, onderskeidelik. Dit word gebruik om NextAuthJS met Prisma te integreer. -
NextAuthword vanafnext-authingevoer en is die hoofbiblioteek vir die hantering van stawing in Next.js-toepassings. -
EmailProviderword ingevoer vanafnext-auth/providers/emailen word gebruik as 'n verskaffer vir e-pos-gebaseerde stawing.
- Prisma-opstelling:
- 'n Geval van
PrismaClientword geskep met behulp vannew PrismaClient(). Dit laat kommunikasie met die Prisma ORM en die onderliggende databasis toe.
- Stawingsopsies:
-
authOptionsis 'n objek wat die konfigurasie vir stawing in NextAuthJS definieer. -
Die
adapter-eienskap is ingestel opPrismaAdapter(prisma), wat NextAuthJS met Prisma verbind deur diePrismaAdapterte gebruik. -
Die
verskaffersskikking bevat 'n enkele verskaffer,EmailProvider. Dit is gekonfigureer met die nodige e-posbedienerbesonderhede en dievanaf-e-posadres.
- NextAuth-hanteerder:
-
Die
NextAuthfunksie word genoem metauthOptionsas 'n argument, wat 'n verifikasie hanteerder skep. -
Die resulterende hanteerder word aan die
hanteerderveranderlike toegewys.
- Uitvoer:
hanteerderword uitgevoer asGETenPOSTom beide HTTP GET- en POST-versoeke te ondersteun.
Laat ons nou ons bediener bestuur en die funksionaliteit toets. Begin eers die ontwikkelingsbediener deur yarn dev uit te voer. Maak dan jou blaaier oop en besoek localhost:3000 om die toepassing in aksie te sien.
Om die stawingsfunksie te toets, besoek localhost:3000/api/auth/signin. Hier sal jy die magie van NextAuthJS ervaar. Die voorsiende sjabloon wat by NextAuthJS ingesluit is, maak 'n wagwoordlose aanmeldproses moontlik. Voer 'n geldige e-posadres in om dit te probeer.
Sodra jy die e-pos ingedien het, sal NextAuthJS die agter-die-skerms-proses hanteer. Eerstens sal dit 'n e-pos met 'n unieke aanmeldskakel na die verskafde e-posadres genereer en stuur. Hierdie skakel dien as 'n veilige stawingteken vir die gebruiker. Dan, wanneer die gebruiker op die skakel klik, sal NextAuthJS die teken valideer en die gebruiker staaf.
Hierdie wagwoordlose aanmeldfunksie verbeter sekuriteit en gebruikerservaring deur die behoefte aan wagwoorde uit te skakel. Gebruikers kan vinnig en veilig toegang tot hul rekeninge kry deur eenvoudig op die skakel te klik wat per e-pos ontvang is. Dit stroomlyn die aanmeldproses en verminder die risiko van wagwoordverwante kwesbaarhede.
Wanneer 'n gebruiker op die aanmeld-e-pos wat deur NextAuthJS gegenereer word, klik en geverifieer word, vind verskeie aksies agter die skerms plaas om 'n naatlose aanmeldervaring te fasiliteer.
1. E-posskakelbekragtiging: Wanneer die gebruiker op die aanmeldskakel klik, bekragtig NextAuthJS die verifikasietoken wat in die skakel ingebed is. Hierdie teken verseker die sekuriteit en integriteit van die verifikasieproses.
2. Stawingsproses: Na suksesvolle tokenvalidering, identifiseer NextAuthJS die gebruiker en voltooi die stawingsproses. Dit verifieer die gebruiker se identiteit gebaseer op die verskafde token en enige bykomende stawingsfaktore wat opgestel is, soos multi-faktor-verifikasie.
3. Sessieskepping: Na suksesvolle stawing skep NextAuthJS 'n sessie vir die gebruiker. 'n Sessie is 'n aanhoudende toestand wat die gebruiker se stawingstatus verteenwoordig en hulle in staat stel om toegang tot beskermde hulpbronne te verkry sonder om weer te verifieer vir daaropvolgende versoeke.
4. Koekies: NextAuthJS stel veilige HTTP-alleen koekies in die gebruiker se blaaier om die sessie te bestuur. Hierdie koekies speel 'n deurslaggewende rol in die handhawing van die gebruiker se geverifieerde toestand oor verskeie versoeke. Die koekies sluit tipies 'n sessiekoekie en opsioneel 'n herlaaitekenkoekie in, afhangende van die verifikasiekonfigurasie.
-
Sessiekoekie: Die sessiekoekie bevat 'n sessie-identifiseerder (bv. 'n lukraak gegenereerde string) wat die gebruiker se sessie uniek identifiseer. Dit help NextAuthJS om daaropvolgende versoeke met die korrekte sessie en gebruiker te assosieer.
-
CSRF Token Cookie: NextAuthJS stel 'n CSRF (Cross-Site Request Forgery) tekenkoekie om teen CSRF aanvalle te beskerm. Die CSRF-token is 'n unieke waarde wat deur NextAuthJS gegenereer word en in die koekie gestoor word. Dit word gebruik om die egtheid van daaropvolgende versoeke wat deur die gebruiker gemaak is, te valideer en te verifieer. Wanneer die gebruiker vorms indien of sensitiewe handelinge uitvoer, word die CSRF-token by die versoekopskrifte of liggaam ingesluit om te verseker dat die versoek afkomstig is van die geverifieerde gebruiker se sessie en nie van 'n kwaadwillige bron nie.
-
Terugbel-URL-koekie: NextAuthJS stel 'n terugbel-URL-koekie om die oorspronklike URL te stoor wat die gebruiker probeer het om toegang te verkry voordat dit na die verifikasievloei herlei is. Hierdie koekie help NextAuthJS om die gebruiker terug te herlei na die verlangde bladsy na suksesvolle verifikasie. Dit verseker 'n gladde gebruikerservaring deur die gebruiker naatloos terug te keer na hul voorgenome bestemming in plaas van 'n generiese bestemmingsbladsy.
Deur veilige HTTP-alleen-koekies te gebruik, verseker NextAuthJS dat die stawingstatus veilig en manipuleerbestand bly. Die koekies is geïnkripteer, wat ongemagtigde toegang of wysiging deur kwaadwillige akteurs voorkom.
Goeie werk om NextAuthJS suksesvol met Prisma-adapter in jou Next.js-toepassing te integreer! Met die gemak en aanpasbaarheid wat deur NextAuthJS verskaf word, het u nou 'n betroubare verifikasiestelsel.
Kyk na die GitHub-bewaarplek wat hieronder geskakel is vir die kode wat in hierdie gids gebruik word: https://github.com/codelabsacademy/next-auth-guide.
Maar hoekom stop hier? As jy passievol is oor webontwikkeling en gretig is om jou vaardighede te verbeter, oorweeg dit om vir ons webontwikkeling-bootcamp aansoek te doen. Ons bootcamp bied 'n omvattende leerervaring, wat jou toerus met die kennis en praktiese vaardighede wat nodig is om uit te blink in die dinamiese wêreld van webontwikkeling.
Deur by ons selflaaikamp aan te sluit, sal jy praktiese ervaring opdoen met die nuutste tegnologieë, werk aan werklike projekte en persoonlike leiding van kundiges in die bedryf ontvang. Of jy nou 'n beginner of 'n ervare ontwikkelaar is, ons program is ontwerp om jou webontwikkelingsvaardighede na die volgende vlak te neem.
Moenie hierdie geleentheid mis om jou webontwikkelingsreis te versnel nie. Doen vandag aansoek vir ons webontwikkeling-bootcamp en ontsluit jou volle potensiaal in die opwindende veld van webontwikkeling. Kom ons bou saam ongelooflike digitale ervarings en vorm die toekoms van die web.
