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

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.

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:

1. Next.js-projekti: Jos et ole vielä perustanut Next.js-projektia, tässä on nopea opas aloittamiseen.
2. 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
3. Istuntosäilytys: Käytämme istuntosäilytystä hallitaksemme WebAuthn-haasteita. Käytämme Vercelin KV:tä tämän saavuttamiseksi.
4. 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:

1. generateWebAuthnRegistrationOptions
2. verifyWebAuthnRegistration

Rekisteröinnin tavoin kirjautumiseen tarvitaan 2 funktiota:

1. generateWebAuthnLoginOptions
2. 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#

1. 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.
2. 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.)
3. 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: