Aprenda a construir um fluxo de autenticação de usuário com SvelteKit integrando o SDK Logto.
Neste tutorial, vamos mostrar-lhe como construir um fluxo de autenticação de utilizador com SvelteKit 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 deverá ver um guia interativo que o orienta no processo de integração do Logto SDK com a sua aplicação SvelteKit. O conteúdo seguinte pode ser uma referência para uso futuro.
Instale o SDK Logto através de seu gerenciador de pacotes favorito:
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 helper sequence() para encadeá-los:
Agora você pode acessar o cliente Logto no objeto locals. Para TypeScript, você pode adicionar o tipo para app.d.ts:
Discutiremos o objeto user mais tarde.
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.
De volta ao seu aplicativo, na página onde você deseja implementar entrada e saída, defina as seguintes ações:
Depois, use estas ações em seu componente Svelte:
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:
Agora 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 equipa Logto!