Aggiungere l'autenticazione al sito statico in App Web statiche di Azure

Articolo
07/12/2024

Questo articolo è la seconda parte di una serie che illustra come distribuire il primo sito in App Web statiche di Azure. In precedenza, è stato creato e distribuito un sito statico con il framework Web preferito.

In questo articolo si aggiunge l'autenticazione al sito ed è possibile eseguire il sito in locale prima di eseguire la distribuzione nel cloud.

Prerequisiti

Questa esercitazione continua dall'esercitazione precedente e presenta gli stessi prerequisiti.

Autenticazione e autorizzazione

App Web statiche di Azure semplifica l'uso di provider di autenticazione comuni come Microsoft Entra e Google senza scrivere codice correlato alla sicurezza.

Nota

Facoltativamente , è possibile registrare un provider personalizzato e assegnare ruoli personalizzati per un controllo più granulare quando si usano le API back-end.

In questo articolo si configura il sito per l'uso dell'ID Entra di Microsoft per l'autenticazione.

Aggiungere l'autenticazione

Nell'ultimo articolo è stato creato un file staticwebapp.config.json. Questo file controlla molte funzionalità per App Web statiche di Azure, tra cui l'autenticazione.

Aggiornare in staticwebapp.config.json modo che corrisponda alla configurazione seguente.
```
{
  "navigationFallback": {
    "rewrite": "/index.html"
  },
  "routes": [
    {
      "route": "/*",
      "allowedRoles": [ "authenticated" ]
    }
  ],
  "responseOverrides": {
    "401": {
      "statusCode": 302,
      "redirect": "/.auth/login/aad"
    }
  }
}
```
La sezione routes consente di limitare l'accesso ai ruoli denominati. Esistono due ruoli predefiniti: authenticated e anonymous. Se l'utente connesso non ha un ruolo consentito, il server restituisce una risposta "401 Non autorizzata".

I valori nella sezione responseOverrides configurano il sito in modo che invece che un utente non autenticato visualizzi un errore del server, il browser viene reindirizzato alla pagina di accesso.
Eseguire il sito in locale.

Per avviare il sito in locale, eseguire il comando dell'interfaccia della riga di comando di App Web statiche start.
```
npx swa start
```
Questo comando avvia l'emulatore app Web statiche di Azure in http://localhost:4280.

Questo URL viene visualizzato nella finestra del terminale dopo l'avvio del servizio.
Selezionare l'URL per passare al sito.

Dopo aver aperto il sito nel browser, viene visualizzata la pagina di accesso all'autenticazione locale.

La pagina di accesso all'autenticazione locale offre un'emulazione dell'esperienza di autenticazione reale senza la necessità di servizi esterni. È possibile creare un ID utente e selezionare i ruoli da applicare all'utente da questa schermata.
Immettere un nome utente e quindi selezionare Accedi.

Dopo l'autenticazione, viene visualizzato il sito.

Distribuire il sito in Azure

Distribuire il sito nello stesso modo dell'ultima esercitazione.

Creare il sito:
```
npx swa build
```
Distribuire il sito nell'app Web statica:
```
npx swa deploy --app-name swa-demo-site
```
L'URL del sito viene visualizzato al termine della distribuzione. Selezionare l'URL del sito per aprire il sito nel browser. Viene visualizzata la pagina di accesso standard di Microsoft Entra ID:

Accedere con il proprio account Microsoft.

Pulire le risorse (facoltativo)

Se non si continua con altre esercitazioni, rimuovere il gruppo di risorse e le risorse di Azure:

az group delete -n swa-tutorial

Quando si rimuove un gruppo di risorse, si eliminano tutte le risorse che contiene. Questa azione non può essere annullata.