Polski

webauthn
klucz dostępu
mfa
nextjs

Implementacja WebAuthn w Next.js: Praktyczny Przewodnik

Praktyczny przewodnik po implementacji WebAuthn w Next.js z przykładami kodu na żywo.

Sijie

Developer

11/15/2023

Przestań tracić tygodnie na uwierzytelnianie użytkowników

Uruchamiaj bezpieczne aplikacje szybciej z Logto. Zintegruj uwierzytelnianie użytkowników w kilka minut i skup się na swoim głównym produkcie.

Rozpocznij

Witamy ponownie w naszej serii o WebAuthn. W poprzednich artykułach omówiliśmy podstawy WebAuthn oraz wprowadzenie 101. Jeśli dopiero do nas dołączasz, zapraszam do zapoznania się z tymi podstawowymi materiałami, aby dogonić temat.

Dziś zakaszemy rękawy, by wcielić teorię w praktykę. Wykorzystamy możliwości Next.js z nową funkcją „Server Actions”. Nasz cel? Zaimplementować WebAuthn w aplikacji Next.js i przygotować się na WebAuthn.

Zanim zanurzymy się w morzu kodu, oto przedsmak tego, co czeka nas na końcu podróży - w pełni funkcjonalna demo strona. Zobacz WebAuthn w akcji i wypróbuj to, co będziesz budować. Na tej stronie demo możesz zarejestrować nowych użytkowników i zalogować się przy użyciu świeżo zarejestrowanych passkey.

Podgląd

A dla tych, którzy wolą mieć mapę pod ręką, mamy cię pokryty! Cały kod, o którym będziemy mówić, jest dostępny w publicznym repozytorium GitHub. To repozytorium będzie twoim przewodnikiem, oferując pełny kod źródłowy naszej implementacji.

Gotowy na tę ekscytującą przygodę? Zaczynajmy!

Wymagania wstępne

Zanim zaczniemy, upewnijmy się, że mamy wszystko, czego potrzebujemy:

Projekt Next.js: Jeśli jeszcze nie skonfigurowałeś projektu Next.js, oto szybki przewodnik, aby ci pomóc.
Prosta Biblioteka WebAuthn: Kilka pakietów, które pomogą zredukować ilość pracy potrzebnej do wdrożenia WebAuthn na stronie. Użyj swojego ulubionego menedżera pakietów do zainstalowania @simplewebauthn/browser, @simplewebauthn/server i @simplewebauthn/typescript-types
Przechowywanie Sesji: Będziemy używać przechowywania sesji do zarządzania wyzwaniami WebAuthn. Użyjemy vercel’s KV do tego celu.
Baza Danych Użytkowników: Miejsce do przechowywania zarejestrowanych passkey naszych użytkowników. Dla uproszczenia, również użyjemy vercel’s KV, aby to zademonstrować.

Teraz, gdy mamy narzędzia i materiały w ręku, jesteśmy gotowi do rozpoczęcia budowy.

Implementacja przechowywania sesji za pomocą Vercel’s KV

Konfiguracja przechowywania KV

Łatwo jest zainicjować przechowywanie KV zarówno w produkcji, jak i w lokalnym środowisku deweloperskim, postępuj zgodnie z tym przewodnikiem, aby połączyć sklep KV z projektem i pobrać wartości środowisk: https://vercel.com/docs/storage/vercel-kv/quickstart

Implementacja funkcji zarządzania sesjami

Wyeksportowaliśmy 2 funkcje:

getCurrentSession: Użyj pomocnika cookies Next.js, aby utworzyć sesję dla bieżącego zapytania i zwrócić wartość.
updateCurrentSession: Zapisz dane w bieżącej sesji.

Implementacja bazy danych użytkowników za pomocą Vercel’s KV

Podobnie jak w przypadku implementacji sesji, zaimplementujmy prostą bazę danych użytkowników.

Stworzyliśmy funkcje do wyszukiwania użytkownika po e-mailu oraz aktualizowania danych użytkownika po e-mailu. Pamiętaj, że to tylko do celów demonstracyjnych, w rzeczywistym produkcie dane użytkownika zwykle są przechowywane w bazie danych.

Przygotowanie funkcji WebAuthn

Zanim przejdziemy dalej, popatrzmy na diagram rejestracji i przepływu autoryzacji:

Jak widać, musimy przygotować 2 funkcje:

generateWebAuthnRegistrationOptions
verifyWebAuthnRegistration

Podobnie jak w rejestracji, logowanie wymaga 2 funkcji:

generateWebAuthnLoginOptions
verifyWebAuthnLogin

Oto kod:

Zbuduj stronę internetową

Zakończyliśmy przygotowania, zbudujmy stronę:

Podsumowanie

Gratulacje za nawigację przez zawiłości implementacji WebAuthn w aplikacji Next.js. Kończąc, ważne jest, aby poruszyć kilka kluczowych aspektów związanych z wdrożeniem w środowisku produkcyjnym.

Kluczowe kwestie dotyczące wdrożenia produkcyjnego

Dostosowanie Identyfikatora Użytkownika: W tym samouczku użyliśmy adresu e-mail jako identyfikatora użytkownika. Jednak w scenariuszu produkcyjnym możesz potrzebować użyć innego identyfikatora, takiego jak userId lub username.
Integracja Bazy Danych: Podczas gdy użyliśmy Vercel’s KV jako prostej demonstracji zarządzania danymi sesji i użytkowników, aplikacja w rzeczywistym świecie powinna integrować bardziej robustny system bazy danych (jak PostgreSQL, MongoDB, itp.)
Dostosowanie Opcji WebAuthn: Opcje WebAuthn, które omówiliśmy, są punktem wyjścia. W zależności od wymagań twojej aplikacji i polityk bezpieczeństwa, możesz potrzebować dostosować te ustawienia. Zapoznaj się z dokumentacją WebAuthn oraz dokumentacją biblioteki Simple WebAuthn w celu uzyskania wskazówek dotyczących dostosowywania tych opcji do twoich konkretnych potrzeb.

Dziękujemy za dołączenie do nas na tej edukacyjnej wyprawie. Nawet w tym minimalistycznym przykładzie integracja WebAuthn nie jest prostym zadaniem, jest inna opcja, wypróbuj WebAuthn w MFA Logto:

Spróbuj Logto multi-factor authentication

Wymagania wstępne#

Implementacja przechowywania sesji za pomocą Vercel’s KV#

Konfiguracja przechowywania KV#

Implementacja funkcji zarządzania sesjami#

Implementacja bazy danych użytkowników za pomocą Vercel’s KV#

Przygotowanie funkcji WebAuthn#

Zbuduj stronę internetową#

Podsumowanie#

Kluczowe kwestie dotyczące wdrożenia produkcyjnego#

Wymagania wstępne#

Implementacja przechowywania sesji za pomocą Vercel’s KV#

Konfiguracja przechowywania KV#

Implementacja funkcji zarządzania sesjami#

Implementacja bazy danych użytkowników za pomocą Vercel’s KV#

Przygotowanie funkcji WebAuthn#

Zbuduj stronę internetową#

Podsumowanie#

Kluczowe kwestie dotyczące wdrożenia produkcyjnego#

Wymagania wstępne

Implementacja przechowywania sesji za pomocą Vercel’s KV

Konfiguracja przechowywania KV

Implementacja funkcji zarządzania sesjami

Implementacja bazy danych użytkowników za pomocą Vercel’s KV

Przygotowanie funkcji WebAuthn

Zbuduj stronę internetową

Podsumowanie

Kluczowe kwestie dotyczące wdrożenia produkcyjnego

Wymagania wstępne

Implementacja przechowywania sesji za pomocą Vercel’s KV

Konfiguracja przechowywania KV

Implementacja funkcji zarządzania sesjami

Implementacja bazy danych użytkowników za pomocą Vercel’s KV

Przygotowanie funkcji WebAuthn

Zbuduj stronę internetową

Podsumowanie

Kluczowe kwestie dotyczące wdrożenia produkcyjnego