Coach Web Dev Atelier 05
Coach Web Dev Atelier 05
Coach Web Dev Atelier 05
Sommaire
1 INTRODUCTION .................................................................................................................................................... 3
1.1 CONTEXTE FONCTIONNEL .................................................................................................................................... 3
1.2 CONTEXTE TECHNIQUE ........................................................................................................................................ 4
2 CREER LES PAGES DE GESTION DE L’AUTHENTIFICATION ................................................................. 5
2.1 CREER UNE PAGE D’ENREGISTREMENT D’UN NOUVEL UTILISATEUR .................................................................... 5
2.2 CREER UNE PAGE D’AUTHENTIFICATION (LOGIN) .............................................................................................. 11
3 PARAMETRER L’AUTHENTIFICATION ET L’AUTORISATION ............................................................. 14
3.1 CONFIGURER L’AUTHENTIFICATION EN MODE FORMULAIRE .............................................................................. 14
3.2 CONFIGURER LA GESTION DES ROLES ................................................................................................................ 15
3.3 PREPARER LA STRUCTURE DE REPERTOIRE DES PAGES WEB ............................................................................... 18
3.4 CREER DES REGLES D’AUTORISATION ................................................................................................................ 20
3.5 CONTROLER LA VISIBILITE DES LIENS DANS LA NAVIGATION ............................................................................. 22
4 AFFICHER DES INFORMATIONS PERSONNALISEES ............................................................................... 26
4.1 AFFICHER UN MENU PERSONNALISE .................................................................................................................. 26
4.2 AFFICHER UN MESSAGE DE BIENVENUE PERSONNALISE ..................................................................................... 27
5 POUR ALLER PLUS LOIN… .............................................................................................................................. 32
5.1 VALIDER LE FORMAT DES PARAMETRES D’ACCES .............................................................................................. 32
5.2 METTRE LES ROLES EN CACHE ........................................................................................................................... 32
6 RENDEZ-VOUS DANS LE PROCHAIN ATELIER… ...................................................................................... 33
1 Introduction
Cet atelier s’inscrit dans le cadre du tutorial de découverte de ASP.NET 2.0 dont l’objectif est la construction
d’une application web pas à pas.
Les exercices de l’atelier 5 présentent les techniques de mise en œuvre de la sécurité avec ASP.NET 2.0.
Récupérez les fichiers de solution de l’atelier précédent dans le répertoire ..\Atelier 5\Démarrage.
Il se trouve que toutes les pages web de votre application ne sont pas accessibles à tout le monde. C’est
pourquoi vous allez mettre en place un certain nombre de règles de sécurité et proposer à l’utilisateur de
s’authentifier pour contrôler ses déplacements et ses agissements dans le site.
(Dans le prochain atelier, vous ajouterez également la possibilité pour l’utilisateur de sauvegarder sa
sélection d’annonces parmi les annonces qu’il a retenues sur le site.)
DiffuserAnnonceTerminee.aspx
d. Pour répondre à l’enquête de satisfaction de la page d’accueil, il faut être authentifié et
connu du site :
EnqueteSatisfaction.aspx
EnqueteSatisfactionTerminee.aspx
Objectif
L’objectif de cet exercice est de créer une page pour qu’un utilisateur puisse s’authentifier sur le site.
Contexte fonctionnel
L’objectif de cet exercice est de construire une page Login.aspx proposant à l’utilisateur :
- s’il est déjà « membre » de la communauté des utilisateurs du site : de saisir ses paramètres
d’accès pour se connecter.
- S’il ne s’est encore jamais enregistré auprès de AffairesSansRisque : de répondre à un
questionnaire et de définir ses paramètres d’accès au site.
Ce contrôle hérite du nouveau contrôle avancé Wizard de ASP.NET 2.0 ( Pour rappel, vous l’avez utilisé
à l’atelier 2 pour la mise en œuvre de l’enquête de satisfaction du site) et propose donc plusieurs étapes
(WizardSteps) personnalisables. L’étape par défaut actuelle est Inscrivez-vous pour obtenir votre
nouveau compte. Vous pouvez ajouter de nouvelles étapes en cliquant sur Ajouter/Supprimer
WizardSteps.
Ce contrôle n’est donc pas seulement une représentation graphique ! Il est capable de proposer à
l’utilisateur une succession d’écrans et va bien sûr s’occuper de faire l’enregistrement de l’utilisateur pour
nous dans une base de données. Regardons cela de plus près…
Les contrôles de
validation de ASP.NET
2.0 détectent le
problème. Ils génèrent
en effet du script client
sur votre page.
Corrigez les deux mots de passe pour qu’ils soient identiques et cliquez sur Créer un
utilisateur. Vous obtenez l’écran de la seconde étape :
Par contre si vous cliquez sur Continuer, vous restez sur la même page...ce n’est pas très logique…
Sauvegardez et ré exécutez la page pour créer un autre utilisateur et valider le transfert sur
la page d’accueil lors de la dernière étape.
Cette base de données contient en fait toutes les tables et les éléments pour la sauvegarde des
données de tous les services de ASP.NET 2.0 : aspnet_Membership pour le service d’appartenance,
aspnet_Roles pour la gestion des rôles etc…
Elle a été créée automatiquement (merci ASP.NET 2.0 !) au moment où vous avez insérer un premier
utilisateur avec le contrôle CreateUserWizard. Pour la créer vous-même directement, utilisez l’utilitaire
aspnet_regsql (déjà vu à l’atelier 4 pour configurer la dépendance de cache sur SQL Server Express). Cet
assistant vous guide dans la création de la base de données que vous souhaitez mettre en œuvre.
Automne 2005 Tutorial Découverte de ASP.NET 2.0 Page 8 sur 33
Microsoft Sécuriser l’application web – Atelier 5
Voilà où ont été mémorisées les informations d’enregistrement des deux comptes nouvellement créés.
Remarquez qu’ASP.NET a encrypté les données confidentielles.
Vous pouvez choisir votre propre système de sauvegarde et personnaliser complètement la gestion
de l’enregistrement d’un compte puisque le service d’appartenance de ASP.NET 2.0 s’appuie sur un
fournisseur. Il vous suffit d’écrire votre propre fournisseur.
Vous avez vu également dans l’atelier précédent l’utilitaire aspnet_regsql qui permet de préparer une base
de données quelconque à la sauvegarde des données de tous les services d’ASP.NET 2.0.
8. Il ne reste plus qu’à retravailler le style du contrôle CreateUserWizard pour améliorer le rendu de la
page :
Ouvrez la page Login.aspx en mode Source pour observer la représentation du contrôle
<asp :CreateUserWizard> :
Vous constatez que le contrôle contient une collection d’étapes <WizardSteps> contenant ici les étapes
intégrées à ASP.NET 2.0 <asp :CreateUserWizardStep> et <asp :CompleteWizardStep>. Notez
également la propriété ContinueDestinationPageUrl qui redirige l’utilisateur sur la page Default.aspx en fin
d’enregistrement.
L’idéal serait d’ajouter une définition des caractéristiques graphiques du contrôle au fichier
d’apparence Default.skin de l’application (cf. atelier 2). Vous retrouvez les nombreuses propriétés de style
pour les différentes parties du contrôle dans sa fenêtre de propriétés.
Nous allons implémenter notre propre mise en forme et surtout personnaliser le dessin de
chacune des étapes. Pour cela, toujours dans la balise active du contrôle, sélectionnez
Personnaliser l’étape Créer un utilisateur.
Chaque contrôle est maintenant disponible dans une structure tableau HTML, y compris les contrôles de
validation et d’affichage des messages d’erreur. Vous pouvez donc le remodeler comme vous le souhaiter.
Prenez plutôt l’habitude d’avoir recours au balisage structurel (balises <div>) et à la feuille de style.
Pour simplifier, dans cet exercice, vous allez juste apporter quelques modifications de contenu.
Notez que le menu dans la balise active propose maintenant l’option Réinitialiser l’étape pour le cas
où vous souhaiteriez annuler.
…
<td align="left" colspan="2">
<h1>Vous souhaitez devenir membre de notre espace annonces en ligne :</h1>
<h2>Créez votre compte. Tous les champs suivants sont obligatoires pour la création de
votre espace personnel.</h2>
</td>
…
La balise <ContentTemplate>
délimite le modèle de contenu
pour le contrôle
<asp :CompleteWizardStep>.
Ne laissez que cette ligne de
texte (alignée à gauche).
Vous remarquez que l’on a supprimé également le bouton Continue car il va s’avérer inutile pour la
suite de l’exercice (vous allez comprendre pourquoi dans le § suivant). Vous pouvez donc supprimer aussi
l’attribut ContinueDestinationPageUrl="~/Default.aspx" dans la définition du contrôle
<asp :CreateUserWizard>.
Note :
Déroulement de l’exercice :
Faites un glisser déplacer de la Boîte à outils > rubrique Connexion > Login sur le
contrôle Content1 de la page au dessus du contrôle CreateUserWizard.
Basculez en mode Source puis insérez une ligne de séparation entre les deux contrôles
serveur avec la balise <hr/>.
…
<td align="left" colspan="2">
<h1>Vous êtes déjà membre :</h1>
<h2> Saisissez vos paramètres d'accès.</h2>
</td>
…
Créez un nouveau compte utilisateur (vous pouvez essayer de créer deux fois de suite le
même compte, le contrôle CreateUserWizard vous renverra un message d’erreur dans sa
zone de message).
Zone d’authentification
directement disponible
après l’enregistrement.
Message de fin
d’enregistrement
Note :
Objectif
L’objectif de cet exercice est de configurer l’application web pour qu’elle fonctionne avec l’authentification
ASP.NET en mode formulaire, de définir des rôles utilisateurs et des règles d’accès aux pages du site en
fonction de ceux-ci.
Contexte fonctionnel
L’application AffairesSansRisque autorise certains utilisateurs à administrer les annonces du site (page
AdministrerAnnonces.aspx). Pour faire cette distinction, vous allez créer un rôle appelé Administrateurs et
placer dans ce rôle un nouveau compte appelé Admin.
Avant de mettre en place de règles d’accès, vous allez restructurer le répertoire du projet pour rassembler
les pages en fonction des utilisateurs y ayant accès dans des sous répertoires [0] et [1] :
Note :
Déroulement de l’exercice :
Notez dans la barre de tâche le lancement du site web dans le serveur web intégré à VWD :
http//localhost :<n° port>/asp.netwebadminfiles
L’outil de configuration est en effet une application web dédiée à la configuration de votre application web.
Remarquez la rubrique Utilisateurs qui vous permet de créer, supprimer, désactiver les utilisateurs qui
se sont enregistrés sur le site.
Vous auriez pu configurer la sécurité en mode formulaire au § 3.1 en cliquant sur Sélectionnez le type
d’authentification pour générer automatiquement la balise <authentication> du fichier Web.config.
Vous reconnaissez cet écran ? Vous venez de dérouler les deux étapes du contrôle
CreateUserWizard….
4. Créez un rôle Administrateurs pour les utilisateurs qui auront l’autorisation d’administrer des
annonces.
Cliquez sur Créer ou gérer des rôles.
Saisissez : Administrateurs
Note :
Déroulement de l’exercice :
1. Créez un répertoire pour les pages accessibles uniquement au rôle des Administrateurs du site :
Dans l’Explorateur de solutions, faites un clic droit sur la racine du projet > Ajouter un
dossier > Dossier normal.
Nommez le dossier : 0.
Faites un glisser déplacer dans ce dossier des pages AdministrerAnnonces.aspx et
DetailsAnnonce.aspx.
2. Répétez l’opération pour les pages accessibles aux utilisateurs authentifiés et nommez le
répertoire : 1.
3. Ouvrez le fichier Plan de site Web.sitemap pour mettre à jour les liens de navigation vers les pages
DiffuserAnnonce.aspx et AdministrerAnnonces.aspx dans les menus :
4. Ouvrez la page le code de la page Default.aspx. Mettez à jour le lien hypertexte vers la page
EnqueteSatisfaction.aspx dans la ligne de code qui charge dynamiquement le pied de page de la
page maître : …<a href=1/EnqueteSatisfaction.aspx>…
Sauvegardez le fichier.
Note :
Déroulement de l’exercice :
Attention cette règle d’accès ne suffit pas pour obtenir le comportement que vous souhaitez. En effet,
par défaut, n’importe quel utilisateur anonyme a accès à toutes les pages. Donc ce n’est pas en
autorisant le rôle Administrateurs que vous évitez cela. Il vous faut rajouter la règle suivante qui garantit que
en effet, seul les Administrateurs auront accès à ce répertoire car tous les autres utilisateurs n’y ont plus
droit !
4. Ajoutez une règle qui n’autorise l’accès au répertoire 1 que pour les utilisateurs authentifiés.
Il est intéressant de voir que, compte tenu du formalisme utilisé par ASP.NET, vous êtes amené à
prendre le problème à l’envers et à considérer que vous devez refuser l’accès aux utilisateurs anonymes.
7. Exécutez l’application (CTRL F5) pour tester le nouveau comportement du site maintenant sécurisé :
Dans la page d’accueil, cliquez dans le pied de page sur le lien Enquête de satisfaction.
Vous devez être redirigé sur la page de login par ASP.NET qui détecte que vous êtes un utilisateur
anonyme donc qu’il faut vous authentifier avant de pouvoir prétendre consulter la page demandée !
C’est là, vous l’avez compris, tout l’intérêt de l’authentification par formulaire que vous avez
configurée au § 3.1. ASP.NET sait (grâce aux informations lues dans le fichier Web.config) que si les
autorisations d’accès ne le permettent pas, il doit automatiquement présenter à l’utilisateur le formulaire de
login que vous avez construit (par défaut il cherche une page login.aspx). Ensuite, le service d’appartenance
de ASP.NET 2.0 valide que les paramètres d’accès sont corrects. Enfin ASP.NET redirige automatiquement
l’utilisateur sur la page initialement demandée. Le tout (merci ASP.NET !) sans une seule ligne de code…
Saisissez les paramètres d’accès d’un utilisateur du site dans la fenêtre de login > Se
connecter.
Une fois authentifié, vous êtes alors redirigé automatiquement vers la page que vous aviez
demandé initialement, à savoir EnqueteSatisfaction.aspx.
L’enquête est
maintenant accessible.
Note :
L’utilisateur peut
diffuser une annonce.
Par contre, il faut vous identifier en tant qu’administrateur pour voir apparaître le menu Administrer les
annonces :
Menu vu par
l’utilisateur Admin
une fois authentifié.
Cette fonctionnalité s’appuie directement sur les règles d’accès définies sur les urls des pages (et sur les
permissions éventuelles de fichier également) pour déterminer quels sont les liens à cacher dans les menus.
Vous allez désactiver la fonctionnalité pour mettre en évidence son fonctionnement.
Déroulement de l’exercice :
2. Exécutez l’application (CTRL F5) et observez que tous les menus sont maintenant visibles pour
l’utilisateur anonyme. Le filtrage des liens a été désactivé.
Vous pouvez décider de donner les moyens à des utilisateurs n’ayant normalement pas d’accès aux
travers des règles de sécurité à certaines pages de voir quand même les liens correspondant dans les
menus en utilisant les rôles utilisateurs directement dans le fichier de plan de site web.sitemap de
l’application.
Imaginons que vous ayez un groupe d’utilisateurs pilote qui travaillent sur la mise en place et la validation du
site web pour lequel vous souhaitez donner la visibilité sur le menu d’administration des annonces.
Créez un nouveau rôle nommé UtilisateursAvecPouvoir (cf. point 4 de l’exercice 3.2 précédent).
Insérez un utilisateur du site dans ce groupe.
Ouvrez le fichier de plan de site web.sitemap.
Ajoutez l’attribut roles dans le nœud correspondant au menu à afficher malgré les règles d’accès
mises en place sur le site comme suit :
Ici, vous dites à ASP.NET que vous souhaitez rendre visible ce nœud au rôle des UtilisateursPilote, bien
que ce groupe d’utilisateurs n’ait pas d’accès à la page en question dans la sécurité que vous avez établie.
Exécutez l’application et vous verrez que votre utilisateur, une fois connecté, voit le lien sur la page
AdministrerAnnonces.aspx dans son menu. Malgré tout, il n’a pas d’accès sur cette page, puisqu’en
cliquant sur le lien, le site lui demande de s’authentifier, ne reconnaissant pas un utilisateur autorisé
à travailler sur cette url dans les règles d’accès du site.
Note :
- Utiliser les contrôles LoginView, LoginName et LoginStatus pour afficher un message personnalisé en
fonction de l’utilisateur en cours.
- Utiliser la classe Membership du service d’ appartenance.
Objectif
L’objectif de cet exercice est d’utiliser les contrôles de connexion LoginView, LoginName et LoginStatus pour
proposer à l’utilisateur un « espace membre » dans lequel il trouve des informations personnalisées.
Contexte fonctionnel
Vous allez ajouter à l’application une zone Espace membre.
Celle-ci propose :
- un bouton Connexion/Déconnexion dynamique qui propose à l’utilisateur de se connecter (ou au contraire
de se déconnecter s’il a déjà ouvert une session).
- un lien vers la sélection d’annonces enregistrée par l’utilisateur (cette fonctionnalité sera ensuite
implémentée dans le prochain atelier avec les profils).
- un message de bienvenue en fonction de l’utilisateur connecté :
<div id="liensEspaceMembre">
<ul class="link">
<li></li>
<li></li>
</ul>
</div>
<ul class="link">
<li><asp:LoginStatus ID="LoginStatus1" runat="server" /></li>
<li></li>
</ul>
3. Dans la seconde entrée <li>, ajoutez un lien hypertexte vers une page
MaSelectionDAnnonces.aspx proposant à l’utilisateur la liste de ses annonces « favorites » sur le
site :
Créez une nouvelle page MaSelectionDAnnonces.aspx à la racine du projet.
Dans la seconde entrée <li> faites un glisser déplacer de la Boîte à outils > rubrique
Standard > HyperLink.
Pointez dans la propriété NavigateUrl sur la page MaSelectionDAnnonces.aspx.
Saisissez un texte dans la propriété Text : Ma sélection d’annonces.
<ul class="link">
<li><asp:LoginStatus ID="LoginStatus1" runat="server" /></li>
<li><asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl="MaSelectionDAnnonces.aspx"
Text="Ma sélection d'annonces">
</asp:HyperLink>
</li>
</ul>
Vous pourriez ajouter ici un lien « changer mon mot de passe » vers une page
ChangerMotDePasse.aspx qui contiendrait un contrôle de connexion ChangePassword.
4. Sauvegardez la page maître (CTRL S) et lancez l’application (CTRL F5) pour tester le résultat.
1. Préparez dans la zone Espace membre une zone de contenu personnalisable en fonction de
l’utilisateur à l’aide du nouveau contrôle de connexion LoginView de ASP.NET 2.0 :
Automne 2005 Tutorial Découverte de ASP.NET 2.0 Page 27 sur 33
Microsoft Sécuriser l’application web – Atelier 5
Faites un glisser déplacer de la Boîte à outils > rubrique Connexion > LoginView sur la
page.
Basculez la page en mode Design.
<AnonymousTemplate>
<h2>Bienvenue ! Pour passer une annonce vous devez vous identifier.</h2>
</AnonymousTemplate>
<LoggedInTemplate>
<h2>Bonjour <asp:LoginName ID="LoginName1" runat="server" /> !<h2>
</LoggedInTemplate>
Vous obtenez :
<RoleGroups>
<asp:RoleGroup Roles="Administrateurs">
<ContentTemplate>
Bonjour
<asp:LoginName ID="LoginName2" runat="server" />
! Il y a actuellement
<asp:Label ID="Label1" runat="server" Text="Label"> </asp:Label>
utilisateurs connectés sur le site.
</ContentTemplate>
</asp:RoleGroup>
</RoleGroups>
6. Vous allez maintenant récupérer le nombre d’utilisateurs actuellement connectés sur le site pour
l’afficher dans le contrôle Label1. Pour cela, utilisez la classe Membership du service
d’appartenance de ASP.NET 2.0 qui permet de récupérer toutes sortes d’information sur la sécurité
de l’application.
Affichez la page en mode Design.
Double cliquez sur un espace vide de la page pour faire apparaître la page de code et
générer la procédure en réponse à l’évènement de chargement de la page Page_Load.
Saisissez le code suivant :
Code VB.NET
Code C#
protected void Page_Load(object sender, EventArgs e)
{
Label lblNbUtilisateursConnectes;
lblNbUtilisateursConnectes = (Label)LoginView1.FindControl("Label1");
if (lblNbUtilisateursConnectes !=null )
{
lblNbUtilisateursConnectes.Text = Membership.GetNumberOfUsersOnline().ToString();
}
}
Cette fonction récupère le nombre
d’utilisateurs ayant une session
ouverte.
Vous remarquez que le contrôle Label1 n’est pas accessible directement. Vous devez passer par son
container c’est-à-dire le contrôle LoginView1. En plus, le Label1 n’est instancié en mémoire que dans le cas
où c’est la vue le contenant qui est chargé.
Vous pouvez également utiliser les évènements ViewChanged et ViewChanging sur le contrôle pour
récupérer le changement de vue. Le contrôle a également des propriétés LoggedInTemplate,
AnonymousTemplate et ContentTemplate pour accéder aux différents modèles et RoleGroups pour
accéder à la collection des rôles.
Ouvrez une autre fenêtre d’Internet Explorer en récupérant l’adresse url en cours et
connectez vous avec un compte utilisateur du site.
Faites menu Affichage > Actualiser (F5) sur la fenêtre de l’utilisateur Admin pour observer
le message de bienvenue indiquant maintenant 2 utilisateurs connectés au site.
Attention…pour mémo une session dure 20 minutes par défaut sur IIS.
Note :
Dans la procédure de réponse, vous pouvez utiliser le paramètre de type CancelEventArgs pour annuler le
processus de validation au besoin et afficher le message d’erreur contenu dans la propriété InstructionText
du contrôle.
Donc pas de besoin de code… ASP.NET 2.0 s’occupe de tout et si le navigateur client n’autorise pas les
cookies, il ira (sans râler) chercher les informations dans la base de données faute de pouvoir utiliser le
cache.