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.

Configurer les 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 SPA (auth0-spa-js) pour simplifier le processus de mise en œuvre de l’authentification et de l’autorisation Auth0 dans les applications JavaScript. Vous pouvez installer la trousse SDK Auth0 SPA en tant que paquet NPM ou à partir du CDN. Pour les besoins de ce démarrage rapide, nous utiliserons le CDN. Incluez cette balise de script dans votre page HTML :

<script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js"></script>

Créez une nouvelle instance du client Auth0 fourni par la trousse SDK Auth0 SPA et fournissez les détails de l’application Auth0 que vous avez créée plus tôt dans ce guide rapide.

Si un utilisateur s’est déjà connecté, le client actualisera l’état d’authentification lors du chargement de la page; l’utilisateur restera connecté après l’actualisation de la page.

À présent que vous avez configuré votre application Auth0, ajouté la trousse SDK Auth0 SPA et créé le client Auth0, vous devez configurer la connexion pour votre projet. Pour ce faire, vous utiliserez la méthode loginWithRedirect() de la trousse SDK pour rediriger les utilisateurs vers la page de connexion universelle Auth0 où Auth0 peut les authentifier. Une fois un utilisateur authentifié avec succès, il est redirigé vers l’URL de rappel que vous avez configurée précédemment dans ce démarrage rapide.

Créez un bouton de connexion dans votre application qui appelle loginWithRedirect() lorsqu’il est sélectionné.

Lorsque le navigateur est redirigé vers votre processus d’application, votre application doit appeler la fonction handleRedirectCallback() sur le client Auth0 uniquement lorsqu’elle détecte un rappel provenant d’Auth0. Une façon de procéder consiste à appeler handleRedirectCallback() uniquement lorsque des paramètres de requête code et state sont détectés.

Si la gestion du rappel a réussi, les paramètres doivent être supprimés de l’URL afin d’éviter que le gestionnaire du rappel ne soit déclenché lors du prochain chargement de la page.

Les utilisateurs qui se connectent à votre projet auront également besoin de a way to log out (un moyen de se déconnecter). Le client Auth0 fournit une méthode logout() que vous pouvez utiliser pour déconnecter un utilisateur de votre application. Lorsque les utilisateurs se déconnectent, ils seront redirigés vers votre Auth0 logout endpoint (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é.

Vu 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 Auth0 SPA fournit des informations sur les utilisateurs par l’intermédiaire de la fonction getUser() exposée par le client Auth0. Le client Auth0 expose également une fonction isAuthenticated() qui vous permet de vérifier si un utilisateur est authentifié ou non, ce qui vous permet de déterminer s’il faut afficher ou masquer des éléments de l’interface utilisateur, par exemple. Examinez le code dans le panneau interactif pour voir des exemples d’utilisation de ces fonctions.