I tried to create a custom login form and custom register form by ajax. I have been successful to make that and you can see my code below for custom login form.
the issue is, I need to use reCaptcha V3 for my forms (login and register) for security. but I do not know how to add and use reCaptcha for my forms. so I need your help. what I have for custom login form by ajax:
in Fuctions.php
function karnetacom_scripts(){
wp_enqueue_script('ajax-forms-js',get_template_directory_uri().'/logreg/ajax-for-forms.js',array('jquery'),false,true);
wp_localize_script('ajax-forms-js','data',array(
'ajax_url' => admin_url('admin-ajax.php'),
'redirecturlajax' => site_url(),
));
}
add_action('wp_enqueue_scripts','karnetacom_scripts');
// ajax login form
include get_template_directory() . '/logreg/ajax-login-form-function.php';
login form as a template page
<?php /* Template Name: login-form-ajax */ ?>
<?php get_header(); ?>
<div class="usereditprofile">
<?php if ( is_user_logged_in() ) { ?>
<div class="singlepagecontent wwarningparent">
<div class="singlewarning">
<div class="singlewarningicon">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="singlewarningtext">
you are logged in!!!
</div>
</div>
</div>
<?php } else { ?>
<div id="sh-ajax-login-wrapper" class="sh-ajax-login-wrapper">
<div class="ajax-login-message error" style="display: none;"></div>
<form action="<?php echo get_permalink(); ?>" name="sh-ajax-login-form" id="sh-ajax-login-form" method="post">
<input type="text" name="usernameloginajax" id="usernameloginajax" placeholder="username or email" required>
<input type="password" name="passwordloginajax" id="passwordloginajax" placeholder="password" required>
<input type="checkbox" name="rememberme" id="rememberme">
<label for="rememberme">remmeber me</label>
<input type="submit" id="sh-ajax-login-submit" value="login">
<?php wp_nonce_field('ajax-login-form-nonce','security'); ?>
</form>
</div>
<?php } ?>
</div>
<?php get_footer(); ?>
in ajax-for-forms.js
jQuery(document).ready(function ($) {
$('#sh-ajax-login-form').on('submit',function(event){
event.preventDefault();
var $this = $(this);
var $username = $this.find('#usernameloginajax').val();
var $password = $this.find('#passwordloginajax').val();
var $security = $this.find('#security').val();
var $remember = $this.find('#rememberme').prop('checked');
var $message = $('.ajax-login-message');
$message.slideUp(300);
if( $username === "" || $password === "" ){
$message.html('<p>please fill all fields</p>').slideDown(300);
return false;
}
//var $login_nonce = $('meta[name="security"]').attr('content');
//alert($_nonce);
$.ajax({
url:data.ajax_url,
type:'post',
dataType:'json',
data : {
action:'sh_ajax_login_form',
username: $username,
password: $password,
remember: $remember,
security: $security
},
success:function(response){
if( response.error ){
$message.html('<p>'+response.message+'</p>').slideDown(300);
}
if( response.success ){
$message.removeClass('error').addClass('success').html('<p>'+response.message+'</p>').slideDown(300);
//window.location.href = 'http://7learn.dev/profile';
//window.location.href = data.redirecturlajax;
}
},
error: function () {}
});
});
});
in ajax-login-form-function.php
<?php
add_action('wp_ajax_nopriv_sh_ajax_login_form','sh_ajax_login_form');
function sh_ajax_login_form(){
check_ajax_referer('ajax-login-form-nonce','security',true);
$username = sanitize_text_field($_POST['username']);
$password = sanitize_text_field($_POST['password']);
$rememberme = isset($_POST['rememberme']);
if( empty($username) || empty($password) ){
$result = array(
'error' => true,
'message' => 'please fill all fields'
);
wp_send_json($result);
}
$creds = array(
'user_login' => $username,
'user_password' => $password,
'rememember' => $rememberme
);
$login_user = wp_signon($creds,false);
if( is_wp_error($login_user)){
$result = array(
'error' => true,
'message' => 'email or username is incorrect.'
);
wp_send_json($result);
}
$result = array(
'success' => true,
'message' => 'you loggee in successfully'
);
wp_send_json($result);
}
thanks a lot to help me
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
I Found the Solution Finally Myself. here you are 🙂
.
inside Fuctions.php
function karnetacom_scripts(){
wp_enqueue_script('ajax-forms-js',get_template_directory_uri().'/logreg/ajax-for-forms.js',array('jquery'),false,true);
wp_localize_script('ajax-forms-js','data',array(
'ajax_url' => admin_url('admin-ajax.php'),
'redirecturlajax' => site_url(),
));
}
add_action('wp_enqueue_scripts','karnetacom_scripts');
// ajax login form
include get_template_directory() . '/logreg/ajax-login-form-function.php';
login form as a template page
<?php /* Template Name: login-form-ajax */ ?>
<?php get_header(); ?>
<div class="usereditprofile">
<?php if ( is_user_logged_in() ) { ?>
<div class="singlepagecontent wwarningparent">
<div class="singlewarning">
<div class="singlewarningicon">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="singlewarningtext">
you are logged in!!!
</div>
</div>
</div>
<?php } else { ?>
<div id="sh-ajax-login-wrapper" class="sh-ajax-login-wrapper">
<div class="ajax-login-message error" style="display: none;"></div>
<form action="<?php echo get_permalink(); ?>" name="sh-ajax-login-form" id="sh-ajax-login-form" method="post">
<input type="text" name="usernameloginajax" id="usernameloginajax" placeholder="username or email" required>
<input type="password" name="passwordloginajax" id="passwordloginajax" placeholder="password" required>
<input type="checkbox" name="rememberme" id="rememberme">
<label for="rememberme">remmeber me</label>
<input type="hidden" name="recaptcha_response" id="recaptchaResponse">
<input type="submit" id="sh-ajax-login-submit" value="login">
<?php wp_nonce_field('ajax-login-form-nonce','security'); ?>
</form>
</div>
<script async src="https://www.google.com/recaptcha/api.js?render=[SITE_KEY]"></script>
<?php } ?>
</div>
<?php get_footer(); ?>
in ajax-for-forms.js
jQuery(document).ready(function ($) {
$('#sh-ajax-login-form').on('submit',function(event){
event.preventDefault();
var $this = $(this);
var $username = $this.find('#usernameloginajax').val();
var $password = $this.find('#passwordloginajax').val();
var $security = $this.find('#security').val();
var $remember = $this.find('#rememberme').prop('checked');
var $message = $('.ajax-login-message');
$message.slideUp(300);
if( $username === "" || $password === "" ){
$message.html('<p>please fill all fields...</p>').slideDown(300);
return false;
} else {
$message.html('<p>sending...</p>').slideDown(300);
}
grecaptcha.ready(function () {
grecaptcha.execute('[site key]', { action: 'ajax_login_form' }).then(function (token) {
var recaptchaResponse = document.getElementById('recaptchaResponse');
recaptchaResponse.value = token;
// Make the Ajax call here
$.ajax({
url:data.ajax_url,
type:'post',
dataType:'json',
data : {
action:'sh_ajax_login_form',
username: $username,
password: $password,
remember: $remember,
security: $security,
token: token,
},
success:function(response){
if( response.error ){
$message.html('<p>'+response.message+'</p>').slideDown(300);
}
if( response.success ){
$message.removeClass('error').addClass('success').html('<p>'+response.message+'</p>').slideDown(300);
//window.location.href = 'http://7learn.dev/profile';
//window.location.href = data.redirecturlajax;
}
},
error: function () {}
});
});
});
});
});
in ajax-login-form-function.php
<?php
add_action('wp_ajax_nopriv_sh_ajax_login_form','sh_ajax_login_form');
function sh_ajax_login_form(){
check_ajax_referer('ajax-login-form-nonce','security',true);
$username = sanitize_text_field($_POST['username']);
$password = sanitize_text_field($_POST['password']);
$rememberme = isset($_POST['rememberme']);
if( empty($username) || empty($password) ){
$result = array(
'error' => true,
'message' => 'please fill all fields!!!'
);
wp_send_json($result);
} else {
// Build POST request to get the reCAPTCHA v3 score from Google
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_secret = '[secret key]';
//$recaptcha_response = $_POST['recaptcha_response'];
$recaptcha_response = sanitize_text_field($_POST['token']);
// Make and decode POST request
$recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
$recaptcha = json_decode($recaptcha);
//if ($recaptcha->success == true && $recaptcha->action == 'contact') {
if ($recaptcha->success == true && $recaptcha->score >= 0.5 && $recaptcha->action == 'ajax_login_form') {
//captacha validated successfully.
$creds = array(
'user_login' => $username,
'user_password' => $password,
'rememember' => $rememberme
);
$login_user = wp_signon($creds,false);
if( is_wp_error($login_user)){
$result = array(
'error' => true,
'message' => 'email or username is incorrect.'
);
wp_send_json($result);
}
$result = array(
'success' => true,
'message' => 'you logged in successfully.'
);
wp_send_json($result);
} else {
//echo "Robot verification failed, please try again.";
$result = array(
'error' => true,
'message' => 'Something went wrong. Please try again later'
);
wp_send_json($result);
};
};
}
God Bless You 🙂
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0