Condividi tramite

Sviluppo di app ASP.NET con Azure Active Directory

  • Articolo

di Rick Anderson

Gli strumenti di Microsoft ASP.NET per Azure Active Directory semplificano l'autenticazione per le app Web ospitate in Azure. È possibile usare l'autenticazione di Azure per autenticare Office 365 utenti dell'organizzazione, gli account aziendali sincronizzati da Active Directory locale o gli utenti creati nel dominio di Azure Active Directory personalizzato. L'abilitazione dell'autenticazione di Windows Azure configura l'applicazione per autenticare gli utenti usando un singolo tenant di Azure Active Directory .

Questa esercitazione illustra come creare un'applicazione ASP.NET configurata per l'accesso con Azure Active Directory (Azure AD). Si apprenderà anche come chiamare il API Graph per ottenere informazioni sull'utente attualmente connesso e su come distribuire l'applicazione in Azure.

Prerequisiti

  1. Visual Studio Express 2013 per Web o Visual Studio 2013.
  2. Visual Studio 2013 Update 4: è necessario aggiornare 3 o versione successiva.
  3. Un account Azure. Fare clic qui per una versione di valutazione gratuita se non si ha già un account.

Aggiungere un amministratore globale ad Active Directory

  1. Accedere al portale di gestione di Azure.

  2. Tutti gli account Azure contengono una directory predefinita . Fare clic su di esso, quindi fare clic sulla scheda Utenti nella parte superiore della pagina (vedere l'immagine seguente).

  3. Fare clic su Aggiungi utente. Screenshot del portale di gestione di Azure, con La directory predefinita evidenziata e selezionata a sinistra, GLI UTENTI descritti a destra e AGGIUNGI UTENTE evidenziato nel piè di pagina.

  4. Creare un nuovo utente con il ruolo amministratore globale . Fare clic su Utenti dal menu in alto e quindi sul pulsante Aggiungi utente sulla barra dei comandi.

  5. Nella finestra di dialogo Aggiungi utente immettere un nome per il nuovo utente e quindi fare clic sulla freccia destra.

    Screenshot della finestra di dialogo Aggiungi utente con l'istruzione

  6. Immettere il nome utente e impostare il ruolo su Amministratore globale. Gli amministratori globali richiedono un indirizzo di posta elettronica alternativo per scopi di ripristino delle password. Al termine, fare clic sulla freccia destra.

    Screenshot del profilo utente nella finestra di dialogo AGGIUNGI UTENTE con l'opzione Amministratore globale selezionata per ROLE. Il campo INDIRIZZO DI POSTA ELETTRONICA ALTERNATIVO è evidenziato.

  7. Nella pagina successiva della finestra di dialogo fare clic su Crea. Verrà creata una password temporanea per il nuovo utente e visualizzata nella finestra di dialogo.

    Screenshot del profilo utente nella finestra di dialogo AGGIUNGI UTENTE, con l'istruzione Get temporary password visualizzata e il pulsante Crea visualizzato di seguito.

    Salvare la password, sarà necessario modificare la password dopo il primo accesso. L'immagine seguente mostra il nuovo account amministratore. È necessario usare Azure Active Directory per accedere all'app, non l'account Microsoft visualizzato anche in questa pagina.

    Screenshot del nuovo account amministratore con le colonne DISPLAY NAME, USER NAME e SOURCED FROM visualizzate nella tabella.

Creare un'applicazione ASP.NET

I passaggi seguenti usano Visual Studio Express 2013 per Web e richiedono Visual Studio 2013 Update 3.

  1. In Visual Studio fare clic su File e quindi su Nuovo progetto. Nella finestra di dialogo Nuovo progetto selezionare il progetto Web Visual C# dal menu a sinistra e fare clic su OK. È anche possibile deselezionare l'opzione Aggiungi Application Insights a Project se non si vuole usare la funzionalità per l'applicazione.

  2. Nella finestra di dialogo Nuovo progetto ASP.NET selezionare MVC e quindi fare clic su Modifica autenticazione.

    Screenshot della finestra di dialogo Nuovo progetto P dot NET, con il modello M V C selezionato, il pulsante Modifica autenticazione evidenziato e Host nel cloud selezionato.

  3. Nella finestra di dialogo Modifica autenticazione selezionare Account aziendali. Queste opzioni possono essere usate per registrare automaticamente l'applicazione con Azure AD e configurare automaticamente l'applicazione per l'integrazione con Azure AD. Non è necessario usare la finestra di dialogo Modifica autenticazione per registrare e configurare l'applicazione, ma risulta molto più semplice. Se ad esempio si usa Visual Studio 2012, è comunque possibile registrare manualmente l'applicazione nel portale di gestione di Azure e aggiornarne la configurazione per l'integrazione con Azure AD. Nei menu a discesa selezionare Cloud - Singola organizzazione e Single Sign On lettura dei dati della directory. Immettere il dominio per la directory di Azure AD, ad esempio (nelle immagini seguenti) aricka0yahoo.onmicrosoft.com e quindi fare clic su OK. È possibile ottenere il nome di dominio dalla scheda Domini per la directory predefinita nel portale di Azure (vedere l'immagine successiva in basso).

    Screenshot della finestra di dialogo Modifica autenticazione; Account aziendali, Cloud dash Single Organization e Single Sign On, Leggere i dati della directory descritti.

    L'immagine seguente mostra il nome di dominio del portale di Azure.

    Screenshot di portale di Azure, con La directory predefinita selezionata a sinistra, DOMINI evidenziati nel menu a destra e nome di dominio della directory visualizzati di seguito.

    Nota

    Facoltativamente, è possibile configurare l'URI ID applicazione che verrà registrato in Azure AD facendo clic su Altre opzioni. L'URI ID app è l'identificatore univoco per un'applicazione, registrata in Azure AD e usata dall'applicazione per identificarsi durante la comunicazione con Azure AD. Per altre informazioni sull'URI ID app e altre proprietà delle applicazioni registrate, vedere questo argomento. Facendo clic sulla casella di controllo sotto il campo URI ID app, è anche possibile scegliere di sovrascrivere una registrazione esistente in Azure AD che usa lo stesso URI ID app.

  4. Dopo aver fatto clic su OK, verrà visualizzata una finestra di dialogo di accesso e sarà necessario accedere usando un account di amministratore globale (non l'account Microsoft associato alla sottoscrizione). Se in precedenza è stato creato un nuovo account amministratore, sarà necessario modificare la password e quindi accedere di nuovo usando la nuova password.

    Screenshot della finestra di dialogo Accedi ad Azure Active Directory, con i campi per nome account amministratore globale e password visualizzati.

  5. Dopo aver eseguito l'autenticazione, la finestra di dialogo Nuovo progetto di ASP.NET mostrerà la scelta di autenticazione (organizzazione ) e la directory in cui verrà registrata la nuova applicazione (aricka0yahoo.onmicrosoft.com nell'immagine seguente). Sotto queste informazioni selezionare la casella di controllo Host nel cloud. Se questa casella di controllo è selezionata, verrà effettuato il provisioning del progetto come app Web di Azure e verrà abilitata per semplificare la pubblicazione in un secondo momento. Fare clic su OK.

    Screenshot della finestra di dialogo Nuovo progetto P dot NET, con il modello M V C, la scelta di autenticazione e la directory visualizzati. L'host nel cloud è descritto.

  6. Verrà visualizzata la finestra di dialogo Configura sito Web di Azure usando un nome e un'area del sito generati automaticamente. Si noti anche l'account attualmente connesso nella finestra di dialogo. Si vuole assicurarsi che questo account sia quello a cui è collegata la sottoscrizione di Azure, in genere un account Microsoft.

    Nota

    Questo progetto richiede un database. È necessario selezionare uno dei database esistenti o crearne uno nuovo. È necessario un database perché il progetto usa già un file di database locale per archiviare una piccola quantità di dati di configurazione di autenticazione. Quando si distribuisce l'applicazione in un sito Web di Azure, questo database non viene incluso nel pacchetto con la distribuzione, quindi è necessario sceglierne uno accessibile nel cloud. Fare clic su OK.

    Screenshot della finestra di dialogo Configura sito Web di Azure, che mostra il nome del sito generato automaticamente, l'area, il server di database, il nome utente del database e la password del database.

  7. Il progetto verrà creato e le opzioni di autenticazione e le opzioni dell'app Web verranno configurate automaticamente con il progetto. Al termine di questo processo, eseguire il progetto in locale premendo ^F5. Sarà necessario accedere usando l'account aziendale. Specificare il nome utente e la password per l'account creato in precedenza e fare clic su Accedi.

    Screenshot della finestra di dialogo Accedi con i campi per nome utente e password dell'account aziendale visualizzati.

  8. Al termine dell'accesso, il sito di ASP.NET mostrerà che l'autenticazione è stata eseguita visualizzando il nome utente nell'angolo superiore destro della pagina.

    Screenshot del sito A S P dot NET con l evidenziato nella barra degli indirizzi e nel nome utente evidenziati in alto a destra.

    Se viene visualizzato l'errore: Il valore non può essere null o vuoto. Nome parametro: linkText Screenshot dell'errore del server. Il messaggio di errore è evidenziato, la lettura, il valore non può essere null o vuoto. Collegamento dei due punti del nome del parametro Testo.

    vedere la sezione debug alla fine dell'esercitazione.

Nozioni di base sulla API Graph

Il API Graph è l'interfaccia programmatica usata per eseguire operazioni CRUD e altre operazioni sugli oggetti nella directory di Azure AD. Se si seleziona un'opzione Account aziendale per l'autenticazione durante la creazione di un nuovo progetto in Visual Studio 2013, l'applicazione sarà già configurata per chiamare il API Graph. Questa sezione illustra brevemente il funzionamento del API Graph.

  1. Nell'applicazione in esecuzione fare clic sul nome dell'utente connesso in alto a destra nella pagina. Verrà visualizzata la pagina Profilo utente, ovvero un'azione sul controller home. Si noterà che la tabella contiene informazioni utente sull'account amministratore creato in precedenza. Queste informazioni vengono archiviate nella directory e il API Graph viene chiamato per recuperare queste informazioni al caricamento della pagina.

    Screenshot della pagina Profilo utente con una tabella che include nome visualizzato, nome e cognome per l'account amministratore.

  2. Indietro in Visual Studio, espandere la cartella Controllers e quindi aprire il file HomeController.cs. Verrà visualizzata un'azione UserProfile() che contiene il codice per recuperare un token e quindi chiamare il API Graph. Questo codice è duplicato di seguito:

    [Authorize]
public async Task UserProfile()
{
    string tenantId = ClaimsPrincipal.Current.FindFirst(TenantIdClaimType).Value;

    // Get a token for calling the Azure Active Directory Graph
    AuthenticationContext authContext = new AuthenticationContext(String.Format(CultureInfo.InvariantCulture, LoginUrl, tenantId));
    ClientCredential credential = new ClientCredential(AppPrincipalId, AppKey);
    AuthenticationResult assertionCredential = authContext.AcquireToken(GraphUrl, credential);
    string authHeader = assertionCredential.CreateAuthorizationHeader();
    string requestUrl = String.Format(
        CultureInfo.InvariantCulture,
        GraphUserUrl,
        HttpUtility.UrlEncode(tenantId),
        HttpUtility.UrlEncode(User.Identity.Name));

    HttpClient client = new HttpClient();
    HttpRequestMessage request = new HttpRequestMessage(HttpMethod.Get, requestUrl);
    request.Headers.TryAddWithoutValidation("Authorization", authHeader);
    HttpResponseMessage response = await client.SendAsync(request);
    string responseString = await response.Content.ReadAsStringAsync();
    UserProfile profile = JsonConvert.DeserializeObject<UserProfile>(responseString);

    return View(profile);
}

    Per chiamare il API Graph, è prima necessario recuperare un token. Quando il token viene recuperato, il relativo valore stringa deve essere aggiunto nell'intestazione Authorization per tutte le richieste successive al API Graph. La maggior parte del codice precedente gestisce i dettagli dell'autenticazione in Azure AD per ottenere un token, usando il token per eseguire una chiamata alla API Graph e quindi trasformando la risposta in modo che possa essere presentata nella visualizzazione.

    La parte più rilevante per la discussione è la riga evidenziata seguente: UserProfile profile = JsonConvert.DeserializeObject<UserProfile>(responseString);. Questa riga rappresenta il nome dell'utente, che è stato deserializzato dalla risposta JSON e viene presentato nella visualizzazione.

    È possibile chiamare il API Graph usando HttpClient e gestire i dati non elaborati, ma un modo più semplice consiste nell'usare la libreria client Graph disponibile tramite NuGet. La libreria client gestisce le richieste HTTP non elaborate e la trasformazione dei dati restituiti per l'utente e semplifica il funzionamento con il API Graph in un ambiente .NET. Vedere gli esempi di codice correlati API Graph in GitHub.

Distribuire l'applicazione in Azure

La procedura seguente illustra come distribuire l'applicazione in Azure. Nei passaggi precedenti è stato connesso il nuovo progetto con un'app Web in Azure, quindi è pronto per essere pubblicato in pochi passaggi.

  1. In Visual Studio fare clic con il pulsante destro del mouse sul progetto e scegliere Pubblica. La finestra di dialogo Pubblica Web verrà visualizzata con ogni impostazione già configurata. Fare clic sul pulsante Avanti per passare alla pagina Impostazioni . È possibile che venga richiesto di eseguire l'autenticazione; assicurarsi di eseguire l'autenticazione usando l'account di sottoscrizione di Azure (in genere un account Microsoft) e non l'account aziendale creato in precedenza.

    Screenshot della finestra di dialogo Pubblica Web con connessione evidenziata e ogni impostazione già configurata a destra.

  2. Selezionare l'opzione Abilita autenticazione organizzativa . Nel campo Dominio immettere il dominio per la directory. Nell'elenco a discesa Livello di accesso selezionare Single Sign On, Leggere i dati della directory. Si noterà che il database precedente usato è già popolato nella sezione Database . Fare clic su Pubblica.

    Screenshot della finestra di dialogo Pubblica Web. Le opzioni di pubblicazione file sono descritte, tra cui Abilitare l'autenticazione organizzativa, il campo dominio e il livello di accesso.

  3. Visual Studio inizierà la distribuzione del sito Web e verrà visualizzata una nuova finestra del browser. È possibile che venga richiesto di eseguire nuovamente l'autenticazione nella directory. Dopo aver eseguito l'autenticazione, si verrà reindirizzati al sito Web appena pubblicato in Azure.

    Screenshot di un sito P dot NET di S, con l di un sito Web appena pubblicato in Azure visualizzato nella barra degli indirizzi.

Debug dell'app

Se viene visualizzato l'errore seguente: il valore non può essere null o vuoto. Nome parametro: linkText

Screenshot dell'errore di erver che può causare. Il messaggio di errore è evidenziato, lettura, valore non può essere null o vuoto. Collegamento del nome del parametro Testo del collegamento a due punti.

Sostituire il codice nel file Views\Shared\_LoginPartial.cshtml con quanto segue:

@{
   var user = "Null User";
   if (!String.IsNullOrEmpty(User.Identity.Name))
   {
      user = User.Identity.Name;
   }

}

@if (Request.IsAuthenticated)
{
    <text>
         <ul class="nav navbar-nav navbar-right">
            <li>
                @*@Html.ActionLink(User.Identity.Name, "UserProfile", "Home", routeValues: null, htmlAttributes: null)*@
               @Html.ActionLink(user, "UserProfile", "Home", routeValues: null, htmlAttributes: null)
            </li>
            <li>
                @Html.ActionLink("Sign out", "SignOut", "Account")
            </li>
        </ul>
    </text>
}
else
{
     <ul class="nav navbar-nav navbar-right">
        <li>@Html.ActionLink("Sign in", "Index", "Home", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
    </ul>
}

Dopo aver eseguito l'app, se l'utente connesso mostra "Utente Null", disconnettersi e accedere con l'account Active Directory creato in precedenza.

Un'esercitazione eccellente da seguire è l'approfondimento di Rick Rainey : Siti Web di Azure e autenticazione organizzativa con Azure AD.

Altre informazioni