Suomi

webauthn
passkey
mfa
nextjs

WebAuthn:n toteuttaminen Next.js:ssä: Käytännön opas

Käytännön opas WebAuthn:n toteuttamiseen Next.js:ssä elävien koodiesimerkkien avulla.

Sijie

Developer

11/15/2023

Lopeta viikkojen tuhlaaminen käyttäjien tunnistautumiseen

Julkaise turvallisia sovelluksia nopeammin Logtolla. Integroi käyttäjien tunnistautuminen minuuteissa ja keskity ydintuotteeseesi.

Aloita

Tervetuloa takaisin WebAuthn-sarjaamme. Aiemmissa artikkeleissamme olemme käsitelleet WebAuthnin perusteita ja 101 opasta. Jos liityt mukaan vasta nyt, voit katsoa nämä perustavanlaatuiset osat päästäksesi ajan tasalle.

Tänään käärimme hihat ja laitamme teorian käytäntöön. Hyödynnämme Next.js:n voimaa uuden "Server Actions"-ominaisuuden avulla. Tavoitteemme? Toteuttaa WebAuthn Next.js-sovelluksessa ja valmistautua WebAuthniin.

Ennen kuin sukellamme koodin maailmaan, tässä on katsaus siihen, mitä odottaa matkan päässä - täysin toimiva demo-sivusto. Tutustu siihen nähdäksesi WebAuthnin toiminnassa ja saadaksesi maistaa siitä, mitä olet rakentamassa. Tässä demo-sivustossa voit rekisteröidä uusia käyttäjiä ja kirjautua juuri rekisteröidyillä pääsyavaimilla.

Esikatselu

Ja niille, jotka pitävät kartasta kädessään, olemme turvanasi! Kaikki koodi, jota käsittelemme, on saatavilla julkisessa GitHub-repositoriossa. Tämä repositorio on kumppanioppaasi, joka tarjoaa koko lähdekoodin toteutuksestamme.

Valmis lähtemään tälle jännittävälle seikkailulle? Aloitetaan!

Esivaatimukset

Ennen kuin aloitamme, varmistetaan, että meillä on kaikki tarvittava:

Next.js-projekti: Jos et ole vielä perustanut Next.js-projektia, tässä on nopea opas aloittamiseen.
Yksinkertainen WebAuthn-kirjasto: Useita paketteja, jotka auttavat vähentämään työtä, jota tarvitaan WebAuthnin sisällyttämiseksi verkkosivustoon. Käytä suosikkipaketinhallintaasi asentaaksesi @simplewebauthn/browser, @simplewebauthn/server ja @simplewebauthn/typescript-types
Istuntosäilytys: Käytämme istuntosäilytystä hallitaksemme WebAuthn-haasteita. Käytämme Vercelin KV:tä tämän saavuttamiseksi.
Käyttäjätietokanta: Paikka säilyttää rekisteröityjen pääsyavaimien käyttäjät. Yksinkertaistamiseksi käytämme myös Vercelin KV:tä esittelyyn.

Nyt kun työkalut ja materiaalit ovat käsillä, olemme valmiita aloittamaan rakentamisen.

Istunnon tallentaminen Vercelin KV:llä

KV-tallennuksen asettaminen

On helppoa alustaa KV-tallennus sekä tuotannossa että paikallisessa kehityksessä, noudata tätä ohjetta liittääksesi KV-kauppa projektiisi ja vetääksesi ympäristöarvot: https://vercel.com/docs/storage/vercel-kv/quickstart

Istunnonhallintafunktioiden toteuttaminen

Veimme ulos 2 funktiota:

getCurrentSession: Käytä Next.js:n evästeavustajaa luomaan istunto nykyiselle pyynnölle ja palauttamaan arvo.
updateCurrentSession: Tallenna tiedot nykyiseen istuntoon.

Käyttäjä tietokannan toteuttaminen Vercelin KV:llä

Samoin kuin istuntojen toteutuksessa, toteutetaan yksinkertainen käyttäjätietokanta.

Luoimme funktioita käyttäjän löytämiseksi sähköpostin perusteella ja käyttäjätietojen päivittämiseen sähköpostin perusteella. Muista, että tämä on vain esittelytarkoituksiin, oikeassa tuotteessa käyttäjätiedot pidetään yleensä tietokannassa.

WebAuthn-funktioiden valmistelu

Ennen kuin jatkamme, katsotaan rekisteröinnin ja todennuksen kulun kaaviota:

Kuten näet, meidän on valmistettava 2 funktiota:

generateWebAuthnRegistrationOptions
verifyWebAuthnRegistration

Rekisteröinnin tavoin kirjautumiseen tarvitaan 2 funktiota:

generateWebAuthnLoginOptions
verifyWebAuthnLogin

Tässä on koodi:

Rakenna verkkosivu

Olemme suorittaneet valmistelut, rakennetaan sivu:

Yhteenveto

Onnittelut navigoitua WebAuthnin toteutuksen monimutkaisuuksien läpi Next.js-sovelluksessa. Kun lopetamme, on tärkeää käsitellä joitain keskeisiä näkökohtia sen käyttöönotosta tuotantoympäristössä.

Keskeiset näkökohta tuotantokäyttöön

Käyttäjätunnisteen säätäminen: Tässä oppaassa käytimme sähköpostiosoitetta käyttäjän tunnisteena. Tuotantotilanteessa saattaa olla tarpeen käyttää erilaista tunnistetta, kuten userId tai username.
Tietokantaintegraatio: Vaikka käytimme Vercelin KV:tä yksinkertaisena esimerkkinä istunto- ja käyttäjätietojen hallinnasta, todellisen maailman sovelluksen tulisi integroida tehokkaampi tietokantajärjestelmä (kuten PostgreSQL, MongoDB, jne.)
WebAuthn-vaihtoehtojen mukauttaminen: WebAuthn-vaihtoehdot, joita tutkimme, ovat aloituspiste. Sovelluksesi vaatimuksista ja tietoturvakäytännöistä riippuen saatat joutua säätämään näitä asetuksia. Katso WebAuthn-dokumentointi ja Yksinkertainen WebAuthn-kirjaston dokumentointi ohjeistaaksesi näiden vaihtoehtojen mukauttamista tarpeidesi mukaan.

Kiitos, että liityit tämän opettavan seikkailun pariin. Vaikka tämä minimaalinen esimerkki olisi, WebAuthnin integrointi ei ole yksinkertainen tehtävä, on toinen vaihtoehto, kokeile WebAuthnia Logton MFA:ssa:

Koe Logton monivaiheinen todennus

Esivaatimukset#

Istunnon tallentaminen Vercelin KV:llä#

KV-tallennuksen asettaminen#

Istunnonhallintafunktioiden toteuttaminen#

Käyttäjä tietokannan toteuttaminen Vercelin KV:llä#

WebAuthn-funktioiden valmistelu#

Rakenna verkkosivu#

Yhteenveto#

Keskeiset näkökohta tuotantokäyttöön#

Esivaatimukset#

Istunnon tallentaminen Vercelin KV:llä#

KV-tallennuksen asettaminen#

Istunnonhallintafunktioiden toteuttaminen#

Käyttäjä tietokannan toteuttaminen Vercelin KV:llä#

WebAuthn-funktioiden valmistelu#

Rakenna verkkosivu#

Yhteenveto#

Keskeiset näkökohta tuotantokäyttöön#

Esivaatimukset

Istunnon tallentaminen Vercelin KV:llä

KV-tallennuksen asettaminen

Istunnonhallintafunktioiden toteuttaminen

Käyttäjä tietokannan toteuttaminen Vercelin KV:llä

WebAuthn-funktioiden valmistelu

Rakenna verkkosivu

Yhteenveto

Keskeiset näkökohta tuotantokäyttöön

Esivaatimukset

Istunnon tallentaminen Vercelin KV:llä

KV-tallennuksen asettaminen

Istunnonhallintafunktioiden toteuttaminen

Käyttäjä tietokannan toteuttaminen Vercelin KV:llä

WebAuthn-funktioiden valmistelu

Rakenna verkkosivu

Yhteenveto

Keskeiset näkökohta tuotantokäyttöön