Apprenez à construire un flux d'authentification utilisateur avec Angular en intégrant la bibliothèque cliente Angular OIDC.
Dans ce tutoriel, nous allons vous montrer comment créer un flux d'authentification utilisateur avec Angular en intégrant le SDK Logto. Le tutoriel utilise TypeScript comme langage de programmation.
Avant de commencer, assurez-vous d'avoir les éléments suivants :
Pour commencer, créez une application Logto avec le type "Application monopage". Suivez ces étapes pour créer une application Logto :
Vous devriez ensuite voir un guide interactif qui vous guide à travers le processus d'intégration du SDK Logto avec votre application Angular. Le contenu suivant peut être une référence pour une utilisation future.
Installez le SDK principal Logto JS et la bibliothèque cliente Angular OIDC :
Dans votre projet Angular, ajoutez le fournisseur d'authentification à votre app.config.ts :
Passez à la page des détails de l'application de la Console Logto. Ajoutez une URI de redirection http://localhost:3000/callback.
URI de redirection est un concept OAuth 2.0 qui implique que l'emplacement doit rediriger après l'authentification.
De même, ajoutez http://localhost:3000/ à la section "URI de redirection après déconnexion".
URI de redirection après déconnexion est un concept OAuth 2.0 qui implique que l'emplacement doit rediriger après la déconnexion.
Cliquez ensuite sur "Enregistrer" pour enregistrer les modifications.
Dans le composant où vous souhaitez implémenter la connexion et la déconnexion (par exemple, app.component.ts), injectez le OidcSecurityService et utilisez-le pour vous connecter et vous déconnecter.
Ensuite, dans le template, ajoutez des boutons pour vous connecter et vous déconnecter :
Le OidcSecurityService fournit un moyen pratique de s'abonner à l'état d'authentification :
Et utilisez-le dans le template :
Vous pouvez maintenant exécuter l'application et essayer de vous connecter/déconnecter avec Logto :
Si vous rencontrez des problèmes lors de l'intégration, n'hésitez pas à rejoindre notre serveur Discord pour discuter avec la communauté et l'équipe Logto !