Implementing the reCaptcha alternatives never loading up like they were supposed to

[MOOLAH]

Hey guys, I had gone down a road which I am slightly regretting. I have a form on my landing page and I had implemented reCaptcha for it successfully. However, my page load timings were dismal and I wanted to swap it out with Turnstile (Cloudflare) or hCaptcha also partially due to the privacy concerns surrounding Google’s products.

For some reason, each time I tried implementing even after following a really detailed writeup from a fellow member (thank you!), when I publish the site and have it run, both the turnstile widget and the hCaptcha widget appears very briefly before going missing again.

With the turnstile implementation, there were at least some errors that popped up int he console and I figured I must have missed out on some minor detail somewhere. Finally I got the errors cleared, but the widget appears and disappears.

The hCaptcha implementation is way more easier, but that one shows up with no console errors and has the same disappearing effect.

At this point, I have spent days on something as trivial as this. any help is really appreciated. On a side note, how may I retrieve the token on my server (Xano), by using the h-captcha-response POST parameter submitted from my form? Is there anything I need to do on my frontend?

What is causing this disappearing act of these widgets? What am I doing wrong? Any help is appreciated guys. As trivial as it seems, I can’t have my home page load take up to 6-9 secs and one of the culprit seems to be reCaptcha’s js script.

Thanks in advance guys!

[Joyce]

Hi @MOOLAH

Agh let’s see if we can figure this out together.

Can you share a screen recording or a few screenshots of how things are setup on the WeWeb side of things and how the app is behaving?

It could help us understand why the widget might be blinking like this)?

Regarding your question about retrieving the token from Xano, are you referring to steps 5 & 6 in the tutorial you mentioned or did you mean something else?

@MOOLAH

As trivial as it seems, I can’t have my home page load take up to 6-9 secs and one of the culprit seems to be reCaptcha’s js script.

Is it a typo and you mean hCaptcha or are you referring to the reCaptcha plugin?

If the latter, does it mean you have both hCaptcha and reCaptcha on the same page at the moment? (not sure it’s significant but wondering if it might be causing issues)

[MOOLAH]

Hey Joyce, thanks for always pulling through. Ok, let me try to document it as clear as possible. First, I am going to abandon the Cloudflare’s Turnstile implementation and just focus on hCaptcha.

Before this, I had used the reCaptcha plugin and integrated it perfectly well. However, I decided to switch and removed the reCaptcha stuff before beginning.

When integrating hCaptcha, I tried to do it from scratch following their documentation. Which required a <div> with the class ‘.h-captcha’ and attribute containing the data-sitekey/value.

This is how it looks on my weweb frontend,

On Xano, I have a GET end point that is supposed to pass the hidden input value that was injected by hCaptcha. But I have no idea how to retrieve this on weweb.
Here is my xano end point,

and here is the documentation that says the token is injected in a hidden input and that I should retrieve it on form’s post submission,

This is what I had meant by ‘retrieving the token from xano’ though I actually meant passing the token to xano (apologies!). After having done all this, and without submitting the form, I published the project and tried to see if the hCaptcha widget was loading, and this was the behaviour,
front-end (disappearing widget)
console log

When I look at the pseudo-code implementation hCaptcha provided, I seem to be lost from the 2nd step onwards,

It was when all of this failed, that I had tried the migration method from reCaptcha to hCaptcha option. I thought by reusing the same components within weweb’s reCaptcha plugin and replacing the necessary attributes, it would fire up as expected. But by entering the site-key value into the plugin, it immediately returned an error, and so I rolled it back and chose not to use that method of implementation anymore.

What am I doing wrong here? How can i correctly pull the token, send it to my Xano backend, to verify and use the result of that to proceed with my form submission workflow?

[imb]

Hi @MOOLAH were you able to get this figured out? Thank you!

[Broberto]

Hello, if you or someone else might still be looking, I’ve crafted a super simple solution for this.

[Marketplace] Cloudflare Turnstile Widget

Hello everyone, I saw that implementing any type of Captcha in WeWeb is quite a challenge for y’all. I’ve worked on this for one of my partners recently and decided to share it with you all actually. I’ve just released a Marketplace Custom Coded Element that solves this once for all. You can now import Cloudflare Turnstile simply by dragging and dropping the widget to your WeWeb project (and of course setting your token). It also has a possibility to: [Screenshot 2024-09-09 at 19.46.31] Ref…