• frontend – este  partea publica a unui website unde se gaseste tot continutul lui (text, imagini, video, animatii Flash). Frontend-ul este destinat vizitatorilor. De exemplu, frontend-ul unui website de prezentare al unei firme este constituit din toate paginile sale cum ar fi pagina “Despre” (unde firma prezinta istoricul firmei si profilul de activitate al firmei), pagina “Portofoliu” (unde firma prezinta lucrarile realizate si proiectele in curs de realizare), pagina “Galerie” (unde vizitatorul gaseste o galerie de imagini cu produsele firmei), pagina “Contact” (unde vizitatorul poate intra in legatura cu detinatorii firmei) s.a.m.d..
• backend – este partea cu acces restrictionat din spatele websiteului pe care numai un numar limitat de utilizatori o pot accesa pe baza unei autentificari. Din backend se administreaza continutul de pe frontend si chiar se pot face modificari asupra designului, structurii si functionalitatii frontend-ului in sine. Spre deosebire de frontend, backend-ul nu trebuie sa fie indexat de motoarele de cautare (Google, Yahoo, Bing, Ask.com etc.). Ca sa evitam acest lucru vom scrie in fisierul robots.txt din folderul radacina a websiteului urmatoarele linii:

  User-agent: *
  Disallow: /backend/
  

In loc de termenul backend se mai folosesc termenii sectiune de administrare si CMS (de la Content Managment System – in limba engleza, Sistem de gestionare a continutului). Cand intalnim unul din acesti termeni trebuie sa stim ca se face referire la unul si acelasi lucru.

Ca sa restrictionam accesul la sectiunea de administrare trebuie mai intai sa inregistram toti utilizatorii intr-o baza de date. Apoi cream un formular de autentificare a utilizatorilor sectiunii de administrare si un tabel, numit ai_authentication_logs, in care vom inregistra loguri despre autentificarile facute.

$q = "CREATE TABLE IF NOT EXISTS ai_authentication_logs(
		authentication_log_id INT UNSIGNED NOT NULL AUTO_INCREMENT,
		username VARCHAR(30) NOT NULL,
		password VARCHAR(40) NOT NULL,
		server_authentication_date DATETIME NOT NULL,
		client_authentication_date DATETIME NOT NULL,
		ip VARCHAR(30) NOT NULL,
		browser_os VARCHAR(255) NOT NULL,
		screen_resolution VARCHAR(15) NOT NULL,
		status VARCHAR(10) NOT NULL,
		PRIMARY KEY(authentication_log_id))";

mysql_query($q) or die(mysql_error());

Acest tabel ne permite sa tinem o evidenta a celor care utilizeaza sectiunea de administrare. De fiecare data cand cineva se autentifica se introduce in baza de date numele utilizatorului, parola encriptata a utilizatorului, data si ora autentificarii (atat ora de pe server cat si ora de pe PC-ul utilizatorului), IP-ul de pe care s-a facut autentificarea, browserul si sistemul de operare folosite de utilizator, rezolutia monitorului utilizatorului, statusul autentificarii (reusita sau esuata).

Daca o autentificare esueaza parola va fi inregistrata in clar. Astfel putem vedea daca cineva doreste sa intre neautorizat in sectiunea de administrare si cu ce cuvinte incearca sa sparga parola. Se stie foarte bine ca o parola poate fi aflata prin forta bruta (brute force attack), utilizand un dictionar de cuvinte (dictionary attack) sau prin inginerie sociala (social engineering) sau poate fi pur si simplu ghicita. De asemenea un utilizator poate sa isi infecteze PC-ul cu un keylogger si astfel un rau-voitor sa intre in posesia datelor sale de logare.

Mai pe scurt, acest tabel ne ajuta sa vedem daca se intampla ceva suspicios in legatura cu utilizatorii sectiunii de administrare.

In cazul in care autentificarea reuseste, se va crea o sesiune pe server, se va salva in sesiune numele utilizatorului si browserul si sistemul de operare folosite de utilizator si se va face redirectionarea de la pagina de login la pagina principala a sectiunii de administrare.

Apoi pe pagina principala a sectiunii de administrare, deasupra DOCTYPE-ului mai exact, exista un script PHP care verifica daca cel care vrea sa deschida pagina este autorizat sau nu sa faca acest lucru. Daca este autorizat pagina va fi afisata in browser, daca nu este autorizat va fi redirectionat catre pagina de login. Acest script PHP il punem in toate paginile sectiunii de administrare, deasupra DOCTYPE-ului, pentru a restrictiona accesul la ele.

Se prefera utilizarea sesiunilor in detrimentul cookie-urilor deoarece datele de logare ale utilizatorului sunt stocate pe server si nu pe PC-ul utilizatorului. In acest fel datele de logare sunt infinit mai protejate si nu sunt transmise in mod repetat intre server si browser. Pe PC-ul utilizatorului se creeaza doar un cookie cu identificatorul sesiunii. Numele acestui cookie este PHPSESSID si valoarea stocata de cookie este o valoare de genul a76b45cf92d87ea710fc8e9a9f812fa (32 de caractere hexazecimale). Existenta acestui cookie se poate verifica din browser.

Pentru ca acest script PHP de autentificare sa fie complet functional mai am nevoie de fisierul care ma conecteaza la baza de date, connect_to_db.inc.php, pe care il apelez cu functia include().

loginform.php – pagina cu formularul de autentificare

<?php
/*
Titlu: Cum fac un formular de autentificare a utilizatorilor?
Autor: Marian Barbu aka AccesInterzis
Website: http://www.accesinterzis.ro
2010 (c) Toate drepturile rezervate
*/

#1
include('includes/connect_to_db.inc.php');

#2
if (isset($_POST['login'])) {
	#3
	$errors = array();

	#4
	foreach($_POST as $k => $v) {
		#4.1
		$v = trim($v);

		#4.2
		/*
		Cand bag datele in baza de date le infasor in mysql_real_escape_string().
		Cand citesc datele din baza de date le infasor in stripslashes() si htmlentities().
		*/
		if (ini_get('magic_quotes_gpc')) {
			$v = stripslashes($v);
		}

		$v = mysql_real_escape_string($v);

		#4.3
		$$k = $v;

		#4.4
		if (empty($v)) {
			$errors[$k] = 'The '.$k.' is required.';
		} else {
			if (strlen($v) > 30) {
				$errors[$k] = 'The '.$k.' is too long.';
			} else {
				if ($k == 'username') {
					if (!preg_match('/^[a-z0-9_. ]*$/i', $v)) {
						$errors[$k] = 'The username isn\'t valid.';
					}
				}

				if ($k == 'password') {
					if(!preg_match('/^[a-z0-9]*$/i', $v)) {
						$errors[$k] = 'The password isn\'t valid.';
					} else {
						if (strlen($v) < 5) {
							$errors[$k] = 'The password is too short.';
						}
					}
				}
			}
		}
	}

	#5
	/*
	Dupa ce m-am asigurat ca datele de autentificare sunt valide (adica nu contin caractere nepermise
	utilizate in atacuri asupra bazei de date cum ar fi injectiile sql) verific daca combinatia username/password
	se regaseste in tabelul in care sunt inregistrati toti utilizatorii sectiunii de administrare.
	*/
	if (count($errors) == 0) {
		$q = "SELECT username FROM ai_registrationform WHERE username='$username' AND password=SHA('$password')";
		$result = mysql_query($q) or die(mysql_error());
		$row = mysql_fetch_array($result);

		#5.1
		/*
		Daca autentificarea s-a efetuat cu succes:
		- salvez in tabelul de loguri un log despre autetificare
		- salvez in sesiune numele utilizatorului si numele browserului si sistemului de operare pe care le foloseste
		- redirectez utilizatorul de pe pagina de login pe pagina principala a sectiunii de administrare
		*/
		if ($row) {
			$q2 = "INSERT INTO ai_authentication_logs(`username`, `password`, `server_authentication_date`, `client_authentication_date`, `ip`, `browser_os`, `screen_resolution`, `status`)"
				 ."VALUES('$username', SHA('$password'), NOW(), '".$_COOKIE['client_authentication_date']."', '".$_SERVER['REMOTE_ADDR']."', '".$_SERVER['HTTP_USER_AGENT']."', '".$_COOKIE['screen_resolution']."', 'succesful')";

			mysql_query($q2) or die(mysql_error());

			session_start();
			$_SESSION['username'] = $row['username'];
			$_SESSION['browser_os'] = $_SERVER['HTTP_USER_AGENT'];

			header('Location:http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF']).'/backend.php');
			exit();
		} else {
			$q2 = "INSERT INTO ai_authentication_logs(`username`, `password`, `server_authentication_date`, `client_authentication_date`, `ip`, `browser_os`, `screen_resolution`, `status`)"
				 ."VALUES('$username', '$password', NOW(), '".$_COOKIE['client_authentication_date']."', '".$_SERVER['REMOTE_ADDR']."', '".$_SERVER['HTTP_USER_AGENT']."', '".$_COOKIE['screen_resolution']."', 'failed')";

			mysql_query($q2) or die(mysql_error());

			$error_message = 'Your login data are wrong.';
		}
	}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>How do I make a login form?</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="How do I make a login form?" />
<meta name="keywords" content="login,form,php,script,mysql,database,user,backend,admin,section,cms" />
<meta name="abstract" content="How do I make a login form?" />
<meta name="author" content="AccesInterzis" />
<meta name="copyright" content="AccesInterzis" />
<meta name="robots" content="index,follow" />
<meta name="revisit-after" content="7 days" />

<link href="http://www.accesinterzis.ro/myportofolio/css/reset.css" type="text/css" rel="stylesheet" media="all" />
<style type="text/css">
/*INCEPUT - LINIILE CSS CARE CREEAZA SKINUL FORMULARULUI DE AUTENTIFICARE*/

form#login_form {
	width:285px;
	margin:0px auto;
}

form#login_form h1 {
	color:black;
	font: normal normal normal 24px  Verdana;
	/*font-style font-variant font-weight font-size font-family*/
	padding-bottom:5px;
}

form#login_form div {
	margin:0 0 5px 0;
}

form#login_form label {
	width:80px;
	float:left;
}

form#login_form label span {
	color:#c00;
}

form#login_form input {
	width:200px;
}

form#login_form textarea {
	width:300px;
	height:150px;
}

form#login_form input, form#login_form textarea {
	border:1px #ccc solid;
}

form#login_form input:hover, form#login_form textarea:hover {
	border:1px #666 solid;
}

form#login_form input#login {
	width:auto;
	color:#FFF;
	background-color:#333;
	border:1px #000 solid !important;
	cursor:pointer;
}

form#login_form input#login:hover {
	color:#333;
	background-color:#fff;
	border:1px #333 solid;
}

/*Inceput - stilurile erorilor*/
form#login_form p {
	color:#c00;
	padding:0 0 0 80px;
	font-size:10px;
	text-align:left;
}

form#login_form div#username_field label,
form#login_form div#password_field label {
	color:#c00;
}

form#login_form div#username_field input,
form#login_form div#password_field input {
	border:1px #c00 solid;
	color:#c00;
}

form#login_form div#username_field input:hover,
form#login_form div#password_field input:hover {
	border:1px #c00 solid;
}
/*Sfarsit - stilurile erorilor*/

/*SFARSIT - LINIILE CSS CARE CREEAZA SKINUL FORMULARULUI DE AUTENTIFICARE*/
</style>

<script type="text/javascript">
/*
Creez cookie-urile care vor stoca date despre utilizator.
Aceste cookie-uri se creeaza atunci cand se deschide prima oara pagina de login.
De abia cand se reincarca pagina, adica cand utilizatorul apasa butonul "login", scriptul PHP
se poate folosi de aceste cookie-uri.
*/
document.cookie = 'screen_resolution=' + screen.width + '*' + screen.height + ';';

var current_date = new Date();
var year = current_date.getFullYear();
var month = current_date.getMonth();
var day = current_date.getDate();
var hour = current_date.getHours();
var minutes = current_date.getMinutes();
var seconds = current_date.getSeconds();
var current_date = year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
document.cookie = 'client_authentication_date=' + current_date + ';';
</script>
</head>

<body>
<form action="<?php echo htmlentities(strip_tags('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF']), ENT_QUOTES, 'utf-8'); ?>" method="post" id="login_form">
	<h1>
		<label>&nbsp;</label>
		Login
	</h1>

	<?php if ($error_message) echo '<p>'.$error_message.'</p>'; ?>

	<?php echo ($errors['username'] || $error_message) ? '<p>'.$errors['username'].'</p><div id="username_field">' : '<div>' ; ?>
		<label for="username">Username<span>*</span>:</label>
		<input name="username" type="text" id="username" value="<?php if ($username) echo htmlentities(stripslashes($username)); ?>" />
	</div>

	<?php echo ($errors['password'] || $error_message) ? '<p>'.$errors['password'].'</p><div id="password_field">' : '<div>' ; ?>
		<label for="password">Password<span>*</span>:</label>
		<input name="password" type="password" id="password" />
	</div>

	<div>
		<label> &nbsp; </label>
		<input name="login" type="submit" id="login" value="login" />
	</div>
</form>
</body>
</html>

backend.php – pagina principala a sectiunii de administrare

<?php
#1
session_start();

#2
if (!isset($_SESSION['username']) || !isset($_SESSION['browser_os']) || $_SESSION['browser_os'] != $_SERVER['HTTP_USER_AGENT']) {
		header('Location:http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF']).'/loginform.php');
		exit();
}

#3
if ($_GET['action'] == 'logout') {
	#3.1
	/*
	Pentru a deloga un utilizator din sectiunea de administrare trebuie sa urmez pasii de mai jos:
	- distrug toate variabilele sesiunii de pe server reinitializind intregul tablou superglobal $_SESSION
	- sterg de pe server toate datele sesiunii apeland functia session_destroy()
	- sterg de pe PC-ul utilizatorului cookie-ul care stocheaza identificatorul de sesiune
	*/
	$_SESSION = array();
	if (session_destroy() && setcookie('PHPSESSID', '', time()-300, '/', '', 0)) {
		header('Location:http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF']).'/loginform.php');
		exit();
	}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Backend</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="How do I make a backend?" />
<meta name="keywords" content="backend,administration,section,admin,cms,content,managament,system,php,script,mysql,database" />
<meta name="abstract" content="How do I make a backend?" />
<meta name="author" content="AccesInterzis" />
<meta name="copyright" content="AccesInterzis" />
<meta name="robots" content="index,follow" />
<meta name="revisit-after" content="7 days" />

<link href="http://www.accesinterzis.ro/myportofolio/css/reset.css" type="text/css" rel="stylesheet" media="all" />
<style type="text/css">
/*INCEPUT - LINIILE CSS CARE CREEAZA SKINUL SECTIUNII DE ADMINISTRARE*/

div#backend {
	width:1000px;
	margin:10px auto;
	overflow:auto;
	border:1px #ccc solid;
	padding:10px;
}

div#backend ul#welcome_message {
	overflow:auto;
	list-style-type:none;
}

div#backend ul#sidebar {
	width:10%;
	float:left;
	list-style-type:none;
	border-right:1px #ccc solid;
}

div#backend div#mainarea {
	width:80%;
	float:right;
}

div#backend div#mainarea p#confirmation_message {
	width:75%;
	margin:250px auto;
}

div#backend div#footer{
	width:100%;
	float:left;
	text-align:center;
}

div.splitter {
	width:100%;
	height:1px;
	clear:both;
	float:left;
	border-top:1px #ccc solid;
	margin: 10px 0 10px 0;
}

/*SFARSIT - LINIILE CSS CARE CREEAZA SKINUL SECTIUNII DE ADMINISTRARE*/
</style>
</head>

<body>

<div id="backend">
	<ul id="welcome_message">
		<li style="float:left;">Welcome <strong><?php echo $_SESSION['username']; ?></strong> to the administration section</li>
		<li style="float:right;"><a href="<?php echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF']; ?>?action=logout" title="Logout">Logout</a></li>
	</ul>

	<div class="splitter"></div>

	<ul id="sidebar">
		<?php
		for ($i = 0; $i < 40; $i++) {
			echo '<li>sidebar</li>';
		}
		?>
	</ul>

	<div id="mainarea">
		<p id="confirmation_message">
		<strong><?php echo $_SESSION['username']; ?></strong>, esti aici deoarece ai dovedit ca esti un utilizator autorizat al acestei sectiuni de administrare.
		Acum delogheaza-te si incearca sa accesezi din nou <strong><?php echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF']; ?></strong>.
		Vei vedea ce se intampla cand cineva neautentificat incearca sa intre in sectiunea de administrare.
		</p>
	</div>

	<div class="splitter"></div>

	<div id="footer">
		Designed and developed by <a href="http://www.accesinterzis.ro" title="Programare | Web development | Web design | Securitate IT | SEO" target="_blank">www.accesinterzis.ro</a> &copy; 2010. All rights reserved.
	</div>
</div>
</body>
</html>

Pentru un mai bun managment al codului trebuie sa facem urmatoarele lucruri:

• scriptul PHP de deasupra DOCTYPE-ului paginii de login, care valideaza datele introduse in formular, autentifica utilizatorul si il redirectioneaza catre sectiunea de administrare, se baga intr-un fisier include si se apeleaza prin functia PHP include().

  <?php @include('includes/authenticate_user.inc.php'); ?>
  

• liniile CSS, care creeaza skinul formularului de autentificare, din sectiunea <head> </head> a paginii de login se baga intr-un fisier CSS extern si se apeleaza cu tagul HTML <link />.

  <link href="css/login_form_design.css" type="text/css" rel="stylesheet" media="all" />
  

• liniile Javascript, care creeaza cookie-urile cu datele despre utilizator, din sectiunea <head></head> a paginii de login se baga intr-un fisier JS extern si se apeleaza cu tagul HTML <script>.

  <script type="text/javascript" src="js/user_data.js"></script>
  

• scriptul PHP de deasupra DOCTYPE-ului paginilor ce alcatuiesc sectiunea de administrare, care permite doar utilizatorilor autentificati sa intre in sectiunea de administrare si realizeaza si functia de logout, se baga intr-un fisier include si se apeleaza prin functia PHP include().

  <?php @include('includes/restricted_area.inc.php'); ?>
  

• liniile CSS, care creeaza skinul sectiunii de administrare, din sectiunea <head> </head>se baga intr-un fisier CSS extern si se apeleaza cu tagul HTML <link />.

  <link href="css/backend_design.css" type="text/css" rel="stylesheet" media="all" />
  

Ca sa verificati functionalitatea acestui script PHP de autentificare a utilizatorilor si sa intrati in sectiunea de administrare puteti sa va inregistrati in baza de date si apoi sa va logati.

Publica acest articol pe Twitter

Articole asemanatoare:

• Cum fac un formular de inregistrare a utilizatorilor?
• Cum fac un formular de comentarii?
• Cum fac un formular de contact?