Authentification — Dépôt de fichiers

Licence Informatique, semestre 6

Alexandre NiveauJean-Marc Lecarpentier — Judith Jeyafreeda Andrew

Enseignement des technologies du Web

 

Authentification — Dépôt de fichiers

Notes de cours

Travail personnel

Objectifs

Les deux premiers exercices sont des exercices d'application des principes de l'authentification et du dépôt de fichiers. Ils se veulent rapides et directs, sans souci de propreté architecturale. (On verra plus tard comment gérer l'authentification dans le cadre de l'architecture vue en cours

Le troisième exercice n'a rien à voir, il vise à vous faire tomber volontairement dans des pièges classiques de HTML/CSS (afin d'être mieux armés lorsque vous tomberez dessus vous-mêmes).

Exercice 1 — Bases de l’authentification #

Une proposition de correction est disponible dans cette archive.

Cette archive contient un fichier comptes.php, qui déclare simplement une liste de comptes utilisateur (nom, login, mot de passe, statut) sous forme de tableaux. Les mots de passe ont été hachés avec l'algorithme bcrypt, comme montré en cours. La liste contient quatre comptes ; le mot de passe des utilisateurs toto et testeur est « azerty », celui des deux autres est « 1234 ».

Nous allons utiliser ces comptes déjà créés pour faire un mini-site proposant de se connecter/déconnecter, avec en plus une partie réservée aux internautes ayant le statut admin. Le résultat final peut être vu et testé ici : vous pouvez constater que le message de la page d'accueil change si la personne est connectée, et que seul Toto Dupont a accès à la page d'administration. Il n'y a rien d'intéressant sur aucune des pages — seul le mécanisme d'authentification et de droit d'accès nous intéresse dans cet exercice !

  1. Créer un script connexion.php qui inclut comptes.php, et qui affiche un formulaire de connexion (login et mot de passe). La soumission du formulaire doit mener à la même page.
  2. Le script doit analyser les données reçues : si le login existe dans la base et que le mot de passe correspond, mettre le compte dans une variable de session, par exemple $_SESSION['user']. Vous pouvez mettre un feedback comme dans l'exemple si vous voulez, mais ce n'est pas la priorité de l'exercice.
  3. À présent, créer un autre script index.php pour la page d'accueil. Le contenu de la page doit être personnalisé si la personne est connectée (par ex. « Bienvenue, Jean-Michel ! »).
  4. Modifier connexion.php pour que, si la personne est connectée, ce ne soit pas un formulaire de connexion mais un formulaire de déconnexion qui soit affiché. Le traitement de la déconnexion est simple : la variable de session est supprimée. Vérifier que la connexion/déconnexion fonctionne correctement, et notamment que la page d'accueil s'adapte.
  5. Créer un script admin.php pour simuler une partie admin : la page doit afficher quelque chose comme « partie admin » si la personne est connectée et a le statut d'admin, et doit afficher un message d'erreur sinon. Tester les différents cas.

Exercice 2 — Dépôt de fichiers #

Un corrigé de cet exercice est disponible (archive du code).

Créer un script affichant un formulaire permettant de déposer une image sur le serveur. Après le dépôt, la page devra montrer l'image déposée pendant toute la session de l'internaute (on parle bien de session au sens PHP : pas d'authentification ici !).

Attention, chaque internaute devra avoir sa propre image : vous pouvez tester facilement en utilisant deux navigateurs différents. En particulier, que se passe-t-il si deux internautes déposent une image de même nom ?

Exercice 3 (optionnel) — Pièges classiques en CSS #

Un corrigé de cet exercice est disponible ; les points importants seront présentés lors d'un prochain cours.

Chaque question ci-dessous est liée à une page HTML avec un peu de CSS dedans.

L'idée est que, pour chaque page, le CSS donné semble devoir fonctionner, mais ne fonctionne pourtant pas.

Le premier objectif de chaque question est de réussir à faire fonctionner le CSS comme désiré, sans modifier le HTML ; le deuxième objectif, plus important mais plus difficile, est de comprendre pourquoi ça ne marche pas comme on l'attendrait.

Essayez de chercher par vous-même ! Si on vous donne la réponse, même si vous avez l'impression d'avoir compris, vous n'aurez pas appris grand'chose.

Les questions sont rangées par ordre (plus ou moins) croissant de difficulté. Les dernières ne sont vraiment pas évidentes ; vous pouvez voir ça comme un challenge, mais ne perdez pas non plus trop de temps ! Cela dit, toutes les réponses sont techniquement trouvables. Elles seront données lors d'un prochain cours.

Toutes les pages sont disponibles dans cette archive.

  1. Pourquoi les items ne tiennent-ils pas sur une seule ligne ?
  2. Pourquoi les blocs ne sont-ils pas côte-à-côte ?
  3. Pourquoi les items ne changent-ils pas de couleur au survol ?
  4. Pourquoi le bloc ne fait-il pas 50% de la hauteur de son parent ?
  5. Pourquoi le header n'est-il pas collé en haut, alors que ses marges et celles du body sont à 0 ?
  6. Pourquoi le titre est-il souligné, malgré le text-decoration:none dans le header ?
  7. Pourquoi l'image de fond du body est-elle plus large que le body lui-même, qui est fixé à 800 pixels ?
  8. Pourquoi y a-t-il de l'espace vertical sous les items ?
  9. Pourquoi ne puis-je pas cliquer sur le lien ?
  10. Pourquoi la première ligne du paragraphe ne change-t-elle pas de couleur au survol du paragraphe ?