Salasanattoman kirjautumisen toteuttaminen Next.js 13 -projektissa NextAuth.js:n ja Prisman avulla

Tässä artikkelissa käsitellään vaiheita, joita tarvitaan salasanattoman todennuksen toteuttamiseen Next.js-projektissa NextAuth.js-kirjastoa käyttämällä. Lisäksi käytämme Prismaa tietokantasovittimena tämän saavuttamiseksi.

Salasanaton todennus on innovatiivinen lähestymistapa, joka eliminoi perinteisten käyttäjätunnus- ja salasanayhdistelmien tarpeen. Sen sijaan se tarjoaa turvallisemman ja käyttäjäystävällisemmän todennuskokemuksen hyödyntämällä vaihtoehtoisia menetelmiä, kuten sähköpostin taikalinkkejä tai tekstiviestillä lähetettyjä kertaluonteisia koodeja.

Next.js on suosittu React-kehys verkkosovellusten rakentamiseen, joka tunnetaan yksinkertaisuudestaan ​​ja tehokkuudestaan. Voimme helposti sisällyttää salasanattoman todennuksen projektiimme integroimalla NextAuth.js:n, todennuskirjaston, joka on suunniteltu nimenomaan Next.js:lle.

Lisäksi luotamme Prismaan tietokantaadapterimme. Prisma on ORM (Object-Relational Mapping) -työkalu, joka yksinkertaistaa tietokantavuorovaikutusta tarjoamalla tyyppiturvallisen ja automaattisesti luodun kyselynmuodostajan. Se tukee useita tietokantoja, mukaan lukien PostgreSQL, MySQL ja SQLite, joten se on monipuolinen valinta todennustoteutukseen.

Tämän oppaan aikana annamme vaiheittaiset ohjeet salasanattoman todennuksen määrittämiseen ja määrittämiseen NextAuth.js:n avulla Next.js-projektissa. Esittelemme myös, kuinka Prisma integroidaan tietokantaadapteriksemme, mikä mahdollistaa saumattoman viestinnän sovelluksemme ja tietokannan välillä.

Tutkimme nyt, kuinka parantaa Next.js-sovelluksemme turvallisuutta ja käyttökokemusta käyttämällä salasanatonta todennusta sekä NextAuth.js:n ja Prisman ominaisuuksia. Aloitetaanpa.

Mitä salasanaton kirjautuminen on?

Salasanaton sisäänkirjautuminen on nimensä mukaisesti todennusmenetelmä, joka poistaa tarpeen käyttää perinteisiä käyttäjätunnus- ja salasanayhdistelmiä. Sen sijaan se hyödyntää vaihtoehtoisia keinoja käyttäjän henkilöllisyyden todentamiseen, kuten sähköpostin taikalinkkejä tai tekstiviestillä lähetettyjä kertakoodeja. Tämä lähestymistapa tarjoaa useita etuja perinteisiin kirjautumismenetelmiin verrattuna. Ensinnäkin se eliminoi salasanoihin liittyvien haavoittuvuuksien, kuten heikkojen salasanojen tai salasanan uudelleenkäytön, riskin. Toiseksi se yksinkertaistaa käyttökokemusta poistamalla tarpeen muistaa ja kirjoittaa monimutkaisia ​​salasanoja.

Tarvitsemme SMTP-palvelimen (Simple Mail Transfer Protocol) salasanattoman kirjautumisen toteuttamiseksi sähköpostin taikalinkkien tai kertaluonteisten koodien avulla.

SMTP-palvelin vastaa sähköpostien lähettämisestä Internetin kautta. Salasanattoman todennuksen yhteydessä palvelin lähettää taikalinkit tai kertakoodit käyttäjän rekisteröityyn sähköpostiosoitteeseen. Kun käyttäjä aloittaa kirjautumisprosessin, käyttäjälle luodaan sähköposti, joka sisältää yksilöllisen linkin tai koodin. Käyttäjä voi sitten napsauttaa linkkiä tai syöttää koodin suorittaakseen todennusprosessin loppuun. SMTP-palvelin toimii välittäjänä sovelluksen ja käyttäjän sähköpostipalvelun välillä varmistaen autentikointiviestien turvallisen ja luotettavan toimituksen. SMTP-palvelinta hyödyntämällä voimme tehokkaasti toteuttaa salasanattoman kirjautumisen ja tarjota käyttäjillemme saumattoman todennuskokemuksen.

Aloitetaan!

Ensin meidän on luotava uusi Next.js-projekti. Voit tehdä tämän käyttämällä seuraavaa komentoa:

npx create-next-app@latest

Kun olet luonut uuden Next.js-projektin, voit siirtyä äskettäin luotuun projektihakemistoon.

Muutamalla hakemiston projektiin, voit tutkia erilaisia ​​kansioita ja tiedostoja, jotka muodostavat Next.js-projektirakenteen.

Projektin rakenteen ymmärtäminen on välttämätöntä Next.js-sovelluksesi tehokkaan kehittämisen ja organisoinnin kannalta. Viitaten viralliseen dokumentaatioon voit hyödyntää parhaita käytäntöjä ja saada oivalluksia koodin jäsentämiseen, staattisen omaisuuden hallintaan ja luoda uudelleenkäytettäviä komponentteja.

Asennamme riippuvuuksiamme

Jotta salasanaton todennus voidaan ottaa käyttöön Next.js-projektissamme NextAuth.js:n avulla, meidän on ensin asennettava tarvittavat riippuvuudet. Suorita komento 'yarn add next-ath nodemailer' lisätäksesi sekä NextAuth.js että nodemailer projektiimme.

Käytämme erityisesti nodemaileria, koska se on suosittu ja monipuolinen moduuli sähköpostien lähettämiseen Node.js:ssä. Se tarjoaa suoraviivaisen ja luotettavan tavan lähettää salasanattomaan todentamiseen tarvittavat maagiset linkit tai kertaluonteiset koodit sähköpostitse.

Integroidaan seuraavaksi Prisma tietokantaadapteriksemme. Aloita asentamalla tarvittavat Prisma-paketit komennolla:

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

Nämä paketit mahdollistavat saumattoman viestinnän Next.js-sovelluksemme ja tietokannan välillä. Lisäksi meidän on myös asennettava Prisma kehittäjäriippuvuudeksi suorittamalla:

yarn add prisma --dev

Tämä vaihe varmistaa, että meillä on tarvittavat työkalut työskentelemään Prisman ja sen automaattisesti luoman kyselynmuodostajan kanssa tietokantavuorovaikutuksia varten.

Asentamalla nämä riippuvuudet loimme pohjan salasanattoman todennuksen toteuttamiselle NextAuth.js:n ja Prisman avulla Next.js-projektissamme.

Asenna Prisma

Tarvitset Prisman asetukset ja pääsyn SMTP-palvelimeen sähköpostin lähettämistä varten, jotta voit käyttää salasanatonta todennusta Next.js-projektissa. Tämä opetusohjelma opastaa sinua käyttämään henkilökohtaista Gmail-tiliäsi sähköpostien lähettämiseen. Noudata alla olevia ohjeita asennuksen onnistumiseksi.

Luo ensin "prisma" -kansio projektisi juureen. Tämä kansio sisältää Prismaan liittyvät tiedostot ja kokoonpanot. Luo sitten "prisma"-kansioon uusi tiedosto nimeltä "schema.prisma". Kaavatiedosto määrittää tietokantasi rakenteen ja toimii mallina Prisman automaattisesti luodulle koodille.

Jos olet uusi skeeman käsitteessä, älä huoli! Kaava määrittää tietokannan taulukot, kentät, suhteet ja rajoitukset. Voit luoda skeeman tutustumalla NextAuth.js:n viralliseen dokumentaatioon ja kopioimalla siellä olevan esimerkkiskeeman. Tämä skeema on lähtökohta, ja se voidaan mukauttaa vastaamaan sovellusvaatimuksiasi.

Luo seuraavaksi ".env"-tiedosto projektisi juureen. Tämä tiedosto tallentaa ympäristömuuttujasi, mukaan lukien SMTP-palvelimesi tarvittavat asetukset. Voit täyttää ".env"-tiedoston kopioimalla alla olevat esimerkkikokoonpanot. Varmista, että kirjoitat Gmail-tilisi tunnistetiedot ja SMTP-palvelimen asetukset vastaaviin kenttiin.

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

Seuraamalla näitä ohjeita olet määrittänyt Prisman ja SMTP-palvelimen sähköpostien lähettämiseen Gmail-tilisi avulla. Nämä valmistelut ovat ratkaisevan tärkeitä salasanattoman todennusvirran mahdollistamiseksi Next.js-projektissasi.

Huomautus

Sinun on luotava sovelluksen salasana, jos olet ottanut käyttöön kaksivaiheisen todennuksen (2FA) Google-tililläsi. Sovelluksen salasana on erillinen salasana, joka antaa pääsyn tiettyihin sovelluksiin tai laitteisiin paljastamatta ensisijaisen Google-tilisi salasanaa. Luo sovelluksen salasana noudattamalla alla olevia ohjeita.

1. Siirry Google-tilin asetussivulle osoitteessa https://myaccount.google.com/.

2. Siirry "Turvallisuus"-välilehteen.

3. Etsi "2FA"-osio, vieritä alas ja valitse "Sovellusten salasanat".

4. Sinua saatetaan pyytää antamaan Google-tilisi salasana uudelleen suojauksen vahvistamista varten.

5. Valitse avattavasta Valitse sovellus -valikosta "Mail" tai "Muu (muokattu nimi)".

• Jos "Mail"-vaihtoehto on käytettävissä, valitse se.

• Jos "Mail"-vaihtoehto ei ole käytettävissä, valitse "Muu (mukautettu nimi)" ja anna mukautettu nimi tunnistamista varten.

6. Napsauta "Luo"- tai "Luo salasana" -painiketta.

7. Google luo sinulle yksilöllisen sovellussalasanan. Kirjoita tämä salasana muistiin, sillä käytämme sitä sähköpostien lähetyssovelluksessamme.

8. Käytä tätä luotua sovelluksen salasanaa Next.js-sovelluksesi SMTP-palvelimen määrityksissä. Vaihda tavallinen Gmail-tilisi salasana tällä sovelluksen salasanalla.

Tämä varmistaa, että vaikka 2FA on käytössä, sovelluksesi voi lähettää sähköpostiviestejä turvallisesti Gmail-tilisi avulla.

PostgreSQL käyttäen Supabasea

Ennen kuin voimme jatkaa, meidän on varmistettava, että projektimme tietokanta toimii oikein. Tässä esittelyssä suosittelemme Supabase PostgreSQL-tietokannan käyttöä. Aloita Supabase-projekti ja hanki PostgreSQL-yhteyden URL-osoite seuraavasti:

1. Siirry osoitteeseen supabase.io ja kirjaudu sisään tiliisi tai luo uusi, jos sinulla ei ole tiliä.

2. Kun olet kirjautunut sisään, sinut ohjataan Supabase-koontinäyttöön. Napsauta "Luo uusi projekti" aloittaaksesi uuden projektin.

3. Nimeä projektisi ja valitse nykyistä sijaintiasi lähinnä oleva alue. Muista salasanasi, tarvitset sitä myöhemmin.

4. Kun olet luonut projektin, sinut ohjataan projektin hallintapaneeliin. Napsauta "Tietokanta" vasemmassa sivupalkissa päästäksesi tietokannan asetuksiin.

5. Tietokanta-osiosta löydät PostgreSQL-yhteyden URL-osoitteen. Tämä URL-osoite sisältää kaikki tarvittavat tiedot muodostaaksesi yhteyden Supabase-projektisi tietokantaan, kuten isäntä, portti, tietokannan nimi, käyttäjätunnus ja salasana. Se näytetään muodossa: postgres://<käyttäjänimi>:<salasana>@<isäntä>:<portti>/<tietokanta>

6. Kopioi PostgreSQL-yhteyden URL-osoite ja säilytä se suojattuna. Tarvitset sitä yhteyden muodostamiseen sovelluksesi ja Supabase-tietokannan välille.

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

Varmistetaan nyt, että luomme Prisma-asiakkaamme suorittamalla seuraavan komennon: `npx prisma generate`.

Prisma Client on tietokantaohjelma, joka luodaan automaattisesti skeemasi perusteella. Oletuksena Prisma Client luodaan kansioon "node_modules/.prisma/client", mutta voit [tarvittaessa määrittää mukautetun sijainnin](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path).

Seuraavaksi jatkamme alkuperäisen siirtomme luomista. Suorita seuraava komento: `npx prisma migrate dev`. Voit antaa kullekin siirrolle kuvaavan nimen.

Prismassa siirto on menetelmä, jota käytetään tietokantakaavion muutosten hallintaan ajan edetessä. Sen avulla voit muokata tietokannan rakennetta menettämättä olemassa olevia tietoja. Nämä siirrot ovat tärkeitä, koska ne varmistavat, että tietokantaskeemasi vastaa sovelluksesi tarpeita niiden muuttuessa. Prisman siirtotyökalun avulla voit kätevästi versioida, ottaa käyttöön ja peruuttaa nämä muutokset, mikä yksinkertaistaa ryhmätyötä ja ylläpitää yhtenäistä tietokantakaaviota eri ympäristöissä.

Nyt, jos tarkistamme tietokantaamme, voimme nähdä alkuperäisen siirtomme muutokset tietokantaosiossa.

Suorittamalla alkuperäisen siirron olemme soveltaneet muutokset tietokantaskeemamme siirtokomentosarjassa määritetyllä tavalla.

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

### NextAuthJS:n määrittäminen Prisma-sovittimella

Next.js-sovelluksessa NextAuthJS käyttää keräilyreittiä, joka tunnetaan myös nimellä jokerimerkki tai varareitti, todennuspyyntöjen hallintaan. Tämä dynaaminen reitti on määritetty käyttämällä Next.js:n tiedostopohjaista reititysjärjestelmää.

Luo "**app**"-hakemistoon kansio nimeltä "**api**". Luo "**api**"-kansioon "**auth**"-kansio. Luo "**auth**"-kansioon keräilyreitti nimeltä "**[...nextauth]**" kansioksi. Luo lopuksi "**route.ts**"-tiedosto keräilyreittikansioon ja lisää seuraava koodi.

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

Keräysreittitiedostossa tuomme NextAuthJS-kirjaston ja määritämme todennusvaihtoehdot, palveluntarjoajat ja kokoonpanot. NextAuthJS käsittelee saapuvien pyyntöjen jäsentämisen, tunnistaa tarvittavat todennustoiminnot ja suorittaa asianmukaisen logiikan määritettyjen vaihtoehtojen mukaisesti.

Mukana oleva koodi määrittää NextAuthJS:n Prisma-sovittimen kanssa sähköpostipalveluntarjoajan todennusta varten. Selitetään jokainen väite:

1. Tuonti:

• PrismaAdapter ja PrismaClient tuodaan osoitteesta @next-auth/prisma-adapter ja @prisma/client, vastaavasti. Näitä käytetään integroimaan NextAuthJS Prismaan.

• NextAuth tuodaan tiedostosta next-auth ja se on pääkirjasto Next.js-sovellusten todennuksen käsittelyyn.

• EmailProvider tuodaan osoitteesta next-auth/providers/email ja sitä käytetään sähköpostipohjaisen todennuksen palveluntarjoajana.

2. Prisman asennus:

• PrismaClient -esiintymä luodaan käyttämällä new PrismaClient() -komentoa. Tämä mahdollistaa yhteydenpidon Prisma ORM:n ja taustalla olevan tietokannan kanssa.

3. Todennusvaihtoehdot:

• authOptions on objekti, joka määrittää todennuksen asetukset NextAuthJS:ssä.

• adapter-ominaisuus on asetettu arvoon PrismaAdapter(prisma), joka yhdistää NextAuthJS:n Prismaan PrismaAdapterin avulla.

• providers-taulukko sisältää yhden palveluntarjoajan, EmailProvider. Se on määritetty tarvittavilla sähköpostipalvelimen tiedoilla ja `lähettäjä-sähköpostiosoitteella.

4. NextAuth-käsittelijä:

• NextAuth-funktiota kutsutaan argumenttina authOptions, mikä luo todennuskäsittelijän.

• Tuloksena oleva käsittelijä on määritetty handler-muuttujalle.

5. Vienti:

• handler viedään muotoina GET ja POST tukemaan sekä HTTP GET- että POST-pyyntöjä.

Ajellaan nyt palvelintamme ja testataan sen toimivuutta. Käynnistä ensin kehityspalvelin ajamalla "yarn dev". Avaa seuraavaksi selaimesi ja käy osoitteessa "localhost:3000", niin näet sovelluksen toiminnassa.

Voit testata todennustoiminnallisuutta käymällä osoitteessa "localhost:3000/api/auth/signin". Täällä koet NextAuthJS:n taikuuden. NextAuthJS:n mukana toimitettu malli mahdollistaa salasanattoman kirjautumisprosessin. Kokeile sitä antamalla kelvollinen sähköpostiosoite.

Kun lähetät sähköpostin, NextAuthJS hoitaa kulissien takana olevat prosessit. Ensin se luo ja lähettää yksilöllisen kirjautumislinkin sisältävän sähköpostin annettuun sähköpostiosoitteeseen. Tämä linkki toimii turvallisena todennustunnuksena käyttäjälle. Sitten, kun käyttäjä napsauttaa linkkiä, NextAuthJS vahvistaa tunnuksen ja todentaa käyttäjän.

Tämä salasanaton kirjautumisominaisuus parantaa turvallisuutta ja käyttökokemusta eliminoimalla salasanojen tarpeen. Käyttäjät pääsevät nopeasti ja turvallisesti tililleen napsauttamalla sähköpostilla saatua linkkiä. Se virtaviivaistaa kirjautumisprosessia ja vähentää salasanoihin liittyvien haavoittuvuuksien riskiä.

Kun käyttäjä napsauttaa NextAuthJS:n luomaa kirjautumissähköpostia ja todennetaan, kulissien takana tapahtuu useita toimintoja saumattoman kirjautumiskokemuksen helpottamiseksi.

1. Sähköpostilinkin vahvistus: Kun käyttäjä napsauttaa kirjautumislinkkiä, NextAuthJS vahvistaa linkkiin upotetun todennustunnuksen. Tämä tunnus varmistaa todennusprosessin turvallisuuden ja eheyden.

2. Todennusprosessi: Onnistuneen tunnuksen vahvistuksen jälkeen NextAuthJS tunnistaa käyttäjän ja suorittaa todennusprosessin loppuun. Se vahvistaa käyttäjän henkilöllisyyden toimitetun tunnuksen ja muiden määritettyjen todennustekijöiden, kuten monitekijätodennuksen, perusteella.

3. Istunnon luominen: Onnistuneen todennuksen jälkeen NextAuthJS luo istunnon käyttäjälle. Istunto on pysyvä tila, joka edustaa käyttäjän todennustilaa ja antaa hänelle mahdollisuuden käyttää suojattuja resursseja tarvitsematta todentaa uudelleen myöhempiä pyyntöjä varten.

4. Evästeet: NextAuthJS asettaa suojattuja vain HTTP-evästeitä käyttäjän selaimeen istunnon hallintaa varten. Näillä evästeillä on ratkaiseva rooli käyttäjän todennetun tilan ylläpitämisessä useiden pyyntöjen aikana. Evästeet sisältävät tyypillisesti istuntoevästeen ja valinnaisesti päivitystunnisteen evästeen todennuskonfiguraatiosta riippuen.

1. Istuntoeväste: Istuntoeväste sisältää istuntotunnisteen (esim. satunnaisesti luodun merkkijonon), joka yksilöi käyttäjän istunnon. Se auttaa NextAuthJS:ää yhdistämään seuraavat pyynnöt oikeaan istuntoon ja käyttäjään.

2. CSRF Token Cookie: NextAuthJS asettaa CSRF (Cross-Site Request Forgery) -tunnisteevästeen suojaamaan CSRF-hyökkäyksiltä. CSRF-tunnus on NextAuthJS:n luoma ja evästeeseen tallennettu ainutlaatuinen arvo. Sitä käytetään vahvistamaan ja tarkistamaan käyttäjän myöhempien pyyntöjen aitous. Kun käyttäjä lähettää lomakkeita tai suorittaa arkaluontoisia toimintoja, CSRF-tunnus sisällytetään pyynnön otsikoihin tai runkoon sen varmistamiseksi, että pyyntö on peräisin todennetun käyttäjän istunnosta eikä haitallisesta lähteestä.

3. Takaisinkutsu-URL-eväste: NextAuthJS asettaa takaisinkutsun URL-osoitteen evästeen tallentamaan alkuperäisen URL-osoitteen, jota käyttäjä yritti käyttää ennen kuin hänet ohjattiin todennuskulkuun. Tämä eväste auttaa NextAuthJS:ää ohjaamaan käyttäjän takaisin halutulle sivulle onnistuneen todennuksen jälkeen. Se varmistaa sujuvan käyttökokemuksen palauttamalla käyttäjän saumattomasti aiottuun kohteeseen yleisen aloitussivun sijaan.

Käyttämällä suojattuja HTTP-evästeitä, NextAuthJS varmistaa, että todennustila pysyy suojattuna ja väärentämisen estona. Evästeet ovat salattuja, mikä estää haitallisten toimijoiden luvattoman käytön tai muuttamisen.

Hienoa työtä NextAuthJS:n ja Prisma-sovittimen integroinnissa Next.js-sovellukseesi! NextAuthJS:n tarjoaman helppouden ja mukautuvuuden ansiosta sinulla on nyt luotettava todennusjärjestelmä.

Tässä oppaassa käytetty koodi löytyy alla linkitetystä GitHub-arkistosta: https://github.com/codelabsacademy/next-auth-guide.

Mutta miksi lopettaa tähän? Jos olet intohimoinen verkkokehityksestä ja haluat kehittää taitojasi, harkitse hakemista web-kehityksen bootcampille. Bootcamp tarjoaa kattavan oppimiskokemuksen, joka antaa sinulle tiedot ja käytännön taidot, joita tarvitaan menestyäksesi verkkokehityksen dynaamisessa maailmassa.

Liittymällä bootcampillemme saat käytännön kokemusta huipputeknologioista, työskentelet todellisissa projekteissa ja saat henkilökohtaista ohjausta alan asiantuntijoilta. Olitpa aloittelija tai kokenut kehittäjä, ohjelmamme on suunniteltu viemään verkkokehitystaitosi uudelle tasolle.

Älä missaa tätä tilaisuutta nopeuttaa verkkokehitysmatkaasi. Hae verkkokehityksen käynnistysleiriimme tänään ja hyödynnä koko potentiaalisi jännittävällä verkkokehityksen alalla. Rakennetaan yhdessä upeita digitaalisia kokemuksia ja muovataan verkon tulevaisuutta.