[ATELIER DEVELOPPEMENT WEB] DSI2

Atelier 6 : Système d’authentification

Le but de cet atelier est de réaliser un petit système d’authentification incluant entre autres une

interface d’inscription (registration), une interface d’identification (login), etc.

Ce système sera réalisé en utilisant la programmation Orienté Objet de php et le PDO pour la

connexion à la base de données.

Cet atelier sera divisé en plusieurs parties, chaque partie présente une fonctionnalité du système

d’authentification.

Le projet aura l’arborescence finale suivante :

Création de la base de données et de la table "users"

1- Créer une base MySQL appelée "inscription".

2- Créer la table "users" champ par champ ou en utilisant le script suivant (ou

manuellement à travers l’interface graphique de phpmyadmin) :

CREATE TABLE inscription.users (

user_id INT( 11 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,

user_name VARCHAR( 255 ) NOT NULL ,

user_email VARCHAR( 60 ) NOT NULL ,

user_pass VARCHAR( 255 ) NOT NULL ,

UNIQUE (user_name),

UNIQUE (user_email)

) ENGINE = INNODB ;

ISET DE BIZERTE 2016-2017 | 1

[ATELIER DEVELOPPEMENT WEB] DSI2

Création de la classe USER

1. Créer le fichier « user.php ». Ce fichier contiendra la classe USER qui contiendra les

méthodes register(), login(), is_logged(), redirect() permettant de gérer l’activité des

utilisateurs.

NB : L’instanciation de classe USER se fera à la fin du fichier de configuration de la

base de données « db_conf.php »

<?php

class user {

private $db;

//variable de connexion à la base de données

//constructeur permettant d’affecter une connexion à un utilisateur

function __construct($DB_con) {

$this->db = $DB_con;

}

//fonction permettant l'ajout de l'utilisateur à la base de données

public function register($uname,$umail,$upass) {

try {

//hashage du mot de passe avant son ajout dans la base

$new_password = password_hash($upass, PASSWORD_DEFAULT);

// pour une question de sécurité on ne doit pas envoyer

// une requête au serveur avec les valeurs réelles

// pour cela on doit préparer la requête avec

// des paramètres fictifs (on utilise :)

$sql = "INSERT INTO users(user_name,user_email,user_pass)

VALUES(:uname, :umail, :upass)";

$req = $this->db->prepare($req);

// puis on relie ensemble les valeurs réelles et

// les paramètres fictifs avec la méthode bindparam()

$req->bindparam(":uname", $uname);

$req->bindparam(":umail", $umail);

$req->bindparam(":upass", $new_password);

// Enfin on exécute la requête (avec la méthode execute() et

non plus query() ou exec() )

$req->execute();

return $stmt;

}catch(PDOException $e) {

echo $e->getMessage(); }

}

ISET DE BIZERTE 2016-2017 | 2

[ATELIER DEVELOPPEMENT WEB] DSI2

//méthode permettant de connecter l'utilisateur s'il est déjà inscrit

public function login($uname,$umail,$upass) {

try {

//On prépare la requête

$req = $this->db->prepare("SELECT * FROM users WHERE

user_name=:uname OR user_email=:umail LIMIT 1");

//Un autre manière de relier les valeurs réelles et les

paramètres fictifs

$req->execute(array(':uname'=>$uname, ':umail'=>$umail));

// Récupérer une ligne avec fetch

$ligne=$req->fetch(PDO::FETCH_ASSOC);

if($req->rowCount() > 0) {

// Si l'utilisteur existe alors

// On vérifie son mot de passe saisie avec le hashage

// enregistré dans la BD

if(password_verify($upass, $ligne['user_pass'])) {

// Si le mot de passe est correct

// alors on lui crée une session

$_SESSION['user_session'] = $ligne['user_id'];

return true;

} else {

return false;

}

}catch(PDOException $e) {

echo $e->getMessage();

}

//Cette méthode permet de tester si un utilisateur est connecté ou non

public function is_loggedin() {

//Il suffit de tester si la variable session

// $_SESSION['user_session'] existe ou non

if(isset($_SESSION['user_session'])) {

return true;

}

ISET DE BIZERTE 2016-2017 | 3

[ATELIER DEVELOPPEMENT WEB] DSI2

//Une méthode permettant la redirection vers une url spécifiée

public function redirect($url) {

header("Location: $url");

}

//Cette méthode permettra le déconnexion de l'utilisateur

public function logout() {

// Destruction de la session

session_destroy();

unset($_SESSION['user_session']);

return true;

}

Création du fichier de connexion

1. Créer le fichier « db_conf.php ». Ce fichier doit permettre de se connecter à la base de

données « projet» et sera appelé dans toutes les pages qui nécessitent une connexion aux

données.

<?php

session_start();

//On commence une session

//Les paramètres de connexion

$DB_host = "localhost";

$DB_user = "root";

$DB_pass = "";

$DB_name = "inscription";

try {

//ON crée une nouvelle connexion

$DB_con = new

PDO("mysql:host={$DB_host};dbname={$DB_name}",$DB_user,$DB_pass);

} catch(PDOException $e) {

echo $e->getMessage();

}

// avec chaque nouvelle connexion On fait appel à la classe user

include_once ' class/user.php';

// puis on crée un nouvel utilisateur

//en insanciant la classe user avec la connexion déjà créée ($DB_con)

$user = new USER($DB_con);

ISET DE BIZERTE 2016-2017 | 4

[ATELIER DEVELOPPEMENT WEB] DSI2

Création de la page index.php (page d’identification)

La page à réaliser nommée : « index.php », qui correspond à la page d’identification, et elle

aura l’allure finale suivante :

Figure 1 : index.php

Cette page contiendra un formulaire permettant l’accès à la page d’accueil du site. L’utilisateur

devra saisir son nom d’utilisateur (username), son email et son mot de passe.

NB : Si les détails sont erronés, il faudra afficher le message approprié.

<?php

require_once 'db_conf.php';

//Si l'utilisateur est déjà connecté on le redirige vers la page d'accueil

if($user->is_loggedin()!="") {

$user->redirect('home.php');

}

if(isset($_POST['btn-login'])) {

//récupération des informations du formulaire

$uname = $_POST['txt_uname_email'];

$umail = $_POST['txt_uname_email'];

$upass = $_POST['txt_password'];

//On essaie de connecter l'utilisateur

if ($user->login($uname,$umail,$upass)) {

//Si les inforamtions sont correctes

ISET DE BIZERTE 2016-2017 | 5

[ATELIER DEVELOPPEMENT WEB] DSI2

// alors son id sera ajouté dans la session

// puis on le rederige vers la page d'accueil

$user->redirect('home.php');

} else {

//Si les informations sont erronées

// on crée la variable $error qui sera affichée en bas

$error = "informations erronées !";

}

<!doctype html>

<html>

<head>

<title>Login : Atelier 6</title>

type="text/css" />

</head>

<body>

<h2 class="form-signin-heading">Connexion</h2><hr />

<?php

//Si la variable $error existe on l'affiche

if(isset($error)) {

<i class="glyphicon glyphicon-warning-sign"></i>   <?php

echo $error; ?> !

</div>

<?php

}

</div>

ISET DE BIZERTE 2016-2017 | 6

[ATELIER DEVELOPPEMENT WEB] DSI2

<input type="text" class="form-control" name="txt_uname_email"

placeholder="mot de passe ou E mail" required />

</div>

<input type="password" class="form-control" name="txt_password"

placeholder="mot de passe" />

</div>

<hr />

<i class="glyphicon glyphicon-log-in"></i>   Connexion

</button>

</div>

<br />

<label>Vous n'avez pas un compte ! <a href="sign-up.php">

Inscription</a></label>

</form>

</div>

</body>

</html>

Création de la page sign-up.php (page d’inscription)

La page à réaliser nommée : « sign-up.php », qui correspond à la page d’inscription, et elle

aura l’allure finale suivante :

ISET DE BIZERTE 2016-2017 | 7

[ATELIER DEVELOPPEMENT WEB] DSI2

Figure 2 : sign-up.php

Cette page permettra l’enregistrement d’un nouvel utilisateur. Elle contiendra un formulaire

contenant 3 zones de saisies (inputs) : nom d’utilisateur, email et login.

NB :

Si les détails sont erronés, il faudra afficher le message approprié.
Si le nom d’utilisateur ou l’email existent déjà dans la base de données, il faudra

afficher un message

<?php

require_once 'db_conf.php';

//Si l'utilisateur est déjà connecté on le redirige vers la page d'accueil

if($user->is_loggedin()!="") {

$user->redirect('home.php');

}

if(isset($_POST['btn-signup'])) {

//récupération des informations du formulaire

$uname = trim($_POST['txt_uname']);

$umail = trim($_POST['txt_umail']);

$upass = trim($_POST['txt_upass']);

//Remplissage des messages d'erreurs dans un tableau

if($uname=="") {

$error[] = "Vous devez saisir un nom d'utilisateur!";

} else if($umail=="") {

$error[] = "Vous devez saisir un email";

} else if(!filter_var($umail, FILTER_VALIDATE_EMAIL)) {

$error[] = 'Vous devez saisir un email valide';

ISET DE BIZERTE 2016-2017 | 8

[ATELIER DEVELOPPEMENT WEB] DSI2

} else if($upass=="") {

$error[] = "Vous devez saisir un mot de passe";

} else if(strlen($upass) < 6) {

$error[] = "Le pot de passe doit avoir au moins 6 caractères";

} else {

// Il n'y a pas d'erreurs

try {

// On prépare la requête

// ON recherche si l'utilisateur existe déjà dans la base

// La recherche se fait par username ou email

$req = $DB_con->prepare("SELECT user_name,user_email FROM users

WHERE user_name=:uname OR user_email=:umail");

$req->execute(array(':uname'=>$uname, ':umail'=>$umail));

//On récupère le résultat

$ligne=$req->fetch(PDO::FETCH_ASSOC);

//Si l'utilisateur existe on prépare les messages d'erreurs

if($ligne['user_name']==$uname) {

$error[] = "Désolé, le nom d'utilisateur existe déjà !";

}

else if($ligne['user_email']==$umail) {

$error[] = "Désolé, l'email existe déjà";

} else {

//si l'utilisateur n'existe pas alors on l’ajoute dans la BD

if ($user->register($uname,$umail,$upass)) {

//Après l'inscription on redirige vers la même page

//mais en passant joined comme paramètre

$user->redirect('sign-up.php?joined');

}

} catch(PDOException $e) {

echo $e->getMessage();

}

<!doctype html>

<html>

<head>

ISET DE BIZERTE 2016-2017 | 9

[ATELIER DEVELOPPEMENT WEB] DSI2

<title>Sign Up : Atelier 6</title>

type="text/css" />

</head>

<body>

<h2 class="form-signin-heading">Inscription</h2><hr />

<?php

if(isset($error)){

foreach($error as $error){

<i class="glyphicon glyphicon-warning-sign"></i>   <?php

echo $error; ?>

</div>

<?php

}

}else if(isset($_GET['joined'])){

//Si joint est passé comme paramètre alors

// on ajoute un lien vers la page de connexion

<i class="glyphicon glyphicon-log-in"></i>   Enregistré

avec succès <a href='index.php'>Connexion</a> ici

</div>

<?php

}

<input type="text" class="form-control" name="txt_uname"

placeholder="Votre nom d'utilisateur" value="<?php if(isset($error)){echo

$uname;}?>" />

</div>

<input type="text" class="form-control" name="txt_umail"

placeholder="Votre E-Mail" value="<?php if(isset($error)){echo $umail;}?>"

</div>

ISET DE BIZERTE 2016-2017 | 10

[ATELIER DEVELOPPEMENT WEB] DSI2

<input type="password" class="form-control" name="txt_upass"

placeholder="Votre mot de passe" />

</div>

<i class="glyphicon glyphicon-open-file"></i> S'inscrire

</button>

</div>

<br />

<label>Déjà inscrit ! <a href="index.php">Connexion</a></label>

</form>

</div>

</body>

</html>

Création de la page home.php (page d’accueil)

Cette page affiche un message d'accueil de l'utilisateur connecté avec le nom d'utilisateur et un

lien hypertexte permettant de se déconnecter et de se rediriger vers la page 'index.php'.

Elle aura l’allure finale suivante :

Figure 3 : home.php

ISET DE BIZERTE 2016-2017 | 11

[ATELIER DEVELOPPEMENT WEB] DSI2

<?php

require_once 'db_conf.php';

//Si l'utilisateur n'est pas connecté on le redirige vers la page de

connexion

if(!$user->is_loggedin()) {

$user->redirect('index.php');

}

//On récupère les données de l'utilisateur à partir de son id (depuis

la session)

$user_id = $_SESSION['user_session'];

$req = $DB_con->prepare("SELECT * FROM users WHERE user_id=:user_id");

$req->execute(array(":user_id"=>$user_id));

$ligne=$req->fetch(PDO::FETCH_ASSOC);

<!doctype html>

<html>

<head>

type="text/css" />

jquery.min.js"></script>

</head>

<body>

<button type="button" class="navbar-toggle collapsed" data-

toggle="collapse" data-target="#navbar" aria-expanded="false" aria-

controls="navbar">

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="">Ma gallerie</a>

</div>

ISET DE BIZERTE 2016-2017 | 12

[ATELIER DEVELOPPEMENT WEB] DSI2

<li class="active"><a href="">Mon compte</a></li>

<li><a href="">Thèmes</a></li>

<li><a href="">Recherche</a></li>

</ul>

<a href="#" class="dropdown-toggle" data-toggle="dropdown"

role="button" aria-haspopup="true" aria-expanded="false">

<?php echo $ligne['user_email']; ?> <span class="caret"></span></a>

<span class="glyphicon glyphicon-user"></span> Hi'

<li><a href="logout.php"><span class="glyphicon glyphicon-

log-out"></span> Déconnexion</a></li>

</ul>

</li>

</ul>

</div>

</div>

</nav>

<label class="h5">welcome : <?php print($ligne['user_name']);

?></label>

<hr />

<h1>

home</a>  

</h1>

<hr />

<p class="h4">Page d'accueil de l'utilisateur</p>

Atelier 6 : Système d'authentification<br /><br />

</p>

</div>

</body>

</html>

ISET DE BIZERTE 2016-2017 | 13

[ATELIER DEVELOPPEMENT WEB] DSI2

Création de la page logout.php (page de déconnexion)

Cette page permet la déconnexion de l’utilisateur.

<?php

require_once 'db_conf.php';

//Si l'utilisateur n'est pas connecté on le redirige vers la page de

connexion

if(!$user->is_loggedin()) {

$user->redirect('index.php');

}

//On déconnecte l'utilisateur

$user->logout();

//Puis on le redirige vers la page de connexion

$user->redirect('index.php');

Les styles CSS

Les feuilles de styles seront fournies comme ressource avec cet atelier.

ISET DE BIZERTE 2016-2017 | 14