2 Replies Latest reply on Jun 8, 2017 1:26 PM by User Since V1.5

    Problem integrating Google reCaptcha v2 into a simple form

    User Since V1.5 Level 1

      I am at my wits' end attempting to integrate Google's recaptcha v2 with a simple HTML form. I hope someone can help.

       

      In the <head> of the form page I have

       

          <script src="https://www.google.com/recaptcha/api.js" async defer></script>

       

      as directed by Google.

       

      Within the form I have

       

          <div class="g-recaptcha" data-sitekey="xxxxxxxxxxx"></div>

       

      where xxxxxxxxxxx is the sitekey provided by Google. When the form is displayed, this is properly creating the recaptcha widget.

       

      On the target page that processes the form submission, I have this:

       

          <cfset form.RecaptchaResponse = "">

          <cfif StructKeyExists(form, "g-recaptcha-response")>

                 <cfset form.RecaptchaResponse = form["g-recaptcha-response"]>

          </cfif>

       

          <cfhttp url="https://www.google.com/recaptcha/api/siteverify" method="post" result="captchaResult">

            <cfhttpparam type="formfield" name="secret" value="zzzzzzzz">

            <cfhttpparam type="formfield" name="response" value="#form.RecaptchaResponse#">

            <cfhttpparam type="formfield" name="remoteip" value="#cgi.remote_addr#">

          </cfhttp>

       

          <cfset result = "#deserializeJSON(StructFind(variables.captchaResult, 'FileContent'))#">

          <cfif result.success is "false">

              <cflocation addtoken="no" URL="/">

          </cfif>

       

           ...start processing the submission.

       

      where zzzzzzzz is the secret key provided by Google.

       

      First I intentionally submit the form without responding to the captcha. I dump the variable captchaResult (a structure). Its 'FileContent' key is a JSON string, and in that string, 'Success' is 'false'. This submission redirects to the site's home page -- exactly as desired.

       

      Next I submit the form correctly, including responding to the captcha. Dumping captchaResult and then aborting, I see that 'Success' is 'true'. In other words, Google is definitely passing this submission.

       

      So now I reload everything and resubmit correctly, including responding to the captcha. ColdFusion replies with this on my target page:

       

         We're sorry...

       

          Element G is undefined in FORM.

          The error occurred on line 1.

       

      What the #$% is going on?? Any suggestions will be gratefully and humbly accepted.

       

      Message was edited by: Jordan Backler Forgot to include that I am using CF 10

        • 1. Re: Problem integrating Google reCaptcha v2 into a simple form
          Steve Sommers Level 4

          I've used this recaptcha API and I think I used it almost as-is from the google sample. The form field name returned from the client to me as named g-recaptcha-response. Because of the strange field name, you have to reference it as #FORM['g-recaptcha-response']# so:

           

              <cfhttp url="https://www.google.com/recaptcha/api/siteverify" method="post" result="captchaResult">

                <cfhttpparam type="formfield" name="secret" value="zzzzzzzz">

                <cfhttpparam type="formfield" name="response" value="#FORM['g-recaptcha-response']#">

                <cfhttpparam type="formfield" name="remoteip" value="#cgi.remote_addr#">

              </cfhttp>

          • 2. Re: Problem integrating Google reCaptcha v2 into a simple form
            User Since V1.5 Level 1

            If you look in the code above the <cfhttp> call, you'll see that I'm doing just that. Just to make sure, I altered the code to do it explicitly, exactly as you show in your response. Got the same error as before.

             

            In my target page, following the call to <cfhttp>, I did a <cfdump var="#variables.captchaResult#">, followed by <cfdump var="#form#'>, followed by <cfabort>. The form dump returned a structure. One key of that structure is FieldNames. Its value is a list of all the form fields, including 'g-recaptcha-response'. Another key is 'g-recaptcha-response', and its value is some long, horrendous combination of letters and numbers. This latter is the value of #form['g-recaptcha-response']#. So I'm certainly passing that to Google in the <cfhttp>. The dump of

             

            { "success": true, "challenge_ts": "2017-06-08T20:06:07Z", "hostname": "xxxxxxxxxxxxxx" }

            which shows that Google responded properly to the request.

             

            But after that, everything seems to fall apart. ColdFusion persists in looking for form.G. This seems like a bug. Am I missing something?