BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> openElement General Discussion
  New Posts New Posts RSS Feed - Trying to use the Google Recaptcha validation
  FAQ FAQ  Forum Search   Register Register  Login Login

Trying to use the Google Recaptcha validation

 Post Reply Post Reply
Author
Message
leroyle View Drop Down
Newbie
Newbie


Joined: Jan 07 2020
Location: Richardson, Tx
Status: Offline
Points: 12
Post Options Post Options   Thanks (0) Thanks(0)   Quote leroyle Quote  Post ReplyReply Direct Link To This Post Topic: Trying to use the Google Recaptcha validation
    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
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jan 16 2020 at 12:04pm
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
Back to Top
leroyle View Drop Down
Newbie
Newbie


Joined: Jan 07 2020
Location: Richardson, Tx
Status: Offline
Points: 12
Post Options Post Options   Thanks (0) Thanks(0)   Quote leroyle Quote  Post ReplyReply Direct Link To This Post Posted: Jan 16 2020 at 1:06pm
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
Back to Top
leroyle View Drop Down
Newbie
Newbie


Joined: Jan 07 2020
Location: Richardson, Tx
Status: Offline
Points: 12
Post Options Post Options   Thanks (0) Thanks(0)   Quote leroyle Quote  Post ReplyReply Direct Link To This Post Posted: Jan 16 2020 at 6:16pm
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
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jan 16 2020 at 6:51pm
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.



Back to Top
leroyle View Drop Down
Newbie
Newbie


Joined: Jan 07 2020
Location: Richardson, Tx
Status: Offline
Points: 12
Post Options Post Options   Thanks (0) Thanks(0)   Quote leroyle Quote  Post ReplyReply Direct Link To This Post Posted: Jan 17 2020 at 2:01am
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

Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jan 17 2020 at 2:33am
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
Back to Top
leroyle View Drop Down
Newbie
Newbie


Joined: Jan 07 2020
Location: Richardson, Tx
Status: Offline
Points: 12
Post Options Post Options   Thanks (0) Thanks(0)   Quote leroyle Quote  Post ReplyReply Direct Link To This Post Posted: Jan 17 2020 at 7:43pm
Thanks for the help with this. Something to look into.
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.063 seconds.