Construa autenticação com SvelteKit usando o Logto
Aprenda como construir um fluxo de autenticação de usuário com SvelteKit integrando o SDK Logto.
Founder
Comece agora
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 usuário, e-mail, número de telefone e logins sociais populares como Google e GitHub.
- SvelteKit é um framework para desenvolver rapidamente aplicações web robustas e performáticas usando Svelte.
Neste tutorial, vamos mostrar como construir um fluxo de autenticação de usuário com SvelteKit 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 se inscrever gratuitamente.
- Ambiente de desenvolvimento A SvelteKit e um projeto.
Criar uma aplicação Logto
Para começar, crie uma aplicação Logto com o tipo "Web tradicional". Siga estes passos para criar uma aplicação Logto:
- Faça login no Logto Console.
- Na barra de navegação à esquerda, clique em Aplicações.
- Clique em Criar aplicação.
- Na página aberta, encontre a seção "Web tradicional" e localize o cartão "SvelteKit".
- Clique em Começar a construir e insira o nome da sua aplicação.
- Clique em Criar.
Depois você deve ver um guia interativo que o orienta no processo de integração do Logto SDK com sua aplicação SvelteKit. O conteúdo a seguir pode ser uma referência para uso futuro.
Integre com o SDK Logto
Instalação
Instale o SDK Logto através do seu gerenciador de pacotes favorito:
Adicione o gancho Logto
Em seu arquivo hooks.server.ts, adicione o seguinte código para injetar o gancho Logto em seu servidor:
Como essas informações são sensíveis, é recomendado usar variáveis de ambiente:
Se você tiver vários ganchos, pode usar a função auxiliar sequence() para encadeá-los:
Agora você pode acessar o cliente Logto no objeto locals. Para TypeScript, você pode adicionar o tipo a app.d.ts:
Falaremos mais sobre o objeto user mais tarde.
Implemente o sign-in e sign-out
Configurar URIs de redirecionamento
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.
Volte para o seu aplicativo, na página onde você deseja implementar o sign-in e sign-out, defina as seguintes açoes:
Em seguida, use essas ações em seu componente Svelte:
Exibir informações do usuário
Para exibir as informações do usuário, você pode injetar o objeto locals.user no layout, tornando-o disponível para todas as páginas:
Em seu componente Svelte:
Ponto de verificação: Executar a aplicação
Agora você pode executar a aplicação e tentar iniciar sessão/terminar sessão com o Logto:
- Abra a aplicação no seu navegador, você deve ver o botão "Iniciar sessão".
- Clique no botão "Iniciar sessão" e você deve ser redirecionado para a página de login do Logto.
- Depois de iniciar sessão, você deve ser redirecionado de volta para a aplicação e deve ver os dados do usuário e o botão "Terminar sessão".
- Clique no botão "Terminar sessão" e você deve 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 equipe Logto!