Esercitazione: Autenticare e autorizzare gli utenti end-to-end nel servizio app di Azure

Nell'esercitazione si apprenderà come:

L'autenticazione in questa procedura viene fornita a livello di piattaforma di hosting da app Azure Servizio. È necessario distribuire l'app front-end e back-end e configurare l'autenticazione per l'uso corretto dell'app Web.

Ottenere il profilo utente

L'app front-end è configurata per usare in modo sicuro l'API back-end. L'applicazione front-end fornisce un accesso Microsoft per l'utente, quindi consente all'utente di ottenere il proprio profilo falso dal back-end. Questa esercitazione usa un profilo falso per semplificare i passaggi per completare lo scenario.

Prima dell'esecuzione del codice sorgente nel front-end, il servizio app inserisce l'oggetto autenticato accessToken dall'intestazione servizio appx-ms-token-aad-access-token. Il codice sorgente front-end accede quindi e invia accessToken al server back-end come per bearerToken accedere in modo sicuro all'API back-end. Il server back-end convalida il bearerToken prima che venga passato al codice sorgente back-end. Quando il codice sorgente back-end riceve il bearerToken, può essere usato.

Nell'articolo successivo di questa serie, bearerToken viene scambiato per un token con un ambito per accedere all'API Microsoft Graph. L'API Microsoft Graph restituisce le informazioni sul profilo dell'utente.

Prerequisiti

Se non si ha una sottoscrizione di Azure, creare un account Azure gratuito prima di iniziare.

• Node.js (LTS)

• Usare l'ambiente Bash in Azure Cloud Shell. Per altre informazioni, vedere Avvio rapido su Bash in Azure Cloud Shell.

  

• Se si preferisce eseguire i comandi di riferimento dell'interfaccia della riga di comando in locale, installare l'interfaccia della riga di comando di Azure. Per l'esecuzione in Windows o macOS, è consigliabile eseguire l'interfaccia della riga di comando di Azure in un contenitore Docker. Per altre informazioni, vedere Come eseguire l'interfaccia della riga di comando di Azure in un contenitore Docker.

  • Se si usa un'installazione locale, accedere all'interfaccia della riga di comando di Azure con il comando az login. Per completare il processo di autenticazione, seguire la procedura visualizzata nel terminale. Per altre opzioni di accesso, vedere Accedere tramite l'interfaccia della riga di comando di Azure.

  • Quando richiesto, al primo utilizzo installare l'estensione dell'interfaccia della riga di comando di Azure. Per altre informazioni sulle estensioni, vedere Usare le estensioni con l'interfaccia della riga di comando di Azure.

  • Eseguire az version per trovare la versione e le librerie dipendenti installate. Per eseguire l'aggiornamento alla versione più recente, eseguire az upgrade.

1. Clonare l'applicazione di esempio

1. In Azure Cloud Shell eseguire il comando seguente per clonare il repository di esempio.

   git clone https://github.com/Azure-Samples/js-e2e-web-app-easy-auth-app-to-app
   

2. Creare e distribuire app

Creare il gruppo di risorse, il piano dell'app Web, l'app Web e distribuirsi in un unico passaggio.

3. Configurare l'impostazione dell'app

L'applicazione front-end deve conoscere l'URL dell'applicazione back-end per le richieste API. Usare il comando seguente dell'interfaccia della riga di comando di Azure per configurare l'impostazione dell'app. L'URL deve essere nel formato .https://<back-end-app-name>.azurewebsites.net

az webapp config appsettings set --resource-group myAuthResourceGroup --name <front-end-app-name> --settings BACKEND_URL="https://<back-end-app-name>.azurewebsites.net"

4. Front-end chiama il back-end

Passare all'app front-end e restituire il profilo falso dal back-end. Questa azione verifica che il front-end richieda correttamente il profilo dal back-end e che il back-end restituisca il profilo.

1. Aprire l'app Web front-end in un browser, https://<front-end-app-name>.azurewebsites.net.

   

2. Selezionare il collegamento Get user's profile.

3. Visualizzare il profilo falso restituito dall'app Web back-end.

   

   Il withAuthentication valore false indica che l'autenticazione non è ancora configurata.

5. Configurare l'autenticazione

In questo passaggio si abilita l'autenticazione e l'autorizzazione per le due app Web. Questa esercitazione usa Microsoft Entra ID come provider di identità.

È anche possibile configurare l'app front-end per:

• Concedere all'app front-end l'accesso all'app back-end
• Configurare il servizio app per la restituzione di un token utilizzabile
• Usare il token nel codice.

Per altre informazioni, vedere Configurare l'autenticazione di Microsoft Entra per un'applicazione dei servizi app.

Abilitare l'autenticazione e l'autorizzazione per l'app back-end

1. Nel menu del portale di Azure selezionare Gruppi di risorse oppure cercare e selezionare Gruppi di risorse da qualsiasi pagina.

2. In Gruppi di risorse cercare e selezionare il gruppo di risorse desiderato. In Panoramica selezionare l'app back-end.

3. Nel menu a sinistra dell'app back-end selezionare Autenticazione e quindi Aggiungi provider di identità.

4. Nella pagina Aggiungi un provider di identità selezionare Microsoft come Provider di identità per l'acceso di identità Microsoft e Microsoft Entra.

5. Accettare le impostazioni predefinite e fare clic su OK.

   

6. Verrà visualizzata la pagina Autenticazione . Copiare l'ID client dell'applicazione Microsoft Entra in un Blocco note. Questo valore sarà necessario in un secondo momento.

   

Se ci si ferma qui, si avrà un'app autonoma che è già protetta dall'autenticazione e dall'autorizzazione del servizio app. Le sezioni rimanenti illustrano come proteggere una soluzione multi-app "fluendo" l'utente autenticato dal front-end al back-end.

Abilitare l'autenticazione e l'autorizzazione per l'app front-end

1. Nel menu del portale di Azure selezionare Gruppi di risorse oppure cercare e selezionare Gruppi di risorse da qualsiasi pagina.

2. In Gruppi di risorse cercare e selezionare il gruppo di risorse desiderato. In Panoramica selezionare la pagina di gestione dell'app front-end.

3. Nel menu a sinistra dell'app front-end selezionare Autenticazione e quindi Aggiungi provider di identità.

4. Nella pagina Aggiungi un provider di identità selezionare Microsoft come Provider di identità per l'acceso di identità Microsoft e Microsoft Entra.

5. Accettare le impostazioni predefinite e fare clic su OK.

6. Verrà visualizzata la pagina Autenticazione . Copiare l'ID client dell'applicazione Microsoft Entra in un Blocco note. Questo valore sarà necessario in un secondo momento.

Concedere all'app front-end l'accesso al back-end

Dopo l'abilitazione dell'autenticazione e dell'autorizzazione per entrambe le app, ognuna di queste è supportata da un'applicazione AD. Per completare l'autenticazione, è necessario eseguire tre operazioni:

• Concedere all'app front-end l'accesso all'app back-end
• Configurare il servizio app per la restituzione di un token utilizzabile
• Usare il token nel codice.

In questo passaggio si concede all'app front-end l'accesso all'app back-end per conto dell'utente. (Tecnicamente, si dà il front-end Applicazione AD le autorizzazioni per accedere all'applicazione AD del back-end per conto dell'utente.

1. Nella pagina Autenticazione per l'app front-end selezionare il nome dell'app front-end in Provider di identità. La registrazione dell'app è stata generata automaticamente. Selezionare Autorizzazioni API nel menu a sinistra.

2. Selezionare Aggiungi un'autorizzazione, quindi selezionare My APIs><back-end-app-name> (Nome app-back-end).

3. Nella pagina Richiedi autorizzazioni API per l'app back-end selezionare Autorizzazioni delegate e user_impersonation e quindi selezionare Aggiungi autorizzazioni.

   

Configurare il servizio app per la restituzione di un token di accesso utilizzabile

L'app front-end dispone ora delle autorizzazioni necessarie per accedere all'app back-end come utente connesso. In questo passaggio viene configurata servizio app l'autenticazione e l'autorizzazione per fornire un token di accesso utilizzabile per l'accesso al back-end. Per questo passaggio, è necessario l'ID client del back-end copiato da Abilita autenticazione e autorizzazione per l'app back-end.

In Cloud Shell eseguire i comandi seguenti nell'app front-end per aggiungere il scope parametro all'impostazione identityProviders.azureActiveDirectory.login.loginParametersdi autenticazione . Sostituire front-end-app-name> e <back-end-client-id>.<

az extension add --name authV2
authSettings=$(az webapp auth show -g myAuthResourceGroup -n <front-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.login += {"loginParameters":["scope=openid offline_access api://<back-end-client-id>/user_impersonation"]}')
az webapp auth set --resource-group myAuthResourceGroup --name <front-end-app-name> --body "$authSettings"

I comandi aggiungono effettivamente una loginParameters proprietà con ambiti personalizzati aggiuntivi. Ecco una spiegazione degli ambiti richiesti:

• openidè richiesto da servizio app per impostazione predefinita. Per informazioni, vedere Ambiti di OpenID Connect.
• offline_access è incluso qui per praticità, nel caso in cui si vogliano aggiornare i token.
• api://<back-end-client-id>/user_impersonation è un'API esposta nella registrazione dell'app back-end. È l'ambito che fornisce un token JWT che include l'app back-end come gruppo di destinatari del token.

Le app sono ora configurate. Il front-end è ora pronto per accedere al back-end con un token di accesso appropriato.

Per informazioni su come configurare il token di accesso per altri provider, vedere Aggiornare i token del provider di identità.

6. Configurare servizio app back-end per accettare un token solo dal front-end servizio app

È anche necessario configurare il back-end servizio app in modo da accettare solo un token dal front-end servizio app. Se non si esegue questa operazione, potrebbe verificarsi un errore "403: Accesso negato" quando si passa il token dal front-end al back-end.

È possibile impostare questa impostazione tramite lo stesso processo dell'interfaccia della riga di comando di Azure usato nel passaggio precedente.

1. Ottenere l'oggetto appId del servizio app front-end (è possibile ottenere questo valore nel pannello "Autenticazione" del front-end servizio app).

2. Eseguire l'interfaccia della riga di comando di Azure seguente, sostituendo e <back-end-app-name> <front-end-app-id>.

authSettings=$(az webapp auth show -g myAuthResourceGroup -n <back-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.validation.defaultAuthorizationPolicy.allowedApplications += ["<front-end-app-id>"]')
az webapp auth set --resource-group myAuthResourceGroup --name <back-end-app-name> --body "$authSettings"

authSettings=$(az webapp auth show -g myAuthResourceGroup  -n <back-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.validation.jwtClaimChecks += { "allowedClientApplications": ["<front-end-app-id>"]}')
az webapp auth set --resource-group myAuthResourceGroup --name <back-end-app-name> --body "$authSettings"

7. Front-end chiama il back-end autenticato

L'app front-end deve passare l'autenticazione dell'utente con l'ambito corretto user_impersonation al back-end. La procedura seguente esamina il codice fornito nell'esempio per questa funzionalità.

Visualizzare il codice sorgente dell'app front-end:

1. Usare l'intestazione front-end servizio app inserita x-ms-token-aad-access-token per ottenere l'accessToken dell'utente a livello di codice.

   // ./src/server.js
   const accessToken = req.headers['x-ms-token-aad-access-token'];
   

2. Usare accessToken nell'intestazione Authentication come bearerToken valore.

   // ./src/remoteProfile.js
   // Get profile from backend
   const response = await fetch(remoteUrl, {
       cache: "no-store", // no caching -- for demo purposes only
       method: 'GET',
       headers: {
           'Authorization': `Bearer ${accessToken}`
       }
   });
   if (response.ok) {
       const { profile } = await response.json();
       console.log(`profile: ${profile}`);
   } else {
       // error handling
   }
   

   Questa esercitazione restituisce un profilo falso per semplificare lo scenario. L'esercitazione successiva di questa serie illustra come scambiare il bearerToken back-end per un nuovo token con l'ambito di un servizio di Azure downstream, ad esempio Microsoft Graph.

7. Back-end restituisce il profilo al front-end

Se la richiesta dal front-end non è autorizzata, il servizio app back-end rifiuta la richiesta con un codice di errore HTTP 401 prima che la richiesta raggiunga il codice dell'applicazione. Quando viene raggiunto il codice back-end (perché include un token autorizzato), estrarre bearerToken per ottenere accessToken.

Visualizzare il codice sorgente dell'app back-end:

// ./src/server.js
const bearerToken = req.headers['Authorization'] || req.headers['authorization'];

if (bearerToken) {
    const accessToken = bearerToken.split(' ')[1];
    console.log(`backend server.js accessToken: ${!!accessToken ? 'found' : 'not found'}`);

    // TODO: get profile from Graph API
    // provided in next article in this series
    // return await getProfileFromMicrosoftGraph(accessToken)

    // return fake profile for this tutorial
    return {
        "displayName": "John Doe",
        "withAuthentication": !!accessToken ? true : false
    }
}

8. Passare alle app

1. Usare il sito Web front-end in un browser. L'URL è nel formato .https://<front-end-app-name>.azurewebsites.net/

2. Il browser richiede l'autenticazione all'app Web. Completare l'autenticazione.

   

3. Al termine dell'autenticazione, l'applicazione front-end restituisce la home page dell'app.

   

4. Selezionare Get user's profile. Questa operazione passa l'autenticazione nel token di connessione al back-end.

5. L'endpoint back-end risponde con il nome falso del profilo hardcoded: John Doe.

   

   Il withAuthentication valore true indica che l'autenticazione è ancora configurata.

9. Pulire le risorse

Nei passaggi precedenti sono state create risorse di Azure in un gruppo di risorse.

1. Eliminare il gruppo di risorse eseguendo il comando seguente in Cloud Shell. L'esecuzione del comando può richiedere un minuto.

   az group delete --name myAuthResourceGroup
   

2. Usare l'ID client delle app di autenticazione, trovato in precedenza e annotato nelle Enable authentication and authorization sezioni per le app back-end e front-end.

3. Eliminare le registrazioni delle app sia per le app front-end che per le app back-end.

   # delete app - do this for both frontend and backend client ids
   az ad app delete <client-id>
   

Domande frequenti

Ricerca per categorie testare questa autenticazione nel computer di sviluppo locale?

L'autenticazione in questa procedura viene fornita a livello di piattaforma di hosting da app Azure Servizio. Non esiste un emulatore equivalente. Per usare l'autenticazione, è necessario distribuire l'app front-end e back-end e l'autenticazione di configurazione per ognuno.

L'app non visualizza un profilo falso , come è possibile eseguirne il debug?

Le app front-end e back-end hanno /debug entrambe route che consentono di eseguire il debug dell'autenticazione quando questa applicazione non restituisce il profilo falso . La route di debug front-end fornisce le parti critiche da convalidare:

• Variabili di ambiente:
  • l'oggetto BACKEND_URL è configurato correttamente come https://<back-end-app-name>.azurewebsites.net. Non includere la barra finale o il percorso.
• Intestazioni HTTP:
  • Le x-ms-token-* intestazioni vengono inserite.
• Viene visualizzato il nome del profilo di Microsoft Graph per l'utente connesso.
• L'ambito dell'app front-end per il token ha user_impersonation. Se l'ambito non lo include, potrebbe trattarsi di un problema di temporizzazione. Verificare i parametri dell'app front-end nelle risorse di login Azure. Attendere alcuni minuti per la replica dell'autenticazione.

Il codice sorgente dell'applicazione è stato distribuito correttamente in ogni app Web?

1. Nel portale di Azure per l'app Web selezionare Strumenti di sviluppo -> Strumenti avanzati, quindi selezionare Vai ->. Verrà visualizzata una nuova scheda o finestra del browser.

2. Nella nuova scheda del browser selezionare Sfoglia directory -> Sito wwwroot.

3. Verificare che nella directory siano presenti gli elementi seguenti:

   • package.json
   • node_modules.tar.gz
   • /src/index.js

4. Verificare che la proprietà del name package.json sia uguale al nome Web, frontend o backend.

5. Se è stato modificato il codice sorgente ed è necessario ridistribuire, usare az webapp up dalla directory con il file package.json per tale app.

L'applicazione è stata avviata correttamente

Entrambe le app Web devono restituire un elemento quando viene richiesta la home page. Se non è possibile raggiungere /debug un'app Web, l'app non è stata avviata correttamente. Esaminare i log degli errori per l'app Web.

1. Nel portale di Azure per l'app Web selezionare Strumenti di sviluppo -> Strumenti avanzati, quindi selezionare Vai ->. Verrà visualizzata una nuova scheda o finestra del browser.
2. Nella nuova scheda del browser selezionare Sfoglia directory -> Log di distribuzione.
3. Esaminare ogni log per individuare eventuali problemi segnalati.

L'app front-end è in grado di comunicare con l'app back-end?

Poiché l'app front-end chiama l'app back-end dal codice sorgente del server, questo non è un elemento che è possibile visualizzare nel traffico di rete del browser. Usare l'elenco seguente per determinare l'esito positivo della richiesta del profilo back-end:

• L'app Web back-end restituisce eventuali errori all'app front-end se è stata raggiunta. Se non è stato raggiunto, l'app front-end segnala il codice di stato e il messaggio.
  • 401: l'utente non ha superato correttamente l'autenticazione. Ciò può indicare che l'ambito non è impostato correttamente.
  • 404: l'URL del server non corrisponde a una route del server
• Usare i log di streaming dell'app back-end per guardare mentre si effettua la richiesta front-end per il profilo dell'utente. Nel codice sorgente sono presenti informazioni di debug che console.log consentono di determinare dove si è verificato l'errore.

Cosa accade quando scade il token front-end?

Il token di accesso scade dopo un certo periodo di tempo. Per informazioni su come aggiornare i token di accesso senza chiedere agli utenti di autenticarsi di nuovo nell'app, vedere Refresh identity provider tokens (Aggiornare i token del provider di identità).

Se si dispone di un'app basata su browser nell'app front-end, può comunicare direttamente con il back-end?

Questo approccio richiede che il codice del server passi il token di accesso al codice JavaScript in esecuzione nel browser client. Poiché non è possibile proteggere il token di accesso nel browser, non è un approccio consigliato. Attualmente, è consigliabile usare il modello Back-end per front-end. Se applicato all'esempio in questa esercitazione, il codice del browser nell'app front-end eseguirà chiamate API in una sessione autenticata al codice server come intermediario e il codice del server nell'app front-end eseguirà a sua volta le chiamate API all'app back-end usando il x-ms-token-aad-access-token valore di intestazione come token di connessione. Tutte le chiamate dal codice del browser al codice del server sarebbero già protette dalla sessione autenticata.

Passaggi successivi

Contenuto dell'esercitazione:

Passare all'esercitazione successiva per informazioni su come usare l'identità dell'utente per accedere a un servizio di Azure.