reCAPTCHA v3 for FormLister

Neoziox

Hi!

I modified FormLister to make it compatible with reCAPTCH v3. Please, tell me if I do right and if this change can be implemented into the next version of FormLister.

Change the file /assets/snippets/FormLister/lib/captcha/reCaptcha

public function getPlaceholder()
    {
        $siteKey = \APIhelpers::getkey($this->cfg, 'siteKey');
		$reCAPTCHAversion = \APIhelpers::getkey($this->cfg, 'reCAPTCHAversion', "2");
		$classButton = \APIhelpers::getkey($this->cfg, 'classButton', "g-recaptcha");
		$textButton = \APIhelpers::getkey($this->cfg, 'textButton', "Submit");
        $type = \APIhelpers::getkey($this->cfg, 'type', 'image');
        $size = \APIhelpers::getkey($this->cfg, 'size', 'normal');
        $tabindex = \APIhelpers::getkey($this->cfg, 'tabindex', 0);
        $theme = \APIhelpers::getkey($this->cfg, 'theme', 'light');
        $id = \APIhelpers::getkey($this->cfg, 'id');
        $id = 'id="' . $id . '-recaptcha"';
        $badge = \APIhelpers::getkey($this->cfg, 'badge', 'bottomright');
        $callback = \APIhelpers::getkey($this->cfg, 'callback', '');
        $expcallback = \APIhelpers::getkey($this->cfg, 'expired_callback', '');
        $out = '';
        if (!empty($siteKey)) {
			switch($reCAPTCHAversion) {
				case "3":
					$out = "<button class=\"{$classButton}\" data-sitekey=\"{$siteKey}\" data-callback='onSubmit' data-action='submit'>{$textButton}</button>";
					break;
				default:
					$out = "<div {$id} class=\"g-recaptcha\" data-sitekey=\"{$siteKey}\" data-type=\"{$type}\" data-tabindex=\"{$tabindex}\" data-size=\"{$size}\" data-theme=\"{$theme}\" data-callback=\"{$callback}\" data-expired-callback=\"{$expcallback}\" data-badge=\"{$badge}\"></div>";
					break;
			}
        }

        return $out;
    }

Add this parameters into the FormLister call:

&captchaParams=`{
	"reCAPTCHAversion":"3",
	"siteKey":"---yoursiteKey---",
	"secretKey":"---yourSecretKey---",
	"classButton":"g-recaptcha button is-link",
	"textButton":"Envoyer",
	"errorCodeFailed":"Il y a erreur avec le reCAPTCHA"
}`

Add in the HTML page:

<script src='https://www.google.com/recaptcha/api.js?hl=fr'></script>
<script>
	function onSubmit(token) {
		document.getElementById("contactForm").submit();
	}
</script>

And finally, instead of your submit button, just add the placeholder [+captcha+]

The call to verify the response is the same (if i'm not talking nonsense).

Tell me if I forgot something.

Thanks.

fourroses666

Cool, although I use the Ajax version (because version 2 was not spamproof) its nice to see the version 3!
If it works you could send a Pull Request (https://github.com/Pathologic/FormLister) or maybe someone out here on the Forum could test it first. Not sure if Pathologic uses Google reCaptcha.

Neoziox $reCAPTCHAversion = \APIhelpers::getkey($this->cfg, 'reCAPTCHAversion', "2");
Not sure, but does that has to be 3?

Neoziox

Graffx Design Yes, if someone could test it first. I added it in a very simple way but I think it's works.

nick0

Howdy,

Hope all are well.

Just wondering if this tweak, or another similar edit, was ever made to FormLister so that Google reCAPTCHA v3 works in FormLister forms in Evo 1.4.X / 3.1.X?

Cheers and have a great day.

fourroses666

Don't think its added to Formlister. Maybe you can test it 😀

ps.
Did you try the Ajax way? I don't get any (automated) spam anymore.
https://forum.evo.im/d/173-safe-anti-spam-ajax-contactform-with-formlister

nick0

Roger that, thanks for letting me know.

I get scared hacking original files. But I will have a go if I get brave 😆 .

No... I hadn't seen that, that looks cool, I will have a play with that sometime. Cheers.