Indietro

Prossima

Esercizio: Configurare i provider di autenticazione e l'accesso

Completato

L'app Web per la lista della spesa deve proteggere l'accesso ad alcune route e disabilitare provider di autenticazione specifici. In questo esercizio, per ottenere tale risultato si aggiornerà la configurazione del routing dell'app Web.

In questo esercizio verranno completati i passaggi seguenti:

1. Aggiungere regole alla configurazione del routing per disabilitare alcuni provider di autenticazione.
2. Proteggere l'elenco di prodotti in modo che solo gli utenti autenticati possano accedervi.
3. Distribuire l'app aggiornata.
4. Verificare che le restrizioni siano effettive.

Disabilitare i provider di autenticazione

Si aggiornerà la configurazione del routing dell'app per disabilitare i provider di autenticazione Microsoft Entra.

1. Aprire il progetto in Visual Studio Code.

2. Aprire il file seguente.

   angular-app/staticwebapp.config.json
   

   react-app/staticwebapp.config.json
   

   svelte-app/staticwebapp.config.json
   

   vue-app/staticwebapp.config.json
   

3. Nella radice dell'oggetto JSON aggiungere la configurazione di routing seguente.

   "routes": [
     {
       "route": "/.auth/login/aad",
       "statusCode": 404
     }
   ]
   

   Aggiungendo questa regola di routing, si impedisce agli utenti di accedere al provider di autenticazione Microsoft Entra.

Proteggere l'accesso all'elenco di prodotti

Si vuole quindi proteggere l'elenco di prodotti in modo che solo gli utenti autenticati possano accedere all'API. A tale scopo, si aggiunge un'altra regola di routing nel file di configurazione staticwebapp.config.json.

1. Aggiungere la regola seguente all'inizio della matrice routes.

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

2. Il file staticwebapp.config.json completato dovrebbe essere analogo al seguente:

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

Distribuire le modifiche

Prima di testare il risultato di questa configurazione, ridistribuire l'app.

1. In Visual Studio Code aprire il riquadro comandi premendo F1.

2. Digitare e selezionare Git: Esegui commit di tutto.

3. Immettere Secure access come messaggio di commit e premere INVIO.

4. Aprire il riquadro comandi premendo F1.

5. Immettere e selezionare Git: Push e premere INVIO.

Dopo aver eseguito il push delle modifiche, attendere l'esecuzione del processo di compilazione e distribuzione. Al termine, le modifiche dovrebbero essere visibili nell'app distribuita.

Testare le nuove restrizioni

Dopo la ridistribuzione dell'app, è possibile verificare che le nuove restrizioni siano effettive.

1. Nella finestra Esplora risorse di Visual Studio Code tornare alla sezione App Web statiche, fare clic con il pulsante destro del mouse su my-static-web-app-and-authn e quindi scegliere Sfoglia sito per visualizzare l'app nel browser.

2. Se non si è connessi, verrà visualizzato il messaggio Non autorizzato anziché l'elenco dei prodotti.

3. Selezionare Microsoft Entra Id nell'elenco dei provider di autenticazione per accedere.

   Verrà visualizzata una pagina di errore 404 simile alla seguente:

   

4. Fare clic sul pulsante Indietro del browser per tornare all'app.

5. Selezionare GitHub nell'elenco dei provider di autenticazione per accedere.

6. Immettere le credenziali di GitHub, se richiesto, e quindi selezionare Concedi consenso nella pagina di consenso di Azure.

A questo punto è stato eseguito l'accesso e dovrebbe essere visualizzato l'elenco dei prodotti.

Passaggi successivi

Complimenti. Un flusso di lavoro di autenticazione completo è stato implementato nell'app Web statica.

Continua