Exercice - Créer ASP.NET application web MVC et inscrire une application Microsoft Entra
Dans cet exercice, vous allez créer une application web ASP.NET MVC avec Visual Studio et une application Microsoft Entra avec le Centre d’administration Microsoft Entra. Une fois l’application créée, vous devrez alors ajouter les packages et bibliothèques nécessaires qui prennent en charge l’authentification des utilisateurs et la demande de données à partir de Microsoft Graph.
Conditions préalables
Le développement d’applications Microsoft Graph nécessite un client Microsoft 365.
Pour le client Microsoft 365, suivez les instructions sur le site du Programme pour les développeurs Microsoft 365 pour obtenir un client de développeur si vous n’avez pas encore de compte Microsoft 365.
Les exercices de ce module partent du principe que vous avez installé les outils suivants sur votre station de travail de développeur.
Créer une application web MVC ASP.NET
Ouvrez Visual Studio et sélectionnez Créer un projet.
Dans la boîte de dialogue Créer un projet, sélectionnez l’option Application web ASP.NET (.NET Framework) qui utilise C#, puis sélectionnez Suivant.
Entrez graph-tutorial dans le champ Nom du projet, puis sélectionnez Créer.
Remarque
Veillez à entrer le nom exact du projet Visual Studio spécifié dans ces instructions. Le nom du projet Visual Studio fait alors partie de l’espace de noms dans le code. Le code figurant dans ces instructions dépend de l’espace de noms qui correspond au nom de projet Visual Studio spécifié dans celles-ci. Si vous utilisez un autre nom de projet, celui-ci n’est pas compilé sauf si vous ajustez tous les espaces de noms pour qu’ils correspondent au nom de projet Visual Studio saisi à la création du projet.
Sélectionnez MVC, puis Créer.
Appuyez sur F5 ou sélectionnez Déboguer > Démarrer le débogage. Si tout fonctionne, votre navigateur par défaut doit ouvrir et afficher une page ASP.NET par défaut.
Ajouter des packages NuGet
Avant de continuer, mettez à jour le paquet NuGet bootstrap et installez d'autres paquets NuGet que vous utiliserez plus tard :
- Microsoft.Owin.Host.SystemWeb pour activer les interfaces OWIN dans l’application ASP.NET.
- Microsoft.Owin.Security.OpenIdConnect pour effectuer une authentification OpenID Connect avec Azure.
- Microsoft.Owin.Security.Cookies pour activer l’authentification basée sur les cookies.
- Microsoft.Identity.Client pour demander et gérer les jetons d’accès.
- Microsoft.Graph pour effectuer des appels Microsoft Graph.
Sélectionnez Outils > NuGet Package Manager Console du gestionnaire > de package.
Dans le menu Console du Gestionnaire de package, saisissez les commandes suivantes.
Update-Package bootstrap -Version 4.6.0
Install-Package Microsoft.Owin.Host.SystemWeb
Install-Package Microsoft.Owin.Security.OpenIdConnect
Install-Package Microsoft.Owin.Security.Cookies
Install-Package Microsoft.Identity.Client -Version 4.43.2
Install-Package Microsoft.Graph -Version 4.28.0
Concevoir l’application
Dans cette section, vous allez créer la structure de base de l’application.
Créez une classe de démarrage OWIN de base. Cliquez avec le bouton droit sur le dossier graph-tutorial dans l’Explorateur de solutions , puis sélectionnez Ajouter un > nouvel élément. Choisissez le modèle Classe de démarrage OWIN, nommez le fichier Startup.cs, puis cliquez sur Ajouter.
Cliquez avec le bouton droit sur le dossier Models dans l’Explorateur de solutions, puis sélectionnez Ajouter une > classe.... Nommez la classe Alert et sélectionnez Ajouter. Remplacez tout le contenu de Alert.cs par le code suivant.
namespace graph_tutorial.Models
{
// Used to flash error messages in the app's views.
public class Alert
{
public const string AlertKey = "TempDataAlerts";
public string Message { get; set; }
public string Debug { get; set; }
}
}
Ouvrez le fichier ./Views/Shared/_Layout.cshtml et remplacez l’intégralité de son contenu par le code suivant pour mettre à jour la disposition globale de l’application.
@{
var alerts = TempData.ContainsKey(graph_tutorial.Models.Alert.AlertKey)
? (List<graph_tutorial.Models.Alert>)TempData[graph_tutorial.Models.Alert.AlertKey]
: new List<graph_tutorial.Models.Alert>();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ASP.NET Graph Tutorial</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container">
@Html.ActionLink("ASP.NET Graph Tutorial", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
@Html.ActionLink("Home", "Index", "Home", new { area = "" },
new { @class = ViewBag.Current == "Home" ? "nav-link active" : "nav-link" })
</li>
@if (Request.IsAuthenticated)
{
<li class="nav-item" data-turbolinks="false">
@Html.ActionLink("Calendar", "Index", "Calendar", new { area = "" },
new { @class = ViewBag.Current == "Calendar" ? "nav-link active" : "nav-link" })
</li>
}
</ul>
<ul class="navbar-nav justify-content-end" style="align-items:center;">
<li class="nav-item">
<a class="nav-link" href="https://developer.microsoft.com/graph/docs/concepts/overview" target="_blank">
<i class="fas fa-external-link-alt mr-1"></i>Docs
</a>
</li>
@if (Request.IsAuthenticated)
{
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
@if (!string.IsNullOrEmpty(ViewBag.User.Avatar))
{
<img src="@ViewBag.User.Avatar" class="rounded-circle align-self-center mr-2" style="width: 32px;">
}
else
{
<i class="far fa-user-circle fa-lg rounded-circle align-self-center mr-2" style="width: 32px;"></i>
}
</a>
<div class="dropdown-menu dropdown-menu-right">
<h5 class="dropdown-item-text mb-0">@ViewBag.User.DisplayName</h5>
<p class="dropdown-item-text text-muted mb-0">@ViewBag.User.Email</p>
<div class="dropdown-divider"></div>
@Html.ActionLink("Sign Out", "SignOut", "Account", new { area = "" }, new { @class = "dropdown-item" })
</div>
</li>
}
else
{
<li class="nav-item">
@Html.ActionLink("Sign In", "SignIn", "Account", new { area = "" }, new { @class = "nav-link" })
</li>
}
</ul>
</div>
</div>
</nav>
<main role="main" class="container">
@foreach (var alert in alerts)
{
<div class="alert alert-danger" role="alert">
<p class="mb-3">@alert.Message</p>
@if (!string.IsNullOrEmpty(alert.Debug))
{
<pre class="alert-pre border bg-light p-2"><code>@alert.Debug</code></pre>
}
</div>
}
@RenderBody()
</main>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
Remarque
Ce code ajoute Bootstrap pour la mise en forme simple et Font Awesome pour certaines icônes simples. Il définit également la disposition globale avec une barre de navigation et utilise la classe Alert pour afficher des alertes.
Ouvrez Content/Site.css et remplacez l’intégralité de son contenu par le code suivant.
body {
padding-top: 4.5rem;
}
.alert-pre {
word-wrap: break-word;
word-break: break-all;
white-space: pre-wrap;
}
Ouvrez le fichier Views/Home/index.cshtml et remplacez son contenu par le code suivant.
@{
ViewBag.Current = "Home";
}
<div class="jumbotron">
<h1>ASP.NET Graph Tutorial</h1>
<p class="lead">This sample app shows how to use the Microsoft Graph API to access a user's data from ASP.NET</p>
@if (Request.IsAuthenticated)
{
<h4>Welcome @ViewBag.User.DisplayName!</h4>
<p>Use the navigation bar at the top of the page to get started.</p>
}
else
{
@Html.ActionLink("Click here to sign in", "SignIn", "Account", new { area = "" }, new { @class = "btn btn-primary btn-large" })
}
</div>
Cliquez avec le bouton droit sur le dossier Contrôleurs dans l’Explorateur de solutions, puis sélectionnez Ajouter un > contrôleur.... Choisissez Contrôleur MVC 5 - Vide , puis sélectionnez Ajouter. Nommez le contrôleur BaseController puis sélectionnez Ajouter. Remplacez le contenu du fichier BaseController.cs par le code suivant :
using graph_tutorial.Models;
using System.Collections.Generic;
using System.Web.Mvc;
namespace graph_tutorial.Controllers
{
public abstract class BaseController : Controller
{
protected void Flash(string message, string debug=null)
{
var alerts = TempData.ContainsKey(Alert.AlertKey) ?
(List<Alert>)TempData[Alert.AlertKey] :
new List<Alert>();
alerts.Add(new Alert
{
Message = message,
Debug = debug
});
TempData[Alert.AlertKey] = alerts;
}
}
}
Ouvrez Controllers/HomeController.cs et remplacez la ligne public class HomeController : Controller par :
public class HomeController : BaseController
Enregistrez toutes vos modifications et redémarrez le serveur. L’apparence de l’application doit maintenant être différente.
Créer une application Microsoft Entra
Dans cette section, vous allez créer une inscription d’application web Microsoft Entra à l’aide du Centre d’administration Microsoft Entra.
Déterminez l'URL HTTPS de votre application ASP.NET. Dans l’Explorateur de solutions de Visual Studio, sélectionnez le projet graph-tutorial. Dans la fenêtre Propriétés, cherchez la valeur de l’URL SSL. Copiez cette valeur.
Ouvrez un navigateur et accédez au Centre d’administration Microsoft Entra (https://aad.portal.azure.com). Connectez-vous à l’aide d’un Compte professionnel ou scolaire possédant des droits d’administrateur général sur l’entreprise.
Sélectionnez Id Microsoft Entra dans le volet de navigation gauche.
Sélectionnez Gérer> inscriptions d'applications dans le volet de navigation gauche.
Sur la page Inscriptions d’applications, sélectionnez Nouvelle inscription.
Sélectionnez Nouvelle inscription. Sur la page Inscrire une application, définissez les valeurs comme suit.
- Dans le champ Nom, entrez Didacticiel ASP.NET Graph.
- Définissez les Types de comptes pris en charge sur Comptes dans un annuaire organisationnel et comptes personnels Microsoft.
- Sous URI de redirection, définissez la première flèche déroulante sur Web et la valeur sur l’URL d’application ASP.NET que vous avez obtenue précédemment dans cette section.
Sélectionner Inscription. Dans la page Didacticiel Graph ASP.NET, copiez la valeur de l’ID d’application (client) et enregistrez-la, car vous en aurez besoin à l’étape suivante.
Sous Gérer, sélectionnez Authentification. Recherchez la section Octroi implicite et de flux hybrides et activez les jetons d’ID (utilisés pour les flux implicites et hybrides).
Sélectionnez Enregistrer dans le menu du haut pour enregistrer vos modifications.
Sélectionnez Certificats et secrets sous Gérer. Sélectionnez le bouton Nouveau secret client. Entrez une valeur dans Description, sélectionnez une des options pour Expire le, puis sélectionnez Ajouter.
Copiez la valeur due la clé secrète client avant de quitter cette page. Vous en aurez besoin à l'étape suivante.
Importante
Ce secret client n’apparaîtra plus jamais, aussi veillez à le copier maintenant.
Résumé
Dans cet exercice, vous avez créé une application web ASP.NET MVC avec Visual Studio et l’application Microsoft Entra avec le Centre d’administration Microsoft Entra. Une fois l’application créée, vous avez ajouté les packages et bibliothèques nécessaires qui prennent en charge l’authentification des utilisateurs et la demande de données à partir de Microsoft Graph.