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.

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.

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.

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-angular

La trousse SDK expose plusieurs types qui aident à intégrer Auth0 dans une application Angular, y compris un module et un service d’authentification.

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.

À 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é.

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é.

É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.