Aller au contenu

Un exemple plus complet⚓︎

La page de login

Lorsqu'on se connecte avec un mot de passe, le serveur va vérifier que le mot de passe est correct et correspond bien au login. Nous allons réaliser une page de connexion et d'inscription à un site. Pour cela, nous allons créer un nouveau fichier login2.html :

login2.html
<!DOCTYPE html>
<html lang="fr">   
   <head>
      <title>Page de connexion</title> 
      <meta charset="utf-8">      
   </head>   
   <body>
      <div align = "center">
         <div style = "width:330px; border: solid 1px black; " align = "left">
            <div style = "background-color:black; color:white; padding:3px;">
               <b>Connexion ou inscription</b>
            </div>
            <div style = "margin:30px">
               <form action = "resultat.php" method = "post">
                  <label>Login :</label>
                  <input type="text" name="username" required="required"><br><br>
                  <label>Mot de passe :</label>
                  <input type="password" name="password" required="required"><br><br>
                  <input type="submit" name="login" value="Login">
                  <input type="submit" name="inscription" value="Inscription"><br>
               </form>
            </div>
         </div>
      </div>
   </body>
</html>

Il y a deux boutons qui ont des noms différents. Ces noms permettront de savoir lequel a été utilisé dans le script resultat.php donc voici le code :

resultat.php
<!DOCTYPE html>
<?php
if (isset($_POST['login'])) {
  // on se connecte
  $ok = false;
  $login = $_POST['username'];
  $password = $_POST['password'];
  if (file_exists("donnees_sensibles.txt")) {
    $donnees=file_get_contents("donnees_sensibles.txt");
    $dictionnaire_logins=unserialize($donnees);
    if ($dictionnaire_logins[$login] == $password) {
      // connexion réussie
      $ok = true;
    }
  }
  if ($ok) { // tout s'est bien passé
    $titre = "Bienvenue " . $login;
    $contenu = "Content de te retrouver " . $login . ".";
  } else { // il y a eu un problème
    $titre = "Erreur !";
    $contenu = "Login " . $login . " inconnu ou mot de passe incorrect.";
  }
} else if (isset($_POST['inscription'])) {
  // on s'inscrit
  $ok = false;
  $login = $_POST['username'];
  $password = $_POST['password'];
  if (file_exists("donnees_sensibles.txt")) {
    $donnees=file_get_contents("donnees_sensibles.txt");
    $dictionnaire_logins=unserialize($donnees);
    if (!array_key_exists($login, $dictionnaire_logins)) {
      $ok = true;
    }
  } else {
    // on crée le dictionnaire de mots de passe
    $dictionnaire_logins = array();
    $ok = true;
  }
  if ($ok) {
    $titre = "Bienvenue " . $login;
    $contenu = "Inscription réussie pour " . $login . ".";
    // on rajoute le login
    $dictionnaire_logins[$login]=$password;
    // on met à jour le fichier de données
    file_put_contents("donnees_sensibles.txt",serialize($dictionnaire_logins));
    $ok = true;
  } else { // il y a eu un problème
    $titre = "Erreur !";
    $contenu = "Login " . $login . " déjà pris.";
  }
} else {
  // on ne devrait pas arriver lĂ 
  $titre = "Erreur !";
  $contenu = "Comment êtes-vous arrivé là ?";
}
?>
<html lang="fr">   
  <head>
    <title><?php echo $titre ?></title> 
    <meta charset="utf-8">      
  </head>
  <body>
    <p><?php echo $contenu ?></p>
    <p><a href="login2.html">Retour Ă  l'Ă©cran de connexion</a></p>
  </body>
</html>
Explications

Le gros du script se trouve avant le contenu de la page pour pouvoir déterminer le titre à mettre et le contenu. Il faut étudier les différents cas :

  • L'utilisateur veut se connecter.

    • Le login et le mot de passe correspondent, donc tout va bien.
    • Le login et le mot de passe ne correspondent pas, donc il y a une erreur.
    • Le fichier contenant les mots de passe n'existe pas, donc il y a une erreur.

  • L'utilisateur veut s'inscrire.

    • Le fichier de mots de passe n'existe pas, donc on le crĂ©e.
    • Le fichier de mots de passe existe et il n'y a pas le login, donc on le rajoute.
    • Le fichier de mots de passe existe et il contient dĂ©jĂ  le login, donc il y a une erreur.

  • L'utilisateur est arrivĂ© lĂ  sans utiliser de bouton. Cela ne devrait pas arriver, donc c'est une erreur.

Pour stocker les mots de passe, nous créons un fichier donnees_sensibles.txt. Ce fichier contiendra un dictionnaire associant les logins à leur mot de passe. La structure array de PHP correspond aux listes et aux dictionnaires de Python. Pour la création du dictionnaire on utilise juste array() qui crée un dictionaire vide. Ensuite, on associe des valeurs comme on le fait en Python.

Pour stocker ce dictionnaire dans le fichier, on utilise la fonction serialize qui crée un texte contenant toutes les informations de ce dictionnaire. Pour le récupérer, on doit utiliser unserialize qui retransforme ce texte en dictionnaire.

Les fonctions file_put_contents et file_get_contents servent à enregistrer les données dans le fichier et à les lire depuis le fichier.

Exercice 10

Créez les fichiers login2.html et resultat.php et essayez de :

  1. vous connecter sans vous ĂŞtre inscrit ;
  2. vous inscrire ;
  3. vous connecter avec le login enregistré ;
  4. vous connecter avec ce login mais un mauvais mot de passe ;
  5. vous inscrire avec le login existant ;
  6. aller directement sur resultat.php sans utiliser de bouton.
Sécurisation des données

Vous pouvez alors regarder le contenu du fichier donnees_sensibles.txt. Il doit ressembler Ă  cela :

Exemple de contenu pour donnees_sensibles.txt
a:1:{s:3:"Bob";s:10:"le_bricolo";}
Cela veut dire que le login utilisé est Bob et que le mot de passe est le_bricolo. On peut donc remarquer que cette méthode n'est absolument pas sécurisée pour stocker les mots de passe. Normalement ils sont chiffrés avant d'être stockés, ainsi, si quelqu'un arrive à accéder au fichier les contenant, il n'obtiendra pas les mots de passe en clair. De la même manière, même si l'utilisation de la méthode POST permet de ne pas afficher les paramètres dans la barre de tâche, ce n'est absolument pas sécurisé et les données peuvent être interceptées lors de la transmission. C'est pourquoi il faut bien vérifier que HTTPS est utilisé avant de rentrer un mot de passe.

Pour aller plus loin

Il est possible de réaliser de nombreux projets en combinant HTML et PHP. Si vous souhaitez tester de nouvelles possibilités, vous pouvez consulter les sites suivants :