Using reCaptcha3 Without Forms? - recaptcha

Question

I need to clear up what may be a potential misunderstanding between me and the recaptcha library.
All of the examples that I have seen from searching around and finding YouTube videos of the v3 implementation have been attaching the recaptcha ready/execute functions within the context of a <form>... but I am trying to use reCaptcha outside the context of a <form> in the following way:
A user enters a name or a portion of their name into a search box
The frontend, after a delay of input or the enter key, gets names in the system which match this input (partial or full)
The results are loaded into a drop-down that auto-populates.
The user selects the appropriate name through either clicking or arrowing down, and this searches for specific data about that user.
If I can figure out how to get the reCaptcha token to take place on the name dropdown search, I will be able to extend that solution to the fourth point... but I am afraid that it may not be possible.
All code below is JavaScript:
Relevant Bits
Listener on search field:
$(".web-search-content").on("keyup", ".searchField", function(e) {
if (
e.keyCode != 40 &&
e.keyCode != 38 &&
e.keyCode != 13 &&
e.keyCode != 27
) {
delayCall($(this), 800, nameSearch, e);
} else if (e.keyCode == 27) {
$(".name-search-results").remove();
}
});
nameSearch function:
function nameSearch(obj, e) {
if (!e) {
e = window.event;
}
var container = $(".name-search-results");
if (
e.keyCode != 40 &&
e.keyCode != 38 &&
e.keyCode != 13 &&
e.keyCode != 27
) {
var field = obj;
var value = field.val();
if (value != undefined && value.length > 0) {
var captchaToken = "";
grecaptcha.execute('<REDACTED>', {action: 'webSearch/nameSearch'}).then(function(token) {
captchaToken = token;
console.log(captchaToken);
document.getElementById("g-recaptcha-response").value = token;
})
$.post("../webSearch/nameSearch", { query: value, captchaToken: captchaToken }, function(resp) {
showNameResults(resp);
});
} else {
container.remove();
}
}
}
Can someone confirm that reCaptcha v3 must be used within the context of a form, or can it handle events like this... and if so, how?

Answer 1

reCAPTCHA v3 is not tied to a form submission. From the docs:
reCAPTCHA v3 will never interrupt your users, so you can run it whenever you like without affecting conversion. reCAPTCHA works best when it has the most context about interactions with your site, which comes from seeing both legitimate and abusive behavior. For this reason, we recommend including reCAPTCHA verification on forms or actions as well as in the background of pages for analytics.
Note: You can execute reCAPTCHA as many times as you'd like with different actions on the same page.
So, you don't need to wait for the user to submit the form to run reCAPTCHA. Instead, you can make the call in the background for different actions across the site. Store the returned score and then check that on form submission to decide what action you want to take.
// Decide what score you want to allow as a pass
const threshold = 0.5;
// Set up a variable
let score = null;
// Call reCAPTCHA on page load
grecaptcha.ready(function () {
grecaptcha.execute('[redacted]', { action: 'pages/search' }).then(function (token) {
// Create an endpoint on your server to validate the token and return the score
fetch('/recaptcha-verify?action=pages/search&token=' + token).then(function (response) {
response.json().then(function (data) {
score = data.score;
});
});
});
});
// Later, e.g. in the form submission just check if the score is above the threshold
if (score >= threshold) {
// success
submitForm();
} else {
// score too low
doSomethingElse();
}
This is the approach used here:
https://recaptcha-demo.appspot.com/recaptcha-v3-request-scores.php
https://github.com/google/recaptcha/blob/master/examples/recaptcha-v3-request-scores.php