Creare un'app line-of-business in Azure con l'autenticazione di Azure Active Directory

Questo articolo illustra come creare un'app line-of-business .NET nelle app Web del servizio app di Azure usando la funzionalità Autenticazione/Autorizzazione. Spiega inoltre come usare l' API Graph di Azure Active Directory per eseguire query sui dati della directory nell'applicazione.

Il tenant di Azure Active Directory usato può essere una directory solo di Azure. In alternativa, può essere sincronizzato con l'istanza di Active Directory locale per creare un'unica esperienza Single Sign-On per gli utenti locali e remoti. In questo articolo si usa la directory predefinita per l'account Azure.

Obiettivo di compilazione

Verrà compilata una semplice applicazione CRUD (Create-Read-Update-Delete) line-of-business nelle app Web di Servizio app di Azure per tenere traccia degli elementi di lavoro con le seguenti funzionalità:

  • Autenticazione degli utenti con Azure Active Directory
  • Esecuzione di query su utenti e gruppi della directory tramite l' API Graph di Azure Active Directory
  • Usare il modello MVC ASP.NET Nessuna autenticazione

Se è necessario il Controllo degli accessi in base al ruolo per l'applicazione line-of-business in Azure, vedere il passaggio successivo.

Elementi necessari

Nota

Per completare l'esercitazione, è necessario un account Azure:

  • È possibile aprire un account Azure gratuitamente: si riceveranno dei crediti da usare per provare i servizi di Azure a pagamento e, anche dopo avere esaurito i crediti, è possibile mantenere l'account per usare i servizi di Azure gratuiti, ad esempio Siti Web. La carta di credito non verrà mai addebitata, a meno l'utente non modifichi le impostazioni e che richieda esplicitamente di essere addebitato.
  • È possibile attivare i benefici della sottoscrizione MSDN: con la sottoscrizione MSDN ogni mese si accumulano crediti che è possibile usare per i servizi di Azure a pagamento.

Per completare questa esercitazione sarà necessario quanto segue:

  • Un tenant di Azure Active Directory con utenti in diversi gruppi
  • Autorizzazioni per la creazione di applicazioni nel tenant di Azure Active Directory
  • Visual Studio 2013 Update 4 o versione successiva
  • Azure SDK 2.8.1 o versione successiva

Creare e distribuire un'app Web in Azure

  1. In Visual Studio fare clic su File > Nuovo > Progetto.
  2. Selezionare Applicazione Web ASP.NET, assegnare un nome al progetto e fare clic su OK.
  3. Selezionare il modello MVC, quindi modificare l'autenticazione in Nessuna autenticazione. Assicurarsi che Host nel cloud sia selezionata e fare clic su OK.

  4. Nella finestra di dialogo Crea servizio App fare clic su Aggiungi un account e quindi su Aggiungi un account nell'elenco a discesa per accedere al proprio account Azure.
  5. Dopo aver eseguito l'accesso, configurare l'app Web. Creare un gruppo di risorse e un nuovo piano di servizio app facendo clic sul pulsante Nuovo corrispondente. Fare clic su Esplorare servizi di Azure aggiuntivi per continuare.

  6. Nella scheda Servizi fare clic su + per aggiungere un database SQL per l'app.

  7. In Configura database SQL fare clic su Nuovo per creare un'istanza di SQL Server.
  8. In Configura SQL Serverconfigurare l'istanza di SQL Server. Fare clic su OK, OK e su Crea per avviare la creazione dell'app in Azure.
  9. In Attività del servizio app di Azureè possibile vedere quando termina la creazione dell'app. Fare clic su Pubblica <nomeapp> in questa app Web adesso, quindi fare clic su Pubblica.

    Al termine del processo di Visual Studio, nel browser verrà aperta l'app pubblicata.

Configurare l'autenticazione e l'accesso alla directory

  1. Accedere al Portale di Azure.
  2. Nel menu a sinistra fare clic su Servizi app > <nomeapp> > Autenticazione/Autorizzazione.

  3. Attivare l'autenticazione di Azure Active Directory facendo clic su Attivato > Azure Active Directory > Rapida > OK.

  4. Fare clic su Salva nella barra dei comandi.

    Dopo aver salvato le impostazioni di autenticazione, provare a passare di nuovo all'app nel browser. Le impostazioni predefinite applicano l'autenticazione all'intera app. Se non si è già connessi, si viene reindirizzati a una schermata di accesso. Dopo aver effettuato l'accesso, verrà visualizzata l'app protetta tramite HTTPS. Quindi, è necessario abilitare l'accesso ai dati della directory.

  5. Passare al portale classico.
  6. Nel menu a sinistra fare clic su Active Directory > Directory predefinita > Applicazioni > <nomeapp>.

    Questa è l'applicazione Azure Active Directory creata automaticamente dal servizio app per abilitare la Autorizzazione/Autenticazione.

  7. Fare clic su Utenti e Gruppi per assicurarsi di avere alcuni utenti e gruppi nella directory. In caso contrario, creare alcuni utenti e gruppi di test.

  8. Fare clic su Configura per configurare l'applicazione.
  9. Scorrere verso il basso fino alla sezione Chiavi e aggiungere una chiave selezionando una durata. Fare quindi clic su Autorizzazioni delegate e selezionare Leggi i dati della directory. Fare clic su Save.

  10. Dopo aver salvato le impostazioni, scorrere tornando alla sezione Chiavi e fare clic su Copia per copiare la chiave client.

    Importante

    Se si esce dalla pagina ora, non sarà mai più possibile accedere a questa chiave client.

  11. Configurare quindi l'app Web con questa chiave. Accedere a Esplora risorse di Azure con il proprio account Azure.
  12. Nella parte superiore della pagina fare clic su Lettura/Scrittura per apportare modifiche in Esplora risorse di Azure.

  13. Trovare le impostazioni di autenticazione per l'app disponibili in sottoscrizioni > <nomesottoscrizione> > gruppidirisorse > <nomegruppodirisorse> > provider > Microsoft.Web > siti > <nomeapp> > config > authsettings.
  14. Fare clic su Modifica.

  15. Nel riquadro di modifica impostare le proprietà clientSecret e additionalLoginParams come indicato di seguito.

    ...
    "clientSecret": "<client key from the Azure Active Directory application>",
    ...
    "additionalLoginParams": ["response_type=code id_token", "resource=https://graph.windows.net"],
    ...
    
  16. Fare clic su Put nella parte superiore per inviare le modifiche.

  17. A questo punto, per verificare se è disponibile il token di autorizzazione per accedere all'API Graph di Azure Active Directory, passare a https://<nomeapp>.azurewebsites.net/.auth/me nel browser. Se è stato configurato tutto correttamente, nella risposta JSON verrà visualizzata la proprietà access_token .

    Il percorso URL ~/.auth/me è gestito dall'autenticazione/autorizzazione del servizio app per fornire all'utente tutte le informazioni relative alla sessione autenticata. Per altre informazioni, vedere Autenticazione e autorizzazione nel servizio app di Azure.

    Nota

    Il percorso URL access_token ha un periodo di scadenza. L'autenticazione/autorizzazione del servizio app offre tuttavia funzionalità di aggiornamento del token con ~/.auth/refresh. Per altre informazioni sull'uso, vedere App Service Token Store(Archivio Token del servizio app).

Ora si eseguirà un'operazione utile con i dati della directory.

Aggiungere funzionalità line-of-business all'app

Verrà creato un semplice progetto di gestione degli elementi di lavoro CRUD.

  1. Nella cartella ~\Models creare un file di classe denominato WorkItem.cs e sostituire public class WorkItem {...} con il codice seguente:

    using System.ComponentModel.DataAnnotations;

    public class WorkItem {

      [Key]
      public int ItemID { get; set; }
      public string AssignedToID { get; set; }
      public string AssignedToName { get; set; }
      public string Description { get; set; }
      public WorkItemStatus Status { get; set; }
    

    }

    public enum WorkItemStatus {

      Open,
      Investigating,
      Resolved,
      Closed
    

    }

  2. Compilare il progetto per rendere accessibile il nuovo modello alla logica di scaffolding in Visual Studio.
  3. Aggiungere un nuovo elemento di scaffolding WorkItemsController nella cartella ~\Controllers. Fare clic con il pulsante destro del mouse su Controller, scegliere Aggiungi e selezionare Nuovo elemento di scaffolding.
  4. Selezionare Controller MVC 5 con visualizzazioni, che usa Entity Framework e quindi fare clic su Aggiungi.
  5. Selezionare il modello creato, fare clic su +, quindi su Aggiungi per aggiungere un contesto dei dati e infine fare clic su Aggiungi.

  6. In ~\Views\WorkItems\Create.cshtml (un elemento sottoposto automaticamente a scaffolding) individuare il metodo helper Html.BeginForm e apportare le modifiche evidenziate di seguito:

    @model WebApplication1.Models.WorkItem
    
    @{
     ViewBag.Title = "Create";
    }
    
    <h2>Create</h2>
    
    @using (Html.BeginForm("Create", "WorkItems", FormMethod.Post, new { id = "main-form" })) 
    {
     @Html.AntiForgeryToken()
    
     <div class="form-horizontal">
         <h4>WorkItem</h4>
         <hr />
         @Html.ValidationSummary(true, "", new { @class = "text-danger" })
         <div class="form-group">
             @Html.LabelFor(model => model.AssignedToID, htmlAttributes: new { @class = "control-label col-md-2" })
             <div class="col-md-10">
                 @Html.EditorFor(model => model.AssignedToID, new { htmlAttributes = new { @class = "form-control", @type = "hidden" } })
                 @Html.ValidationMessageFor(model => model.AssignedToID, "", new { @class = "text-danger" })
             </div>
         </div>
    
         <div class="form-group">
             @Html.LabelFor(model => model.AssignedToName, htmlAttributes: new { @class = "control-label col-md-2" })
             <div class="col-md-10">
                 @Html.EditorFor(model => model.AssignedToName, new { htmlAttributes = new { @class = "form-control" } })
                 @Html.ValidationMessageFor(model => model.AssignedToName, "", new { @class = "text-danger" })
             </div>
         </div>
    
         <div class="form-group">
             @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
             <div class="col-md-10">
                 @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
                 @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
             </div>
         </div>
    
         <div class="form-group">
             @Html.LabelFor(model => model.Status, htmlAttributes: new { @class = "control-label col-md-2" })
             <div class="col-md-10">
                 @Html.EnumDropDownListFor(model => model.Status, htmlAttributes: new { @class = "form-control" })
                 @Html.ValidationMessageFor(model => model.Status, "", new { @class = "text-danger" })
             </div>
         </div>
    
         <div class="form-group">
             <div class="col-md-offset-2 col-md-10">
                 <input type="submit" value="Create" class="btn btn-default" id="submit-button" />
             </div>
         </div>
     </div>
    }
    
    <div>
     @Html.ActionLink("Back to List", "Index")
    </div>
    
    @section Scripts {
     @Scripts.Render("~/bundles/jqueryval")
     <script>
         // People/Group Picker Code
         var maxResultsPerPage = 14;
         var input = document.getElementById("AssignedToName");
    
         // Access token from request header, and tenantID from claims identity
         var token = "@Request.Headers["X-MS-TOKEN-AAD-ACCESS-TOKEN"]";
         var tenant ="@(System.Security.Claims.ClaimsPrincipal.Current.Claims
                         .Where(c => c.Type == "http://schemas.microsoft.com/identity/claims/tenantid")
                         .Select(c => c.Value).SingleOrDefault())";
    
         var picker = new AadPicker(maxResultsPerPage, input, token, tenant);
    
         // Submit the selected user/group to be asssigned.
         $("#submit-button").click({ picker: picker }, function () {
             if (!picker.Selected())
                 return;
             $("#main-form").get()[0].elements["AssignedToID"].value = picker.Selected().objectId;
         });
     </script>
    }
    

    Si noti che token e tenant vengono usati dall'oggetto AadPicker per eseguire chiamate all'API Graph di Azure Active Directory. Si aggiungerà AadPicker in un secondo momento.

    Nota

    È anche possibile ottenere token e tenant dal lato client con ~/.auth/me, ma si tratterebbe di una chiamata server aggiuntiva. Ad esempio:

    $.ajax({ dataType: "json", url: "/.auth/me", success: function (data) { var token = data[0].access_token; var tenant = data[0].user_claims .find(c => c.typ === 'http://schemas.microsoft.com/identity/claims/tenantid') .val; } });

  7. Apportare le stesse modifiche con ~\Views\WorkItems\Edit.cshtml.
  8. L'oggetto AadPicker è definito in uno script che è necessario aggiungere al progetto. Fare clic con il pulsante destro del mouse sulla cartella ~\Scripts, scegliere Aggiungi e fare clic sul file JavaScript. Digitare AadPickerLibrary come nome file e fare clic su OK.
  9. Copiare il contenuto da qui in ~\Scripts\AadPickerLibrary.js.

    Nello script l'oggetto AadPicker chiama l' API Graph di Azure Active Directory per cercare gli utenti e i gruppi corrispondenti all'input.

  10. Anche ~\Scripts\AadPickerLibrary.js usa il widget di completamento automatico dell'interfaccia utente jQuery. È quindi necessario aggiungere l'interfaccia utente di jQuery al progetto. Fare clic con il pulsante destro del mouse sul progetto e scegliere Gestisci pacchetti NuGet.
  11. In Gestione pacchetti NuGet fare clic su Sfoglia, digitare jquery-ui nella barra di ricerca e fare clic su jQuery.UI.Combined.

  12. Nel riquadro di destra fare clic su Installa, quindi fare clic su OK per continuare.
  13. Aprire ~\App_Start\BundleConfig.cs e apportare le modifiche evidenziate di seguito:

    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery-ui-{version}.js",
                    "~/Scripts/AadPickerLibrary.js"));
    
        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));
    
        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));
    
        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                    "~/Scripts/bootstrap.js",
                    "~/Scripts/respond.js"));
    
        bundles.Add(new StyleBundle("~/Content/css").Include(
                    "~/Content/bootstrap.css",
                    "~/Content/site.css",
                    "~/Content/themes/base/jquery-ui.css"));
    }
    

    Sono disponibili altri modi più efficienti per gestire i file CSS e JavaScript nell'app. Tuttavia, per semplicità, sarà sufficiente occuparsi dei bundle caricati con ogni visualizzazione.

  14. In ~\Global.asax aggiungere infine la riga di codice seguente al metodo Application_Start(). Ctrl+. su ogni errore di risoluzione dei nomi per correggerlo.

    AntiForgeryConfig.UniqueClaimTypeIdentifier = ClaimTypes.NameIdentifier;
    
    Nota

    Questa riga di codice è necessaria perché il modello MVC predefinito usa [ValidateAntiForgeryToken] in alcune azioni. A causa del comportamento descritto da Brock Allen nella pagina MVC 4, AntiForgeryToken and Claims (MVC 4, AntiForgeryToken e attestazioni), è possibile che la convalida del token antifalsificazione con HTTP POST non riesca per i motivi seguenti:

    ClaimTypes.NameIdentifies specifica l'attestazione http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier, che non viene fornita da Azure Active Directory.

  15. A questo punto, pubblicare le modifiche. Fare clic con il pulsante destro del mouse sul progetto e scegliere Pubblica.
  16. Fare clic su Impostazioni, assicurarsi che sia disponibile una stringa di connessione al database SQL, selezionare Aggiorna database per apportare le modifiche allo schema per il modello e fare clic su Pubblica.

  17. Nel browser passare a https://<nomeapp>.azurewebsites.net/workitems e fare clic su Crea nuovo.
  18. Fare clic sulla casella AssignedToName . Gli utenti e i gruppi del tenant di Azure Active Directory verranno visualizzati in un elenco a discesa. È possibile digitare per filtrare o usare la chiave Up o Down oppure fare clic per selezionare l'utente o il gruppo.

  19. Fare clic su Salva per salvare le modifiche. Quindi, fare clic su Modifica nell'elemento di lavoro creato per osservare lo stesso comportamento.

A questo punto è in esecuzione un'app line-of-business in Azure con accesso alla directory. Con l'API Graph è possibile fare molto di più. Vedere Azure AD Graph API reference(Informazioni di riferimento sull'API Graph di Azure AD).

passaggio successivo

Se è necessario il controllo degli accessi in base al ruolo per l'app line-of-business in Azure, vedere WebApp-RoleClaims-DotNet per un esempio del team di Azure Active Directory. Viene illustrato come abilitare i ruoli per un'applicazione Azure Active Directory e quindi autorizzare gli utenti con [Authorize] .

Se l'app line-of-business deve accedere a dati locali, vedere Accedere alle risorse locali usando connessioni ibride nel servizio app di Azure.

Altre risorse