Oefening: verificatieproviders en toegang configureren

4 minuten

Uw web-app voor boodschappenlijsten moet de toegang tot bepaalde routes beveiligen en specifieke verificatieproviders uitschakelen. In deze oefening werkt u de routeringsconfiguratie van uw web-app bij om dit resultaat te bereiken.

In deze oefening voert u de volgende stappen uit:

Voeg regels toe aan de routeringsconfiguratie om sommige verificatieproviders uit te schakelen.
Beveilig de lijst met producten, zodat alleen geverifieerde gebruikers er toegang toe hebben.
Implementeer de bijgewerkte app.
Test of de beperkingen van kracht zijn.

Verificatieproviders uitschakelen

We werken de routeringsconfiguratie van onze app bij om Microsoft Entra-verificatieprovider uit te schakelen.

Open het project in Visual Studio Code.

Open het volgende bestand.

angular-app/staticwebapp.config.json

react-app/staticwebapp.config.json

svelte-app/staticwebapp.config.json

vue-app/staticwebapp.config.json

Voeg in de hoofdmap van het JSON-object de volgende routeringsconfiguratie toe.
```
"routes": [
  {
    "route": "/.auth/login/aad",
    "statusCode": 404
  }
]
```
Door deze routeringsregel toe te voegen, kunnen onze gebruikers geen toegang krijgen tot de Microsoft Entra-verificatieprovider.

De toegang tot de productlijst beveiligen

Vervolgens willen we de productlijst beveiligen, zodat alleen geverifieerde toegang hebben tot de API. Hiervoor voegen we een andere routeringsregel toe in het staticwebapp.config.json configuratiebestand.

Voeg de volgende regel toe boven aan de routes matrix.

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

Het voltooide staticwebapp.config.json bestand moet er als volgt uitzien:

{
  "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}"]
  }
}

Uw wijzigingen implementeren

Voordat we het resultaat van deze configuratie testen, implementeren we onze app opnieuw.

Open in Visual Studio Code het opdrachtpalet door op F1 te drukken.
Voer Git in en selecteer Alles doorvoeren.
Voer het Secure access doorvoerbericht in en druk op Enter.
Druk op F1 om het opdrachtenpalet te openen.
Enter en selecteer Git: Push en druk op Enter.

Nadat u de wijzigingen hebt gepusht, wacht u tot het build- en implementatieproces is uitgevoerd. De wijzigingen moeten daarna zichtbaar zijn in uw geïmplementeerde app.

De nieuwe beperkingen testen

Nadat uw app opnieuw is geïmplementeerd, kunt u testen of de nieuwe beperkingen van kracht zijn.

Ga in het Visual Studio Code Explorer-venster terug naar de sectie Static Web Apps, klik met de rechtermuisknop op my-static-web-app-and-authn en selecteer Vervolgens Bladeren site om de app in uw browser weer te geven.
Als u niet bent aangemeld, ziet u het bericht Niet geautoriseerd in plaats van de lijst met producten.
Selecteer Microsoft Entra-id in de lijst met verificatieproviders om u aan te melden.

Als het goed is, ziet u een 404-foutpagina als volgt:
Druk op de knop Terug van uw browser om terug te gaan naar uw app.
Selecteer GitHub in de lijst met verificatieproviders om u aan te melden.
Voer uw GitHub-referenties in als u hierom wordt gevraagd en selecteer vervolgens Toestemming verlenen op de Azure-toestemmingspagina.

U bent nu aangemeld en ziet nu de lijst met producten.

Volgende stappen