Today we will be looking at how to integrate Google’s ReCaptcha software into an OpenCart installation. I will preface this post by saying there is a free extension in the OpenCart marketplace which allows you to add a ReCaptcha to the contact page here. This blog post is to show you how to do it manually so you can add it to other pages if you wish or any custom forms which you might want to add it to.
ReCaptcha is a free-to-use enterprise standard captcha form which stops software automatically filling out your forms or accessing services. Software can be written to automatically fill out forms, which is why your WordPress site might get so many spam comments, but they can be blocked by images containing words which it cannot read and therefore cannot fire off the form. With the growing intelligence of OCR technology we may find in a few years that Captcha forms are obsolete but for the moment they are the best method of preventing scripts filling out your form and spamming you or worse. OpenCart does come with a captcha system built in although more store owners may be more comfortable using a more tried and tested (and recognisable) system.
First thing to do is go to the Google ReCaptcha website and sign up your domain for API access. If you’re logged into your Google account there is no sign up process except to specify the domain name which you want the ReCaptcha to be used on. After that is done, you will be given two sets of keys (one Public and one Private) which you will need later on so leave this tab open.
Next, go to this link and download the PHP plugin. Extract the ZIP file and look inside for one named “recaptchalib.php”. This is the file which holds the class which will allow OpenCart to communicate with the ReCaptcha sever, rename it to “recaptcha.php”.
Now, open up the root folder of your OpenCart store in FTP and add the recaptcha.php file we’ve just downloaded to:
- system/library
By doing this, we will be easily able to call on the ReCaptcha plugin later on without having to load it in every file. Now, we will integrate it with our contact form on OpenCart so open up the following two files:
- catalog/controller/information/header.php
- catalog/view/theme/[YOUR THEME]/template/information/contact.tpl
OK, so we now need to make some adjustments to these two files in order to call and display the ReCaptcha in place of the default captcha box which is available on OpenCart. First open up the contact.tpl file and look for the code which looks like:
and replace it with:
load->library('recaptcha');
$publickey = "YOUR_PUBLIC_KEY";
echo recaptcha_get_html($publickey);
?>
Remember that “YOUR_PUBLIC_KEY” should be replaced with the public key which the ReCaptcha website gave you when adding your website. It will be a long string of letters and numbers. Save your changes and upload the contact.tpl file to replace the old one and you should see the new ReCaptcha box on the contact form.
We’re not quite done though, in order to properly use it we need to know whether or not the visitor has filled it in correctly which requires us to get a response from Google’s servers which we will set up now. Open up your contact.php file this time and look for the code which looks like:
if (empty($this->session->data['captcha']) || ($this->session->data['captcha'] != $this->request->post['captcha'])) {
$this->error['captcha'] = $this->language->get('error_captcha');
}
This section is for the original captcha form in OpenCart so we don’t need it any longer, replace it with this block of code which sends the completed (or not) ReCaptcha box to Google’s server for verification:
$this->load->library('recaptcha');
$privatekey = "YOUR_PRIVATE_KEY";
$resp = recaptcha_check_answer ($privatekey, $_SERVER["REMOTE_ADDR"], $_POST["recaptcha_challenge_field"], $_POST["recaptcha_response_field"]);
if (!$resp->is_valid) {
// What happens when the CAPTCHA was entered incorrectly
$this->error['captcha'] = ' . $resp->error . ';
}
Note that this time, you will need the Private key which was given to you by the ReCaptcha website when you set up your website.
This block of goes in a function which validates the contact form has been submitted correctly. If the ReCaptcha box has not been submitted correctly, or left blank, there will be an error message passed back to OpenCart and a error message will show to the user. We’ve kept the original error name so there is minimal edits required.
And thats it! Just a few lines of code to be changed and an extra file added to the system library means you can use an industry standard captcha to prevent malicious hack attempts and spam software filling out your form. Note that if you update your OpenCart software you will need to make these changes again but you shouldn’t have to re-upload the recaptcha.php library file again unless you are starting from a fresh installation. Now you have followed the process you will be able to add the captcha box to any form in OpenCart which you would like to add a little extra security to!
Got any experience with captcha forms or spam through OpenCart? Let us know your best methods of preventing it or other captchas you prefer in the comments below!