WordPress: come creare passo passo un proprio login

In questo tutorial vedremo come creare una procedura di Login personale, utilizzando anche funzionalità Ajax tramite jQuery. Ci sono vari metodi per personalizzare il login di WordPress, ad esempio tramite l’uso di hook e filtri (add_action(), add_filter()). Noi qui useremo una procedura più a basso livello, anche se ci interfacceremo comunque al Kernel di WordPress. Inoltre faremo in modo di convalidare un utente tramite la dupla email/password.

Perchè realizzare un proprio login?

  • In alcuni contesti può ritornare uitle avere il massimo controllo sulla pagina di login, per proporre un layout personalizzato ai nostri utenti registrati. Inoltre si può arricchire la pagina con informazioni utili, dal un logo al classico “Password dimenticata?”
  • Per permettere l’accesso tramite l’email (come nell’esempio qui trattato) al posto dello user_login standard di WordPress
  • Per avere la possibilità di inserire un pannello di login nella sidebar del nostro Blog
  • E infine, per avere uno scheletro – ed un’idea – per un ottimo Plugin :D

Ambiente

Nel nostro esempio/tutorial lavoreremo sulla root di WordPress all’interno di una cartella mylogin. Creiamo due file php all’interno di questa cartella: index.php e logon.php. Il primo conterrà l’interfaccia del nostro login, con tutte le funzioni Javascript/jQuery che ci servono. Il secondo file, logon.php, conterrà il codice per la validazione dell’utente. Creiamo poi una cartella css e dentro questa un file layout.css e una cartella images. All’interno della cartella images inseriremo un classico Ajax loader: createlo online su AjaxLoad.info. Alla fine dovreste avere:

  • mylogin
    • index.php
    • logon.php
    • css
      • layout.css
      • images
        • ajax-loader.gif

index.php

Questo file mostra il modulo di accesso tramite un form con due campi input, email e password:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>myLogin Demo</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6");</script>
<script type="text/javascript">
<!--
    google.setOnLoadCallback(
        function() {
            // pone il focus sul primo input appena la pagina è
            // caricata
            document.forms["mylogin"].email.focus();
        }    
    );
   
    /**
     * Mostra le informazioni di errore/avvertenza sulla nostra
     * form di login
     */
    function showError( str ) {
        $('div#error').html('<h2>'+str+'</h2>').slideDown();
    }
   
    /**
     * Validazione dei dati forniti nella form di login. Se tutto
     * è corretto, i dati saranno inviati alla pagina logon.php
     * tramite Ajax
     *
     * @author            Giovambattista Fazioli
     * @email             g.fazioli@undolog.com
     * @web               http://www.undolog.com
     */
    function checkLogin() {
        var f             = document.forms["mylogin"];
        var __filter     = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
        //
        $('div#error').slideUp(
            function() {
                //
                if( f.email.value == '' ) {
                    showError('Non hai inserito l\'email');
                    f.email.focus();
                    return false;
                }
                if (!__filter.test( f.email.value )) {
                    showError('Il campo email non è valido');
                    f.email.select();
                    f.email.focus();
                    return false;
                }
                if( f.password.value == '' ) {
                    showError('Non hai inserito la password');
                    f.password.focus();
                    return false;
                }
                $('div#ajax-loader').show('slow');
                $('body').css('cursor','wait');
                // Invio dei dati a logon.php in POST tramite Ajax
                $.post( 'logon.php', { email: f.email.value, password: f.password.value},
                    function( data ) {
                        $('div#ajax-loader').hide('slow');
                        $('body').css('cursor','default');
                        switch( data ) {
                            case '0':
                                // accesso consentito
                                document.location.href = 'http://mioblog.com/';
                                break;
                            case '-1':
                                showError('Accesso Negato. Email o Password errati');
                                break;
                            case '-2':
                                showError('Dati errati: tentativo di Hack!');
                                break;
                        }
                    }
                );
                // cut-off submit
                return false;
            }
        );
        return false;                    
    }
   
// -->
</script>
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen, projection" />
</head>

<body>
    <div id="login">
        <div id="logo"><h1 title="myLogin"><span>myLogin</span></h1></div>
        <div id="error" style="display:none"><h2>...</h2></div>
        <form id="mylogin" name="mylogin" method="post" action="logon.php" onsubmit="return( checkLogin() )">
            <table width="100%" border="0" cellspacing="8" cellpadding="4">
                    <tr>
                        <td align="right"><label for="email">email:</label></td>
                        <td><input type="text" name="email" id="email" /></td>
                    </tr>
                    <tr>
                        <td align="right"><label for="password">password:</label></td>
                        <td><input type="password" name="password" id="password" /></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center"><input type="submit" name="send" id="send" value="Invia" /></td>
                    </tr>
            </table>
            <div id="ajax-loader" style="display:none"><img src="css/images/ajax-loader.gif" /></div>
        </form>
    </div>
</body>
</html>

Nota: il file index.php, come potete notare dando uno sguardo al codice, potrebbe essere anche un normale file html. Tuttavia, nell’eventualità che un domani vogliamo inserire qualche spezzone di codice php, abbiamo già pronto il file come estensione.

La parte Javascript permette di:

  • Eseguire una serie di controlli sui campi email e password (vedi anche Validare email in Javascript e PHP)
  • Blocca l’invio (il submit) automatico e usa Ajax, tramite jQuery, per inviare i dati in POST alla pagina logon.php

layout.css

Il layout è possibile aggiustarlo come meglio si crede. Ne propongo una versione semplice da personalizzare a piacere:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px
}
div#login table {
margin:32px 0 0 0;
}
div#error {
margin:8px auto
}
div#error h2 {
display:block;
background:#fc3;
border:1px solid #f60;
padding:12px;
font-size:16px;
color:#a50;
}
div#ajax-loader {
/* da modificare in base al tipo di
   loader Ajax che avete scaricato
*/
width:220px;
margin:0 auto;
}

logon.php

La pagina logon.php viene chiamata direttamente con l’uso di Ajax dalla pagina index.php vista in precedenza. Nella versione qui presentata non ci sono controlli sulla “validità” dei dati passati in POST; viene svolto un semplice controllo di “presenza” tramite la funzione isset(). Tuttavia, visto che la parte Javascript è più soggetta a varie manomissioni, si può inserire un ulteriore controllo anche lato server/php. Si veda a tal proposito Classi Javascript e PHP per validare un’indirizzo di posta elettronica

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/**
 * Esegue il login di un utente Wordpress tramite email e password
 *
 * @author            Giovambattista Fazioli
 * @email             g.fazioli@undolog.com
 * @web               http://www.undolog.com
 */
 
if( isset( $_POST["email"] ) && isset( $_POST["password"] ) ) {
    // Invoke WordPress bootstrap
    @require_once('../wp-config.php');
    @require_once('../wp-includes/pluggable.php');
    @require_once('../wp-includes/registration.php');
   
    $error = 0;
   
    // mi connetto al database
    $db = @mysql_connect ( DB_HOST, DB_USER, DB_PASSWORD );
     
    // seleziono id DB
    if($db != 0) mysql_select_db( DB_NAME );
   
    // ottengo ID e user_login tramite l'indirizzo email
    $q = "SELECT `ID`, `user_login` FROM `wp_users`
          WHERE `user_email` = '".$_POST['email']."'";
   
    $wp_r = mysql_query ($q); $row = mysql_fetch_array ($wp_r); $wp_n = mysql_num_rows($wp_r);
    mysql_free_result ($wp_r);
   
    // trovato
    if ( $wp_n > 0 ) {
        $result = wp_authenticate( $_POST['email'], $_POST['password'] );
        if ( !is_wp_error($result) ) {
            wp_set_auth_cookie( $row["ID"], true);
            do_action('wp_login', $row["user_login"] );
            echo "0";
        } else echo "-1";
    } else {
        echo "-1";
    }
} else {
    echo "-2";
}

Questo codice permette un login simile a quello effettuato con il sistema WordPress. È interessante notare che la prima cosa da fare è includere il Kernel di WordPress in modo da poter utilizzare parte delle sue funzioni. In questo modo saremo a tutti gli effetti un “pezzo” di WordPress. Essendo un file elaborato via Ajax, questo resrituisce tre valori: 0, -1 e -2, rispettivamente per:

  • tutto ok, login consentito
  • username o password errati
  • tentativo di Hacking?

24 commenti a: “ ”

  1. 24 ott, 2008 Sniper Wolf:

    Ottima guida! Complimenti per la chiarezza e immediatezza con la quale ti esprimi ;)

    RispondiQuota
  2. 24 ott, 2008 EmaWebDesign:

    A parte le migliorie o l’utilità, diciamocelo, personalizzare è sempre divertente e piacevole ;)

    RispondiQuota
  3. 25 ott, 2008 Alessandro:

    Salve!
    Sono nel pieno della creazione di un mio primo blog con l’ausilo di WORDPRESS.
    Ho un bel pò di conoscenza dei linquaggi di programmazione web , di scripting e dell’sql.
    Tuttavia,non avendo ancora esperienza con i CMS, mi sono trovato difronte al problema di inserire una casella di login per far accedere all’area riservata i soli iscritti.
    Leggendo l’articolo ho compreso la funzionalità dei file e ho eseguito il tutto alla lettera, creando file e cartelle nella root del mio spazio web nei file FTP, incluso il ” ajax-loader.gif ” (Premetto che il mio provider è NETSONS).
    A questo punto,come fare per far visualizzare il LOGIN nella sidebar?? Cos’altro devo fare?

    Grazie in anticipo per le risposte!

    RispondiQuota
  4. 26 ott, 2008 Giovambattista Fazioli:

    @Sniper Wolf: Grazie! :D Fa sempre piacere che qualcuno apprezzi lo sforzo…

    RispondiQuota
  5. 26 ott, 2008 Giovambattista Fazioli:

    @EmaWebDesign: esatto… volevo scrivere la stessa cosa nelle motivazioni ma vedo che si è percepita ugualmente, anche senza dirlo esplicitamente :D

    RispondiQuota
  6. 26 ott, 2008 Giovambattista Fazioli:

    @Alessandro: per visualizzare il login all’interno del front-end del tuo blog, è suffciente che tu riproduca, con le dovute modifiche al layout, il contenuto del file “index.php” inserendolo, ad esempio, nella “sidebar”. La cosa importante è rispettare la logica del funzionamento ma la FORM con i campi INPUT (email e password) puoi inserirla sostanzialmente dove vuoi.
    Se desideri inserirla nella “sidebar” di WordPress, ad esemopio, è sufficiente modificare il file “sidebar.php” che trovi nella cartella del tuo tema.

    RispondiQuota
  7. 27 ott, 2008 Wordpress: scrivere un logout personale | Undolog.com:

    [...] Undolog.com Precedente [...]

  8. 10 nov, 2008 davide:

    ciao!scusate l’ignoranza in materia..ma avrei bisogno di inserire un form di registrazione all’interno del mio sito..fatto in flash. Non conoscendo programmazione php sapreste darmi qualche dritta? E’ complessa la cosa?Grazie mille!

    RispondiQuota
  9. 10 nov, 2008 Giovambattista Fazioli:

    @davide: se parli di “form di registrazione” penso subito che dovrai interagire in qualche modo con il server, ad esempio registrando gli utenti su un database MySQL. Se così è, sei purtroppo costretto ad usare un “linguaggio” lato server, come PHP, ASP, etc… Il front-end, invece, cioè la form di registrazione, puoi realizzarla sia in Flash che in HTML semplice. Questa, in definitiva, non fa altro che “inviare” i dati al server che effettua la vera e propria registrazione; tramite PHP, ASP, etc…
    La cosa in sè non è “complessa”, ma se non conosci un “minimo” di programmazione potrebbe risultarti quantomeno ardua.

    RispondiQuota
  10. 18 dic, 2008 luciano:

    ciao… complimenti per il sito e l’esempio…
    non ho capito una cosa… la form chiama in post il file logon.php che fa la query e restituisce un risultato… ma dov’è che il “chiamante” index.php prende i valori che logon.php gli manda?
    grazie!

    RispondiQuota
  11. 18 dic, 2008 Giovambattista Fazioli:

    @luciano:

    ma dov’è che il “chiamante” index.php prende i valori che logon.php gli manda?

    Vengono prelevati dalla FORM stessa nel momento che l’utente compila di dati, cioè quando inserisce username e password.

    RispondiQuota
  12. 31 gen, 2009 Santino Bivacqua:

    Interessante, io avrei usatoi però un po’ di piu’ jQuery…
    ad esempio si potrebbe usare al posto di:

    1
    2
    3
    var f = document.forms["mylogin"];
    // e poi
    var password = f.password.value;

    un piu’ semplice:

    1
    var password = $('#idInputPassword').val();

    daltronde da jQuery:
    “WRITE LASS DO MORE….” ;) vorrà dire pure qualcosa :D

    RispondiQuota
  13. 31 gen, 2009 Giovambattista Fazioli:

    @Santino Bivacqua:

    io avrei usato però un po’ di piu’ jQuery

    si a quello avevo pensato anch’io. Tuttavia l’accesso ai campi di un form è abbastanza semplice (e veloce) anche senza usare jQuery. Non è che ci sia da ottimizzare in questo caso, tuttavia l’accesso a:

    1
    var f = document.forms['mylogin'];

    è di tipo array/indice, quindi più rapido di:

    1
    $('input#idInputPassword').val()

    jQuery, infatti, deve “scorrere” tutto il DOM prima di intercettare l’input corretto. Sicuramente questo non è un caso critico, essendo il DOM (la pagina) piccola, e quindi si può usare indifferentemente jQuery o l’accesso semplice con le funzionalità base di Javascript.
    Tuttavia hai ragione, scrivere meno è utile :D Inoltre, se si vuole applicare qualche effetto jQuery bisogna per forza usare la tua indicazione :)

    RispondiQuota
  14. 31 gen, 2009 Santino Bivacqua:

    ma scusa non so come funziona internamente jQuery, ma credo che se usi l’id, iniziando per # jQuery capisca e usi document.getElementById('id') quindi non è che jQuery scorre tutti i nodi fino a quando trova quello di cui ha bisogno, è il motore javascript del browser che si occupa di fornirne il dato…..
    forse lo fa solo se tu indichi il nome di una classe tipo $('.class') in quanto non esiste l’equivalente getElementByClassName…. purtroppo

    In ogni caso l’uno vale l’altro, è solo per avere un unico modo di programmare, io da quando conosco jQuery non uso piu’ i metodi del DOM, molto piu’ prolisso… ti faccio un esempio, prova a scrivere con i metodi del DOM codice per rimuovere una riga di una tabella, con jQuery basta:

    1
    $('#idRow').remove(); // Col DOM è poco piu' complesso....
    RispondiQuota
  15. 31 gen, 2009 Giovambattista Fazioli:

    @Santino Bivacqua: giusto :) nel caso dell’id hai perfettamente ragione… sarebbe interessante esguire dei test… quasi quasi… :D

    RispondiQuota
  16. 24 mar, 2009 Trafico web:

    el wordpress es muy bueno, pero no he encontrado al forma de bajar la carga que este genera en los servidores, aun estamos solucionando un problema en un portal de entretenimeto que genera unas cargas altas con tan solo 10mil visitas unicas por dia, si alguien sabe como solucionar esto espero la ayuda por que ni en wordpress tienen solucion a esto

    RispondiQuota
  17. 30 mag, 2009 giggi:

    Succede solo a me oppure lo script logga chiunque a prescindere dalla password inserita?

    RispondiQuota
  18. 25 lug, 2009 Redemption:

    Ciao, mi sono imbattuto sul tuo blog facendo delle ricerche sul login di WordPress e devo dire che questo tutorial – ti faccio i complimenti perché è fatto molto bene – mi risulta molto utile, tuttavia sono leggermente arrugginito in programmazione per questo volevo chiederti, visto che ne sai a flotte :D , se
    posso fare in modo di loggarmi su WordPress ed un’altra piattaforma privata nello stesso istante.

    Mi spiego meglio: ho questa piattaforma privata che posso programmare a mio piacimento e volevo fare in modo che attraverso il login di questa potessi, nello stesso istante, eseguire due login sia alla piattaforma privata che a WordPress (avendo user e pass identici su entrambe).
    All’inizio avevo pensato ad inserire nella pagina di login della piattaforma privata un form nascosto che mi permettesse di avere una copia dei dati per loggarmi in modo diciamo “subdolo” anche a WordPress ma poi sono stato colpito dalla tua guida e magari c’è un modo più furbo per mandare i dati e fare in modo di loggarmi a WordPress attraverso un altra pagina… non so se mi sono spiegato bene e spero che tu mi risponda :D . Ciao Nicola

    RispondiQuota
  19. 03 ago, 2009 Giovambattista Fazioli:

    @Redemption: ciao Nicola, non conosco ovviamente la tua piattaforma privata, tuttavia il procedimento è sicuramente fattibile. In teoria tutto il codice che ti server (per WordPress) è presente in questo Post. Quello che devi decidere è solo dove eseguire i “due” login contemporanei.
    Se hai pieno accesso alla tua piattaforma potresti inserire il codice per l’accesso alla tua piattaforma privata nel file logon.php proposto in questo post, ad esempio.

    RispondiQuota
  20. 03 ago, 2009 Redemption:

    @Giovambattista Fazioli:
    Grazie per la risposta!

    Dovrei iniziare ad effettuare delle prove, comunque mi hai dato una buona speranza per l’implementazione e te ne sono grato :) .
    Ti chiedo un’ultima cosa, posso in qualche modo creare un utente direttamente da query sulla tabella utenti del database di wp o ci sono altre relazioni e chiavi da creare all’interno del db ?

    Come avrai capito devo in qualche modo esportare anche gli utenti dalla piattaforma privata a wp :) .

    RispondiQuota
  21. 07 ott, 2009 HackersGold:

    bella òla guida ma nn ho capito una cosa fondamentale dove devo mettere tutti i file ? nella cartella di wordpress ?? come faccio ??

    RispondiQuota
  22. 22 mag, 2010 renzo:

    …grazie mille ottimo post !!

    RispondiQuota
  23. 16 giu, 2010 Umberto:

    Se volessi salvare i dati di accesso del login di wordpress, quale sarebbero le due variabili user e pass che devo far salvare?

    RispondiQuota
  24. 08 ott, 2011 Guido:

    Ciao, ottimo tutorial!
    Ho solo un piccolo dubbio: come fai a settare WordPress in modo che la pagina iniziale del sito sia la index.php sotto la cartella MyLogin e non la index.php della root?
    Attualmente io ho messo un redirect nella index.php della root di WordPress:

    C’è un altro metodo più elegante?

    grazie

    RispondiQuota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
                   <code></code> // blocco generico
                   [cc_actionscript][/cc_actionscript] // Actionscript
                   [cc_actionscript3][/cc_actionscript3] // Actionscript 3
                   [cc_css][/cc_css] // CSS Style Sheet
                   [cc_html][/cc_html] // HTML
                   [cc_js][/cc_js] // Javascript
                   [cc_objc][/cc_objc] // Objective-C
                   [cc_php][/cc_objc] // PHP
                   [cc_sql][/cc_sql] // SQL