Mini Tuto : Création pages add users et login

Bonjour !
Je créer un nouveau mini tuto, qui encore une fois n'en ai pas un 😀

Pour rappel, je remet pas en cause les tutos de PrimFx qui sont excellents et qui est bien meilleurs que moi dans ce qu'il fait. Mais, je vais poussé un peu plus et vous expliquer pourquoi.

Dans ses tutos, il vous apprend a utilisé sha1. C'est pratique pour faire de l'apprentissage ou encore des tests. Mais je vous déconseille fortement de mettre des formulaires d'inscriptions en ligne avec se genre de hash. Avec une attaque de brut force, les hash sha1 et md5 seront forcé en quelque second avec nos machines moderne. 
Je vous met le lien de la doc officiel PHP qui vous expliquera tout ça bien mieux que moi 😀

http://php.net/manual/fr/faq.passwords.php

Donc on entre dans le vif... 

Voici 2 bout de code bien commenter qui vont vous permettre de créer des utilisateurs et faire en sorte que vos utilisateurs se connecte.
Se sont des codes complets et directement utilisable avec un simple copier/coller. Vos utilisateurs aurons donc un login et un mot de passe. A vous d'adapter pour faire en sorte de par exemple répéter le mot de passe ou l'email, ajouter des champs utiles genres, nom, prenom, ville, genre, pays, age...

Sachant, que plus un formulaire d'inscription est long, plus il décourage les utilisateurs. Il vaux mieux un formulaire d'inscriptions très cours dans un premier temps, puis offrir la possibilité plus tard d'éditer leur profils.

Le CSS est fait avec Bootstrap, donc si vous ajouter le CDN de bootstrap, se sera directement sexy !

C'est parti !

On se connecte a la base de donnée : 

<?php 

$sqlHost     = '127.0.0.1';       
$sqlUser     = 'root';         
$sqlPassword = '';            
$dbName      = 'nom_de_ma_base_de_donnee';     
   $pdo = new PDO('mysql:host='.$sqlHost.';dbname='.$dbName.';charset=utf8',$sqlUser,$sqlPassword) or die($pdo->errorInfo());
?>

La page de création d'utilisateur :

<?php  session_start(); // On lance la session
if (!empty($_SESSION) && isset($_SESSION['user']['role'])){
   // On vérifie le role de l'utilisateur qui se connecte afin de lui octroyer plus ou moins de droit
    if ($_SESSION['user']['role'] != 'admin') {
        header('Location: index.php'); // Si sont role (gérer avec un enum dans votre bdd) n'est pas admin, alors on le renvois sur la page index.php
    }
    
} else {
    header('Location: ../index.php');
}
$post = array(); // Contiendra les données du formulaire nettoyées
$errors = array(); // contiendra nos éventuelles erreurs
$showErrors = false; // Permet d'afficher les erreurs
$success = false; // Permet d'afficher les success
if (!empty($_POST)) {
   
   foreach ($_POST as $key => $value) { // Nettoyage des données
      $post[$key] = trim(strip_tags($value)); // récupération du _POST dans un tableau
   }
   if(strlen($post['nickname']) < 2 || strlen($post['nickname']) > 50){ // on défini les propriétés de 'nickname'
        $errors[] = '<div class="alert alert-danger" role="alert">Votre pseudo doit comporter entre 2 et 50 caractères</div>';
    }
    if(!isset($post['password']) && !empty($post['password'])) {
       $errors[] = '<div class="alert alert-danger" role="alert">Votre mot de passe n\'est pas valide</div>';
    }
   if(count($errors) > 0){  // On compte les erreurs, si il y en as (supérieur a 0), on passera la variable $showErrors à true.
        $showErrors = true; // valeur booleen // permettra d'afficher nos erreurs s'il y en a
        $nickname = $post['nickname']; 
        $password = $post['password'];
    }
    else { 
       // On sécurise notre password en le hashant
       // IMPORTANT : On ne stocke jamais de mot de passe en clair en pdo
       $password = password_hash($post['password'], PASSWORD_DEFAULT);
      // Insertion dans la base de donnée 
       $res = $pdo->prepare('INSERT INTO users (nickname, password) VALUES(:nickname, 😋assword)');
        $res->bindValue(':nickname', $post['nickname'], PDO::PARAM_STR);
        $res->bindValue(':password', $password);
        
        
         if($res->execute()){
           $success = true; // Pour afficher le message de réussite si tout est bon
       }
       else {
           die(var_dump($res->errorInfo()));
       }
    }
}
?>
<h1 class="text-center">Ajouter un utilisateur</h1>
<br>
<div class="container">
      <?php
      if($success == 'true' && $success == 'true'){ // On affiche la réussite si tout fonctionne
          echo '<div class="alert alert-success" role="alert"> L\'utilisateur est bien créer ! </div>';
      }
      if($showErrors){
          echo implode('<br>', $errors);
      }
      ?>
      <form method="post" class="pure-form pure-form-aligned">
         <div class="input-group">
           <span class="input-group-addon" id="basic-addon1">Pseudo</span>
           <input type="text" class="form-control" name="nickname" placeholder="Votre pseudo" aria-describedby="basic-addon1">
         </div>
         <br>
         <div class="input-group">
           <span class="input-group-addon" id="basic-addon1">Password</span>
           <input type="password" class="form-control" name="password" placeholder="Votre mot de passe" aria-describedby="basic-addon1">
         </div>
         <br>
      <br>
      <input type="submit" class="btn btn-success" value="S'inscrire">
      </form>
      
</div>

Ensuite, la page de connexion :

<?php
$post = [];
$error = [];
$mdpValide = false;
$errorSession = false;
if(!empty($_POST)){//01
   $post = array_map('strip_tags', $_POST);
   $post = array_map('trim', $post);
   // On vérifie que l'adresse email est au bon format
   if(!preg_match ( "#^[a-zA-Z0-9]{3,20}$#" , $post['nickname'] )){
      $error[] = '<div class="text-center alert alert-danger">Le nom ou le password est invalide</div>';
   }
   if(!isset($post['password']) && !empty($post['password'])){
      $error[] = '<div class="alert alert-success">Le nom ou le password est invalide</div>';
   }
   if(count($error) == 0){//02
      $select = $pdo->prepare('SELECT * FROM users  WHERE nickname = :checkName');//
      $select->bindValue(':checkName', $post['nickname']);
      if($select->execute()){//03
         $user = $select->fetch();//contient notre utilisateur relatif à  le nom
         if(!empty($user)){//04
            // on vérifie le mot de passe saisi et le mot de passe hashé
            if(password_verify($post['password'], $user['password'])){
               //ici le mot de passe est valide
               $mdpValide = true;
               session_start();//permet de demarrer la session
               $_SESSION['user'] = [
                     'id'        => $user['id'],
                     'nickname'  => $user['nickname'],
                     'role'        => $user['role'],
                     ];
               //je redirige vers la page "propos.php"
               header('Location: propos.php');
               die;
            }
            else {
            // Le mot de passe est invalide
            $error[] = '<div class="alert alert-warning">Le couple identifiant/mot de passe est invalide</div>';
            }
         }//fin 04
         else {
         //utilisateur inconnu
         $error[] = 'Le couple identifiant/mot de passe est invalide';
         }
      }//fin 03
   }//fin 02
}//fin 01
   if(count($error)!=0){
      foreach ($error as $key => $value) {
         echo $value.'<br>';
      }
   }
?>
<h1 class="text-center">Login page administration</h1>
<h2 class="text-center alert alert-danger"><a href="../index.php">Si vous n'êtes pas membre de l'administration, merci de retourner sur le site</a></h2>
<br>
<form class="form-horizontal" method="post" action="">
   <div class="form-group">
      <div class="col-md-4 col-md-offset-4">
         <input id="nickname" name="nickname" type="text" placeholder="Votre nom" class="form-control input-md" required>
      </div>
   </div>
   <div class="form-group">
      <div class="col-md-4 col-md-offset-4">
         <input id="password" name="password" type="password" placeholder="Votre password" class="form-control input-md" required>
      </div>
   </div>
   <div class="form-group">
      <div class="col-md-4 col-md-offset-4">
         <button type="submit" class="btn btn-primary">Je me connecte</button>
      </div>
   </div>
</form>