Proteggere le app AngularJS a singola pagina con Azure ADHelp secure AngularJS single-page apps by using Azure AD

Nota

Questo articolo fa parte della Guida per gli sviluppatori di Azure Active Directory.This article is part of the Azure Active Directory developer's guide.

Azure Active Directory (Azure AD) rende semplice e pratico aggiungere accesso, disconnessione e protezione delle chiamate API OAuth alle app a singola pagina.Azure Active Directory (Azure AD) makes it simple and straightforward for you to add sign-in, sign-out, and secure OAuth API calls to your single-page apps. Consente alle app di autenticare gli utenti con gli account Windows Server Active Directory e di utilizzare qualsiasi API Web protetta da Azure AD, ad esempio le API di Office 365 o l'API di Azure.It enables your apps to authenticate users with their Windows Server Active Directory accounts and consume any web API that Azure AD helps protect, such as the Office 365 APIs or the Azure API.

Per le applicazioni JavaScript in esecuzione in un browser, Azure AD fornisce Active Directory Authentication Library (ADAL) o adal.js.For JavaScript applications running in a browser, Azure AD provides the Active Directory Authentication Library (ADAL), or adal.js. La funzione esclusiva di adal.js è permettere all'app di ottenere facilmente i token di accesso.The sole purpose of adal.js is to make it easy for your app to get access tokens. Per far capire quanto è semplice, verrà compilata un'applicazione AngularJS To-Do List che:To demonstrate just how easy it is, here we'll build an AngularJS To Do List application that:

  • Fa accedere gli utenti all'app usando Azure AD come provider di identità.Signs the user in to the app by using Azure AD as the identity provider.

  • Visualizza alcune informazioni relative all'utente.Displays some information about the user.

  • Chiama in modo sicuro l'API To Do List dell'app usando token di connessione di Azure AD.Securely calls the app's To Do List API by using bearer tokens from Azure AD.
  • Disconnette l'utente dall'app.Signs the user out of the app.

Per compilare l'applicazione funzionante completa, è necessario:To build the complete, working application, you need to:

  1. Registrare l'app con Azure AD.Register your app with Azure AD.
  2. Installare ADAL e configurare l'app a singola pagina.Install ADAL and configure the single-page app.
  3. Usare ADAL per proteggere le pagine nell'app a singola pagina.Use ADAL to help secure pages in the single-page app.

Per iniziare, scaricare la struttura dell'app o scaricare l'esempio completato.To get started, download the app skeleton or download the completed sample. È necessario anche un tenant di Azure AD in cui poter creare gli utenti e registrare un'applicazione.You also need an Azure AD tenant in which you can create users and register an application. Se non si ha già un tenant, vedere le informazioni su come ottenerne uno.If you don't already have a tenant, learn how to get one.

Passaggio 1: Registrare l'applicazione DirectorySearcherStep 1: Register the DirectorySearcher application

Per consentire all'app di autenticare gli utenti e ottenere i token, è innanzitutto necessario registrarla nel tenant di Azure AD:To enable your app to authenticate users and get tokens, you first need to register it in your Azure AD tenant:

  1. Accedere al portale di Azure.Sign in to the Azure portal.
  2. Se è stato eseguito l'accesso a più directory, potrebbe essere necessario assicurarsi di visualizzare la directory corretta.If you are signed in to multiple directories, you may need to ensure you are viewing the correct directory. A tale scopo, nella barra superiore fare clic sull'account.To do so, on the top bar, click your account. Nell'elenco Directory scegliere il tenant di Azure AD in cui si vuole registrare l'applicazione.Under the Directory list, choose the Azure AD tenant where you want to register your application.
  3. Fare clic su More Services (Altri servizi) nel riquadro a sinistra e scegliere Azure Active Directory.Click More Services in the left pane, and then select Azure Active Directory.
  4. Fare clic su Registrazioni per l'app e scegliere Aggiungi.Click App registrations, and then select Add.
  5. Seguire le istruzioni e creare una nuova applicazione Web e/o API Web:Follow the prompts and create a new web application and/or web API:
    • Il nome descrive l'applicazione agli utenti.Name describes your application to users.
    • L'URI di reindirizzamento è il percorso in cui Azure AD restituirà i token.Redirect Uri is the location to which Azure AD will return tokens. Il percorso predefinito per questo esempio è https://localhost:44326/.The default location for this sample is https://localhost:44326/.
  6. Dopo aver completato la registrazione, Azure AD assegna all'app un ID applicazione univoco.After you finish registration, Azure AD assigns a unique application ID to your app. Poiché questo valore sarà necessario nelle sezioni successive, copiarlo dalla scheda dell'applicazione.You'll need this value in the next sections, so copy it from the application tab.
  7. Adal.js usa il flusso implicito di OAuth per comunicare con Azure AD.Adal.js uses the OAuth implicit flow to communicate with Azure AD. È necessario abilitare il flusso implicito per l'applicazione eseguendo le operazioni seguenti:You must enable the implicit flow for your application:
    1. Fare clic sull'applicazione e scegliere Manifesto per aprire l'editor manifesto incorporato.Click the application and select Manifest to open the inline manifest editor.
    2. Individuare la proprietà oauth2AllowImplicitFlow.Locate the oauth2AllowImplicitFlow property. Impostare il relativo valore su true.Set its value to true.
    3. Fare clic su Salva per salvare il manifesto.Click Save to save the manifest.
  8. Concedere le autorizzazioni nel tenant per l'applicazione.Grant permissions across your tenant for your application. Andare in Impostazioni > Proprietà > Autorizzazioni necessarie e fare clic sul pulsante Concedi autorizzazioni nella barra superiore.Go to Settings > Properties > Required Permissions, and click the Grant Permissions button on the top bar. Fare clic su Yes per confermare.Click Yes to confirm.

Passaggio 2: Installare ADAL e configurare l'app a singola paginaStep 2: Install ADAL and configure the single-page app

Ora che si dispone di un'applicazione in Azure AD, è possibile installare adal.js e scrivere il codice relativo all'identità.Now that you have an application in Azure AD, you can install adal.js and write your identity-related code.

Configurare il client JavaScriptConfigure the JavaScript client

Iniziare aggiungendo adal.js al progetto TodoSPA tramite la console di Gestione pacchetti:Begin by adding adal.js to the TodoSPA project by using the Package Manager Console:

  1. Scaricare adal.js e aggiungerlo alla App/Scripts/directory del progetto.Download adal.js and add it to the App/Scripts/ project directory.
  2. Scaricare adal-angular.js e aggiungerlo alla App/Scripts/ directory del progetto.Download adal-angular.js and add it to the App/Scripts/ project directory.
  3. Caricare ogni script prima della fine di </body> in index.html:Load each script before the end of the </body> in index.html:

    ...
    <script src="App/Scripts/adal.js"></script>
    <script src="App/Scripts/adal-angular.js"></script>
    ...
    

Configurare il server back-endConfigure the back end server

Per fare in modo che l'API To Do List del back-end dell'app a singola pagina accetti i token dal browser, il back-end ha bisogno delle informazioni di configurazione relative alla registrazione dell'app.For the single-page app's back-end To Do List API to accept tokens from the browser, the back end needs configuration information about the app registration. Nel progetto TodoSPA aprire il file web.config.In the TodoSPA project, open web.config. Sostituire i valori degli elementi nella sezione <appSettings> in modo che corrispondano ai valori usati nel Portale di Azure.Replace the values of the elements in the <appSettings> section to reflect the values that you used in the Azure portal. Il codice farà riferimento a questi valori ogni volta che userà ADAL.Your code will reference these values whenever it uses ADAL.

  • ida:Tenant è il dominio del tenant di Azure AD, ad esempio contoso.onmicrosoft.com.ida:Tenant is the domain of your Azure AD tenant--for example, contoso.onmicrosoft.com.
  • ida:Audience è l'ID client dell'applicazione copiato dal portale.ida:Audience is the client ID of your application that you copied from the portal.

Passaggio 3: Usare ADAL per proteggere le pagine nell'app a singola paginaStep 3: Use ADAL to help secure pages in the single-page app

Adal.js si integra con i provider di route e HTTP AngularJS e permette di proteggere visualizzazioni individuali nell'app a singola pagina.Adal.js integrates with AngularJS route and HTTP providers, so you can help secure individual views in your single-page app.

  1. Importare il modulo adal.js in App/Scripts/app.js:In App/Scripts/app.js, bring in the adal.js module:

    angular.module('todoApp', ['ngRoute','AdalAngular'])
    .config(['$routeProvider','$httpProvider', 'adalAuthenticationServiceProvider',
     function ($routeProvider, $httpProvider, adalProvider) {
    ...
    
  2. Inizializzare adalProvider con i valori di configurazione relativi alla registrazione dell'applicazione anche in App/Scripts/app.js:Initialize adalProvider by using the configuration values of your application registration, also in App/Scripts/app.js:

    adalProvider.init(
      {
          instance: 'https://login.microsoftonline.com/',
          tenant: 'Enter your tenant name here e.g. contoso.onmicrosoft.com',
          clientId: 'Enter your client ID here e.g. e9a5a8b6-8af7-4719-9821-0deef255f68e',
          extraQueryParameter: 'nux=1',
          //cacheLocation: 'localStorage', // enable this for IE, as sessionStorage does not work for localhost.
      },
      $httpProvider
    );
    
  3. Per proteggere la visualizzazione TodoList nell'app, usare una sola riga di codice: requireADLogin.Help secure the TodoList view in the app by using only one line of code: requireADLogin.

    ...
    }).when("/TodoList", {
            controller: "todoListCtrl",
            templateUrl: "/App/Views/TodoList.html",
            requireADLogin: true,
    ...
    

RiepilogoSummary

A questo punto è disponibile un'app a singola pagina sicura, in grado di concedere l'accesso agli utenti e rilasciare richieste protette di token di connessione all'API back-end.You now have a secure single-page app that can sign in users and issue bearer-token-protected requests to its back-end API. Quando un utente fa clic sul collegamento TodoList, se necessario viene reindirizzato automaticamente da adal.js ad Azure AD per l'accesso.When a user clicks the TodoList link, adal.js will automatically redirect to Azure AD for sign-in if necessary. Inoltre, adal.js collegherà automaticamente un token di accesso a tutte le richieste Ajax inviate al back-end dell'app.In addition, adal.js will automatically attach an access token to any Ajax requests that are sent to the app's back end.

I passaggi illustrati sopra sono i requisiti minimi necessari per compilare un'app a singola pagina con adal.js.The preceding steps are the bare minimum necessary to build a single-page app by using adal.js. Tuttavia sono disponibili altre funzionalità utili nelle app a singola pagina:But a few other features are useful in single-page app:

  • Per generare in modo esplicito richieste di accesso e disconnessione, è possibile definire funzioni nei controller per richiamare adal.js.To explicitly issue sign-in and sign-out requests, you can define functions in your controllers that invoke adal.js. In App/Scripts/homeCtrl.js:In App/Scripts/homeCtrl.js:

    ...
    $scope.login = function () {
        adalService.login();
    };
    $scope.logout = function () {
        adalService.logOut();
    };
    ...
    
  • È anche possibile presentare informazioni sull'utente nell'interfaccia utente dell'app.You might want to present user information in the app's UI. Il servizio ADAL è già stato aggiunto al controller userDataCtrl, quindi è possibile accedere all'oggetto userInfo nella visualizzazione associata, App/Views/UserData.html:The ADAL service has already been added to the userDataCtrl controller, so you can access the userInfo object in the associated view, App/Views/UserData.html:

    <p>{{userInfo.userName}}</p>
    <p>aud:{{userInfo.profile.aud}}</p>
    <p>iss:{{userInfo.profile.iss}}</p>
    ...
    
  • Esistono anche molti scenari in cui è necessario sapere se l'utente è connesso oppure no.There are many scenarios in which you'll want to know if the user is signed in or not. Per raccogliere queste informazioni, è anche possibile usare l'oggetto userInfo .You can also use the userInfo object to gather this information. Ad esempio, in index.html è possibile visualizzare il pulsante Accesso o Disconnessione a seconda dello stato di autenticazione:For instance, in index.html, you can show either the Login or Logout button based on authentication status:

    <li><a class="btn btn-link" ng-show="userInfo.isAuthenticated" ng-click="logout()">Logout</a></li>
    <li><a class="btn btn-link" ng-hide=" userInfo.isAuthenticated" ng-click="login()">Login</a></li>
    

A questo punto l'app a singola pagina integrata in Azure AD può autenticare gli utenti, chiamare in modo sicuro il relativo back-end tramite OAuth 2.0 e ottenere informazioni di base sull'utente.Your Azure AD-integrated single-page app can authenticate users, securely call its back end by using OAuth 2.0, and get basic information about the user. Se non si è ancora popolato il tenant con alcuni utenti, ora è possibile farlo.If you haven't already, now is the time to populate your tenant with some users. Eseguire l'app a singola pagina To Do List e accedere come uno di questi utenti.Run your To Do List single-page app, and sign in with one of those users. Aggiungere attività all'elenco azioni dell'utente, disconnettersi e accedere di nuovo.Add tasks to the user's to-do list, sign out, and sign back in.

Adal.js consente di incorporare facilmente nell'applicazione funzionalità comuni relative alle identità.Adal.js makes it easy to incorporate common identity features into your application. Esegue automaticamente le attività più complesse: gestione della cache, supporto del protocollo OAuth, presentazione all'utente di un'interfaccia utente di accesso, aggiornamento dei token scaduti e altro.It takes care of all the dirty work for you: cache management, OAuth protocol support, presenting the user with a sign-in UI, refreshing expired tokens, and more.

Come riferimento, l'esempio completo (senza i valori di configurazione) è disponibile in GitHub.For reference, the completed sample (without your configuration values) is available in GitHub.

Passaggi successiviNext steps

Ora è possibile passare ad altri scenari.You can now move on to additional scenarios. Ad esempio è possibile provare a chiamare un'API Web CORS da un'app a singola pagina.You might want to try: Call a CORS web API from a single-page app.

Risorse aggiuntiveAdditional resources

Ottenere aggiornamenti della sicurezza per i prodottiGet security updates for our products

È consigliabile ricevere notifiche in caso di problemi di sicurezza. A tale scopo, visitare la pagina del TechCenter per le notifiche sulla sicurezza tecnica per Microsoft e sottoscrivere gli avvisi di sicurezza.We encourage you to get notifications of when security incidents occur by visiting the TechCenter page for Microsoft technical security notifications and subscribing to security advisory alerts.