Verificatie toevoegen aan uw statische site in Azure Static Web Apps

Artikel
07/04/2024

Dit artikel is deel twee in een reeks waarin wordt uitgelegd hoe u uw eerste site implementeert in Azure Static Web Apps. Eerder hebt u een statische site gemaakt en geïmplementeerd met het webframework van uw keuze.

In dit artikel voegt u verificatie toe aan uw site en voert u de site lokaal uit voordat u implementeert in de cloud.

Vereisten

Deze zelfstudie gaat verder met de vorige zelfstudie en heeft dezelfde vereisten.

Verificatie en autorisatie

Met Azure Static Web Apps kunt u eenvoudig veelgebruikte verificatieproviders zoals Microsoft Entra en Google gebruiken zonder dat u beveiligingsgerelateerde code hoeft te schrijven.

Notitie

U kunt desgewenst een aangepaste provider registreren en aangepaste rollen toewijzen voor nauwkeuriger beheer bij het gebruik van back-end-API's.

In dit artikel configureert u uw site voor het gebruik van Microsoft Entra-id voor verificatie.

Verificatie toevoegen

In het laatste artikel hebt u een staticwebapp.config.json bestand gemaakt. Dit bestand beheert veel functies voor Azure Static Web Apps, waaronder verificatie.

Werk de staticwebapp.config.json configuratie bij zodat deze overeenkomt met de volgende configuratie.
```
{
  "navigationFallback": {
    "rewrite": "/index.html"
  },
  "routes": [
    {
      "route": "/*",
      "allowedRoles": [ "authenticated" ]
    }
  ],
  "responseOverrides": {
    "401": {
      "statusCode": 302,
      "redirect": "/.auth/login/aad"
    }
  }
}
```
In routes de sectie kunt u de toegang tot benoemde rollen beperken. Er zijn twee vooraf gedefinieerde rollen: authenticated en anonymous. Als de verbonden gebruiker geen toegestane rol heeft, retourneert de server een antwoord '401 Niet geautoriseerd'.

De waarden in de responseOverrides sectie configureren uw site, zodat in plaats van een niet-geverifieerde gebruiker een serverfout ziet, de browser wordt omgeleid naar de aanmeldingspagina.
Voer de site lokaal uit.

Als u de site lokaal wilt starten, voert u de CLI-opdracht start Static Web Apps uit.
```
npx swa start
```
Met deze opdracht wordt de Azure Static Web Apps-emulator gestart op http://localhost:4280.

Deze URL wordt weergegeven in het terminalvenster nadat de service is gestart.
Selecteer de URL om naar de site te gaan.

Zodra u de site in uw browser opent, wordt de aanmeldingspagina voor lokale verificatie weergegeven.

De aanmeldingspagina voor lokale verificatie biedt een emulatie van de echte verificatie-ervaring zonder dat externe services nodig zijn. U kunt een gebruikers-id maken en selecteren welke rollen u wilt toepassen op de gebruiker in dit scherm.
Voer een gebruikersnaam in en selecteer Vervolgens Aanmelden.

Zodra u zich hebt geverifieerd, wordt uw site weergegeven.

De site implementeren in Azure

Implementeer uw site op dezelfde manier als in de laatste zelfstudie.

Uw site bouwen:
```
npx swa build
```
Uw site implementeren in de statische web-app:
```
npx swa deploy --app-name swa-demo-site
```
De URL voor uw site wordt weergegeven zodra de implementatie is voltooid. Selecteer de site-URL om de site in de browser te openen. De standaard aanmeldingspagina voor Microsoft Entra-id's wordt weergegeven:

Meld u aan met uw Microsoft-account.

Resources opschonen (optioneel)

Als u niet verdergaat met andere zelfstudies, verwijdert u de Azure-resourcegroep en -resources:

az group delete -n swa-tutorial

Wanneer u een resourcegroep verwijdert, verwijdert u alle resources die deze bevat. U kunt deze actie niet ongedaan maken.