Next.js에서 WebAuthn 구현: 실습 가이드

우리의 WebAuthn 시리즈에 다시 오신 것을 환영합니다. 이전 기사에서는 WebAuthn의 기본과 101 가이드를 다루었습니다. 처음 오셨다면, 이러한 기초적인 콘텐츠를 확인하여 내용을 따라오세요.

오늘 우리는 이론을 실제로 적용하기 위해 준비할 것입니다. Next.js의 새로운 기능 "서버 액션"의 힘을 활용할 것입니다. 우리의 목표는 Next.js 애플리케이션에서 WebAuthn을 구현하고 WebAuthn을 위한 준비를 마치는 것입니다.

코딩의 바다에 뛰어들기 전에, 여정의 끝에서 기다리고 있는 것을 살짝 엿보겠습니다 - 완전히 기능하는 데모 웹사이트입니다. WebAuthn이 어떻게 작동하는지 보고, 여러분이 만들게 될 것들을 체험해보세요. 이 데모 웹사이트에서는 새로운 사용자 등록과 등록된 패스키로 로그인이 가능합니다.

그리고 지도가 있는 것을 선호하는 분들을 위해, 모든 코드가 공개된 GitHub 저장소에서 제공됩니다. 이 저장소는 완전한 구현 소스 코드를 제공하는 동반 가이드입니다.

이 흥미로운 모험을 시작할 준비가 되셨나요? 출발합시다!

사전 요구 사항#

시작하기 전에 준비된 것들이 있는지 확인해봅시다:

1. Next.js 프로젝트: 아직 Next.js 프로젝트를 설정하지 않았다면, 시작하는 가이드가 여기 있습니다.
2. Simple WebAuthn 라이브러리: 웹사이트에 WebAuthn을 통합하는 데 필요한 작업을 줄이는 여러 패키지들이 있습니다. 선호하는 패키지 관리자를 사용하여 @simplewebauthn/browser, @simplewebauthn/server, @simplewebauthn/typescript-types를 설치하세요.
3. 세션 스토리지: 우리는 WebAuthn 챌린지를 관리하기 위해 세션 스토리지를 사용할 것입니다. 이를 위해 vercel의 KV를 사용할 것입니다.
4. 사용자 데이터베이스: 등록된 사용자의 패스키를 저장할 장소. 간단하게 하기 위해, 데모로 vercel의 KV를 사용할 것입니다.

도구와 준비물이 준비되었으므로, 이제 구축을 시작할 수 있습니다.

Vercel의 KV로 세션 스토리지 구현하기#

KV 스토리지 설정하기#

프로덕션과 로컬 개발 모두에서 KV 스토리지를 초기화하는 것은 쉽습니다. 이 가이드를 따라 프로젝트에 KV 저장소를 연결하고 환경 값을 가져옵니다: https://vercel.com/docs/storage/vercel-kv/quickstart

세션 관리 함수 구현하기#

우리는 2개의 함수를 내보냈습니다:

• getCurrentSession: Next.js 쿠키 헬퍼를 사용하여 현재 요청에 대한 세션을 만들고 값을 반환합니다.
• updateCurrentSession: 현재 세션에 데이터를 저장합니다.

Vercel의 KV로 사용자 데이터베이스 구현하기#

세션 구현과 유사하게, 간단한 사용자 데이터베이스를 구현해봅시다.

우리는 이메일로 사용자를 찾고, 이메일로 사용자 데이터를 업데이트하는 함수를 만들었습니다. 이것은 시연을 위한 것이며, 실제 제품에서는 사용자 데이터가 주로 데이터베이스에 보관됩니다.

WebAuthn 함수 준비하기#

진행하기 전에 등록과 인증 흐름의 다이어그램을 확인해봅시다:

보듯이, 2개의 함수가 필요합니다:

1. generateWebAuthnRegistrationOptions
2. verifyWebAuthnRegistration

등록과 유사하게, 로그인도 2개의 함수가 필요합니다:

1. generateWebAuthnLoginOptions
2. verifyWebAuthnLogin

여기 코드가 있습니다:

웹 페이지 구축#

준비가 완료되었으니, 페이지를 구축해봅시다:

결론#

Next.js 애플리케이션에서 WebAuthn을 구현하는 복잡한 과정을 잘 따라오셨습니다. 마무리하면서, 프로덕션 환경에 배포할 때 고려해야 할 몇 가지 주요 사항을 논의하는 것이 중요합니다.

프로덕션 배포를 위한 주요 고려 사항#

1. 사용자 식별자 조정: 이 튜토리얼에서는 이메일 주소를 사용자 식별자로 사용했습니다. 그러나 프로덕션 상황에서는 다른 식별자, 예를 들어 **userId**나 **username**을 사용해야 할 수도 있습니다.
2. 데이터베이스 통합: 우리는 데모로 세션과 사용자 데이터 관리를 위해 Vercel의 KV를 사용했지만, 실제 애플리케이션에서는 PostgreSQL, MongoDB 등과 같은 더 강력한 데이터베이스 시스템을 통합해야 합니다.
3. WebAuthn 옵션 맞춤화: 우리가 탐색한 WebAuthn 옵션은 시작점에 불과합니다. 애플리케이션의 요구 사항과 보안 정책에 따라 이러한 설정을 조정해야 할 수 있습니다. WebAuthn 문서 와 Simple WebAuthn 라이브러리의 문서를 참고하여 필요한 옵션을 맞춤화하세요.

이 교육적 모험에 함께 해줘서 감사합니다. 최소한의 예제에서도 WebAuthn을 통합하는 것은 간단한 작업이 아닙니다. 다른 옵션으로, Logto의 MFA에서 WebAuthn을 시도해보세요: