Trying to use the Google Recaptcha validation |
Post Reply |
Author | |
leroyle
Newbie Joined: Jan 07 2020 Location: Richardson, Tx Status: Offline Points: 12 |
Post Options
Thanks(0)
Posted: Jan 16 2020 at 3:33am |
Newbie:
Great tool, a bit of a learning curve but gets easier everyday. I'm trying to implement the Google Recaptcha element within a submit form. How is the recaptcha validation handled within openElement? How do I attach a verify callback function to the recaptcha element? I can code the function. With basic html I could implement an onsubmit() handler. How is this done within openElement. onsubmit() in some fashion, dynamically attached via getElementId() ? Insight much appreciated. Thanks, Leroy
|
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6195 |
Post Options
Thanks(0)
|
Have you looked at the form section in the WIKI https://wiki.openelement.com/en/index.php?title=Category:Elements#Form
The Recaptcha must be included in the form
|
|
leroyle
Newbie Joined: Jan 07 2020 Location: Richardson, Tx Status: Offline Points: 12 |
Post Options
Thanks(0)
|
I've:
- added a "group of elements" to it I've added: - button - title text - inputs added a submit form to the page - configured the submit form, adding the button, inputs, etc via form config At this point the submit works just fine. I add the Google Recaptcha by dropping it on the "group of elements", I see it within the group in the tree view on the left. - configure the site key and secret just in case I re-run the Form Configuration but I do not see the recaptcha element listed as a candidate to be added to the submit form configuration. (Note: If I add the non Google RECAPTCHA element, this one does show up in the Form Submit configuration as an option). When I run the page: I see the recaptcha when the form pops up, I can click on the checkbox, get the expected challenge, satisfy it and get the green checkbox, submit the form, it submits just fine. However, the form will submit even if I do not check the recaptcha check box. It seems I'm missing the validation that recaptcha was successful. As mentioned I can put validation code in a onsubmit() handler in a simple html page, but it is not clear how this handler is added within openelement. I'm running openElement 1.57 R9 on Windows 10 Thanks
|
|
leroyle
Newbie Joined: Jan 07 2020 Location: Richardson, Tx Status: Offline Points: 12 |
Post Options
Thanks(0)
|
I am looking to validate the captcha on the "client" side prior to submission to the server. Perhaps I'm mistaken on this.
Really just looking for how to implement the reCaptcha. Thanks
|
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6195 |
Post Options
Thanks(0)
|
When I add Google Recaptcha element to the page where I have a mail redirection form it becomes automatically available in the form configuration utility. When I use a redirection form to a page Google Recaptcha is'nt available. You will have to use some php programming to validate your data. |
|
leroyle
Newbie Joined: Jan 07 2020 Location: Richardson, Tx Status: Offline Points: 12 |
Post Options
Thanks(0)
|
Thanks Hobby001, As you mentioned it I checked and did notice that the Google Recaptcha is available in the email configuration, but I'm still at a loss as to the "proper" implementation within openElement. I did not however, go down the email form route other than to see recaptcha is seen in the config. I have a solution, based off what you posted 2015, when apparently the Google Recaptchar element was not a available, Good/Bad/ or otherwise: Adding a hidden button for the submit form and clicking it via another buttons onclick() javascript event handler. So. 1. - add a "group of elements" element to contain all of this, - add the submit form elements as usual, title, input text, submit button etc, to the group - add the sumbit button as usual for a submit form but set it to be "not" visible - add a Google Recaptcha element - add a text element that will contain the recaptcha error message, above/below/next to the recaptcha element - add the submit form, adding the elements needed in the configuration of the submit form as normal 2. add an extra "Send" button that is visible and that the the user will use to cause the form to be sent. - add an onclick() method to this Send button that calls a javascript function that will interrogate the status of the Google Recaptcha element, checking it's response field. - if the recaptcha response is an empty string, the challenge failed, add the error string to the error element, do not send the form. - if the response is not empty we guess the challenge succeeded. (not sure if this is good enough or not) - in this case find the hidden button element and execute it's click event which will send the form 3. The Send button onclick() method looks something like this: <script> // Send button onclick() handler function verifyRecapcha() { if( _checkReCaptch() === true){ document.getElementById('WEbuttonHiddenSubmit').click(); } } function _checkReCaptch() { formValidation=true; // grecaptcha provided by the Google Recaptcha element var response = grecaptcha.getResponse(); if(response.length == 0) { // WEg-recaptcha-error is the text element containing the challenge status document.getElementById('WEg-recaptcha-error').innerHTML = '<span style="color:red;">Please check above box if not a robot.</span>'; formValidation=false; } else{ document.getElementById('WEg-recaptcha-error').innerHTML = ''; } return formValidation; } </script> I'm not an expert in Recaptcha by any stretch, I've seen concerns about doing this on the client side as bots can surpass it. We do not control the server side where our form is posted so I would think this is better than not. Hopefully this will help someone else out or comments (always welcome) will suggest other wise. Thanks |
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6195 |
Post Options
Thanks(0)
|
Any kind on data validation on client side can be bypassed and used for malicious mather.
That's why I use to redirect the data trough POST method to a php page where I can extract any special character with htmlspecialchars https://www.w3schools.com/php/func_string_htmlspecialchars.asp Recaptcha is made to prevent bots but data can be manipulated once it is cleaned. Php also allows to hide your manipulations from the client point of view wich make more sense to me.
Edited by Hobby001 - Jan 17 2020 at 2:36am |
|
leroyle
Newbie Joined: Jan 07 2020 Location: Richardson, Tx Status: Offline Points: 12 |
Post Options
Thanks(0)
|
Thanks for the help with this. Something to look into.
|
|
Post Reply | |
Tweet
|
Forum Jump | Forum Permissions You cannot post new topics in this forum You cannot reply to topics in this forum You cannot delete your posts in this forum You cannot edit your posts in this forum You cannot create polls in this forum You cannot vote in polls in this forum |