Construa autenticação Nuxt com Logto
Aprenda a construir um fluxo de autenticação de usuário com Nuxt integrando o SDK Logto.
Founder
Comece
Introdução
- Logto é uma alternativa de código aberto ao Auth0 para construir infraestruturas de identidade. Suporta vários métodos de login, incluindo nome de utilizador, e-mail, número de telefone e logins sociais populares como Google e GitHub.
- Nuxt um framework de código aberto que torna o desenvolvimento web intuitivo e poderoso.
Neste tutorial, vamos mostrar-lhe como construir um fluxo de autenticação de utilizador com Nuxt integrando o Logto SDK. O tutorial usa TypeScript como a linguagem de programação.
Pré-requisitos
Antes de começar, certifique-se de que tem o seguinte:
- Uma conta Logto. Se não tiver uma, pode registar-se gratuitamente.
- Ambiente de desenvolvimento A Nuxt e um projeto.
Criar uma aplicação Logto
Para começar, crie uma aplicação Logto com o tipo "Tradicional web". Siga estes passos para criar uma aplicação Logto:
- Inicie sessão no Logto Console.
- Na barra de navegação à esquerda, clique em Aplicações.
- Clique em Criar aplicação.
- Na página aberta, encontre a secção "Tradicional web" e localize o cartão "Nuxt".
- Clique em Começar a construir e insira o nome da sua aplicação.
- Clique em Criar.
Depois deverá ver um guia interativo que o orienta no processo de integração do Logto SDK com a sua aplicação Nuxt. O conteúdo seguinte pode ser uma referência para uso futuro.
Integre o SDK Logto
Instalação
Instale o SDK Logto através do seu gerenciador de pacotes favorito:
Registre o módulo Logto
No seu arquivo de configuração Nuxt (nuxt.config.ts), adicione o módulo Logto:
A configuração mínima para o módulo é a seguinte:
Como estas informações são sensíveis, é recomendado usar variáveis de ambiente:
Veja runtime config para mais informações.
Implementar início de sessão e encerramento de sessão
Configurar URIs de redirecionamento
Mude para a página de detalhes da aplicação no Logto Console. Adicione um URI de redirecionamento http://localhost:3000/callback.
URI de redirecionamento é um conceito do OAuth 2.0 que implica a localização para onde deve redirecionar após a autenticação.
De forma semelhante, adicione http://localhost:3000/ à secção "URI de redirecionamento após logout".
URI de redirecionamento após logout é um conceito do OAuth 2.0 que implica a localização para onde deve redirecionar após o logout.
Depois clique em "Guardar" para salvar as alterações.
Quando se registra o módulo @logto/nuxt, ele fará o seguinte:
- Adiciona três rotas para iniciar a sessão (
/sign-in), encerrar a sessão (/sign-out), e callback (/callback). - Importa dois componíveis:
useLogtoClienteuseLogtoUser.
Estas rotas são configuráveis através de logto.pathnames nas opções do módulo, por exemplo:
Confira o arquivo de definição de tipo no pacote @logto/nuxt para mais informações.
Como as páginas Nuxt serão hidratadas e se tornarão uma aplicação de página única (SPA) após o carregamento inicial, precisamos redirecionar o usuário para a rota de início de sessão ou encerramento de sessão quando necessário.
Exibir informações do usuário
Para exibir as informações do usuário, você pode usar o useLogtoUser() composable, que está disponível tanto no servidor como no lado do cliente:
Ponto de verificação: Execute a aplicação
Agora pode executar a aplicação e tentar iniciar sessão/terminar sessão com o Logto:
- Abra a aplicação no seu navegador, deverá ver o botão "Iniciar sessão".
- Clique no botão "Iniciar sessão" e deverá ser redirecionado para a página de login do Logto.
- Depois de iniciar sessão, deverá ser redirecionado de volta para a aplicação e deverá ver os dados do utilizador e o botão "Terminar sessão".
- Clique no botão "Terminar sessão" e deverá ser redirecionado para a página de logout do Logto, e depois redirecionado de volta para a aplicação em estado de não iniciado sessão.
Se encontrar algum problema durante a integração, não hesite em juntar-se ao nosso servidor Discord para conversar com a comunidade e a equipa Logto!