Реализация WebAuthn в Next.js: Практическое руководство

С возвращением в нашу серию статей о WebAuthn. В предыдущих статьях мы рассмотрели основы WebAuthn и путеводитель 101. Если вы только присоединились к нам, не стесняйтесь ознакомиться с этими базовыми статьями, чтобы наверстать упущенное.

Сегодня мы засучим рукава и перейдем от теории к практике. Мы будем использовать мощь Next.js с новой функцией "Server Actions". Наша цель? Реализовать WebAuthn в приложении Next.js и подготовиться к WebAuthn.

Прежде чем погрузиться в программирование, вот что ждет вас в конце путешествия - полностью функциональный демо-сайт. Изучите его, чтобы увидеть WebAuthn в действии и почувствовать, что вы будете создавать. На этом демо-сайте вы можете зарегистрировать новых пользователей и войти в систему с только что зарегистрированными паролями.

А для тех, кто предпочитает держать карту в руках, у нас есть решение для вас! Весь код, который мы будем обсуждать, доступен в открытом репозитории GitHub. Этот репозиторий - ваш путеводитель, предлагающий полный исходный код нашей реализации.

Готовы отправиться в это захватывающее приключение? Давайте начнем!

Предварительные условия#

Прежде чем начать, давайте убедимся, что у нас есть все необходимое:

1. Проект Next.js: Если вы еще не настроили проект Next.js, вот краткое руководство, чтобы начать.
2. Библиотека Simple WebAuthn: Несколько пакетов, которые помогут сократить объем работы, необходимой для внедрения WebAuthn на веб-сайт. Используйте ваш любимый пакетный менеджер для установки @simplewebauthn/browser, @simplewebauthn/server и @simplewebauthn/typescript-types
3. Сессионное хранилище: Мы будем использовать сессионное хранилище для управления вызовами WebAuthn. Мы воспользуемся KV от Vercel для этого.
4. База данных пользователей: Место для хранения зарегистрированных паролей наших пользователей. Чтобы упростить задачу, мы также будем использовать KV от Vercel для демонстрации.

Теперь, имея в руках все инструменты и материалы, мы готовы начать создание.

Реализация сессионного хранилища с KV от Vercel#

Настройка хранилища KV#

Легко инициализировать хранилище KV как в производственной среде, так и в локальной разработке, следуйте этому руководству, чтобы подключить хранилище KV к вашему проекту и извлечь значения среды: https://vercel.com/docs/storage/vercel-kv/quickstart

Реализация функций управления сессиями#

Мы экспортировали 2 функции:

• getCurrentSession: использует помощник cookie в Next.js для создания сессии для текущего запроса и возвращает значение.
• updateCurrentSession: сохраняет данные в текущую сессию.

Реализация базы данных пользователей с KV от Vercel#

Аналогично реализации сессий, давайте реализуем простую базу данных пользователей.

Мы создали функции для поиска пользователя по электронной почте и обновления данных пользователя по электронной почте. Помните, что это лишь демонстрация, в реальном продукте данные о пользователе обычно хранятся в базе данных.

Подготовка функций WebAuthn#

Прежде чем мы продолжим, давайте посмотрим на диаграмму процесса регистрации и аутентификации:

Как видите, нам нужно подготовить 2 функции:

1. generateWebAuthnRegistrationOptions
2. verifyWebAuthnRegistration

Похожее на регистрацию, вход также требует 2 функции:

1. generateWebAuthnLoginOptions
2. verifyWebAuthnLogin

Вот код:

Построение веб-страницы#

Мы завершили подготовку, давайте создадим страницу:

Заключение#

Поздравляем с прохождением всех тонкостей внедрения WebAuthn в приложение Next.js. В завершение важно рассмотреть некоторые ключевые аспекты развертывания в производственной среде.

Ключевые соображения для развертывания в производственной среде#

1. Настройка идентификатора пользователя: В этом учебном пособии мы использовали адрес электронной почты в качестве идентификатора пользователя. Однако в производственной среде вам может понадобиться использовать другой идентификатор, например, userId или username.
2. Интеграция базы данных: Хотя мы использовали KV от Vercel в качестве простого демонстратора управления данными сессии и пользователя, в реальном приложении следует интегрировать более надежную систему баз данных (например, PostgreSQL, MongoDB и т.д.)
3. Настройка параметров WebAuthn: Расмотренные параметри WebAuthn являются отправной точкой. В зависимости от требований вашего приложения и политики безопасности, вам может понадобиться настроить эти параметры. Обратитесь к документации WebAuthn и документации библиотеки Simple WebAuthn для получения рекомендаций по настройке параметров под ваши конкретные потребности.

Спасибо, что присоединились к нам в этом образовательном путешествии. Даже в этом минимальном примере интегрировать WebAuthn - не простая задача, есть и другой вариант, попробуйте WebAuthn в MFA от Logto: