How zM AJAX Login & Register Works
The zM AJAX Login & Register is designed to be simple to implement for a WordPress admin, intuitive and minimal for front-end users and non-intrusive to the WordPress admin. You can download zM AJAX Login & Register for free from WordPress.org and view a demo here.
Login
The login process is two-fold, one part JavaScript, one part PHP. The HTML structure and CSS styling will not be covered, only the JavaScript and PHP will be.
JavaScript
The login process is submitted via AJAX to a method that uses wp_signon, and returns a JSON object using wp_send_json with the appropriate status codes.
Our JavaScript function below is attached the to the document, hence the syntax $( document ).on(... vs $('.login_form').on(.... This is because the html element we are attaching this event to may or may not be present when the page loads, i.e., it may be injected at a later time (hence when the login dialog is in use).
Next, an AJAX event is fired. Note the data being sent is in the form of a URL parameter*, which contains;
- The action, i.e.,
action=login_submit– This is the name of the PHP function or method that is going to handle our request - The entire contents of the form, i.e.,
$(this).serialize()– jQuery’s native .serialize() function is used to serialize the entire form
$( document ).on('submit', '.login_form', function( event ){
event.preventDefault();
$.ajax({
data: "action=login_submit&" + $(this).serialize(),
type: "POST",
url: _ajax_login_settings.ajaxurl,
success: function( msg ){
if ( msg == 0 ){
$('#ajax-login-register-login-dialog').dialog('close');
} else {
zMAjaxLoginRegister.reload();
}
}
});
});
*In other cases you can use a JSON notation, such as;
data = {
action: login_submit,
login: $('.login').val(),
password: $('.password').val(),
security: $('.my-nonce').val()
}
PHP
Once the JavaScript has sent over the needed data the PHP method does the following:
- Check the AJAX request using check_ajax_referer
- Sanitizes all user input using esc_attr and sanitize_user
- Attempts to signon the user using wp_signon
- Returns the appropriate status via wp_send_json
public function login_submit( $user_login=null, $password=null, $is_ajax=true ) {
/**
* Verify the AJAX request
*/
if ( $is_ajax ) check_ajax_referer('login_submit','security');
/**
* Build our array of credentials to be passed into wp_signon.
* Default is to look for $_POST variables
*/
$user = wp_signon( array(
'user_login' => empty( $_POST['user_login'] ) ? $user_login : sanitize_user( $_POST['user_login'] ),
'user_password' => empty( $_POST['password'] ) ? $password : esc_attr( $_POST['password'] ),
'remember' => isset( $_POST['remember'] ) ? null : true
), false );
/**
* If signon is successful we print the user name if not we print "0" for
* false
*/
$status = is_wp_error( $user ) ? $this->status[1] : $this->status[0];
if ( $is_ajax ) {
wp_send_json( $status );
} else {
return $status;
}
}
Overall the login process simply a two-fold process, 1.) Get the user input, 2.) Sign the user on. From here we’ll look deeper into the registration process.
In a later topic we’ll discuss how user registration works, along with Facebook integration.
