Recuperare la password con ajax
3 Commenti »
Oggi vi spiego come poter creare una piccola richiesta di password smarrita utilizzando Jquery e una chiamata ajax.
ipotizziamo di avere una tabella degli utenti così strutturata che memorizza le password in chiaro (solo a scopo didattico e per questo articolo).
CREATE TABLE user(
id bigint AUTO_INCREMENT,
username varchar(50) NOT NULL,
password varchar(30) NOT NULL,
nome varchar(80) NOT NULL,
cognome varchar(80) NOT NULL,
ins_date datetime,
upd_date datetime,
lastlogin datetime,
status tinyint(1) DEFAULT 1
PRIMARY KEY (`id`),
KEY `username` (`username`,`password`)
) ENGINE=MyISAM
Ora Creaiamo la nostra pagina base come mostrato qui sotto
</p>
<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
// qui scriveremo la nostra funzione per il recupero
</script>
</head>
<body>
</body>
</html>
Ora inziamo ad inserire Jquery nell’head della pagina
<script type="text/javascript" src="jquery.js"></script>
Fatto questo possiamo iniziare a creare la base della form per il recupero della password fornendo l’indirizzo email dell’utente registrato.
</p>
<p>Se hai perso la password digita nella casella di testo la tua email e clicca su "RECUPERA PASSWORD", ti verrà inviata la password.</p>
<form action="/recupero_password.php" method="post" id="form">
email <input type="text" name="email" id="email" /><br />
<input type="hidden" name="lang" id="lang" value="1" /><br />
<input type="button" value="Recupera Password" onclick="recupera()" /><br />
<span class="colore_rosso" id="errore"></span><br />
</form>
<p>
L’html, come possiamo vedere è molto semplice abbiamo un input text dove inseriremo la nostra email, il button che richiamerà la funzione recupera() per fare la chiamata ajax, infine c’è uno span per mostrare gli errori. All’interno dell’head del nostro documento dove ho messo il commento //qui andremo ad inserire la nostra funzione scriviamo la funzione riportata qui sotto.
La funzione è molto banale ma molto efficace perché è il cuore della chiamata ajax all’inizio fa un primo controllo sulla presenza di qualche valore nell’input dove inseriamo l’email e poi possa in POST l’email alla nostra pagina PHP recupera_password.php, l’ultimo parametro passato a $.post() è il dataType che nel nostro caso JSON in modo da poter utilizzare un array come risposta e non una solo valore.
function recupera(){
var email = $('#email').val();
if(email != ''){
$('#errore').html('');
$.post(
'/recupera_password.php',
'email='+email,
function(m){
$('#errore').html(m.messaggio);
$('#email').val('');
},
'json'
);
} else
$('#errore').html("<strong>Non è stata inserita l'email</strong>");
}
<?php // file recupera_password.php
session_start();
require_once('inc/DATABASE.php');
require_once("inc/phpmailer/class.phpmailer.php");
require_once("inc/phpmailer/phpmailer.lang-it.php");
$db = new DATABASE();
$mail = new PHPmailer();
$errore = false;
if(trim($_POST["email"]) == ""){
$errore = true;
$str_errore .= "Non è stata inserita l'email";
}
if(!$errore){
$sql = "SELECT id, username, password, CONCAT(nome, ' ', cognome) AS nome, email
FROM user
WHERE status = 1
AND email = '". $_POST["email"] . "'";
$data = $db->getOneItem($sql);
if(is_array($data)){
$mail->SetFrom("email@email.it","Mittente");
$nome = $data["nome"] . " " . $data["cognome"];
$mail->AddAddress($data["email"], $nome );
$mail->Subject = "Recupero password";
$messaggio = str_replace(
array("[NOME]","[USERNAME]","[PASSWORD]"),
array($data["nome"],$data["username"],$data["password"]),
$L_testo_mail_rec
);
$mail->msgHtml($messaggio);
$mail->AltBody = strip_tags($messaggio);
$mail->Sender = "email@email.it";
$mail->WordWrap = 78;
if(!$mail->Send()) {
$str_errore = "Non è stato possibile recuperare la password ed inviare una mail, riporivare più tardi";
} else{
$str_errore = "Password recuperata correttamente. A breve riceverai un email";
}
} else //non eisite l'username
$str_errore = "Utente inesistente";
}
print json_encode(
array(
"errore" => $errore,
"messaggio" => $str_errore
)
);
?>
Il file php include un file con la configurazione del db e una classe per poter fare le query al database e la classe phpMailer per inviare la mail con la password alla persona che ne ha fatto richiesta.
Il php, che riceve in post l’email controlla l’esistenza del campo altrimenti restituisce un errore e successivamente fa una query sulla tabella user per cercare le credenziali dell’utente associato a quell’email, una volta trovato il record invia una mail.
Alcune considerazioni sul mio articolo
- Sicuramente non è la miglior cosa utilizzare le passowrd in chiaro perché se siamo vittima di un attacco hacker avremmo perso tutti gli accessi al sito web.
- La password andrebbe resettata, una volta che viene trovato il record nel DB, creandone una casuale di n caratteri ricordando all’utente di cambiarla il prima possibile perché è stta generata automaticamente dal sistema.
- Andrebbe aggiornata la data di modifica del record relativo all’utente e incrementato il numero di richieste di password e il nostro sito web prevede un massimo di tentativi di accesso al sistema allora dovremmo azzerare quel contatore
Per oggi è tutto vi aspetto alla prossima
carino!
grazie per il commento k8 se hai qualche altro esempio scrivilo in uin commento