COURS JavaScript


Accueil | Boîte à outils : Accès à une page par mot de passe

Accès à une page par mot de passe



Principe

Si vous êtes ici, j'espère que vous avez lu les principes de base évoquée à  Gérer les mots de passe. Si tel n'était pas le cas, je vous recommande chaudement de ne pas manquer cette anthologie de ma littérature sur JavaScript :-). Sans rire, c'est vraiment indispensable. Bon ! Donc vous l'avez lu. Parfait. Passons aux choses sérieuses.

Le principe est simple. Après avoir sécurisé votre site comme évoqué dans la page gérer les mots de passe, (je sais, je suis lourd, mais c'est vraiment indispensable de l'avoir fait)... nous allons étudier le fonctionnement de cette gestion.
En gros, puisque maintenant, personne ne peut aller examiner le contenu de votre site en terme de contenu caché de vos dossiers et sous-dossiers, vous êtes parfaitement libre de mettre dans ces dossiers, des pages HTML tout à fait confidentielles. Des pages que seuls les internautes qui possèdent le fameux "mot de passe" seront capable d'aller voir. Et pas les autres... C'est le premier pas.
Ainsi, tant que vous ne donnerez pas accès à des pages contenant des liens qui pointent vers ces pages "confidentielles", personne ne pourra les voir. Le reste est d'une simplicité enfantine :

Admettons que vous désiriez donner comme mot de passe à quelqu'un "bz42xx4" (pourquoi pas hein ? ).
Vous commencez à créer une page HTML qui porte le nom bz42xx4.htm. Page d'accueil destinée à l'heureux internaute possesseur du mot de passe magique. Et rien qu'à lui, à personne d'autre. Vous remplissez cette page bz42xx4.htm avec ce qui vous fait plaisir, ce pour quoi cet internaute privilégié à payé par exemple :-)) Et vous l'enregistrez dans l'un de vos sous-répertoires protégé comme indiqué à gérer les mots de passe. (j'aurais tout essayé hein ? pour que vous lisiez cette leçon...:-)) Ou mieux encore, cette page bz42xx4.htm, vous l'enregistrez sous la racine de votre site, qui elle est automatiquement protégée par le serveur lui même.

Vous créez par ailleurs, une page à accès public, contenant simplement un formulaire muni d'un champ de type "PassWord" et d'un simple bouton de type "Button" sans action particulière comme "reset" ou encore "submit". Non. Un simple bouton de type "Button", et rien de plus. Vous mettez autour de ça le décorum habituel de vos pages ordinaires, pour faire joli, et vous l'enregistrez où vous voulez dans votre site, de préférence encore une fois, sous la racine, ce qui est le plus simple. Disons que cette page s'appellera "MotDePasse.htm". Encore une fois, pourquoi pas. Vous êtes libre de lui donner le nom que vous désirez. Ca n'a strictement aucune importance.

Allons voir maintenant comment ça marche...


   



Comment ça marche


Les acteurs sont en place. Rien ne manque, sauf, bien sûr, les fonctions JavaScript qui vont donner vie à tout ça. Comment ça va se passer maintenant ? Simple...
L'internaute vient sur votre page publique "MotDePasse.htm", à laquelle il sera venu par un simple clic qui l'y aura conduit. Par exemple en cliquant sur un lien "Espace membres" dans un des menus de votre page d'accueil.

Il aura donc sous les yeux, la page MotDePasse.htm présentant un champ de saisie et un bouton. La page lui expliquant qu'il doit taper son mot de passe confidentiel et cliquer sur le bouton s'il veut entrer dans la caverne d'Ali Baba...Avide d'en savoir plus, il tape donc "bz42xx4" dans le champ et clique sur le bouton. Et magie... Il arrive sur la page "bz42xx4.htm"  portant son nom et un message de bienvenue ainsi que tous les liens lui permettant d'aller et venir à sa guise dans cet espace membre.

Pour mieux comprendre le mécanisme, mémorisez ce mot de passe magique bz42xx4 et cliquez donc ci dessous, sur
"Voir l'exemple



Les instructions 

  Pour toutes celles et tous ceux qui ont suivi ces cours assidûment, avec moi en face à face ou sur Internet, vous connaissez déjà toutes les instructions nécessaires. Il ne nous reste plus qu'à les mettre en oeuvre ensemble.

Vous avez déjà compris que le secret de la chose est de relier un mot de passe tapé dans un champ de type "Password" à une page .htm. Ici, relier bz42xx4 à la page correspondant bz42xx4.htm. On se souvient que tout ce qui est tapé par l'utilisateur dans un champ de texte d'un formulaire (ce champ fut-il de type "PassWord") est considéré par JavaScritp comme une chaîne de caractères. Donc, lorsque l'utilisateur aura tapé bz42xx4 dans le champ réservé à cet effet, nous serons en possession d'une chaîne de caractères dont le contenu est très exactement "bz42xx4".

Comment retrouver cette valeur ? Nous savons déjà le faire. Un champ est un objet de formulaire, et cet objet de formulaire possède la propriété .value qui représente son contenu. Si nous appelons notre formulaire (très intelligemment) "formulaire" et que nous appelions le champ "passe", nous savons que le contenu de ce champ s'obtient en disant :

document.formulaire.passe.value

Inventons une variable par exemple "OuAller" dans laquelle nous allons stocker le contenu du champ "passe" nous savons que pour faire ça, il faut seulement écrire :

OuAller = document.formulaire.passe.value

A partir de là, dans la variable OuAller, nous aurons "bz42xx4", ce que l'utilisateur a saisi dans le champ.

Par ailleurs, le nom de la page "bz42xx4.htm" est aussi une chaîne de caractères. Constituée du mot de passe bz42xx4 auquel nous avons simplement rajouté la chaîne de caractère ".htm" (n'oubliez pas le point "."). Or nous avons déjà appris à "concaténer" (c'est à dire à mettre l'une au bout de l'autre) deux chaînes de caractères en utilisant la fonction "+".
En écrivant :

OuAller = document.formulaire.passe.value + ".htm"

nous aurons dans la variable OuAller, la valeur "bz42xx4.htm", ce qui est exactement le nom de la page HTML à laquelle nous voulons faire accéder notre internaute membre du club et heureux possesseur du mot de passe confidentiel.
Et faire aller à une page particulière en JavaScript, nous savons aussi le faire par la méthode .location de l'objet document. En écrivant seulement :

document.location = OuAller

en rencontrant cette instruction, le navigateur enverra directement l'internaute vers la page contenue dans la variable OuAller, qui en l'occurrence est précisément "bz42xx4.htm". et le tour est joué.

Vous voyez, le principe de fonctionnement est des plus simples. Il ne nous reste plus maintenant qu'à mettre tout ça en œuvre aux bons endroits de notre page HTML.


Mise en œuvre

Ici, étant donné la simplicité du code à écrire, pas besoin de se fatiguer à écrire une fonction JavaScript. Nous allons tout mettre en bloc dans le code HTML de l'objet concerné, c'est-à-dire le bouton sur lequel l'internaute va cliquer. Puisque c'est à partir de lui que tout devra se déclencher.
Premier préalable qui est du pur HTML et pas du JavaScript, est de donner des noms aux éléments de notre page.
Nous appellerons notre formulaire "formulaire"
nous appellerons notre champ "passe".
et c'est tout. Les autres éléments n'ont pas besoin de noms, puisque nous n'y ferons jamais référence. Pour la petite histoire et pour toutes celles et tous ceux qui ne se souviennent pas comment on donne un nom à un élément d'une page HTML, je rappelle que c'est dans le code de chacun de ces éléments que ça se passe.
Par exemple, pour nommer le formulaire, nous devrons écrire dans le code HTML du formulaire :

<Form name="formulaire">

</Form>

Pour le champ, nous devrons écrire dans le code HTML du champ :

<Input Type="password" name="passe">

Je rappelle ici que nous agissons sur la propriété ".name" (le nom) des objets concernés. Se rapporter aux leçons de base sur les objets au besoin.

Maintenant que tout est bien en place, il ne nous reste plus qu'à écrire ces instructions dans le code HTML du bouton. A l'origine, il est de la forme suivante, avant tout ajout de notre part :

<Input Type="button" value="Accéder à l'espace Membres">

Or nous savons que l'objet de type "button" (un simple bouton dans un formulaire) est capable de capturer un événement (voir les leçons correspondantes si besoin, c'est de la révision à ce stade là). en particulier, il est capable de reconnaître l'événement "on m'a cliqué dessus, Aïe..." par la mise en œuvre du gestionnaire d'événements "onClick". nous allons donc rajouter ce gestionnaire d'événement dans le code HTML du bouton en question, pour lui indiquer quoi faire si jamais on lui clique dessus. Nous écrirons donc :

<Input Type="button" value="accéder à l'espace Membres" onClick=" " >

et entre les guillemets du onClick=" ", on va écrire directement les instructions JavaScript nécessaires. Celles là même que nous venons d'étudier plus haut. Oui, mais dans quel ordre ? Très simple encore une fois. Dans le bon ordre... :-) (amusant non ? ) :-))

Tout d'abord, déclarer notre variable (ça fait plus propre). On sait faire :

<Input Type="button" value="accéder à l'espace Membres" onClick="var OuAller " >

très exactement comme si on écrivait dans une fonction... Puis ensuite, nous allons garnir notre variable OuAller avec le contenu de la saisie de l'internaute dans le champ. Rappelez vous ... (revoyez plus haut si nécessaire, tout est là...)

<Input Type="button" value="accéder à l'espace Membres" onClick="var OuAller = document.formulaire.passe.value" >

Attention, le passage à la ligne ici (comme dans votre code HTML) , n'est dû qu'à la largeur de la page. Pas à un retour chariot pour passer à la ligne... Très important. Tout doit être écrit d'un seul tenant, sans appuyer sur la touche "Entrée" ce qui représenterait pour JavaScript une fin d'instruction, ce qui n'est pas le cas.
A partir de ce moment là, dans notre variable OuAller, nous avons "bz42xx4" ce que l'internaute a saisi dans le champ "passe". Il nous reste à ajouter ".htm" pour faire un nom de page HTML. Nous écrirons donc :

<Input Type="button" value="accéder à l'espace Membres" onClick="var OuAller = document.formulaire.passe.value + '.htm'" >

ici, faites TRES attention. Vous remarquerez que le '.htm' est entre de simples guillemets ( ' ) - pas des doubles ( " ) -pour faire la différence entre les ( " ) de délimitation de code HTML et les ( ' ) du code JavaScript. C'est EXTREMEMENT IMPORTANT.

Dorénavant, notre variable contient le nom de la page à appeler, soit "bz42xx4.htm". Il ne nous reste plus qu'à appeler cette fameuse page. Nous écrirons donc :

<Input Type="button" value="accéder à l'espace Membres" onClick="var OuAller = document.formulaire.passe.value + '.htm' ; document.location=OuAller" >

ici encore, faites bien attention de séparer les deux instructions par un ( ; ) point virgule pour séparer la fin de la garniture de la variable de l'appel de la page.

Voilà. C'est fini. Maintenant, lorsque l'internaute tapera le code secret dans le champ et cliquera sur le bouton, il arrivera sur sa page de membre du club, si et seulement si il a tapé le bon code d'accès. Essayez de nouveau en testant sur l'exemple ci dessous et allez regarder dans le code de ces pages pour vous en convaincre.

"Voir l'exemple


Conclusion

Vous savez maintenant créer un accès par mot de passe. Avec les limitations que cela impose. Vous ne serez jamais à l'abri d'un petit plaisantin qui ira "pomper" tout votre site avec un logiciel d'aspiration de site.
Mais vous serez assez à l'abri pour pouvoir présenter un accès réservé à des gens honnêtes. Même en allant regarder dans le code source de votre page d'accès à l'espace membre, personne ne pourra deviner le nom de la page HTML devant être appelée. Il verra tout au plus comment vous faites, mais ça ne lui donnera pas accès.
Pour un véritable accès sécurisé, il faut travailler en ASP ou en PHP (et encore, en aspirant le site entier, on peut tout avoir sans mot de passe), mais ceci sort du cadre de ces cours. On ne peut véritablement sécuriser qu'avec un Intranet, et encore pas toujours. Vous trouverez toujours un "Hacker" plus malin que les autres qui réussira à entrer dans vos protections.
Ceci dit, la méthode que nous venons de voir suffit amplement à la plupart des accès sécurisée d'emploi courant.

Vous voyez bien que pour donner d'autres accès sécurisés à d'autres membres, il vous suffit simplement de créer autant de pages HTML que nécessaire portant comme nom, le code en question suivi de .htm. Alors à vos claviers, et bon courage !

Faites en bon usage, et respectez les lois et les chartes de vos hébergeurs. Tout le monde sen portera mieux. :-))


   


Ce cours est enseigné par Philippe Médan 
dans le cadre de la formation des professionnels de l'INTERNET.
au CREFAC , 14 rue Scandicci, 93000 Pantin. Tél. : 01 48 46 51 99
au GITA-GRETA , Lycée Technologique Diderot 61, rue David D'Angers 75019 Paris Tél. : 01 40 40 36 27
au CESI à l'Ecole des ingénieurs, 116 Av Aristide Briand, BP 57, 92224 Bagneux CEDEX Tél. : 01 45 36 70 00
au CFA-AFIA Centre de Formation par l'Apprentissage spécialisé en Informatique DUT Licence MIAGE,
PUIO - Bâtiment 640 - Plateau du Moulon - 91405 Orsay Tél. : 01 69 15 35 19.

© Philippe Médan 1999-2007. Tous droits de reproduction réservés pour tous pays.