Allow usage of dynamic data for site/secret keys in recaptcha

Feature Request
1

I’d like to ask for an extension of Wappler that allows usage of dynamic data for site/secret keys in recaptcha. Currently the serveractions and pages are different between our clients and this requires manual changes when we update our cms. Thanks for considering.

2

Since it is not an App Connect component client-side binding doesn't work on it. You can do server-side binding/expression to add the key.

3

Thanks Patrick. But that requires using the experimental routing options. We tried this but it breaks our current sites. We’ll check native php implementation.

4

Does the key come from server connect data?

5

yes.

it works using native php on the php-page and database conncetion in the server action.

would just bwe nicer not to use native php but a Wappler-solution

6

The problem with the reCaptcha is that it renders on page load, to make it work you need to render it after you have loaded the data which contains the sitekey. Remove the g-recaptcha class from the element, this prevents it from automatically being rendered. Create a page flow that loads the key and then executes a custom JavaScript function passing the key as parameter.

// custom JavaScript function to render reCaptcha
// replace "dmxReCaptcha21" with the id of your element
function renderRecaptcha(key) {
  grecaptcha.render('dmxReCaptcha21', {
    sitekey: key
  });
}

This is currently the easiest way to do it. Creating a custom extension is also a solution, you could make it a flow action that does the render or create an App Connect component that explicit renders the element.

1 Like
7

Thanks Patrick