Aprende como construir um fluxo de autenticação de utilizador com Angular, integrando a biblioteca cliente Angular OIDC.
Neste tutorial, vamos mostrar-lhe como construir um fluxo de autenticação de utilizador com Angular 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 "Aplicação de página única". 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 Angular. O conteúdo seguinte pode ser uma referência para uso futuro.
Instala o SDK core do Logto JS e a biblioteca cliente Angular OIDC:
No teu projeto Angular, adiciona o fornecedor de autenticação no teu app.config.ts:
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.
No componente onde queres implementar entrada e saída (por exemplo, app.component.ts), injeta o OidcSecurityService e usa-o para entrar e sair.
Depois, no template, adiciona botões para entrar e sair:
O OidcSecurityService oferece uma forma conveniente de subscrever ao estado de autenticação:
E utiliza-o no template:
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!