WordPress: implementare un login in AJAX con jQuery

Short link

In WordPress possiamo implementare un login in AJAX con jQuery.

Definiamo la nostra action AJAX per il login:


function my_sign_in() {
    $username = trim( $_POST['signin_username'] );
    $password = trim( $_POST['signin_pwd'] );
    $creds = array();
	  $creds['user_login'] = $username;
	  $creds['user_password'] = $password;
	  $creds['remember'] = true;
    $user = wp_signon( $creds, false );
    $output = array();

    if( is_wp_error( $user ) ) {
        $output['error'] = __( 'Login non valido', 'textdomain' );
    } else {
        $output['success'] = true;
    }
    wp_send_json( $output );
}

add_action( 'wp_ajax_nopriv_my_signin', 'my_sign_in' );

Quindi con jQuery avremo:


$( "#signin-form" ).on( "submit", function( e ) {
    e.preventDefault();
    var $form = $( this );
    var successsfulRedirectUrl = location.protocol + "//" + location.host + "/wp-admin/";
    var queryString = "action=my_signin&" + $form.serialize();

    $form.find( ".error" ).hide();

    $.post( "/wp-admin/admin-ajax.php", queryString, function( response ) {
        if( response.error ) {
           $form.find( ".error" ).text( response.error ).show(); 
        } else if( response.success ) {
            window.location = successsfulRedirectUrl;
        }
    });
});

Se il login ha avuto successo, reindirizziamo l'utente sulla dashboard di WordPress. Viceversa, mostriamo un messaggio di errore.