Övning – Konfigurera autentiseringsprovidrar och åtkomst

4 minuter

Webbappen för inköpslistan måste skydda åtkomsten till vissa vägar och inaktivera specifika autentiseringsprovidrar. I den här övningen uppdaterar du routningskonfigurationen för webbappen för att uppnå det resultatet.

I den här övningen ska du:

Lägg till regler i routningskonfigurationen för att inaktivera vissa autentiseringsprovidrar.
Skydda produktlistan så att endast autentiserade användare kan komma åt den.
Distribuera den uppdaterade appen.
Testa att begränsningarna är effektiva.

Inaktivera autentiseringsprovidrar

Vi uppdaterar routningskonfigurationen för vår app för att inaktivera Microsoft Entra-autentiseringsprovidern.

Öppna projektet i Visual Studio Code.

Öppna följande fil.

angular-app/staticwebapp.config.json

react-app/staticwebapp.config.json

svelte-app/staticwebapp.config.json

vue-app/staticwebapp.config.json

Lägg till följande routningskonfiguration i roten för JSON-objektet.
```
"routes": [
  {
    "route": "/.auth/login/aad",
    "statusCode": 404
  }
]
```
Genom att lägga till den här routningsregeln hindrar vi våra användare från att komma åt Microsoft Entra-autentiseringsprovidern.

Skydda åtkomsten till produktlistan

Sedan vill vi skydda produktlistan så att endast autentiserade kan komma åt API:et. För det lägger vi till ytterligare en routningsregel i konfigurationsfilen staticwebapp.config.json .

Lägg till följande regel överst i matrisen routes .

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

Den färdiga staticwebapp.config.json filen bör se ut så här:

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

Distribuera dina ändringar

Innan vi testar resultatet av den här konfigurationen distribuerar vi om appen.

Öppna kommandopaletten i Visual Studio Code genom att trycka på F1.
Ange och välj Git: Checka in alla.
Ange Secure access som incheckningsmeddelande och tryck på Retur.
Öppna kommandopaletten genom att trycka på F1.
Ange och välj Git: Push och tryck på Retur.

När du har push-överfört ändringarna väntar du på att bygg- och distributionsprocessen ska köras. Ändringarna ska vara synliga i din distribuerade app efter det.

Testa de nya begränsningarna

När appen har distribuerats om kan du testa att de nya begränsningarna gäller.

I fönstret Visual Studio Code Explorer går du tillbaka till avsnittet Statiska webbappar , högerklickar på my-static-web-app-and-authn och väljer sedan Bläddra på webbplats för att visa appen i webbläsaren.
Om du inte är inloggad bör du se meddelandet Obehörig i stället för produktlistan.
Välj Microsoft Entra-ID i listan med autentiseringsprovider för att logga in.

Du bör se en 404-felsida som följande:
Tryck på bakåtknappen i webbläsaren för att gå tillbaka till din app.
Välj GitHub i listan över autentiseringsprovider för att logga in.
Ange dina GitHub-autentiseringsuppgifter om du uppmanas att göra det och välj sedan Bevilja medgivande på sidan med Azure-medgivande.

Du är nu inloggad och bör se produktlistan.

Nästa steg