Implementing Google reCaptcha

Hello David,

Please, guide me how to add ReCaptcha, I have following this : https://medium.com/js-dojo/vue-3-google-recaptcha-implemented-in-just-2-minutes-e68baea35a0 but still not exist.

Thank you, David!

Hello Ahmed,

I cannot read the article that you linked: apparently is hidden for not members or something like that. However, I found this other article quite interesting too. This article refers how to implement ReCaptcha v3 in websites, and, certainly, based on that, it's more or less easy to put it working in our DecSoft App Builder apps.

Basically we need to use the Files Manager to add the appropriate ReCaptcha JavaScript file, which must include our ReCaptcha client side key. So, from the Files Manager, we can add a new JavaScript using an URL like below:

After we do that, we can execute the below code, say in a button Click event who must perform certain operation that we want to check first with ReCaptcha. As you can see below, we also need to use here our own ReCaptcha client side key:

The work don't ends here, however. Once we got the token from the ReCaptcha client side library, we must check that token using some server side stuff, in which we will use our server side secret key. Both client side and server side keys are provided to us from our ReCaptcha website account.

The server side is mandatory, and, only here we use our server side secret key, so, it's not available by anyone who cannot acccess our server side scripts. Basically what we do here is to check the token that we send from the app before (see above) and get the response verified from ReCaptcha:

Then our app receives the response from the above script, and, we can check if everything is fine. As you can see in the first piece of code, if ReCaptcha send to us a "score" equal or greater than 0.5, we can consider that the user action is good. If the scode is greater, that's is very good. If the score is lower, then we may can consider that the action is performed by "someone" not confiable, so, we can't avoid our next action or operation.

Please, read the article that I link in the first paragraph of this post. And, be ready to receive in your EMail box the sample app that I prepare. Note that you must use your own client side and server side secret key: you must do it in the Files Manger script, the button Click event and the server side PHP script. I hope this can help you in some manner.

Note that the above code is more or less simple, for example, the server side script it's only receiving a ReCaptcha token and verify it, but, may can be good also to receive some other information that you want to validate. You can see this all explained also in the article that I linked in the first paragraph of this post.