WordPress: login AJAX con la funzione wp_signon() e jQuery

WordPress: login AJAX con la funzione wp_signon() e jQuery

La funzione di WordPress wp_signon() serve ad effettuare il login automatico di un utente di WordPress. Si tratta di una funzione molto utile per implementare form di login personalizzati.

Questa funzione accetta due parametri:

  1. Un array associativo contenente le credenziali dell'utente (il suo username e la sua password in chiaro).
  2. Un flag booleano che indica se WordPress debba o meno usare un cookie sicuro.

Supponiamo di voler creare un form di login in AJAX. Per prima cosa definiamo la chiamata AJAX:


function my_custom_login() {
	$username = $_POST[ 'user' ];
	$password = $_POST[ 'pwd' ];
	$output = array();
	
	$credentials = array();
	
	$credentials[ 'user_login' ] = $username;
	$credentials[ 'user_password' ] = $password;
	$credentials[ 'remember' ] = true;
	
	
	$user = wp_signon( $credentials, false );
	
	if ( is_wp_error( $user ) ) {
		$output[ 'error' ] = $user->get_error_message();	
	} else {
		$output[ 'success' ] = get_bloginfo( 'url' );
	}
	
	echo json_encode( $output );
	exit();
}

add_action( 'wp_ajax_my_custom_login', 'my_custom_login' );
add_action( 'wp_ajax_nopriv_my_custom_login', 'my_custom_login' );

Una volta autenticato l'utente bisogna eseguire un refresh della pagina affinché l'azione abbia effetto sul sito. Questo refresh può essere ottenuto reindirizzando l'utente alla home page. Data la natura asincrona di AJAX, il reindirizzamento è necessario. Ecco il codice jQuery:


(function( $ ) {
	$( "#custom-login-form" ).on( "submit", function( e ) {
		e.preventDefault();
		var $form = $( this ),
			url = "http://" + location.host + "/wp-admin/admin-ajax.php",
			user = $( "#user", $form ).val(),
			pwd = $( "#pwd", $form ).val(),
			action = "my_custom_login",
			data = {
				action: action,
				user: user,
				pwd: pwd
			};
			
			$.post( url, data, function( resp ) {
				var respObj = JSON.parse( resp );
				if( respObj.success ) {
					window.location = respObj.success;
				} else {
					console.log( respObj.error );
				}
			
			});
	});

})( jQuery );

A questo punto l'utente è autenticato e se le sue impostazioni lo consentono potrà visualizzare la barra amministrativa sulla parte superiore del sito.

Torna su