Implementing Google reCaptcha in WordPress AJAX Register

Google reCaptcha in WordPress AJAX Register

Thanks to all visitors for their love to the article http://fellowtuts.com/wordpress/wordpress-ajax-login-and-register-without-a-plugin/. As we got many requests to implement Google reCaptcha in WordPress AJAX Register, I’m here with the wonderful code which will protect spams through Google reCaptcha during registration in your WordPress powered site.

The steps are same as previous article and again you can download zip at end of post and implement them. I would suggest you to read that post first because I’m focusing here just on what is running behind user reCaptcha validation.

Implementing Google reCaptcha in WordPress AJAX Register

To add reCaptcha validation, you must have Google site key and secret key. You can get it from here or you can follow the steps in this article to obtain keys.

The Form

Create a file ajax-auth.php inside your active theme’s directory and put the code given below in that.

Here before submit button we placed a div to produce reCaptcha block in our registration form. The lines added as compared to previous article are highlighted. Don’t forget to place your site key at “GOOGLE SITE KEY“.

As now we need to show Login and Signup buttons somewhere in out site so place the code below in your theme file wherever you wish them to appear:

CSS

Under your current theme’s css directory, you need to create a file called ajax-auth-style.css with this code below. This is almost same as the CSS mentioned in previous article. Only changes are made highlight. 

Sending user info via AJAX

This is the tricky JS part which is required to let our recaptcha functionality work during registration and it’s also responsible for client side validation, sending AJAX request and process according to response received from server.

jquery.validate.js and ajax-auth-script.js, both are necessary to perform. Put both files in js folder in your active theme. The imprioved code for ajax-auth-script.js is as follow:

Here, two additional things are important to note.  First, we are sending recaptcha variable with data object at form submission which is empty during login and filled by value of “g-recaptcha-response” field during registration. This field is being populated automatically by Google reCaptcha API script which we are going to add in our page just a moment later.

Second, based upon response from server, the reCaptcha is being reset if registration is failure as because you can’t submit the same recaptcha twice otherwise server will say “reCAPTCHA invalid” at next time.

Finally we need a regular login/signup server side handler along with some code to validate if reCaptcha is checked/filled & valid and process accordingly. The PHP script below does the rest of the task which is saved as custom-ajax-auth.php inside libs folder in active theme.

This is time to use your Google secret key and validate the reCaptcha response returned by user using curl. We used WordPress’s “wp_enqueue_script” function to add Google  reCaptcha API script in our page, which shows a nice reCaptcha form above our signup submit button.

Inside “ajax_register” function there is code block to validate the reCaptcha entered by user with Google and successfully implementing Google reCaptcha in WordPress AJAX Register. Just not forget to replace “GOOGLE SECRET KEY” with your actual secret key you obtained from Google.

You can now perform a validation prior to registration if the user is a human and is not a robot with AJAX feature in WordPress AJAX login and register.

Download Zip

Included: ajax-auth-style.css, jquery.validate.js, ajax-auth-script.js, ajax-auth.php, custom-ajax-auth.php

You Might Interested In

  • tanvir

    Hi, I have implement is accurately. It is nice, but it doesn’t work on my site. When I click on I’m not roboot, recaptacha popup and invalided and then when I click on register, it returns enter recaptcha. help plz.

    • Amit Sonkhiya

      Have you registered the site for google recaptcha? If you are trying on local it won’t work.

  • Majix HF

    Hi, i did every thing as you, but it doesn’t validate the recaptcha. it just ignores recaptcha and logs in.

    • Amit Sonkhiya

      You should try to first echo any message inside ajax_register function to check if it’s producing any output

      • Majix HF

        Hi Amit, it worked perfect. thank you. just one question. how is it possible to implement recaptcha just for login?

        • Amit Sonkhiya

          Do the same on login as we did for register by inspecting the code in this article carefully.If you find it difficult to implement then you can write us here: http://fellowtuts.com/troubleshooting/

  • Dawid Adach

    Hi Amit,
    I have implemented your code however it doesn’t work fine for me. When I try to register without confirming captcha I am getting error “Please enter reCAPTCHA” as expected. But when I click on captcha checkbox, google verifies my identity but I am still getting the same error. Do you have any clue where should I look for?

    I checked my site using firebug and what I found is that g-recaptcha-response doesn’t get any value after sumbiting and thats probably why validation is failing…

    • Dawid Adach

      Actually I found that isn’t an issue. I am alerting out field value:

      recaptcha = $(‘#g-recaptcha-response’).val();
      alert(recaptcha);

      And I can see that it has some content (random string of carachters) so for some reason PHP part doesn’t recognize it…

    • Dawid Adach

      I found the issue, I was adjusting existing code from previous tutorial, so I changed all highlighted parts, however in ajax-auth-script.js line 61 isn’t highlighted therefore I missed it: (‘recaptcha’: recaptcha)

      • Amit Sonkhiya

        Dawid,
        Thanks for drawing my attention. I have highlighted it now.

        Thank you

  • Hi Amit,

    I have implemented this updates with your all updates in one i.e. login, register and forgot password on the page rather than popup. The reCaptcha is implemented with Register but the P.Status only shows Sending user info, please wait… when i tried to console it, the response was {“loggedin”:false, “message”:”Please enter reCaptcha”} but it doesn’t replaces on the P.Status div. And once i am able to logged in, it still doesn’t show Successful, Redirecting….

    Something tiny thing is missing. Please help

    • Amit Sonkhiya

      Hi,

      I think that the code inside success callback of js script is not firing. Please look at there carefully again and still if you are unable to fix, you can drop us an email with url to check at support@fellowtuts.com

      Thanks

  • Dawid Adach

    Hi Amit,
    Thanks for great tutorial. Do you consider extending it with description on how to add verifying email with confirmation link? That would be awesome! 😉

    • Amit Sonkhiya

      Hi Dawid,

      We have added this subject to list of posts to write about. We will sure describe it whenever would have time.
      If you need immediate requirement, you can write us to support@fellowtuts.com

  • Zeckart

    I had a probleme, the error message aren’t displaying. (i have the same probleme than
    #comment-2469317715 ):
    “. The reCaptcha is implemented with Register but the P.Status only shows Sending user info, please wait… when i tried to console it, the response was {“loggedin”:false, “message”:”Please enter reCaptcha”} but it doesn’t replaces on the P.Status div. ”

    I have find a solution but i don’t know what was the probleme with “ctrl”

    On the file: ajax-auth-script.js

    I change this line (65)
    $(‘p.status’, ctrl).text(data.message);
    with this
    $(‘p.status’).text(data.message);

    And now it’s work.

    • Amit Sonkhiya

      @Zeckart thank you for sharing and glad you solved it. I will recheck the issue at later time as it’s not appearing in my browser.

  • Athar K

    Hi Amit,

    Indeed a very nice piece of work. But unfortunately, I am unable to get this work for me. I have implemented exactly as described but upon clicking on sign up or login links, the background becomes Grey and nothing else happens. No pop up is displayed to register or login. Can you please guide me as what could be the cause of this issue? Issue image is attached below.

    https://uploads.disquscdn.com/images/aeb100f125531af8e7c83936390220ced79a7ae244cfebebef910392ce0e06ff.jpg

    Thanks.

    • Amit Sonkhiya

      Hi Athar,

      Sorry as I couldn’t notice your comment. Is that issue resolved?