[Marketplace] Cloudflare Turnstile Widget

[Broberto]

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:

• Refresh the widget - this removes and adds a new widget, effectively generating a new captcha via the Execute component action → Re-render Turnstile
• Change language - you can select any of the many languages that are available by Cloudflare (such as Farsi, Chinese, Bulgarian etc. there is really many)
• Change the theme - Light mode, Dark mode, or Automatic selection of the theme

It exposes the token as a variable so you can bind it in WeWeb without all the work to even get it into WeWeb.

You can find the widget in the marketplace, there also is an interactive demo.
https://marketplace.weweb.io/libraries/d318f23f-789f-4229-9460-8d547cfa9f07/

[dorilama]

Congratulations for publishing the component!
Some feedback (I hope it can be useful):

• [Brotilities Turnstile] logs can be debug level logs to allow easy filtering in the dev tools
• a global property to disable every log is useful if you don’t want to show logs in the published app, make it bindable so you can easily keep logs for dev and staging)
• since you are opting for explicitly rendering the widget you may want to disable implicit rendering by appending the parameter render=explicit to the script url
• not sure if it is intentional, but there is an error because the script is loaded with instructions to run a callback (_turnstileCb) that doesn’t exists in the global scope

[Broberto]

Thanks for the feedback, I pushed the Debug property, but i haven’t re-published So yeah, fixed but not. As for the other two, they’re actually connected, in the docs, if you have a look, the explicitly loading can happen with a callback only in the string, which was the approach I went for before anything else. It didn’t work, but I forgot to swap it for the render = explicit indeed. Great catch I for some reason didn’t see the error at first. Will be fixed in a few, thanks again, useful as usually