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

image

  • Ouvrez le répertoire de la dernière version
  • Localisez le programme « aspnet_regsql » et lancez-le, un assistant apparaît

image

  • Cliquez sur « Suivant »
  • Cochez « Configurer SQL Server pour les services d’application »

image

 

 

  • 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 »

image

ss

  • Cliquez sur « Suivant » deux fois
  • L’assistant devrait s’exécuter sans problèmes

image

  • Ouvrez SQL Server Management Studio
  • Remarquez la présence d’une nouvelle base de données appelée « aspnetdb »

image

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 »
image
  • 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>
  • 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;
}
  • 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>
  • 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>
  • 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>
  • 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>

 

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
image
  • Cliquez sur « Sécurité »
image
  • Cliquez sur « Créer un utilisateur »
image
  • 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 »
image
  • Ajoutez un rôle « simple » puis le rôle « admin »
image
  • A droite du rôle « admin », cliquez sur le lien « gérer »
  • Cliquez sur le lien « tous »
  • Cochez sur l’utilisateur « admin »
image
  • 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>
  • 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>
  • 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
image

Pour télécharger le code, cliquez ici

Comments (1) -

  • 23545 772865fantastic . Thanks for  informations . Ill be back. Thanks once more 609371

Add comment

Loading