Construyendo un formulario de login personalizado usando AJAX

13 nov 2013, 22:08:11
Vistas: 18K
Votos: 2

Estoy intentando usar este tutorial WordPress AJAX Login Without a Plugin – The Right Way de Natko Hasic para construir formularios de login, registro y recuperación de contraseña que manejen todo, incluyendo mensajes de error con AJAX. Las diferencias entre el tutorial y mi proyecto son... No quiero hacerlo en un popup y lo estoy implementando en un plugin, no en la carpeta raíz del tema.

Aquí está el código que tengo...

El código en la plantilla de página:

<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="Usuario" />
    </p>

    <p>
        <input type="password" name="password" id="password" placeholder="Contraseña" />
    </p>

    <button name="submit" id="submit" class="btn"><?php _e("Iniciar sesión", "shorti"); ?></button>
    <a class="lost" href="<?php echo wp_lostpassword_url(); ?>">¿Olvidaste tu contraseña?</a>

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

</form>

El código en el archivo principal de mi plugin .php:

<?php // El script php que estoy intentando ejecutar

    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' => __( 'Enviando información de usuario, por favor espera...' )
        ));

        // Permite a usuarios sin privilegios ejecutar ajax_login() via AJAX
        add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
    }

    // Verifica si la información ingresada por el usuario es válida
    function ajax_login() {
        // Primero verifica el nonce, si falla la función se detendrá
        check_ajax_referer( 'ajax-login-nonce', 'security' );

    //El nonce es válido, obtiene los datos POST e inicia sesión
    $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'=>__( '¡Usuario o contraseña incorrectos!' )));
    } else {
        echo json_encode( array( 'loggedin'=>true, 'message'=>__('Login exitoso, redirigiendo...' )));
    }

    die();
}

El contenido de mi archivo ajax-login-script.js:

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

    // Ejecuta login AJAX al enviar el formulario
    $('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', //llama a 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();
    });
});

No estoy familiarizado con AJAX ni JS, ¡así que cualquier ayuda que puedas brindar será muy apreciada!

6
Comentarios

¿Qué es exactamente lo que no funciona?

eskimo eskimo
13 nov 2013 23:26:39

@eskimo: Si envías el formulario con campos vacíos o datos inválidos, simplemente recarga la página y si ingreso datos correctos también recarga la página mostrando aún el formulario de login en lugar de la información real de las páginas. Como dije, esta es básicamente mi primera vez intentando trabajar con JS/AJAX... así que no tengo idea de dónde empezar a buscar para cambiar las cosas. Gracias

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

No he leído el tutorial completo pero lo primero que noto es que el action de tu formulario está vacío (action="") y en el tutorial ellos definen action="login". Me parece que eso es algo crucial que hay que corregir.

eskimo eskimo
14 nov 2013 00:50:51

@eskimo: sí, lo había puesto ahí pero cuando usé el formulario me redirigía a mi página actual con una extensión de /login que devuelve un error 404 de página. No estoy seguro si eso se consideraría progreso o no :P

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

El 404 es normal ya que la página login no existe. No debería ir a esa página sino enviar el formulario. He detectado otro error, que también es crucial. En ajax-login-script.js tienes $('form#login_form').on('#submit', function(e). Elimina el '#' antes de submit. Y asegúrate de que action="login" sigue configurado en el código del formulario.

eskimo eskimo
14 nov 2013 11:30:15

@eskimo: ¡Finalmente retomé esta parte del proyecto y cambié lo que señalaste y todo funciona genial! ¡¡¡Muchísimas gracias!!! :)

Designer 17 Designer 17
15 dic 2013 00:26:15
Mostrar los 1 comentarios restantes
Todas las respuestas a la pregunta 1
1

¡Gracias a @eskimo pude hacer que esto funcionara y pensé en compartir una respuesta para cualquiera que esté intentando hacer lo mismo!

En el archivo ajax-login-script.js todo lo que tuve que hacer fue cambiar esto $('form#login_form').on('#submit', function(e) por esto... $('form#login_form').on('submit', function(e) simplemente eliminando el # antes de llamar a submit.

¡Espero que esto ayude a alguien!

27 ene 2014 02:17:21
Comentarios

Esto fue útil, gracias por compartir.

Hexodus Hexodus
13 ago 2014 18:46:28