Authentifier des applications monopage avec des cookies

Décrit comment utiliser votre serveur backend pour authentifier une application monopage (SPA) au moyen de cookies.

Sécuriser une application monopage (SPA) peut représenter un défi. Toutefois, si votre SPA répond aux critères suivants, vous pouvez simplifier votre mise en œuvre en utilisant des cookies pour authentifier les utilisateurs.

• Est servie au client par votre propre backend.
• Utilise le même domaine que votre backend.
• Effectue des appels d’API à votre backend nécessitant une authentification.

Voici une description de cette approche ainsi qu’un exemple de mise en œuvre avec Node.js.

​

Fonctionnement

Les étapes ci-dessous montrent comment les jetons sont récupérés et utilisés. Dans cette approche, le Flux implicite avec Form Post est utilisé au lieu d’un Flux de code d’autorisation avec clé de preuve pour l’échange de code traditionnel. Cela s’explique par le fait que le mode de réponse Form Post est un moyen plus simple d’implémenter la connexion lorsque vous demandez l’accès à votre propre ressource.

1. L’utilisateur accède à une route protégée à l’aide du navigateur, ou effectue une action qui exige le démarrage d’une étape d’authentification (par exemple, cliquer sur un bouton Login)
2. Le navigateur est redirigé vers une route /login sur le backend, ou vers la route protégée, selon l’action effectuée par l’utilisateur
3. Le backend construit une requête vers le point de terminaison /authorize du serveur d’autorisation et y redirige le navigateur
4. L’utilisateur est invité à s’authentifier au moyen de la méthode présentée par le serveur d’autorisation
5. Le serveur d’autorisation envoie les jetons par POST à l’URI de redirection sous forme de données de formulaire encodées en URL. Le backend peut récupérer ces jetons en analysant le corps de la requête.

À ce stade, l’utilisateur est authentifié et le backend possède les jetons requis. Un cookie peut maintenant être créé pour représenter cet état côté client. Le navigateur est ensuite redirigé vers une route qui charge la SPA et reçoit également le cookie d’authentification.

À partir de ce moment, ce cookie est échangé entre le client et le backend lorsque des appels d’API sont effectués au moyen d’un appel AJAX. À chaque requête, le backend vérifie si le cookie est toujours valide et, le cas échéant, permet à la requête de se poursuivre.

​

Cookies invalides ou manquants

Lors de la mise en œuvre de cette approche, vous devrez gérer les cas où le cookie d’authentification est invalide ou absent. L’appel d’API du client au backend s’effectue en arrière-plan; le client doit donc gérer toute réponse du serveur indiquant que l’utilisateur doit s’authentifier à nouveau.

Dans l’exemple d’application ci-dessous, ce cas est traité de façon naïve en demandant à l’utilisateur de s’authentifier à nouveau si l’appel d’API entraîne une redirection 302. Cette redirection 302 se produit parce que, si la validation du cookie échoue, le serveur tente de rediriger vers l’endpoint d’autorisation du serveur d’autorisation et envoie cette réponse au client.

​

Exemple

L’application d’exemple utilise Node.js et Express pour illustrer les concepts abordés ci-dessus.

​

Prérequis

• Pour suivre le tutoriel, assurez-vous d’avoir la dernière version de Node installée.

• Une fois Node installé, téléchargez ou clonez le code source et ouvrez le dossier du projet dans un terminal.

  # Cloner le dépôt du tutoriel en utilisant SSH
  git clone [e-mail]:auth0-blog/spa-cookie-demo
  # ... ou si vous utilisez HTTPS :
  git clone https://github.com/auth0-blog/spa-cookie-demo.git
  # Se déplacer dans le répertoire du projet
  cd spa-cookie-demo
  

• La branche master représente l’état de l’application avant l’ajout de l’authentification. Si vous souhaitez consulter la version finale de l’application, passez à la branche with-oidc : git checkout with-oidc

​

Initialiser l’application Node.js

Installez les dépendances de l’application en exécutant npm install à partir de votre terminal. Pour lancer l’application, utilisez npm run dev. Cette commande démarre le serveur Express. Accédez à http://localhost:3000 dans votre navigateur pour voir l’application.

Le serveur de développement utilise nodemon, qui redémarre automatiquement dès qu’il détecte des modifications de fichiers.

​

Explorer l’application

Une fois l’application ouverte à http://localhost:3000, cliquez sur le bouton Appeler l’API. Vous devriez voir un message s’afficher à l’écran.

Notez que vous avez pu effectuer l’appel d’API sans être connecté. Corrigeons cela en ajoutant un middleware qui oblige l’utilisateur à s’authentifier avant de pouvoir effectuer l’appel d’API.

​

Configurer l’environnement

Pour que l’application fonctionne avec l’authentification, express-openid-connect exige la présence de certaines variables d’environnement. Pour cette application, ces variables peuvent être définies dans un fichier .env. Créez un fichier .env à la racine du répertoire du projet et ajoutez-y ce qui suit :

.env

ISSUER_BASE_URL="<YOUR OIDC URL>"
CLIENT_ID="<YOUR OIDC CLIENT ID>"
BASE_URL="http://localhost:3000"
APP_SESSION_SECRET="<YOUR SECRET VALUE>"

​

Configurer l’application dans Auth0

1. Accédez à Dashboard > Applications > Applications, puis cliquez sur Create Application.

2. Donnez un nom à votre nouvelle application, sélectionnez Regular Web Applications, puis cliquez sur Create

3. Dans les Settings de votre nouvelle application, ajoutez http:/localhost:3000/callback à Allowed Callback URLs.

4. Ajoutez http:/localhost:3000 à Allowed Logout URLs.

5. Cliquez sur Save Changes.

6. Accédez à Dashboard > Authentication > Social et configurez quelques connexions sociales. Activez-les pour votre application dans les options Application de l’onglet Connections. L’exemple utilise une connexion de base de données avec nom d’utilisateur et mot de passe, ainsi que Facebook, Google et X.

7. Dans l’écran Settings, notez les paramètres de domain et de client ID affichés en haut.

8. Deux valeurs doivent être configurées dans l’application. Rouvrez le fichier .env et définissez ces valeurs :

​

Exécuter l’application

1. Une fois la configuration du serveur et de l’environnement terminée, repérez la fenêtre du navigateur où l’application est ouverte. Si vous avez fermé le navigateur et arrêté le serveur, exécutez la commande suivante dans le terminal pour redémarrer l’application : npm run dev
2. Ouvrez http://localhost:3000 dans le navigateur. Du point de vue de l’interface utilisateur, l’application devrait avoir le même aspect. Cette fois, toutefois, lorsque vous cliquez sur le bouton Appeler l’API, vous devriez voir un avertissement indiquant que l’utilisateur n’est pas connecté. Notez également que vous ne voyez pas le message “Hello, World” comme auparavant, puisque la requête à l’API a été rejetée.
3. Cliquez sur Se connecter maintenant pour vous connecter. Une fois authentifié, vous reviendrez à l’application et verrez une UI mise à jour qui reflète votre nouvel état de connexion. Vous devriez pouvoir cliquer de nouveau sur le bouton Appeler l’API pour effectuer un appel d’API au serveur, et cette fois, cela fonctionnera.
4. Cliquez sur le lien Profil en haut de la page pour afficher les renseignements de l’utilisateur récupérés à partir du ID token.

​

En savoir plus

• Flux implicite avec Form Post
• Sécurité
• Modifications apportées à l’attribut SameSite des cookies