Русский

webauthn
passkey
mfa
nextjs

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

Практическое руководство по реализации WebAuthn в Next.js с примерами живого кода.

Sijie

Developer

11/15/2023

Хватит тратить недели на аутентификацию пользователей

Запускайте безопасные приложения быстрее с Logto. Интегрируйте аутентификацию пользователей за считанные минуты и сосредоточьтесь на вашем основном продукте.

Начать

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

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

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

Предварительный просмотр

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

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

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

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

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

generateWebAuthnRegistrationOptions
verifyWebAuthnRegistration

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

generateWebAuthnLoginOptions
verifyWebAuthnLogin

Вот код:

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

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

Заключение

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

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

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

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

Попробуйте многофакторную аутентификацию Logto

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

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

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

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

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

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

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

Заключение#

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

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

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

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

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

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

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

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

Заключение#

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

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

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

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

Заключение

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