Recaptcha V3 Implementation in Reactive Web

I'm struggling a bit with my Recaptcha V3 implementation in Reactive web.   I believe I have the Recaptcha script loading properly but when I try to display the widget I get the error below.   

I have attached an OML with the logic I am using.  I am hoping that I'm just a little off and not missing the boat entirely.   Any guidance would be greatly appreciated.  (In my real module the site and secret key values are NOT blank, our system admin has verified that the keys I am using are accurate)


Hi Josh,

You mentioned and OML being attached, but there is not.

Regards,

Daniel

That's odd, I could have sworn I attached it.   Let's try again.

Hi,

It is pretty clear to me why you get the error message:

The RecapV3Test screen calls the ReCaptcha webblock with SiteKey input parameter set to "".

Create two site properties on for the SiteKey and one for the SecretKey. Leave the values empy in ServiceStudio.

Use the site properties as input to Recaptcha. Then after 1CP go to Service Center and set the effective value of the site properties.

Regards,

Daniel

Hi Josh,

The other mistake which I observed is..

Incorrect Code Snippet

var script_src ='https://www.google.com/recaptcha/api.js?render=$parameters.JSKey';

Note: In such case the $parameters.JSKey will be considered as a normal string literal because it is defined within the single quotes pair.


Correct Code Snippet

var script_src ='https://www.google.com/recaptcha/api.js?render=' + $parameters.JSKey;

Note: $parameters.JSKey is an JavaScript Element input parameter which contains some value (in your case it is ""), so the input parameter value should be concatenate with the src URL query string using '+' operator as mentioned in the snippet.


Hope this helps you!


Regards,

Benjith Sam

Daniël Kuhlmann wrote:

Hi,

It is pretty clear to me why you get the error message:

The RecapV3Test screen calls the ReCaptcha webblock with SiteKey input parameter set to "".

Create two site properties on for the SiteKey and one for the SecretKey. Leave the values empy in ServiceStudio.

Use the site properties as input to Recaptcha. Then after 1CP go to Service Center and set the effective value of the site properties.

Regards,

Daniel


I actually had the keys hard-coded in my project, I just removed them and replaced with "" prior to uploading.   As Benjith pointed out though I had messed up the Javascript by enclosing the parameter in quotes, making it a literal.   I updated that and I'm a little closer, now I'm getting an error indicating that no reCaptcha clients exist.


I also took your advice and changed the keys to site params, and created a server action to pull those values.

Josh Herron wrote:

I'm struggling a bit with my Recaptcha V3 implementation in Reactive web.   I believe I have the Recaptcha script loading properly but when I try to display the widget I get the error below.   

I have attached an OML with the logic I am using.  I am hoping that I'm just a little off and not missing the boat entirely.   Any guidance would be greatly appreciated.  (In my real module the site and secret key values are NOT blank, our system admin has verified that the keys I am using are accurate)



Could you please let me know from where you downloaded Recaptcha component for reactive web app?



A forge component for Reactive web does not exist yet.  I downloaded the component for mobile and got it working  (most of the way).   If I ever have a day or two free to clean it up I hoped to upload to the forge.   In the meantime I would look at this for an example.


https://www.outsystems.com/forge/component-overview/2694/google-recaptcha-mobile