Exercice : configurer les fournisseurs d’authentification et l’accès

4 minutes

Votre application web de liste d’achats doit sécuriser l’accès à certains itinéraires et désactiver des fournisseurs d’authentification spécifiques. Dans cet exercice, vous allez mettre à jour la configuration du routage de votre application web pour y parvenir.

Dans cet exercice, vous allez effectuer les étapes suivantes :

Ajouter des règles à la configuration de routage pour désactiver certains fournisseurs d’authentification.
Sécuriser la liste des produits afin que seuls les utilisateurs authentifiés puissent y accéder.
Déployer l’application mise à jour.
Vérifier que les restrictions sont effectives.

Désactiver des fournisseurs d’authentification

Nous allons mettre à jour la configuration de routage de notre application pour désactiver le fournisseur d’authentification Microsoft Entra.

Ouvrez le projet dans Visual Studio Code.

Ouvrez le fichier suivant.

angular-app/staticwebapp.config.json

react-app/staticwebapp.config.json

svelte-app/staticwebapp.config.json

vue-app/staticwebapp.config.json

À la racine de l’objet JSON, ajoutez la configuration de routage suivante.
```
"routes": [
  {
    "route": "/.auth/login/aad",
    "statusCode": 404
  }
]
```
En ajoutant cette règle de routage, nous empêchons nos utilisateurs d’accéder au fournisseur d’authentification Microsoft Entra.

Sécuriser l’accès à la liste de produits

Ensuite, nous voulons sécuriser la liste des produits afin que seuls ceux qui sont authentifiés soient en mesure d’accéder à l’API. Pour cela, nous allons ajouter une autre règle de routage dans le fichier de configuration staticwebapp.config.json.

Ajoutez la règle suivante en haut du tableau routes.

{
  "route": "/api/products/*",
  "allowedRoles": ["authenticated"]
},

Votre fichier staticwebapp.config.json terminé doit ressembler à ce qui suit :

{
  "routes": [
    {
      "route": "/api/products/*",
      "allowedRoles": ["authenticated"]
    },
    {
      "route": "/.auth/login/aad",
      "statusCode": 404
    }
  ],
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["*.{css,scss,js,png,gif,ico,jpg,svg}"]
  }
}

Déployez vos modifications

Avant de tester le résultat de cette configuration, nous allons redéployer notre application.

Dans Visual Studio Code, ouvrez la palette de commandes en appuyant sur F1.
Entrez et sélectionnez Git: Commit All.
Entrez Secure access comme message de commit, puis appuyez sur Entrée.
Ouvrez la palette de commandes en appuyant sur F1.
Entrez et sélectionnez Git: Push, puis appuyez sur Entrée.

Après avoir envoyé vos modifications, attendez que le processus de génération et de déploiement s’exécute. Par la suite, les modifications doivent être visibles sur votre application déployée.

Tester les nouvelles restrictions

Une fois que votre application est redéployée, vous pouvez vérifier que les nouvelles restrictions sont effectives.

Dans la fenêtre de l’explorateur Visual Studio Code, revenez à la section Static Web Apps, cliquez avec le bouton droit sur my-static-web-app-and-authn, puis sélectionnez Parcourir le site pour afficher l’application dans votre navigateur.
Si vous n’êtes pas connecté, vous devriez voir le message non autorisé au lieu de la liste des produits.
Sélectionnez Microsoft Entra ID dans la liste des fournisseurs d’authentification pour vous connecter.

Vous voyez normalement une page d’erreur 404 comme suit :
Appuyez sur le bouton Précédent de votre navigateur pour revenir à votre application.
Sélectionnez GitHub dans la liste des fournisseurs d’authentification pour vous connecter.
Entrez vos informations d’identification GitHub si vous y êtes invité, puis sélectionnez Accorder le consentement dans la page de consentement Azure.

Vous êtes maintenant connecté et vous devriez voir la liste des produits.

Étapes suivantes