Creare un form di login personalizzato utilizzando AJAX

13 nov 2013, 22:08:11
Visualizzazioni: 18K
Voti: 2

Sto cercando di utilizzare questo tutorial WordPress AJAX Login Without a Plugin – The Right Way di Natko Hasic per creare dei form di login, registrazione e recupero password che gestiscano tutto, inclusi i messaggi di errore, con AJAX. Le differenze tra il tutorial e il mio progetto sono... Non voglio farlo in un popup e lo sto implementando in un plugin, non nella cartella radice del tema.

Ecco il codice che ho finora...

Il codice nel template della pagina:

<form name="login_form" id="login_form" class="login_form" action="" method="post">
    <p class="status"></p>

    <p>
        <input type="text" name="username" id="username" placeholder="Username" />
    </p>

    <p>
        <input type="password" name="password" id="password" placeholder="Password" />
    </p>

    <button name="submit" id="submit" class="btn"><?php _e("Accedi", "shorti"); ?></button>
    <a class="lost" href="<?php echo wp_lostpassword_url(); ?>">Hai dimenticato la password?</a>

    <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>

</form>

Il codice nel file principale del mio plugin .php:

<?php // Lo script php che sto cercando di eseguire

    add_action( 'init', 'ajax_login_init' );
    function ajax_login_init() {

        wp_register_script( 'ajax-login-script', plugin_dir_url( __FILE__ ) . 'js/ajax-login-script.js', array('jquery') );
        wp_enqueue_script( 'ajax-login-script' );

        wp_localize_script( 'ajax-login-script', 'ajax_login_object', array(
            'ajaxurl' => admin_url( 'admin-ajax.php' ),
            'redirecturl' => home_url(),
            'loadingmessage' => __( 'Invio informazioni utente, attendi...' )
        ));

        // Permette agli utenti senza privilegi di eseguire ajax_login() via AJAX
        add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
    }

    // Verifica se le informazioni inserite dall'utente sono valide
    function ajax_login() {
        // Prima verifica il nonce, se fallisce la funzione si interrompe
        check_ajax_referer( 'ajax-login-nonce', 'security' );

    // Il nonce è verificato, ottiene i dati POST e effettua il login
    $info = array();
        $info['user_login'] = $_POST['username'];
        $info['user_password'] = $_POST['password'];
        $info['remember'] = true;

    $user_signon = wp_signon( $info, false );
    if ( is_wp_error( $user_signon )) {
        echo json_encode( array( 'loggedin'=>false, 'message'=>__( 'Username o password errati!' )));
    } else {
        echo json_encode( array( 'loggedin'=>true, 'message'=>__('Login effettuato con successo, reindirizzamento...' )));
    }

    die();
}

Il contenuto del mio file ajax-login-script.js:

jQuery(document).ready(function($){

    // Esegue il login AJAX all'invio del form
    $('form#login_form').on('#submit', function(e){
        $('form#login_form p.status').show().text(ajax_login_object.loadingmessage);
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: ajax_login_object.ajaxurl,
            data: { 
                'action': 'ajaxlogin', //richiama wp_ajax_nopriv_ajaxlogin
                'username': $('form#login_form #username').val(), 
                'password': $('form#login_form #password').val(), 
                'security': $('form#login_form #security').val() },
            success: function(data){
                $('form#login_form p.status').text(data.message);
                if (data.loggedin == true){
                    document.location.href = ajax_login_object.redirecturl;
                }
            }
        });
        e.preventDefault();
    });
});

Non ho molta familiarità con AJAX né con JS, quindi qualsiasi chiarimento sull'argomento è molto apprezzato!

6
Commenti

Quindi cosa esattamente non funziona?

eskimo eskimo
13 nov 2013 23:26:39

@eskimo: Se invii il modulo con campi vuoti o dati non validi, semplicemente ricarica la pagina e se inserisco i dati corretti ricarica comunque la pagina mostrando ancora il modulo di login invece delle informazioni effettive della pagina. Come ho detto, questa è praticamente la mia prima volta che provo a lavorare con JS/AJAX... quindi non ho idea di dove iniziare a cercare per modificare le cose. Grazie

Designer 17 Designer 17
14 nov 2013 00:01:41

Non ho letto il tutorial completo, ma la prima cosa che noto è che l'action del tuo form è vuoto (action="") mentre nel tutorial definiscono action="login". Mi sembra che questa sia una cosa cruciale da correggere.

eskimo eskimo
14 nov 2013 00:50:51

@eskimo: sì, l'avevo inserito ma quando usavo il form mi reindirizzava alla pagina corrente con un'estensione /login che restituisce un errore 404 pagina. Non sono sicuro se questo possa essere considerato un progresso o meno :P

Designer 17 Designer 17
14 nov 2013 01:00:02

Il 404 è normale dato che la pagina login non esiste. Non dovrebbe andare a quella pagina ma inviare il form. Ho trovato un altro errore, che è cruciale. In ajax-login-script.js hai $('form#login_form').on('#submit', function(e). Rimuovi il '#' prima di submit. E assicurati che action="login" sia ancora impostato nel codice del form.

eskimo eskimo
14 nov 2013 11:30:15

@eskimo: Finalmente sono tornato a questa parte del progetto e ho cambiato ciò che hai indicato e funziona tutto alla grande! Grazie mille!!! :)

Designer 17 Designer 17
15 dic 2013 00:26:15
Mostra i restanti 1 commenti
Tutte le risposte alla domanda 1
1

Grazie a @eskimo sono riuscito a far funzionare questo e ho pensato di condividere una risposta per tutti quelli che stanno cercando di fare lo stesso!

Nel file ajax-login-script.js tutto quello che ho dovuto fare è cambiare questo $('form#login_form').on('#submit', function(e) in questo... $('form#login_form').on('submit', function(e) semplicemente rimuovendo il # prima di chiamare submit.

Spero che questo possa aiutare qualcuno!

27 gen 2014 02:17:21
Commenti

Questo è stato utile, grazie per la condivisione.

Hexodus Hexodus
13 ago 2014 18:46:28