Tutoriel 9.1Cration dune application ASP.

NET
scurise
23. fvrier 2014 Amine ASP.NET, Database, Security, SQL Server (0)

Lobjectif de ce tutoriel (appliquant le module 9) est dapprendre utiliser les fournisseurs

SQL fournis par ASP.NET pour la mise en place dune application scurise.

Etape 1 : Cration de la base de donnes

Lobjectif de cette tape est de crer la base de donnes ASPNETDB permettant de rutiliser
une base de donnes dans les tches quotidiennes dadministration sans avoir rcrire les
fournisseurs.

Lancez lexplorateur de Windows

Allez jusquau dossier dinstallation du .NET Framework qui est dans le dossier
dinstallation de Windows

Localisez la dernire version du .NET Framework

Ouvrez le rpertoire de la dernire version

Localisez le programme aspnet_regsql et lancez-le, un assistant apparat

Cliquez sur Suivant

Cochez Configurer SQL Server pour les services dapplication

Cliquez sur suivant

Entrez le nom du serveur SQL dans lequel sera installe la base

Dans Base de donnes , laissez par dfaut

ss

Cliquez sur Suivant deux fois

Lassistant devrait sexcuter sans problmes

Ouvrez SQL Server Management Studio

Remarquez la prsence dune nouvelle base de donnes appele aspnetdb

Etape 2 : Prparation de lApplication

Le but de cette tape est de prparer le cadre de lapplication. Lapplication sera compose de
quatre pages : accueil, login et deux autres pages localises dans deux rpertoires : Secure
et Admin o Admin est un sous-rpertoire de Admin . Les rgles sont les suivantes :
tous les utilisateurs connects accderont au contenu du rpertoire Secure tandis que le
rpertoire Admin ne pourra tre accd que par les utilisateurs appartenant au rle
Admin . Le site sera structur comme suit : un menu en haut contenant les liens des
diffrents sites et un pied en bas contenant le nom de lutilisateur en cours et un lien pour se
connecter / dconnecter.

Ouvrez VS 2012

Crez une nouvelle applications ASP.NET vide appele TestComptes

Dans le projet, crez un rpertoire appel Secure

Dans le rpertoire Secure , crez un sous-rpertoire appel Admin

Ajoutez une page matre et nommez-la Main.master

Ouvrez Main.master en mode source

Dans lattribut classe de la div, entrez content

Ajoutez une balise header avant la div

Ajoutez une balise footer dans la div

Ajoutez une balise ul dans header et une autre balise ul dans footer

Ajoutez trois lments li dans la premire ul et deux balises li dans la

deuxime ul

Ouvrez Main.master en mode design

Glissez un composant HyperLink dans chacun des lments de la liste

Dans la deuxime liste ul , glissez un composant LoginName dans la premire

li

Dans la deuxime liste ul , glissez un composant LoginStatus dans la deuxime

li

Dans le rpertoire racine Crez une forme web avec page matre Main appele
Default.aspx

Dans le rpertoire racine, crez une forme web avec page matre Main appele
Login.aspx

Dans le rpertoire Secure , ajoutez une forme web avec page matre Main
appele Page1.aspx

Dans le rpertoire Admin , ajoutez une forme web avec page matre Main
appele page2

Tapez le texte Accueil , Page1 et Page2 dans les pages Default.aspx ,

Page1.aspx et Page2.aspx respectivement

Ouvrez Main.master en mode design

Pointez les trois liens sur les pages default.aspx , page1.aspx et page2.aspx
respectivement.

Le code de Main.master devra tre comme suit :

<form id="form1" runat="server">
<header>
<ul>
<li>
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl="~/Default.aspx">Accueil</asp:HyperLink>
</li>
<li>
<asp:HyperLink ID="HyperLink2" runat="server"
NavigateUrl="~/Secure/Page1.aspx">Page 1</asp:HyperLink>
</li>
<li>
<asp:HyperLink ID="HyperLink3" runat="server"
NavigateUrl="~/Secure/Admin/Page2.aspx">Page2</asp:HyperLink>
</li>
</ul>
</header>
<div class="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1"
runat="server">
</asp:ContentPlaceHolder>
</div>
<footer>
<ul>

<li>
<asp:LoginName ID="LoginName1" runat="server" />
</li>
<li>
<asp:LoginStatus ID="LoginStatus1" runat="server" />
</li>
</ul>
</footer>
</form>

Ouvrez la page Login.aspx en mode design

Glissez un composant Login sur la page

Ajoutez une feuille de style appele Site.css

Collez dedans le code CSS suivant :

body, form {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
'Lucida Sans', Arial, sans-serif;
margin: 0;
padding: 0;
}

header {
border-width: 7px;
border-color: #F3C972;
background-color: #6CB6FF;
border-bottom-style: solid;
margin: 0;
padding: 1em 1em 0em 1em;
}
header ul, footer ul {
margin: 0;
padding: 0;

list-style: none;
}
header ul li, footer ul li {
display: inline-block;
margin-right: 1em;
padding: 0.5em;
}
header ul li:hover {
background-color: #F3C972;
}
header a {
color: black;
text-decoration: none;
}
div.content {
min-height: 400px;
}

Ouvrez Main.master en mode design

Glissez Site.css sur la page pour appliquer le style

Ouvrez la console de gestion des paquets Nuget

En utilisant linstruction Install-Package , installez les paquets JQuery puis

AspNet.ScriptManager.JQuery

Excutez en appuyant sur F5 pour voir la structure du site

Etape 3 : Configuration
Le but de cette tape est de configurer lapplication de faon ce quelle se base sur la base
aspnetdb pour lauthentification et lautorisation

Ouvrez le fichier web.config

Dans la section configuration , ajoutez une chane de connexion pointant sur la base
de donnes aspnetdb , celle qui est en dessous est un exemple

<connectionStrings>
<add name="comptesDB" connectionString="Data Source=.;Initial
Catalog=aspnetdb;Integrated Security=SSPI;" />
</connectionStrings>

On va configurer lapplication de faon ce quelle prenne le mcanisme Forms

pour lauthentification. Ds que lapplication demande lutilisateur de sauthentifier,
elle le redirige vers la page Login.aspx

Dans la section system.web , ajoutez une section authentifcation comme suit :

<authentication mode="Forms" >

<forms loginUrl="~/Login.aspx">
</forms>
</authentication>

On va configurer lapplication de faon ce quelle utilise le fournisseur SQL pour

identifier et valider les utilisateurs.

Dans la section system.web , ajoutez une section membership comme suit :

<membership defaultProvider="SqlProvider"
userIsOnlineTimeWindow="15">
<providers>
<clear />
<add
name="SqlProvider"
type="System.Web.Security.SqlMembershipProvider"
connectionStringName="comptesDB"
applicationName="TestComptes"
enablePasswordRetrieval="false"
enablePasswordReset="true"
requiresQuestionAndAnswer="true"
requiresUniqueEmail="true"
passwordFormat="Hashed" />

</providers>
</membership>

On va maintenant, configurer lapplication de faon ce quelle en prenne en charge

les rles

Dans la section system.web , ajoutez une section roleManager comme suit :

<roleManager enabled="true" defaultProvider="roleProvider" >

<providers>
<clear/>
<add
name="roleProvider"
type="System.Web.Security.SqlRoleProvider"
connectionStringName="comptesDB"
applicationName="TestComptes" />
</providers>
</roleManager>

Etape 4 : Cration des utilisateurs et des rles

Le but de cette tape est dutiliser loutil de configuration ASP.NET pour crer les utilisateurs
et les rles. Nous crerons deux utilisateurs simple et admin . Les deux appartiennent
au rle simple tandis que le rle admin ninclut que lutilisateur admin .

Dans le menu projet , cliquez sur Configuration ASP.NET

Lapplication suivante apparat

Cliquez sur Scurit

Cliquez sur Crer un utilisateur

Ajoutez lutilisateur simple , mot de passe : simple$$ , confirmation : simple$

$ , adresse : simple@hotmail.com , question : question et rponse : rponse
.

Ajoutez un autre utilisateur admin , mot de passe : admin$$ , confirmation :

admin$$ , adresse : admin@hotmail.com , question : question , rponse :
rponse

Cliquez sur longlet Scurit

Cliquez sur Ajouter ou grer les rles

Ajoutez un rle simple puis le rle admin

A droite du rle admin , cliquez sur le lien grer

Cliquez sur le lien tous

Cochez sur lutilisateur admin

Cliquez sur le lien Prcdent

A droit du rle simple , cliquez sur Grer

Ajoutez les deux utilisateurs au rle simple

Etape 5 : Scurisation des zones

En utilisant les rles crs prcdemment, nous ne permettrons laccs la zone Secure
quau rle simple ou admin et la zone admin uniquement au rle admin .
Revenez dans VS
Ajoutez un fichier de configuration dans le rpertoire Secure
Dans la section system.web , ajoutez la section authorization comme suit :
<authorization>
<allow roles="simple,admin"/>
<deny users="*" />
</authorization>

La premire instruction allow indique que la zone peut tre accde par les rles
simple et admin

La deuxime section deny indique que laccs est refus tout autre utilisateur
nappartenant pas ces deux rles

Dans le rpertoire Admin , ajoutez un fichier de configuration

Ajoutez la section authorization comme suit :

<authorization>

<allow roles="admin"/>

<deny users="*" />

</authorization>

Excutez en appuyant sur F5

Cliquez sur le lien Page1

Authentifiez-vous avec (admin,admin$$)

Remarquez que vous avez accs toutes les pages

Dconnectez-vous

Authentifiez-vous avec (simple,simple$$)

Remarquez que ce login, na accs qu la page 1

Pour tlcharger le code, cliquez ici

Mots-cls : ASP.NET, Database, S