Adding reCAPTCHA v3 to Ebase forms

[chayward]

Hi,

We'd like to add reCAPTCHA v3 to all our Verj.io/Ebase forms.
Is there any guidance on how this can be done in Verj.io/Ebase?
In particular, if there is any way it could be done without having to amend every form individually, or at most to have only a simple amendment needed.

Thank you.

Regards,
Chris Hayward.

[sam]

Hi Chris,

We use reCAPTCHA v3 on our website.

In short, the flow is as follows:

1. Execute the captcha using your public key and get back a token
2. Pass the token to the server
3. Combine the token with your private key and verify the result
4. Pass the result back to the client and complete the action (or not) based on the result

I haven't tried applying this in a blanket way to all forms but your best bet is probably to add some code to your Presentation Template or a common component. You could choose to bind to the submit event of the form or to the click event of inputs with the submit type.

To verify on the server, the best option is probably to use the Client Server API to call a client-callable function, eg:

Code: Select all

$eb.executeFunction('verifyRecaptcha', token, false, false)

This would require you to have the same client-callable function on every form, easy if you're using a component, less so if not.

An option that gets around the client callable functions would be to write a RESTful web service to do the same thing. That way it would automatically be available to everything and you could use the fetch API to call it rather than using the Client Server API.

Either way, once you have the result, you'd need to stop the action if the captcha hasn't passed, perhaps by calling e.preventDefault() and/or e.stopImmediatePropagation().


As I say, I haven't tried to catch all things in one go before but I do have some working implementations applied to specific actions. Here's an example of the code we have attached to a download event in a component on the client side:

Code: Select all

var pfx = $eb.getComponentPrefix();
var me = this;
grecaptcha.ready(function() {
	// get a recaptcha token and pass it as part of the contact form processing
	grecaptcha.execute('[PUBLIC-KEY]', {action:'validate_download'})
	.then(function(token) {
		// process the submit passing in the recaptcha token and form data, and then refresh the screeen
		if($eb.executeFunction('verify', token, false, false, null, pfx)){
			window.location = me.dataset.href;
		}
	});
});

Here's an example of a block of code to verify a captcha result on the server

Code: Select all

var okThreshold = 0.5;

// process the recaptcha token collected on the client
function recaptchav3(token) {
	// define URI
	var uri = "https://www.google.com/recaptcha/api/siteverify";
	// secret key
	var secretKey = '[PRIVATE-KEY]';
	// parameters
	parameters = {"secret":secretKey,"response":token,"remoteIP":client.request.localAddr}
	// execute a post to the google API
	var response = services.rest.post(uri, null, null, parameters);
	if (response.isSuccess()) {
		var result = JSON.parse(response.getBody());
		if (result) {
			if (result.score >= okThreshold) return true;
		}
	}
	return false;
}

I hope that helps, let me know how you get on!

Regards,
Sam

[chayward]

Thanks Sam,
That's a very useful reply. I'll work through it and see if we can implement something along those lines.

Cheers,
Chris.