Mostefai Mohammed Amine's Blog

Say That I Was Here !

Tutoriel 9.1–Création d’une application ASP.NET sécurisée

L’objectif de ce tutoriel (appliquant le module 9) est d’apprendre à utiliser les fournisseurs SQL fournis par ASP.NET pour la mise en place d’une application sécurisée. Etape 1 : Création de la base de données L’objectif de cette étape est de créer la base de données ASPNETDB permettant de réutiliser une base de données dans les tâches quotidiennes d’administration sans avoir à réécrire les fournisseurs. Lancez l’explorateur de Windows Allez jusqu’au dossier d’installation du .NET Framework qui est dans le dossier d’installation de Windows Localisez la dernière version du .NET Framework Ouvrez le répertoire de la dernière version Localisez le programme « aspnet_regsql » et lancez-le, un assistant apparaît Cliquez sur « Suivant » Cochez « Configurer SQL Server pour les services d’application »     Cliquez sur « suivant » Entrez le nom du serveur SQL dans lequel sera installée la base Dans « Base de données », laissez « par défaut » ss Cliquez sur « Suivant » deux fois L’assistant devrait s’exécuter sans problèmes Ouvrez SQL Server Management Studio Remarquez la présence d’une nouvelle base de données appelée « aspnetdb » Etape 2 : Préparation de l’Application Le but de cette étape est de préparer le cadre de l’application. L’application sera composée de quatre pages : accueil, login et deux autres pages localisées dans deux répertoires : « Secure » et « Admin » où « Admin » est un sous-répertoire de « Admin ». Les règles sont les suivantes : tous les utilisateurs connectés accèderont au contenu du répertoire « Secure » tandis que le répertoire « Admin » ne pourra être accédé que par les utilisateurs appartenant au rôle « Admin ». Le site sera structuré comme suit : un menu en haut contenant les liens des différents sites et un pied en bas contenant le nom de l’utilisateur en cours et un lien pour se connecter / déconnecter. Ouvrez VS 2012 Créez une nouvelle applications ASP.NET vide appelée « TestComptes » Dans le projet, créez un répertoire appelé « Secure » Dans le répertoire «Secure », créez un sous-répertoire appelé « Admin » Ajoutez une page maître et nommez-la « Main.master » Ouvrez « Main.master » en mode source Dans l’attribut 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 éléments « li » dans la première « ul » et deux balises « li » dans la deuxième « ul » Ouvrez « Main.master » en mode design Glissez un composant « HyperLink » dans chacun des éléments de la liste Dans la deuxième liste « ul », glissez un composant « LoginName » dans la première « li » Dans la deuxième liste « ul », glissez un composant « LoginStatus » dans la deuxième « li » Dans le répertoire racine Créez une forme web avec page maître « Main » appelée « Default.aspx » Dans le répertoire racine, créez une forme web avec page maître « Main » appelée « Login.aspx » Dans le répertoire « Secure », ajoutez une forme web avec page maître « Main » appelée « Page1.aspx » Dans le répertoire « Admin », ajoutez une forme web avec page maître « Main » appelée 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> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Ouvrez la page « Login.aspx » en mode design Glissez un composant « Login » sur la page Ajoutez une feuille de style appelée « 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; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 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 l’instruction « Install-Package », installez les paquets « JQuery » puis « AspNet.ScriptManager.JQuery » Exécutez en appuyant sur « F5 » pour voir la structure du site Etape 3 : Configuration Le but de cette étape est de configurer l’application de façon à ce qu’elle se base sur la base « aspnetdb » pour l’authentification et l’autorisation Ouvrez le fichier web.config Dans la section « configuration », ajoutez une chaîne de connexion pointant sur la base de données « aspnetdb », celle qui est en dessous est un exemple <connectionStrings> <add name="comptesDB" connectionString="Data Source=.;Initial Catalog=aspnetdb;Integrated Security=SSPI;" /> </connectionStrings> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } On va configurer l’application de façon à ce qu’elle prenne le mécanisme « Forms » pour l’authentification. Dès que l’application demande à l’utilisateur de s’authentifier, 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> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } On va configurer l’application de façon à ce qu’elle 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> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } On va maintenant, configurer l’application de façon à ce qu’elle en prenne en charge les rôles 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> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }   Etape 4 : Création des utilisateurs et des rôles Le but de cette étape est d’utiliser l’outil de configuration ASP.NET pour créer les utilisateurs et les rôles. Nous créerons deux utilisateurs « simple » et « admin ». Les deux appartiennent au rôle « simple » tandis que le rôle « admin » n’inclut que l’utilisateur « admin ». Dans le menu « projet », cliquez sur « Configuration ASP.NET » L’application suivante apparaît Cliquez sur « Sécurité » Cliquez sur « Créer un utilisateur » Ajoutez l’utilisateur « simple », mot de passe : « simple$$ », confirmation : « simple$$ », adresse : « simple@hotmail.com », question : « question » et réponse : « réponse ». Ajoutez un autre utilisateur « admin », mot de passe : « admin$$ », confirmation : « admin$$ », adresse : « admin@hotmail.com », question : « question », réponse : « réponse » Cliquez sur l’onglet « Sécurit » Cliquez sur « Ajouter ou gérer les rôles » Ajoutez un rôle « simple » puis le rôle « admin » A droite du rôle « admin », cliquez sur le lien « gérer » Cliquez sur le lien « tous » Cochez sur l’utilisateur « admin » Cliquez sur le lien « Précédent » A droit du rôle « simple », cliquez sur « Gérer » Ajoutez les deux utilisateurs au rôle « simple » Etape 5 : Sécurisation des zones En utilisant les rôles créés précédemment, nous ne permettrons l’accès la zone « Secure » qu’au rôle « simple » ou « admin » et la zone « admin » uniquement au rôle « admin ». Revenez dans VS Ajoutez un fichier de configuration dans le répertoire « Secure » Dans la section « system.web », ajoutez la section « authorization » comme suit : <authorization> <allow roles="simple,admin"/> <deny users="*" /> </authorization> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } La première instruction « allow » indique que la zone peut être accédée par les rôles « simple » et « admin » La deuxième section « deny » indique que l’accès est refusé à tout autre utilisateur n’appartenant pas à ces deux rôles Dans le répertoire « Admin », ajoutez un fichier de configuration Ajoutez la section « authorization » comme suit : <authorization> <allow roles="admin"/> <deny users="*" /> </authorization> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Exécutez en appuyant sur « F5 » Cliquez sur le lien « Page1 » Authentifiez-vous avec (admin,admin$$) Remarquez que vous avez accès à toutes les pages Déconnectez-vous Authentifiez-vous avec (simple,simple$$) Remarquez que ce login, n’a accès qu’à la page 1 Pour télécharger le code, cliquez ici

Développement d’applications de bases de données avec ASP.NET, Module 6

Un module bien important qui montre l’utilisation des différentes technologies .NET permettant de connecter des applications .NET à une application ASP.NET. à noter que la base de données AdventureWorks est nécessaire pour les tutoriaux. Tutoriaux associés : Tutoriel 6.1 : Connexion aux bases de données en utilisant ADO.NET Tutoriel 6.2 : Connexion à une base de données en utilisant Entity Framework Tutoriel 6.3 : Connexion des contrôles aux bases de données