Español

webauthn
llave de paso
mfa
nextjs

Implementación de WebAuthn en Next.js: Una guía práctica

Una guía práctica para implementar WebAuthn en Next.js con ejemplos de código en vivo.

Sijie

Developer

11/15/2023

Deja de perder semanas en la autenticación de usuarios

Lanza aplicaciones seguras más rápido con Logto. Integra la autenticación de usuarios en minutos y concéntrate en tu producto principal.

Comenzar

Bienvenido de nuevo a nuestra serie de WebAuthn. En nuestros artículos anteriores, hemos cubierto los conceptos básicos de WebAuthn y una guía 101. Si te unes a nosotros justo ahora, siéntete libre de revisar estos fundamentos para ponerte al día.

Hoy, vamos a arremangarnos para poner la teoría en práctica. Aprovecharemos el poder de Next.js con la nueva característica "Acciones del servidor". ¿Nuestro objetivo? Implementar WebAuthn en una aplicación Next.js y prepararnos para WebAuthn.

Antes de sumergirnos en el mar del código, aquí tienes un vistazo de lo que te espera al final del viaje: un sitio web de demostración completamente funcional. Explóralo para ver WebAuthn en acción y para probar lo que estarás construyendo. En este sitio de demostración, puedes registrar nuevos usuarios e iniciar sesión con las llaves de paso recién registradas.

Vista previa

Y para aquellos que prefieren un mapa en mano, ¡te tenemos cubierto! Todo el código del que hablaremos está disponible en un repositorio público de GitHub. Este repositorio es tu guía compañera, ofreciendo el código fuente completo de nuestra implementación.

¿Listo para embarcarte en esta emocionante aventura? ¡Comencemos!

Prerrequisitos

Antes de comenzar, asegúrate de tener todo lo que necesitas:

Un proyecto de Next.js: Si aún no has configurado un proyecto de Next.js, aquí tienes una guía rápida para comenzar.
Biblioteca Simple WebAuthn: Varios paquetes para ayudar a reducir la cantidad de trabajo necesario para incorporar WebAuthn en un sitio web. Usa tu gestor de paquetes favorito para instalar @simplewebauthn/browser, @simplewebauthn/server y @simplewebauthn/typescript-types
Almacenamiento de sesión: Usaremos el almacenamiento de sesión para gestionar los desafíos de WebAuthn. Usaremos el KV de Vercel para lograr esto.
Una base de datos de usuarios: Un lugar para almacenar las llaves de paso registradas de nuestros usuarios. Para simplificar, también usaremos el KV de Vercel para demostrar.

Ahora, con nuestras herramientas y materiales a mano, estamos listos para comenzar a construir.

Implementación del almacenamiento de sesión con el KV de Vercel

Configurando el almacenamiento KV

Es fácil inicializar un almacenamiento KV tanto en producción como en desarrollo local, sigue esta guía para conectar una tienda KV a tu proyecto y obtener los valores del entorno: https://vercel.com/docs/storage/vercel-kv/quickstart

Implementar funciones de gestión de sesión

Exportamos 2 funciones:

getCurrentSession: Usa el asistente de cookies de Next.js para crear una sesión para la solicitud actual y devuelve el valor.
updateCurrentSession: Guarda los datos en la sesión actual.

Implementación de la base de datos de usuarios con el KV de Vercel

De manera similar a nuestra implementación de sesión, implementemos una simple base de datos de usuarios.

Creamos funciones para buscar usuarios por correo electrónico y actualizar los datos de los usuarios por correo electrónico. Recuerda, esto es solo para demostración, en el producto real, los datos de usuario generalmente se mantienen en una base de datos.

Preparando funciones de WebAuthn

Antes de continuar, veamos el diagrama del flujo de registro y autenticación:

Como puedes ver, necesitamos preparar 2 funciones:

generateWebAuthnRegistrationOptions
verifyWebAuthnRegistration

Similar al registro, el inicio de sesión requiere 2 funciones:

generateWebAuthnLoginOptions
verifyWebAuthnLogin

Aquí está el código:

Construir la página web

Hemos completado la preparación, construyamos la página:

Conclusión

Felicitaciones por navegar a través de las complejidades de implementar WebAuthn en una aplicación Next.js. Al concluir, es importante abordar algunas consideraciones cruciales para desplegarlo en un entorno de producción.

Consideraciones clave para la implementación en producción

Ajuste del identificador del usuario: En este tutorial, usamos una dirección de correo electrónico como identificador del usuario. Sin embargo, en un escenario de producción, puede que necesites usar un identificador diferente, como un userId o nombre de usuario.
Integración de base de datos: Aunque utilizamos el KV de Vercel como una simple demostración de gestión de datos de sesión y usuario, una aplicación del mundo real debería integrar un sistema de base de datos más robusto (como PostgreSQL, MongoDB, etc.)
Personalización de opciones de WebAuthn: Las opciones de WebAuthn que exploramos son un punto de partida. Dependiendo de los requisitos de tu aplicación y políticas de seguridad, es posible que necesites ajustar estas configuraciones. Consulta la documentación de WebAuthn y la documentación de la biblioteca Simple WebAuthn para obtener orientación sobre cómo personalizar estas opciones para satisfacer tus necesidades específicas.

Gracias por unirte a nosotros en esta aventura educativa. Incluso en este ejemplo mínimo, integrar WebAuthn no es una tarea simple, hay otra opción, prueba WebAuthn en el MFA de Logto:

Prueba la autenticación multifactor de Logto

Prerrequisitos#

Implementación del almacenamiento de sesión con el KV de Vercel#

Configurando el almacenamiento KV#

Implementar funciones de gestión de sesión#

Implementación de la base de datos de usuarios con el KV de Vercel#

Preparando funciones de WebAuthn#

Construir la página web#

Conclusión#

Consideraciones clave para la implementación en producción#

Prerrequisitos#

Implementación del almacenamiento de sesión con el KV de Vercel#

Configurando el almacenamiento KV#

Implementar funciones de gestión de sesión#

Implementación de la base de datos de usuarios con el KV de Vercel#

Preparando funciones de WebAuthn#

Construir la página web#

Conclusión#

Consideraciones clave para la implementación en producción#

Prerrequisitos

Implementación del almacenamiento de sesión con el KV de Vercel

Configurando el almacenamiento KV

Implementar funciones de gestión de sesión

Implementación de la base de datos de usuarios con el KV de Vercel

Preparando funciones de WebAuthn

Construir la página web

Conclusión

Consideraciones clave para la implementación en producción

Prerrequisitos

Implementación del almacenamiento de sesión con el KV de Vercel

Configurando el almacenamiento KV

Implementar funciones de gestión de sesión

Implementación de la base de datos de usuarios con el KV de Vercel

Preparando funciones de WebAuthn

Construir la página web

Conclusión

Consideraciones clave para la implementación en producción