Português (Portugal)

webauthn
passkey
mfa
nextjs

Implementando WebAuthn em Next.js: Um Guia Prático

Um guia prático para implementar WebAuthn em Next.js com exemplos de código ao vivo.

Sijie

Developer

11/15/2023

Pare de perder semanas com autenticação de utilizadores

Lance aplicações seguras mais rapidamente com o Logto. Integre a autenticação de utilizadores em minutos e concentre-se no seu produto principal.

Começar

Bem-vindo de volta à nossa série sobre WebAuthn. Nos nossos artigos anteriores, cobrimos os fundamentos do WebAuthn, e um guia 101. Se estás a juntar-te a nós agora, não hesites em verificar estes conteúdos fundamentais para te atualizares.

Hoje, vamos arregaçar as mangas para colocar a teoria em prática. Vamos aproveitar o poder do Next.js com o novo recurso “Server Actions”. O nosso objectivo? Implementar WebAuthn numa aplicação Next.js e nos prepararmos para WebAuthn.

Antes de mergulharmos no mundo do código, aqui está uma visão do que te aguarda no final da jornada - um site de demonstração totalmente funcional. Explora-o para ver o WebAuthn em ação e obter uma ideia do que irás construir. Neste site de demonstração, podes registar novos utilizadores e fazer login com as chaves de acesso recém-registadas.

Preview

E para aqueles que preferem ter um mapa em mãos, temos tudo pronto para ti! Todo o código que discutiremos está disponível num repositório público GitHub. Este repositório é o teu guia de acompanhamento, oferecendo o código fonte completo de nossa implementação.

Pronto para embarcar nesta emocionante aventura? Vamos começar!

Pré-requisitos

Antes de começarmos, vamos garantir que temos tudo o que precisamos:

Um Projeto Next.js: Se ainda não configuraste um projeto Next.js, aqui está um guia rápido para te iniciares.
Biblioteca Simple WebAuthn: Vários pacotes para ajudar a reduzir a quantidade de trabalho necessário para incorporar WebAuthn num site. Usa o teu gestor de pacotes favorito para instalar @simplewebauthn/browser, @simplewebauthn/server e @simplewebauthn/typescript-types
Armazenamento de Sessão: Usaremos o armazenamento de sessão para gerir os desafios do WebAuthn. Usaremos KV da vercel para alcançar isso.
Uma Base de Dados de Utilizadores: Um local para armazenar as chaves de acesso registadas dos nossos utilizadores. Para simplificar, também usaremos o KV da vercel para demonstrar.

Agora, com nossas ferramentas e materiais em mãos, estamos prontos para começar a construir.

Implementando armazenamento de sessão com KV da Vercel

Configurando armazenamento KV

É fácil inicializar um armazenamento KV tanto em produção quanto em desenvolvimento local. Siga este guia para conectar uma loja KV ao teu projeto e obter os valores do ambiente: https://vercel.com/docs/storage/vercel-kv/quickstart

Implementar funções de gestão de sessão

Exportámos 2 funções:

getCurrentSession: Usar o auxiliar de cookies do Next.js para criar uma sessão para o pedido atual e retornar o valor.
updateCurrentSession: Guardar dados na sessão atual.

Implementando base de dados de utilizadores com KV da Vercel

De forma semelhante à nossa implementação de sessão, vamos implementar uma base de dados de utilizadores simples.

Criámos funções para encontrar o utilizador por email e atualizar os dados do utilizador por email. Lembra-te, isto é apenas para demonstração, num produto real, os dados do utilizador são guardados normalmente numa base de dados.

Preparando funções WebAuthn

Antes de prosseguirmos, vejamos o diagrama do fluxo de registo e autenticação:

Como podes ver, precisamos preparar 2 funções:

generateWebAuthnRegistrationOptions
verifyWebAuthnRegistration

Semelhante ao registo, o login requer 2 funções:

generateWebAuthnLoginOptions
verifyWebAuthnLogin

Aqui está o código:

Construir a página web

Concluímos a preparação, vamos construir a página:

Conclusão

Parabéns por navegares através das complexidades de implementar WebAuthn numa aplicação Next.js. Ao terminarmos, é importante abordar algumas considerações cruciais para o seu uso num ambiente de produção.

Considerações Chave para Desdobramento em Produção

Ajuste do Identificador do Utilizador: Neste tutorial, usamos um endereço de email como identificador do utilizador. No entanto, num cenário de produção, poderás precisar usar um identificador diferente, como um userId ou username.
Integração com Base de Dados: Embora tenhamos utilizado o KV da Vercel como uma demonstração simples de gestão de sessões e dados de utilizadores, uma aplicação do mundo real deve integrar um sistema de base de dados mais robusto (como PostgreSQL, MongoDB, etc.).
Personalizando Opções WebAuthn: As opções de WebAuthn que explorámos são um ponto de partida. Dependendo dos requisitos da tua aplicação e políticas de segurança, poderás precisar ajustar essas configurações. Consulta a documentação do WebAuthn e a documentação da biblioteca Simple WebAuthn para orientação sobre como personalizar essas opções para atender às tuas necessidades específicas.

Obrigado por te juntares a nós nesta aventura educacional. Mesmo neste exemplo mínimo, integrar o WebAuthn não é uma tarefa simples, existe outra opção, tenta o WebAuthn no MFA da Logto:

Tentar autenticação multifator da Logto

Pré-requisitos#

Implementando armazenamento de sessão com KV da Vercel#

Configurando armazenamento KV#

Implementar funções de gestão de sessão#

Implementando base de dados de utilizadores com KV da Vercel#

Preparando funções WebAuthn#

Construir a página web#

Conclusão#

Considerações Chave para Desdobramento em Produção#

Pré-requisitos#

Implementando armazenamento de sessão com KV da Vercel#

Configurando armazenamento KV#

Implementar funções de gestão de sessão#

Implementando base de dados de utilizadores com KV da Vercel#

Preparando funções WebAuthn#

Construir a página web#

Conclusão#

Considerações Chave para Desdobramento em Produção#

Pré-requisitos

Implementando armazenamento de sessão com KV da Vercel

Configurando armazenamento KV

Implementar funções de gestão de sessão

Implementando base de dados de utilizadores com KV da Vercel

Preparando funções WebAuthn

Construir a página web

Conclusão

Considerações Chave para Desdobramento em Produção

Pré-requisitos

Implementando armazenamento de sessão com KV da Vercel

Configurando armazenamento KV

Implementar funções de gestão de sessão

Implementando base de dados de utilizadores com KV da Vercel

Preparando funções WebAuthn

Construir a página web

Conclusão

Considerações Chave para Desdobramento em Produção