Passer au contenu principal
Consultez le guide Angular Authentication By Example pour un examen approfondi de l’implémentation de l’authentification des utilisateurs dans Angular. Ce guide fournit des détails supplémentaires sur la façon de créer un bouton d’inscription, d’ajouter des protections de routage et d’appeler une API protégée à partir de Angular.
Auth0 vous permet d’ajouter rapidement l’authentification à presque tous les types d’application. Ce guide explique comment intégrer Auth0, ajouter l’authentification et afficher les informations de profil utilisateur dans n’importe quelle application Angular à l’aide de la trousse SDK Angular Auth0.Pour utiliser ce guide rapide, vous devez :
  • Vous inscrire à un compte Auth0 gratuit ou vous connecter à Auth0.
  • Disposer d’un projet Angular fonctionnel avec lequel vous souhaitez vous intégrer. Vous pouvez également consulter ou télécharger une application faisant office d’exemple lorsque vous vous connectez.
    1

    Configuration d’Auth0

    Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour le projet que vous développez.

    ​
    Configurer une application

    Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.

    ​
    Configuration des URL de rappel

    Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.
    Si vous suivez notre projet à titre d’exemple, définissez ceci sur http://localhost:4200.

    ​
    Configuration des URL de déconnexion

    Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.
    Si vous suivez notre projet à titre d’exemple, définissez ceci sur http://localhost:4200.

    ​
    Configurer les origines Web autorisées

    Une origine Web autorisée est une URL que vous souhaitez autoriser à accéder à votre flux d’authentification. Elle doit contenir l’URL de votre projet. Si elle n’est pas configurée adéquatement, votre projet ne pourra pas actualiser silencieusement les jetons d’authentification, ce qui entraînera la déconnexion de vos utilisateurs lorsque prochainement ils visiteront votre application ou lors de l’actualisation d’une page.
    Si vous suivez notre projet à titre d’exemple, définissez ceci sur http://localhost:4200.
    2

    Installer la trousse SDK React Auth0

    Auth0 propose une trousse SDK Angular pour simplifier le processus de mise en œuvre de l’authentification et de l’autorisation Auth0 dans les applications Angular.Installez la trousse SDK Angular Auth0 en exécutant les commandes suivantes dans votre terminal :npm install @auth0/auth0-angularLa trousse SDK expose plusieurs types qui aident à intégrer Auth0 dans une application Angular, y compris un module et un service d’authentification.
    3

    Enregistrer et fournir Auth0

    La trousse SDK exporte provideAuth0, qui est une fonction provide contenant tous les services nécessaires au fonctionnement de la trousse SDK. Pour l’enregistrer dans votre application :
    1. Ouvrez le fichier main.ts.
    2. Importez la fonction provideAuth0 du package @auth0/auth0-angular.
    3. Ajoutez provideAuth0 à l’application en l’ajoutant aux providers dans bootstrapApplication.
    4. Injectez AuthService dans AppComponent.
    La fonction provideAuth0 prend les propriétés domain et clientId; les valeurs de ces propriétés correspondent aux valeurs Domain et Client ID que vous pouvez trouver sous Settings (Paramètres) dans la Single-Page Application (Application à page unique) que vous avez enregistrée avec Auth0. En outre, nous configurons authorizationParams.redirect_uri, qui permet à Auth0 de rediriger l’utilisateur vers l’URL spécifique après une authentification réussie.
    Si vous utilisez un domaine personnalisé avec Auth0, la valeur de la propriété de domaine est la valeur de votre domaine personnalisé au lieu de la valeur indiquée dans l’onglet « Settings (Paramètres) ».
    4

    Ajouter une fonctionnalité de connexion à votre application

    À présent que vous avez configuré votre application Auth0 et la trousse SDK Angular Auth0, vous devez configurer la connexion pour votre projet. Pour ce faire, vous utiliserez la méthode loginWithRedirect() de la classe AuthService dans la trousse SDK pour rediriger les utilisateurs vers la page de connexion universelle Auth0 où Auth0 peut les authentifier. Après qu’un utilisateur se soit authentifié avec succès, il sera redirigé vers votre application et vers l’URL de rappel que vous avez configurée plus tôt dans ce guide.Créez un bouton de connexion dans votre application qui appelle loginWithRedirect() lorsqu’il est sélectionné.
    Point de contrôle
    Vous devriez maintenant pouvoir vous connecter à votre application.Exécutez votre application et sélectionnez le bouton de connexion. Vérifiez que:
    • Vous pouvez vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe.
    • Votre application vous redirige vers la page Connexion universelle Auth0.
    • Vous êtes redirigé vers Auth0 pour l’authentification.
    • Auth0 redirige bien vers votre application après l’authentification.
    • Vous ne recevez aucun message d’erreur dans la console lié à Auth0.
    5

    Ajouter une fonctionnalité de déconnexion à votre application

    Les utilisateurs qui se connectent à votre projet auront également besoin d’un moyen de se déconnecter. La trousse SDK fournit une méthode logout() sur la classe AuthService que vous pouvez utiliser pour déconnecter un utilisateur de votre application. Lorsque les utilisateurs se déconnectent, ils seront redirigés vers votre point de terminaison de déconnexion Auth0, qui par la suite les redirigera immédiatement vers votre application et l’URL de déconnexion que vous avez configurée précédemment dans ce démarrage rapide.Créez un bouton de déconnexion dans votre application qui appelle logout() lorsqu’il est sélectionné.
    La trousse SDK expose un observable isAuthenticated$ sur la classe AuthService qui vous permet de vérifier si un utilisateur est authentifié ou non. Vous pouvez produire les boutons de connexion et de déconnexion de manière conditionnelle en fonction de la valeur de l’observable isAuthenticated$. Vous pouvez également utiliser un seul bouton pour combiner les boutons de connexion et de déconnexion ainsi que leur rendu conditionnel.
    Point de contrôle
    Vous devriez maintenant pouvoir vous connecter à votre application.Exécutez votre application, connectez-vous et sélectionnez le bouton de déconnexion. Vérifiez que:
    • vous êtes redirigé vers le point de terminaison de déconnexion Auth0.
    • Auth0 redirige bien vers votre application et l’URL de déconnexion correcte.
    • vous n’êtes plus connecté à votre application.
    • Vous ne recevez aucun message d’erreur dans la console lié à Auth0.
    6

    Afficher les informations du profil utilisateur

    Étant donné que vos utilisateurs peuvent désormais se connecter et se déconnecter, vous voudrez probablement pouvoir récupérer les informations de profil associées aux utilisateurs authentifiés. Par exemple, vous voudrez peut-être pouvoir personnaliser l’interface utilisateur en affichant le nom ou la photo de profil d’un utilisateur connecté.La trousse SDK Angular Auth0 fournit des informations sur les utilisateurs par l’intermédiaire de l’observable user$ exposé par la classe AuthService. L’observable user$ contenant des informations et des artefacts sensibles liés à l’identité de l’utilisateur, sa disponibilité dépend de l’état d’authentification de l’utilisateur. Heureusement, l’observable user$ est configuré pour émettre des valeurs uniquement lorsque l’observable isAuthenticated$ est défini sur vrai, de sorte qu’il n’est pas nécessaire de vérifier manuellement l’état de l’authentification avant d’accéder aux données du profil utilisateur.La trousse SDK expose également un observable isAuthenticated$ sur la classe AuthService qui vous permet de vérifier si un utilisateur est authentifié ou non, ce qui vous aide à décider s’il faut afficher ou masquer des éléments de l’interface utilisateur, par exemple.Examinez le code UserProfileComponent dans le panneau interactif pour voir des exemples d’utilisation de ces fonctions.
    Point de contrôle
    Vous devriez maintenant être en mesure d’afficher les informations relatives au profil utilisateur.Exécutez votre application et vérifiez que:
    • Les informations sur l’utilisateur s’affichent correctement après la connexion.
    • Les informations sur l’utilisateur ne s’affichent pas après la déconnexion.

​
Étapes suivantes

Beau travail! Si vous en êtes arrivé là, vous devriez avoir la connexion, la déconnexion et les informations de profil utilisateur actives dans votre application.Cela conclut notre tutoriel de démarrage rapide, mais il y a tellement plus à explorer. Pour en savoir plus sur ce que vous pouvez faire avec Auth0, consultez :
  • Auth0 Dashboard : apprenez à configurer et gérer votre locataire et vos applications Auth0
  • Trousse SDK auth0-angular : explorez en détail la trousse SDK utilisée dans ce tutoriel
  • Auth0 Marketplace : découvrez des intégrations que vous pouvez activer pour étendre les fonctionnalités d’Auth0
⌘I