Hi
I am making login script with ajax and php using re-captcha v3.
I made hidden field “token” in form and i am setting value of javascript token to that field on page load.
After form is submited it send data from ajax to php and validate token, return response works fine, but only once since it doesn’t refresh token after every response.
How can i reset token every time i get any response from php and set new token back to hidden field ?
Here is code:
<div id="message"></div>
<form id="login-form">
<input type="hidden" name="action" value="1">
<input type="hidden" name="token" value="" id="token">
<input type="text" id="username" name="username">
<input type="password" id="password" name="password">
<button class="btn btn-primary btn-block">Login</button>
</form>
<script src="https://www.google.com/recaptcha/api.js?render=SITE_KEY"></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('SITE_KEY', {action: 'homepage'}).then(function(token) {
$('#token').val(token); // here i set value to hidden field
});
});
</script>
<script>
// submit form with ajax
$(document).ready(function() {
$('#login-form').submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'login-check.php',
data: $('#login-form').serialize(),
success: function(response) {
if (response) {
$('div#message').html(msg);
if (response == '1') {
$('div#message').html('Logged in');
}
} else {
$('div#message').html('An error occured.');
}
},
error: function() {
$('div#message').html('fail');
}
});
return false;
});
});
</script>
EDIT - SOLVED:
I wrapped code that is getting re-captcha in function getRecaptcha() then i am calling it on page load, on success and on failure. I don’t know if this is best or smartest way but it works.
If someone have better solution please post it here, thanks.
<script>
function getRecaptcha() {
grecaptcha.ready(function() {
grecaptcha.execute('SITE_KEY', {action: 'homepage'}).then(function(token) {
$('#token').val(token); // here i set value to hidden field
});
});
}
</script>
<script>
// submit form with ajax
$(document).ready(function() {
getRecaptcha(); // called here
$('#login-form').submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'login-check.php',
data: $('#login-form').serialize(),
success: function(response) {
getRecaptcha(); // called here
if (response) {
$('div#message').html(msg);
if (response == '1') {
$('div#message').html('Logged in');
}
} else {
$('div#message').html('An error occured.');
}
},
error: function() {
getRecaptcha(); // called here
$('div#message').html('fail');
}
});
return false;
});
});
</script>
