Statamic-Captcha in combination with ajax?

[espenlg]

Is there any way to use the addon in combination with ajax like described in https://statamic.dev/forms#using-ajax ?

[aryehraber]

Hi @espenlg, it should work the same way as normal. Are you experiencing issues?

[aryehraber]

Closing due to inactivity, feel free to re-open if you're able to give further details.

[espenlg]

I'm sorry for not getting back to you. I can't really figure out why it won't work, but I'm getting POST http://alligate.test/!/forms/ask_a_question 400 (Bad Request) when trying to submit a form. It is working fine without reCaptcha enabled. I have tried with and without the internal "honeypot" thing. Maybe I'm using the wrong reCaptcha type? I've tried v2 (Invisible) and v3.

The response of the request is: {"errors":["Captcha failed."],"error":{"captcha":"Captcha failed."}}

For the record: I've tried hCaptcha as well, but same thing.

[espenlg]

I figured out if I did not use the invisible mode it works (with hCaptcha). So if nothing else I have that as a backup.

[aryehraber]

Hi @espenlg,

Thanks for the additional info!

So, after some more thought I think ajax requests do require some additional steps to work, which normally get handled automatically in a non-ajax environment.

A quick note: this Captcha addon only supports reCaptcha V2, not V3, though Invisible mode should work!

Here's an overview of what happens in the non-ajax scenario:

1) When the Captcha tag is included on a page, it injects a partial which adds a JS event listener (see partial here).

2) The event listener will listen for the form's submit event and prevent it from submitting to Statamic.

3) It will then call the reCaptcha API and show the puzzle if the user looks sus.

4) Upon completion, a callback is called which actually submits the form, which should now include the solved reCaptcha code (hidden input).

It's tough to create a "generic" ajax-implementation since it really depends on how the site is built and how the form submission is handled.

For now, all I can recommend is to try and implement the above steps in a JS-friendly manner. I can try and give pointers if you are able to share the relevant code or a link to the repo.

[Oleafeon]

i tried doing this with no luck, do i just need to add grecaptcha.execute(0); in my function where the ajax call is

[Oleafeon]

what i noticed i serialize the formdata to send it with ajax

e.preventDefault();
let formData = $('#contact').serialize();
console.log(formData);
$.ajax({
    type: 'post',
    url: $('#contact').attr('action'),
    data: formData,
}).done(function () {

that gave me an empty response

now i dont know what needs to be done to get right data to send it back or if this is the right way to do this

[aryehraber]

Hi @Oleafeon,

It's a little trickier than that in my experience. You basically have to take care of several things yourself that the addon normally does behind the scenes in a non-ajax situation.

1) Initialise reCaptcha manually (instead of using the addon's tags) 2) Hook up your own callback if the captcha is solved (see line 17 of below code snippet url) 3) Call grecaptcha.execute() on user form submit, which should then call your custom callback if successful (this is where you perform your "proper" form submit to Statamic including the form's data + the solved g-recaptcha-reponse)

My best suggestion would be to try and recreate something like what the addon's tag outputs but using your own callback: https://github.com/aryehraber/statamic-captcha/blob/master/resources/views/recaptcha/head.blade.php

[Oleafeon]

i am gonna try doing that