Aprenda a construir um fluxo de autenticação de usuário com Nuxt integrando o SDK Logto.
Neste tutorial, vamos mostrar como construir um fluxo de autenticação de usuário com Nuxt integrando o Logto SDK. O tutorial usa TypeScript como a linguagem de programação.
Antes de começar, certifique-se de que tem o seguinte:
Para começar, crie uma aplicação Logto com o tipo "Web tradicional". Siga estes passos para criar uma aplicação Logto:
Depois você deve ver um guia interativo que o orienta no processo de integração do Logto SDK com sua aplicação Nuxt. O conteúdo a seguir pode ser uma referência para uso futuro.
Instale o SDK Logto através do seu gerenciador de pacotes favorito:
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 essas informações são sensíveis, é recomendado o uso de variáveis de ambiente:
Veja configuração de tempo de execução para mais informações.
Vá 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/ à seçã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 "Salvar" para salvar as alterações.
Ao registrar o módulo @logto/nuxt, ele fará o seguinte:
/sign-in), logout (/sign-out), e callback (/callback).useLogtoClient e useLogtoUser.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 login ou logout quando necessário.
Para mostrar as informações do usuário, você pode usar o composable useLogtoUser(), que está disponível no servidor e no lado do cliente:
Agora você pode executar a aplicação e tentar iniciar sessão/terminar sessão com o Logto:
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 equipe Logto!