Svenska

webauthn
passnyckel
mfa
nextjs

Implementera WebAuthn i Next.js: En praktisk guide

En praktisk guide för att implementera WebAuthn i Next.js med levande kodexempel.

Sijie

Developer

11/15/2023

Sluta slösa veckor på användarautentisering

Lansera säkra appar snabbare med Logto. Integrera användarautentisering på några minuter och fokusera på din kärnprodukt.

Kom igång

Välkommen tillbaka till vår WebAuthn-serie. I våra tidigare artiklar har vi täckt WebAuthns grunder och en 101-guide. Om du just har anslutit dig till oss, är du välkommen att kolla in dessa grundläggande delar för att komma ikapp.

Idag kavlar vi upp ärmarna för att omsätta teori till praktik. Vi kommer att använda kraften hos Next.js med den nya funktionen "Server Actions". Vårt mål? Att implementera WebAuthn i en Next.js-applikation och förbereda oss för WebAuthn.

Innan vi dyker ner i kodningshavet, här är en glimt av vad som väntar dig i slutet av resan - en fullt fungerande demosajt. Utforska den för att se WebAuthn i aktion och för att få en smak av vad du kommer att bygga. På denna demosajt kan du registrera nya användare och logga in med just registrerade passnycklar.

Förhandsvisning

Och för dem som föredrar en karta i handen har vi dig täckt! All kod vi kommer att diskutera finns tillgänglig i ett offentligt GitHub-repository. Detta repository är din följeslagare, och erbjuder hela källkoden för vår implementation.

Redo att ge dig ut på detta spännande äventyr? Låt oss börja!

Förutsättningar

Innan vi börjar, låt oss säkerställa att vi har allt vi behöver:

Ett Next.js-projekt: Om du inte har satt upp ett Next.js-projekt ännu, här är en snabb guide för att komma igång.
Simple WebAuthn-biblioteket: Flera paket för att minska mängden arbete som behövs för att integrera WebAuthn på en webbplats. Använd din favoritpakethanterare för att installera @simplewebauthn/browser, @simplewebauthn/server och @simplewebauthn/typescript-types.
Sessionlagring: Vi kommer att använda sessionslagring för att hantera WebAuthn-utmaningar. Vi kommer att använda vercels KV för att uppnå detta.
En användardatabas: En plats för att lagra våra användares registrerade passnycklar. För att hålla det enkelt, kommer vi även här att använda vercels KV för att demonstrera.

Nu, med våra verktyg och material i handen, är vi redo att börja bygga.

Implementera sessionslagring med Vercels KV

Ställa in KV-lagring

Det är enkelt att initiera en KV-lagring både i produktion och lokal utveckling, följ denna guide för att ansluta en KV-butik till ditt projekt och dra miljövärden: https://vercel.com/docs/storage/vercel-kv/quickstart

Implementera sessionshanteringsfunktioner

Vi exporterade 2 funktioner:

getCurrentSession: Använd Next.js cookiehelper för att skapa en session för nuvarande begäran, och returnera värdet.
updateCurrentSession: Spara data till nuvarande session.

Implementera användardatabas med Vercels KV

På samma sätt som vår sessionsimplementation, låt oss implementera en enkel användardatabas.

Vi skapade funktioner för att hitta användare via e-post och uppdatera användardata via e-post. Kom ihåg, detta är endast för demonstration, i verkliga produkter hålls användardata vanligtvis i en databas.

Förbereda WebAuthn-funktioner

Innan vi fortsätter, låt oss se diagrammet för registrerings- och autentiseringsflöde:

Som du kan se, behöver vi förbereda 2 funktioner:

generateWebAuthnRegistrationOptions
verifyWebAuthnRegistration

På samma sätt som registreringen, kräver inloggningen 2 funktioner:

generateWebAuthnLoginOptions
verifyWebAuthnLogin

Här är koden:

Bygg webbsidan

Vi har slutfört förberedelsen, låt oss bygga sidan:

Slutsats

Grattis till att ha navigerat genom invecklingarna med att implementera WebAuthn i en Next.js-applikation. När vi avslutar är det viktigt att ta itu med några viktiga överväganden för att distribuera det i en produktionsmiljö.

Viktiga överväganden för produktionssättning

Justering av användaridentifierare: I denna handledning använde vi en e-postadress som användaridentifierare. I en produktionssituation kan du dock behöva använda en annan identifierare, som ett userId eller användarnamn.
Databasintegration: Även om vi använde Vercels KV som en enkel demonstration av session- och användardatahantering, bör en verklig applikation integrera ett mer robust databassystem (som PostgreSQL, MongoDB, etc.)
Anpassning av WebAuthn-alternativ: De WebAuthn-alternativ vi undersökte är en startpunkt. Beroende på din applikations krav och säkerhetspolicy kan du behöva justera dessa inställningar. Konsultera WebAuthn-dokumentationen och Simple WebAuthn-bibliotekets dokumentation för vägledning om hur du anpassar dessa alternativ för att passa dina specifika behov.

Tack för att du följde med oss på detta utbildningsäventyr. Även i detta minimala exempel är det inte en enkel uppgift att integrera WebAuthn, det finns ett annat alternativ, prova WebAuthn i Logtos MFA:

Prova Logtos multifaktorautentisering

Förutsättningar#

Implementera sessionslagring med Vercels KV#

Ställa in KV-lagring#

Implementera sessionshanteringsfunktioner#

Implementera användardatabas med Vercels KV#

Förbereda WebAuthn-funktioner#

Bygg webbsidan#

Slutsats#

Viktiga överväganden för produktionssättning#

Förutsättningar#

Implementera sessionslagring med Vercels KV#

Ställa in KV-lagring#

Implementera sessionshanteringsfunktioner#

Implementera användardatabas med Vercels KV#

Förbereda WebAuthn-funktioner#

Bygg webbsidan#

Slutsats#

Viktiga överväganden för produktionssättning#

Förutsättningar

Implementera sessionslagring med Vercels KV

Ställa in KV-lagring

Implementera sessionshanteringsfunktioner

Implementera användardatabas med Vercels KV

Förbereda WebAuthn-funktioner

Bygg webbsidan

Slutsats

Viktiga överväganden för produktionssättning

Förutsättningar

Implementera sessionslagring med Vercels KV

Ställa in KV-lagring

Implementera sessionshanteringsfunktioner

Implementera användardatabas med Vercels KV

Förbereda WebAuthn-funktioner

Bygg webbsidan

Slutsats

Viktiga överväganden för produktionssättning