如何在WordPress自定义登录表单中使用reCaptcha v3?

时间:2021-01-21 作者:Sh.Dehnavi

我试图创建一个custom login formcustom register form 通过ajax。我已经成功地做到了这一点,您可以在下面看到我的自定义登录表单代码。

问题是,我需要reCaptcha V3 用于我的表单(登录和注册),以确保安全。但我不知道如何在表单中添加和使用reCaptcha。所以我需要你的帮助。自定义登录表单的内容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 () {}

        });
    });
});
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 () {}

        });
    });
});

thanks a lot to help me

1 个回复
最合适的回答,由SO网友:Sh.Dehnavi 整理而成

我终于自己找到了解决办法。给你:)

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);
                
        };
    
    };

}
上帝保佑你:)

相关推荐

单点登录WordPress+AJAX

那个让我晚上睡不着觉。问题是用户已正确登录,但在页面刷新后,应立即登录,而无需重新加载页面。需要一双新鲜的眼睛来观察它。正确设置cookie和nonce似乎有问题,但不确定如何调试。非常感谢您的建议。function my_update_cookie($logged_in_cookie) { $_COOKIE[LOGGED_IN_COOKIE] = $logged_in_cookie; } add_action(\'set_logged_in_cookie\', \