Authentifier des applications monopage avec des cookies

Décrit comment utiliser votre serveur backend pour authentifier une application monopage (SPA) avec des cookies.

La sécurisation d’une application monopage (SPA) peut représenter un défi. Toutefois, si votre SPA répond aux critères suivants, vous pouvez simplifier votre implémentation en utilisant des cookies pour l’authentification.

• Servie au client par votre propre backend.
• A le même domaine que votre backend.
• Effectue des appels d’API à votre backend qui nécessitent une authentification.

Voici une description de cette approche ainsi qu’un exemple d’implémentation avec Node.js.

​

Fonctionnement

Les étapes ci-dessous montrent comment les jetons sont récupérés et utilisés. Dans cette approche, le Implicit Flow with Form Post est utilisé au lieu d’un Authorization Code Flow with Proof Key for Code Exchange traditionnel. Cela s’explique par le fait que le mode de réponse Form Post constitue un moyen plus simple de mettre en œuvre la connexion lorsque vous demandez l’accès à votre propre ressource.

1. L’utilisateur accède à une route protégée dans le navigateur, ou effectue une action qui exige le déclenchement d’une étape d’authentification (comme cliquer sur un bouton de connexion)
2. Le client dans le navigateur redirige 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 à l’aide 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 la forme d’un formulaire encodé dans l’URL. Le backend peut récupérer ces jetons en analysant les données du corps de la requête.

À ce stade, l’utilisateur est authentifié et le backend dispose des 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 sert l’application monopage et reçoit aussi le cookie d’authentification.

Par la suite, 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

Lorsque vous mettez en œuvre cette approche, vous devez gérer les cas où le cookie d’authentification est invalide ou manquant. L’appel d’API au backend depuis l’application s’effectue en arrière-plan; l’application doit donc gérer toute réponse du serveur indiquant que l’utilisateur doit se réauthentifier.

Dans l’exemple d’application suivant, ce cas est géré de façon naïve en invitant l’utilisateur à se réauthentifier si l’appel d’API entraîne une redirection 302. Le code 302 se produit parce que, lorsque la validation du cookie échoue, le serveur tente de rediriger vers le point de terminaison d’autorisation du serveur d’autorisation et envoie cette réponse à l’application.

​

Exemple

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

​

Prérequis

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

• Une fois Node installé, téléchargez ou clonez le code source et ouvrez le dossier du projet dans une fenêtre de terminal.

  # Clonez le dépôt du tutoriel à l’aide de 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
  # Accédez au répertoire du projet
  cd spa-cookie-demo
  

• La branche master représente l’état de l’application avant l’ajout de toute authentification. Si vous voulez consulter la version finale de l’application, basculez vers 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 dans votre terminal. Pour lancer l’application, utilisez npm run dev. Cette commande démarre le serveur Express. Ouvrez http://localhost:3000 dans votre navigateur pour afficher l’application.

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

​

Explorez l’application

Avec l’application ouverte à l’adresse http://localhost:3000, cliquez sur le bouton Call API. Un message devrait s’afficher à l’écran.

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

​

Configurer l’environnement

Pour que l’application fonctionne avec l’authentification, express-openid-connect nécessite 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 à Auth0 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 à Auth0 Dashboard > Authentication > Social et configurez quelques connexions sociales. Activez-les pour votre application dans les options Application de l’onglet Connections. Cet exemple utilise une base de données avec nom d’utilisateur et mot de passe, Facebook, Google et X.

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

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

​

Exécutez l’application

1. Une fois la configuration du serveur et de l’environnement terminée, repérez la fenêtre de 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 la même apparence. Toutefois, cette fois-ci, lorsque vous cliquez sur le bouton Call API, vous devriez voir un avertissement indiquant que l’utilisateur n’est pas connecté. Notez aussi que vous ne voyez pas le message “Hello, World” comme auparavant, puisque l’appel à l’API a été rejeté.
3. Cliquez sur Log in now pour vous connecter. Une fois authentifié, vous retournerez à l’application et verrez une interface mise à jour qui reflète votre nouvel état de connexion. Vous devriez pouvoir cliquer de nouveau sur le bouton Call API pour lancer un appel à l’API vers le serveur, et cette fois, il fonctionnera.
4. Cliquez sur le lien Profile en haut de la page pour afficher les informations de l’utilisateur récupérées à partir de l’ID Token.

​

En savoir plus

• Flux implicite avec envoi par formulaire
• Sécurité
• Modifications apportées à l’attribut de cookie SameSite