Construire une authentification Angular avec Logto
Apprenez à construire un flux d'authentification utilisateur avec Angular en intégrant la bibliothèque cliente Angular OIDC.
Founder
Commencer
Introduction
- Logto est une alternative open-source à Auth0 pour construire des infrastructures d'identité. Il prend en charge diverses méthodes de connexion, y compris le nom d'utilisateur, l'email, le numéro de téléphone et les connexions sociales populaires comme Google et GitHub.
- Angular est un framework de développement web créé et maintenu par Google.
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.
Prérequis
Avant de commencer, assurez-vous d'avoir les éléments suivants :
- Un compte Logto. Si vous n'en avez pas, vous pouvez vous inscrire gratuitement.
- Environnement de développement An Angular et un projet.
Créer une application Logto
Pour commencer, créez une application Logto avec le type "Application monopage". Suivez ces étapes pour créer une application Logto :
- Connectez-vous à la Console Logto.
- Dans la barre de navigation de gauche, cliquez sur Applications.
- Cliquez sur Créer une application.
- Sur la page ouverte, trouvez la section "Application monopage" et localisez la carte "Angular".
- Cliquez sur Commencer à construire et entrez le nom de votre application.
- Cliquez sur Créer.
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.
Intégrer Logto à votre projet
Installation
Installez le SDK principal Logto JS et la bibliothèque cliente Angular OIDC :
Configurer l'application
Dans votre projet Angular, ajoutez le fournisseur d'authentification à votre app.config.ts :
Implémenter la connexion et la déconnexion
Configurer les URI de redirection
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 :
S'abonner à l'état d'authentification et afficher les informations utilisateur
Le OidcSecurityService fournit un moyen pratique de s'abonner à l'état d'authentification :
Et utilisez-le dans le template :
Point de contrôle : Exécuter l'application
Vous pouvez maintenant exécuter l'application et essayer de vous connecter/déconnecter avec Logto :
- Ouvrez l'application dans votre navigateur, vous devriez voir le bouton "Se connecter".
- Cliquez sur le bouton "Se connecter" et vous devriez être redirigé vers la page de connexion Logto.
- Après vous être connecté, vous devriez être redirigé vers l'application et vous devriez voir les données utilisateur et le bouton "Se déconnecter".
- Cliquez sur le bouton "Se déconnecter" et vous devriez être redirigé vers la page de déconnexion Logto, puis redirigé vers l'application avec un état non connecté.
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 !