Luca e Andrea » jquery

Recuperare la password con ajax

Luca — Wed, 05 May 2010 22:00:07 +0000

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





    
    






Ora inziamo ad inserire Jquery nell’head della pagina


Fatto questo possiamo iniziare a creare la base della form per il recupero della password fornendo l’indirizzo email dell’utente registrato.

Se hai perso la password digita nella casella di testo la tua email e clicca su "RECUPERA PASSWORD", ti verrà inviata la password.

    email 

    

    

    



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("Non è stata inserita l'email");
}

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

You inspiration web compie un anno

Luca — Fri, 30 Apr 2010 08:27:29 +0000

Volevo segnalarvi un blog molto interessante ed in italiano che seguo da qualche giorno e che oggi compie un anno.

Da quando lo seguo ho scoperto molto cose interessnti e nuovo che non conoscevo come ad esempio compe creare un template per joomla, o una bella guida su come scrivere un plug ing di jquery.

Consiglio a tutti di iscriversi ai feed rss del blog perché troverete sempre qualcosa da imparare.

Link al sito http://www.yourinspirationweb.com/

aggiornamento 2 maggio Come mi hanno fatto notare ho corretto il titolo

jquery 1.4.1

Luca — Tue, 26 Jan 2010 09:35:03 +0000

Neanche ci siamo abituati alla nuova versione di jquery che oggi già rilasciano al prima minor release. De seguito riporto le principali novità (prese sempre dal nuovo sito di jquery per la nuova versione)

New Features

A full list of the API changes can be found in the 1.4.1 category on the jQuery API site.

.live(“focus”) and .live(“blur”) now work – mapping to .live(“focusin”) and .live(“focusout”). (Documentation, Ticket)
.live(“hover”) now exists, mapping to .live(“mouseenter mouseleave”). (Documentation, Ticket)
It’s now possible to bind multiple event types with live. (Documentation, Ticket)
Calling .die() (with no arguments) removes all bound live event handlers. (Documentation, Ticket)
.height( function ) and .width( function ) now exist. (Height Documentation, Width Documentation, Ticket)
jQuery.parseJSON has been exposed, allowing you to parse JSON strings into JavaScript objects. (Documentation, Ticket)
jQuery.error has been exposed, to be used by plugin developers to provide informative user feedback. (Documentation, Ticket)

Riporto anche le categorie del codice dove ci sono dei bug fix di questa release

Bug Fixes

Core

Events

Traversing

Effects

Ajax

Offset

Manipulation

Come i link per scaricare la nuova potete andare qui oppure qui per la versione minified

Nella seconda pagina ci sono tutti i bug fix della verisione

Via [jquery14]

Jquery 1.4

Luca — Fri, 15 Jan 2010 10:26:55 +0000

Come recita il banner nell’home page di jquery Nuovo anno, nuova versione. Infatti, ieri è uscrita la nuova versione 1.4 della libreria javascript. Per festeggiare l’evento hano creatoun nuovo sito dove possiamo trovare tutte le informazioni sul rilascio di jquery dal’ultima RC.

Sicuramente interessante è l’annucio del rilascio della nuove versione o le domande e risposte.

Tutte le novità e modifiche sono presenti qui

Riporto un elenco delle nuove funzionalità:

Ci sono delle novità anche per quanto riguarda la parte AJAX, cito solo i titoli dei paragrafic eh riguardano la sezione

Nested param serialization (jQuery.param() Documentation, Commit 1, Commit 2)

JSON and script types auto-detected by content-type (jQuery.ajax Documentation, Commit 1, Commit 2)

Etag support has been added (jQuery.ajax() Documentation, Commit)

Strict JSON parsing, using native JSON.parse (jQuery.ajax() Documentation, Commit 1, Commit 2, Commit 3)

Serialize HTML5 elements (jQuery.param() Documentation, Commit)

Context for Ajax Request (jQuery.ajax() Documentation, Commit)

Success callback receives XHR object as third argument (jQuery.ajax() Documentation, Commit)

Explicitly set a content-type (jQuery.ajax() Documentation, Commit)

Explicitly specify a JSONP callback name (jQuery.ajax Documentation, Commit)

Avoid pre-flighting cross-domain XHR (Commit)

jQuery.ajax() is now using onreadystatechange instead of a timer (Commit)

Ce n’è da imparare!