Développement d’applications ASP.NET avec Azure Active Directory

  • Article

par Rick Anderson

Microsoft ASP.NET tools for Azure Active Directory simplifie l’activation de l’authentification pour les applications web hébergées sur Azure. Vous pouvez utiliser l’authentification Azure pour authentifier Office 365 utilisateurs à partir de votre organization, des comptes d’entreprise synchronisés à partir de votre annuaire Active Directory local ou des utilisateurs créés dans votre propre domaine Azure Active Directory personnalisé. L’activation de l’authentification Windows Azure configure votre application pour authentifier les utilisateurs à l’aide d’un seul locataire Azure Active Directory .

Ce tutoriel vous montre comment créer une application ASP.NET configurée pour l’authentification avec Azure Active Directory (Azure AD). Vous allez également apprendre à appeler le API Graph pour obtenir des informations sur l’utilisateur actuellement connecté et comment déployer l’application sur Azure.

Prérequis

  1. Visual Studio Express 2013 pour web ou Visual Studio 2013.
  2. Visual Studio 2013 Update 4 : la mise à jour 3 ou une version ultérieure est requise.
  3. Un compte Azure. Cliquez ici pour un essai gratuit si vous n’avez pas encore de compte.

Ajouter un administrateur général à votre annuaire Active Directory

  1. Connectez-vous au portail de gestion Azure.

  2. Tous les comptes Azure contiennent un répertoire par défaut : cliquez dessus, puis cliquez sur l’onglet Utilisateurs en haut de la page (voir l’image ci-dessous).

  3. Cliquez sur Ajouter un utilisateur. Capture d’écran du portail de gestion Azure, avec l’annuaire par défaut indiqué et sélectionné à gauche, l’option USERS décrite à droite et l’option AJOUTER UN UTILISATEUR décrite en pied de page.

  4. Créez un utilisateur avec le rôle Administrateur général . Cliquez sur Utilisateurs dans le menu supérieur, puis cliquez sur le bouton Ajouter un utilisateur dans la barre de commandes.

  5. Dans la boîte de dialogue Ajouter un utilisateur , entrez un nom pour le nouvel utilisateur, puis cliquez sur la flèche droite.

    Capture d’écran de la boîte de dialogue Ajouter un utilisateur, avec l’instruction « Parlez-nous de cet utilisateur ». Les champs TYPE D’UTILISATEUR et NOM D’UTILISATEUR s’affichent.

  6. Entrez le nom d’utilisateur et définissez le rôle sur Administrateur général. Les administrateurs généraux ont besoin d’une autre adresse e-mail à des fins de récupération de mot de passe. Une fois que vous avez terminé, cliquez sur la flèche droite.

    Capture d’écran du profil utilisateur dans la boîte de dialogue AJOUTER UN UTILISATEUR, avec Administrateur général sélectionné pour ROLE. Le champ ADRESSE E-MAIL SECONDAIRE est mis en surbrillance.

  7. Dans la page suivante de la boîte de dialogue, cliquez sur Créer. Un mot de passe temporaire est créé pour le nouvel utilisateur et affiché dans la boîte de dialogue.

    Capture d’écran du profil utilisateur dans la boîte de dialogue AJOUTER UN UTILISATEUR, avec l’affichage de l’instruction Obtenir un mot de passe temporaire et le bouton Créer ci-dessous.

    Enregistrez le mot de passe. Vous devrez modifier le mot de passe après la première connexion. L’image suivante montre le nouveau compte administrateur. Vous devez utiliser Azure Active Directory pour vous connecter à votre application, et non le compte Microsoft qui apparaît également sur cette page.

    Capture d’écran du nouveau compte d’administrateur, avec les colonnes DISPLAY NAME, USER NAME et SOURCED FROM qui apparaissent dans la table.

Créer une application ASP.NET

Les étapes suivantes utilisent Visual Studio Express 2013 pour le web et nécessitent Visual Studio 2013 Update 3.

  1. Dans Visual Studio, cliquez sur Fichier , puis sur Nouveau projet. Dans la boîte de dialogue Nouveau projet , sélectionnez le projet web Visual C# dans le menu de gauche, puis cliquez sur OK. Vous pouvez également décocher la case Ajouter Application Insights à Project si vous ne souhaitez pas la fonctionnalité de votre application.

  2. Dans la boîte de dialogue Nouveau projet ASP.NET , sélectionnez MVC, puis cliquez sur Modifier l’authentification.

    Capture d’écran de la boîte de dialogue New A S P P dot NET Project, avec le modèle M V C sélectionné, le bouton Modifier l’authentification mis en évidence et l’option Hôte dans le cloud sélectionnée.

  3. Dans la boîte de dialogue Modifier l’authentification , sélectionnez Comptes d’organisation. Ces options peuvent être utilisées pour inscrire automatiquement votre application auprès d’Azure AD et configurer automatiquement votre application pour l’intégrer à Azure AD. Vous n’avez pas besoin d’utiliser la boîte de dialogue Modifier l’authentification pour inscrire et configurer votre application, mais cela facilite grandement la tâche. Si vous utilisez Visual Studio 2012 par exemple, vous pouvez toujours inscrire manuellement l’application dans le portail de gestion Azure et mettre à jour sa configuration pour l’intégrer à Azure AD. Dans les menus déroulants, sélectionnez Cloud - Organisation unique et Authentification unique Lire les données d’annuaire. Entrez le domaine de votre annuaire Azure AD, par exemple (dans les images ci-dessous) aricka0yahoo.onmicrosoft.com, puis cliquez sur OK. Vous pouvez obtenir le nom de domaine sous l’onglet Domaines de l’annuaire par défaut sur le portail Azure (voir l’image suivante).

    Capture d’écran de la boîte de dialogue Modifier l’authentification ; Comptes d’organisation, Tableau de bord cloud Organisation unique et Authentification unique, Lire les données d’annuaire décrites.

    L’image suivante montre le nom de domaine du Portail Azure.

    Capture d’écran de Portail Azure, avec l’option Répertoire par défaut sélectionnée à gauche, DOMAINES mis en surbrillance dans le menu à droite et le nom de domaine de l’annuaire affiché ci-dessous.

    Notes

    Vous pouvez éventuellement configurer l’URI d’ID d’application qui sera inscrit dans Azure AD en cliquant sur Autres options. L’URI d’ID d’application est l’identificateur unique d’une application, qui est inscrite dans Azure AD et utilisée par l’application pour s’identifier elle-même lors de la communication avec Azure AD. Pour plus d’informations sur l’URI d’ID d’application et d’autres propriétés des applications inscrites, consultez cette rubrique. En cliquant sur la case à cocher sous le champ URI ID d’application, vous pouvez également choisir de remplacer une inscription existante dans Azure AD qui utilise le même URI d’ID d’application.

  4. Après avoir cliqué sur OK, une boîte de dialogue de connexion s’affiche et vous devez vous connecter à l’aide d’un compte Administrateur général (et non du compte Microsoft associé à votre abonnement). Si vous avez créé un compte Administrateur précédemment, vous devez modifier le mot de passe, puis vous reconnecter à l’aide du nouveau mot de passe.

    Capture d’écran de la boîte de dialogue Se connecter à Azure Active Directory, avec des champs pour le nom et le mot de passe de l’administrateur général affichés.

  5. Une fois l’authentification réussie, la boîte de dialogue Nouveau projet ASP.NET affiche votre choix d’authentification (Organisation ) et le répertoire dans lequel la nouvelle application sera inscrite (aricka0yahoo.onmicrosoft.com dans l’image ci-dessous). Sous ces informations, cochez la case Hôte dans le cloud. Si cette case est cochée, le projet sera provisionné en tant qu’application web Azure et sera activé pour faciliter la publication ultérieurement. Cliquez sur OK.

    Capture d’écran de la boîte de dialogue New A S P P dot NET Project, avec le modèle M VC, le choix d’authentification et le répertoire affichés. L’hôte dans le cloud est décrit.

  6. La boîte de dialogue Configurer le site web Azure s’affiche, à l’aide d’un nom de site et d’une région générés automatiquement. Notez également le compte auquel vous êtes actuellement connecté dans la boîte de dialogue. Vous souhaitez vous assurer que ce compte est celui auquel votre abonnement Azure est attaché, généralement un compte Microsoft.

    Notes

    Ce projet nécessite une base de données. Vous devez sélectionner l’une de vos bases de données existantes ou en créer une nouvelle. Une base de données est requise, car le projet utilise déjà un fichier de base de données local pour stocker une petite quantité de données de configuration d’authentification. Lorsque vous déployez l’application sur un site web Azure, cette base de données n’est pas empaquetée avec le déploiement. Vous devez donc en choisir une qui est accessible dans le cloud. Cliquez sur OK.

    Capture d’écran de la boîte de dialogue Configurer le site web Azure, montrant le nom du site, la région, le serveur de base de données, le nom d’utilisateur de la base de données et le mot de passe de la base de données générés automatiquement.

  7. Le projet sera créé et vos options d’authentification et d’application web seront automatiquement configurées avec le projet. Une fois ce processus terminé, exécutez le projet localement en appuyant sur ^F5. Vous devrez vous connecter à l’aide de votre compte professionnel. Indiquez le nom d’utilisateur et le mot de passe du compte que vous avez créé précédemment, puis cliquez sur Se connecter.

    Capture d’écran de la boîte de dialogue Connexion, avec des champs pour le nom d’utilisateur et le mot de passe du compte d’organisation affichés.

  8. Une fois la connexion établie, le site ASP.NET indique que vous vous êtes authentifié en affichant le nom d’utilisateur dans le coin supérieur droit de la page.

    Capture d’écran d’un site A SP dot NET avec vous l mis en surbrillance dans la barre d’adresse et le nom d’utilisateur mis en surbrillance en haut à droite.

    Si vous obtenez l’erreur : La valeur ne peut pas être null ou vide. Nom du paramètre : linkText Capture d’écran de l’erreur du serveur. Le message d’erreur est mis en surbrillance. La valeur ne peut pas être null ou vide. Lien deux-points nom du paramètre Texte.

    consultez la section débogage à la fin du didacticiel.

Notions de base de la API Graph

Le API Graph est l’interface programmatique utilisée pour effectuer crud et d’autres opérations sur les objets de votre annuaire Azure AD. Si vous sélectionnez une option de compte d’organisation pour l’authentification lors de la création d’un projet dans Visual Studio 2013, votre application est déjà configurée pour appeler le API Graph. Cette section vous montre brièvement comment fonctionne le API Graph.

  1. Dans votre application en cours d’exécution, cliquez sur le nom de l’utilisateur connecté en haut à droite de la page. Vous accédez alors à la page Profil utilisateur, qui est une action sur le contrôleur d’accueil. Vous remarquerez que la table contient des informations utilisateur sur le compte d’administrateur que vous avez créé précédemment. Ces informations sont stockées dans votre répertoire, et le API Graph est appelé pour récupérer ces informations lors du chargement de la page.

    Capture d’écran de la page Profil utilisateur, avec un tableau incluant le nom d’affichage, le prénom et le nom du compte d’administrateur.

  2. Retour à Visual Studio et développez le dossier Controllers, puis ouvrez le fichier HomeController.cs. Vous verrez une action UserProfile() qui contient du code pour récupérer un jeton, puis appeler le API Graph. Ce code est dupliqué ci-dessous :

    [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);
}

    Pour appeler le API Graph, vous devez d’abord récupérer un jeton. Lorsque le jeton est récupéré, sa valeur de chaîne doit être ajoutée à l’en-tête Authorization pour toutes les requêtes suivantes à l’API Graph. La plupart du code ci-dessus gère les détails de l’authentification auprès d’Azure AD pour obtenir un jeton, en utilisant le jeton pour effectuer un appel à l’API Graph, puis en transformant la réponse afin qu’elle puisse être présentée dans la vue.

    La partie la plus pertinente pour la discussion est la ligne mise en surbrillance suivante : UserProfile profile = JsonConvert.DeserializeObject<UserProfile>(responseString);. Cette ligne représente le nom de l’utilisateur, qui a été désérialisé à partir de la réponse JSON et est présenté dans la vue.

    Vous pouvez appeler le API Graph à l’aide de HttpClient et gérer les données brutes vous-même, mais un moyen plus simple consiste à utiliser la bibliothèque cliente Graph qui est disponible via NuGet. La bibliothèque cliente gère les requêtes HTTP brutes et la transformation des données retournées pour vous, et facilite considérablement l’utilisation des API Graph dans un environnement .NET. Consultez les exemples de code API Graph associés sur GitHub.

Déploiement de l'application vers Azure

Les étapes suivantes vous montrent comment déployer l’application sur Azure. Dans les étapes précédentes, vous avez connecté votre nouveau projet à une application web sur Azure, afin qu’il soit prêt à être publié en quelques étapes seulement.

  1. Dans Visual Studio, cliquez avec le bouton droit sur le projet, puis sélectionnez Publier. La boîte de dialogue Publier le web s’affiche avec chaque paramètre déjà configuré. Cliquez sur le bouton Suivant pour accéder à la page Paramètres . Vous serez peut-être invité à vous authentifier ; veillez à vous authentifier à l’aide de votre compte d’abonnement Azure (généralement un compte Microsoft) et non du compte d’organisation que vous avez créé précédemment.

    Capture d’écran de la boîte de dialogue Publier le web avec Connexion mise en surbrillance et chaque paramètre déjà configuré à droite.

  2. Cochez l’option Activer l’authentification organisationnelle . Dans le champ Domaine , entrez le domaine de votre répertoire. Dans la liste déroulante Niveau d’accès, sélectionnez Authentification unique Lire les données d’annuaire. Vous remarquerez que la base de données précédente que vous avez utilisée est déjà renseignée dans la section Bases de données . Cliquez sur Publier.

    Capture d’écran de la boîte de dialogue Publier le web. Les options de publication de fichier sont décrites, notamment Activer l’authentification organisationnelle, le champ Domaine et le niveau d’accès.

  3. Visual Studio commence à déployer votre site web, puis une nouvelle fenêtre de navigateur s’affiche. Vous serez peut-être invité à vous authentifier à nouveau auprès de votre annuaire. Une fois que vous vous êtes authentifié, vous êtes redirigé vers votre site web nouvellement publié sur Azure.

    Capture d’écran d’un site SP dot NET, avec vous êtes l du site web nouvellement publié sur Azure affiché dans la barre d’adresse.

Débogage de l’application

Si vous obtenez l’erreur suivante : La valeur ne peut pas être null ou vide. Nom du paramètre : linkText

Capture d’écran de l’erreur erver qui peut en résulter. Le message d’erreur est mis en surbrillance. La valeur ne peut pas être null ou vide. Lien deux-points nom du paramètre Texte.

Remplacez le code dans le fichier Views\Shared\_LoginPartial.cshtml par ce qui suit :

@{
   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>
}

Après avoir exécuté l’application, si l’utilisateur connecté affiche « Utilisateur Null », déconnectez-vous et reconnectez-vous avec le compte Active Directory que vous avez créé précédemment.

Un excellent tutoriel à suivre est Deep Dive de Rick Rainey : Sites web Azure et authentification organisationnelle à l’aide d’Azure AD.

Informations complémentaires