Wordpress AJAX Login - ajax

Question

I am trying to build a custom wordpress ajax login form but I can't get it sorted. Here is the codes I use:
HTML:
<form class="well form-inline" id="login">
<div class="rowmargin">
<h4>Login</h4>
</div>
<div class="rowmargin">
<input type="text" name="username" id="loginUsername" class="input-medium" placeholder="Username">
<input type="password" name="password" id="loginPassword" class="input-medium" placeholder="Password">
</div>
<a class="btn btn-primary" id="loginButton"><i class="icon-check icon-white"></i> Login</a>
</form>
JS:
<script type="text/javascript">
$(document).ready(function() {
$("#loginButton").click(function() {
var username = $('#loginUsername').val();
var password = $('#loginPassword').val();
var rememberme = "forever";
var redirect = '<?php bloginfo('url'); ?>';
var data = {
user_login: username,
user_password: password,
remember: rememberme,
redirect_to: redirect
}
$.ajax({
url: '<?php bloginfo('url'); ?>/wp-login.php',
data: data,
type: 'GET',
dataType: 'jsonp',
success: function( result ) {
if (result.success==1) {
alert("Ok!");
} else {
alert("Not Ok!");
}
}
});
});
});
</script> <!-- Login Script --->
Can someone tell me what am I doing wrong here?

Answer 1

WordPress: Simple Ajax Login Form
<form id="login" action="login" method="post">
<h1>Site Login</h1>
<p class="status"></p>
<label for="username">Username</label>
<input id="username" type="text" name="username">
<label for="password">Password</label>
<input id="password" type="password" name="password">
<a class="lost" href="<?php echo wp_lostpassword_url(); ?>">Lost your password?</a>
<input class="submit_button" type="submit" value="Login" name="submit">
<a class="close" href="">(close)</a>
<?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
</form>
--
<?php
//add this within functions.php
function ajax_login_init(){
wp_register_script('ajax-login-script', get_template_directory_uri() . '/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' => __('Sending user info, please wait...')
));
// Enable the user with no privileges to run ajax_login() in AJAX
add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
}
// Execute the action only if the user isn't logged in
if (!is_user_logged_in()) {
add_action('init', 'ajax_login_init');
}
function ajax_login(){
// First check the nonce, if it fails the function will break
check_ajax_referer( 'ajax-login-nonce', 'security' );
// Nonce is checked, get the POST data and sign user on
$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'=>__('Wrong username or password.')));
} else {
echo json_encode(array('loggedin'=>true, 'message'=>__('Login successful, redirecting...')));
}
die();
}
Create a file ajax-login-script.js within theme's directory and paste this js
jQuery(document).ready(function($) {
// Show the login dialog box on click
$('a#show_login').on('click', function(e){
$('body').prepend('<div class="login_overlay"></div>');
$('form#login').fadeIn(500);
$('div.login_overlay, form#login a.close').on('click', function(){
$('div.login_overlay').remove();
$('form#login').hide();
});
e.preventDefault();
});
// Perform AJAX login on form submit
$('form#login').on('submit', function(e){
$('form#login p.status').show().text(ajax_login_object.loadingmessage);
$.ajax({
type: 'POST',
dataType: 'json',
url: ajax_login_object.ajaxurl,
data: {
'action': 'ajaxlogin', //calls wp_ajax_nopriv_ajaxlogin
'username': $('form#login #username').val(),
'password': $('form#login #password').val(),
'security': $('form#login #security').val() },
success: function(data){
$('form#login p.status').text(data.message);
if (data.loggedin == true){
document.location.href = ajax_login_object.redirecturl;
}
}
});
e.preventDefault();
});
});

Answer 2

You would need to use wp function for login.
http://codex.wordpress.org/Function_Reference/wp_signon
Then use ajax to access this function to log in. You could write a log in function in functions.php
Click below to see how to use ajax in wordpress.
http://wpmu.org/how-to-use-ajax-with-php-on-your-wp-site-without-a-plugin/

Answer 3

<form class="well form-inline" id="login">
<div id="message"></div>
<div id="loading" style="display:none;"></div>
<div class="rowmargin">
<h4>Login</h4>
</div>
<div class="rowmargin">
<input type="text" name="username" id="loginUsername" class="input-medium" placeholder="Username">
<input type="password" name="password" id="loginPassword" class="input-medium" placeholder="Password">
</div>
<a class="btn btn-primary" id="loginButton"><i class="icon-check icon-white"></i> Login</a>
</form>
jQuery(document).ready(function(){
jQuery('#loading').hide();
jQuery("#loginButton").click(function() {
jQuery('#message').hide().html('');
jQuery('#loading').hide();
var input_data = jQuery('#login').serialize();
var logUser = jQuery('#loginUsername').val();
var logPass = jQuery('#loginPassword').val();
if(logUser == '' && logPass != ''){ jQuery('#message').show().html('Your Username is empty!'); return false; }
if(logPass == '' && logUser != ''){ jQuery('#message').show().html('Your Password is empty!'); return false; }
if(logUser == '' && logPass == ''){ jQuery('#message').show().html('Your Username and Password is empty!'); return false; }
jQuery('#loading').show();
jQuery.ajax({
type: "POST",
url: "<?php echo site_url('wp-login.php','login_post'); ?>",
data: input_data,
success: function(msg) {
// login success. redirect users to some page.
jQuery(location).attr('href', '<?php echo home_url( '/thank-you/' ); ?>');
},
error: function(msg) {
// login error.
jQuery('#message').show();
jQuery('#message').html("<?php _e('Your login is not correct. Please try again.'); ?>");
jQuery('#loading').hide();
}
});
return false;
});
});

Answer 4

All AJAX-requests in WordPress must go though wp-admin/admin-ajax.php. wp-login.php won't respond.
http://codex.wordpress.org/Class_Reference/WP_Ajax_Response
There is a set of actions available but none of them comes close to a login-method. You could register your own actions though and handle the login process yourself if you know what you are doing.
http://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action)

Answer 5

add_action('wp_ajax_my_login_action','my_action');
add_action('wp_ajax_nopriv_my_login_action','my_action');
function my_action(){
$userdata = array(
'user_login' => $_POST['user_login'],
'user_password' => $_POST['user_password']
);
$user = wp_signon($userdata);
$response = array();
if ( is_wp_error( $user)) {
$response = array('status'=>'fail', 'msg' => $user->get_error_message() );
}
else{
$response = array('status'=>'pass');
}
echo json_encode($response);
die;
}
add_shortcode('login','loginfunction');
function loginfunction()
{
if( is_user_logged_in() ){
echo 'logout';
}
?>
<center>Login Form:</center>
<form action="" method="post" id="login">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control form-control-sm" id="user_login" aria-describedby="emailHelp" name="user_login">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control form-control-sm" id="user_password" aria-describedby="emailHelp" name="user_password">
</div>
<input type="hidden" name="action" value="my_login_action">
<button type="submit" class="btn btn-primary btn-block">log in</button>
<div class="sign-up">
Don't have an account? Create One
</div>
</form>
<script>
var ajax_url= '<?php echo admin_url('admin-ajax.php');?>';
jQuery(document).ready(function($){
$("#login").submit(function(e){
e.preventDefault();
$.ajax({
type:"POST",
url: ajax_url,
data:{
action:'my_login_action',
user_login:$('input[name="user_login"]').val(),
user_password:$('input[name="user_password"]').val()
}
}).done(function(response){
let result = JSON.parse(response);
if(result.status=='pass')
{
window.location.href='http://localhost/check_wp/';
}
else{
// alert(result.msg);
alert('Sorry Password is worrng');
}
})
});
});
</script>
<?php
}