John Davidson

Message:

I´m traying to do logging in my web with ajax. But i need generated google key when i do click in login, and before to do login. I have this function:

$('#main-login-form').on('submit', function(e){

        renewKeyRecaptcha();

        //e.preventDefault();

        



        let key = $("#recaptchaResponse").val();

        console.log(key);



        if(key != null || key != ""){

        

            var $this = $(this);



            $(this).find('input').removeClass('is-invalid');

            $(this).find('.error').html('');

    

            var data = $this.serializeArray();

            data.push({name: 'currentName', value: config.url.currentName});





            $.ajax({

                type: $this.attr('method'),

                url: $this.attr('action'),

                data: data,

                dataType: $this.data('type'),

                success: function (response) {

                    if(response.success) {

                        $(location).attr('href', response.redirect);

                    }

                    console.log(response);

                },

                error: function (jqXHR) {

                    var response = JSON.parse(jqXHR.responseText);

                    

                    if (response.errors.password) {

                        $($this).find('input[name="password"]').addClass('is-invalid');

                        $($this).find('.password-error').html(response.errors.password);

                    } else if (response.errors.email) {

                        $($this).find('input[name="email"]').addClass('is-invalid');

                        $($this).find('.email-error').html(response.errors.email);

                    } else if (response.errors.gRecaptchaResponse) {

                        $($this).find('input[name="g-recaptcha-response"]').addClass('is-invalid');

                        $($this).find('.g-recaptcha-response-error').html(response.errors.gRecaptchaResponse);

                    }

                }

            });

        }

    });

this function call to renewKeyRecaptcha(); that generated key, but i need to do click login twice and before i´m login... i need to do once click in login and generate key and login... But i can´t. I don´t know if i´m doing well or i would do to another way.

My function that generate key:

function renewKeyRecaptcha(){

        // add key google to input

        var key = config.url.recaptchaGoogle;

        grecaptcha.ready(function() {

            grecaptcha.execute(key, {action: 'login'}).then(function(token) {

                $("#recaptchaResponse").val(token);

                $("#recaptchaResponseRegister").val(token);

            });

        }); 

    }

this function run ok.

Thanks for help.

---

My Answer:
document').ready(function(){
$('#loginForm').submit(function(e){
e.preventDefault();

grecaptcha.ready(function() {
grecaptcha.execute('YOUR_SITE_KEY', {action: 'login'}).then(function(token) {
// Add the token to the form data
$('#loginForm').append('');

// Submit the form
$.ajax({
url: 'login.php',
type: 'POST',
data: $('#loginForm').serialize(),
success: function(response){
// Handle the response from the server
}
});
});
});
});
});


In this code, replace 'YOUR_SITE_KEY' with your actual Google reCAPTCHA site key. This code will execute the reCAPTCHA v3 verification when the login form is submitted, add the token to the form data, and then submit the form via AJAX to the login.php file. You can then handle the response from the server in the success function.