1

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

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 :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.