Créé en 2020 et modifié le 30 Sep 2021

Créé en 2020 et modifié le 30 Sep 2021

Formulaire d’authentification

 

 

Intro

Livrable gitlab : finder/mission00/…

partie 1  – HTML form

Livrable gitlab : finder/mission00/…

  • réaliser une base de données finder avec une table user, colonnes email, mot de passe
  • insérer quelques utilisateurs
  • réaliser un formulaire email/mdp sur connexion.html
  • vérifier le couple email/mdp sur une page verification.php
  • rediriger l’utilisateur sur le formulaire en cas d’échec avec un message lui indiquant que son login ou son mot de passe ne sont pas bon.

Exemple de code

<?php session_start();?>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<?php

if(isset($_SESSION['erreur']) && $_SESSION['erreur'] ){
  //echo "erreur";
  echo '<script>
    $( document ).ready(function() {
    $(".form-control").addClass("is-invalid");
    });
    </script>';
}
$_SESSION['erreur']=false;
?>

<div class="container">
<form method="get" action="verification.php">
    <div class="form-group">
      <label for="exampleInputEmail1">nom</label>
      <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
       <div class="invalid-feedback">
          utilisateur et/ou mot de passe invalide
        </div>
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">mdp</label>
      <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      
    </div>
    
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>





</html>

<?php session_start();

if(
   isset($_GET['email']) 
&& isset($_GET['password'])
){
   //echo "ok";
   $dsn='mysql:dbname=zaza;host=127.0.0.1';
$user='root';
$password='';
try{
    $dbh=new PDO($dsn,$user,$password); 
}catch(PDOException $e){
    echo'Connexion échouée:'.$e->getMessage(); 
}
   $sql = "SELECT count(*) FROM user WHERE email=:email 
   AND password=PASSWORD(:password)";
   //echo $sql;
   $resultats = $dbh->prepare($sql);
   $email = $_GET['email'];
   $password = $_GET['password'];
   $resultats->bindParam(":email", $email);
   $resultats->bindParam(":password", $password);
   $resultats->execute();  
   $number_of_rows = $resultats->fetchColumn(); 
   //echo $number_of_rows;

   if($number_of_rows == 1){
      echo "ok";
   }
   else{
    $_SESSION['erreur']=true;
    header('Location: http://localhost/finder1/connexion.php');
   }
}else{
        $_SESSION['erreur']=true;
        header('Location: http://localhost/finder1/connexion.php');
}

 

partie 2 – JQuery et Ajax

Livrable gitlab : finder/mission00/…

  • modifier le formulaire pour faire un appel ajax avec JQ de votre page PHP.
  • la page PHP renverra un code HTTP 200 en cas de succès ou 403 en cas d’erreur sans aucun autre message. https://www.php.net/manual/fr/function.http-response-code.php
  • En cas d’erreur, on indiquera à l’utilisateur que son login ou mot de passe ne sont pas bon grâce à JQ.

 

Exemple de code

<?php session_start();?>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<?php
/*
if(isset($_SESSION['erreur']) && $_SESSION['erreur'] ){
  //echo "erreur";
  echo '<script>
    $( document ).ready(function() {
    $(".form-control").addClass("is-invalid");
    });
    </script>';
}
$_SESSION['erreur']=false;
*/
?>

<div class="container">
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
       <div class="invalid-feedback">
          utilisateur et/ou mot de passe invalide
        </div>
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    
    <button  class="btn btn-primary">Submit</button>
  
</div>
<div id="result"></div>

<script>
$(document).ready(function () {

    $('.btn').click(function () {
        $("#result").html("");
        let email=$( "#exampleInputEmail1" ).val();
        let password=$( "#exampleInputPassword1" ).val();
        $.ajax("http://localhost/finder1/verification2.php",
            {
                type: "GET",
                data: 'email=' + email + '&password=' + password,
                success: function (data, textStatus, jqXHR) {
                    console.log(jqXHR.status);
                    $("#result").html(data);
                },
                error: function (xhr,status,error) {
                    console.log(xhr.status);
                }
                
            });
    });
});
</script>

</html>

 

 

<?php session_start();

if(
   isset($_GET['email']) 
&& isset($_GET['password'])
){
   //echo "ok";
   $dsn='mysql:dbname=zaza;host=127.0.0.1';
$user='root';
$password='';
try{
    $dbh=new PDO($dsn,$user,$password); 
}catch(PDOException $e){
    echo'Connexion échouée:'.$e->getMessage(); 
}
   $sql = "SELECT count(*) FROM user WHERE email=:email 
   AND password=PASSWORD(:password)";
   //echo $sql;
   $resultats = $dbh->prepare($sql);
   $email = $_GET['email'];
   $password = $_GET['password'];
   $resultats->bindParam(":email", $email);
   $resultats->bindParam(":password", $password);
   $resultats->execute();  
   $number_of_rows = $resultats->fetchColumn(); 
   //echo $number_of_rows;

   if($number_of_rows == 1){
      http_response_code(200);
   }
   else{
      http_response_code(403);
    //$_SESSION['erreur']=true;
    //header('Location: http://localhost/finder1/connexion.php');
   }
}else{
   http_response_code(403);
        //$_SESSION['erreur']=true;
        //header('Location: http://localhost/finder1/connexion.php');
}

partie 3 – VueJS et Ajax

Livrable gitlab : finder/mission00/…

  • modifier le formulaire pour faire un appel ajax avec VueJS de votre page PHP.
  • en cas d’erreur, on indiquera à l’utilisateur que son email ou mot de passe ne sont pas bon grâce à VueJS.

Exemple de code

<!doctype html>
<html lang="fr">

<head>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<div id="app">
<b-container>
<input v-model="idc" placeholder="numéro de chambre"/>

<div class="container"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <div class="invalid-feedback"> utilisateur et/ou mot de passe invalide </div> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> 
<b-btn variant="primary" v-on:click="ajax(idc)">valider</b-btn>

 </div>
<p>Le message est : {{ info }}</p>
</b-container>
</div>

<script>
var app = new Vue({
el: '#app',
data() {
return {
idc: 0, 
info: null,
message: ''
}
},
methods: {
ajax: function (idc, event) {
axios({
method: 'get',
url: 'http://localhost/finder1/verification2.php/chambre?idc='+idc,
responseType: 'json',
})
.then(user => {
            console.log('ok');
      })
.catch(function (error) {
            console.log('error: ', error);           
     })

}
}
})</script>