Implementacja WebAuthn w Next.js: Praktyczny Przewodnik

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.

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:

1. Projekt Next.js: Jeśli jeszcze nie skonfigurowałeś projektu Next.js, oto szybki przewodnik, aby ci pomóc.
2. 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
3. Przechowywanie Sesji: Będziemy używać przechowywania sesji do zarządzania wyzwaniami WebAuthn. Użyjemy vercel’s KV do tego celu.
4. 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:

1. generateWebAuthnRegistrationOptions
2. verifyWebAuthnRegistration

Podobnie jak w rejestracji, logowanie wymaga 2 funkcji:

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

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