How to Add Google reCAPTCHA in Yii 2

by Ahmed Khan  October 11, 2016

CAPTCHA is the collective name for several techniques and tests that prevent spammers, bots, and automated services from adding false or malicious data to the website’s database. In this tutorial, you will learn how to add Google’s reCAPTCHA to a contact form. This service provides images of words that challenge any robotic Optical Character Recognition (OCR) software.

add google recaptcha in yii2

Before starting with this tutorial, make sure you have installed and setup Yii2 application on Cloudways. Once done, start by signing up for the API key of Google reCAPTCHA.

Creating Google reCAPTCHA API Key

Go to the official Google reCAPTCHA site and click on Get reCAPTCHA.

google recaptcha

On the admin page, register your website. In the Domains section, you can either use the staging URL of the application or any other custom domain on the site.

registering site on google recaptcha

Once done, click on Register. The website will now offer a Site Key and a Secret Key. Both these keys will be used in this tutorial.

google recaptcha keys

It is now time to add reCAPTCHA to the Yii 2 app.

Adding the reCAPTCHA Extension for Yii 2

The first step is to add the reCAPTCHA extension. For this, access the Yii 2 application using the  SSH Terminal provided by the Cloudways. (You can also use PuTTY.)

Run the following command to add the extension:

You will see the following screen as the extension is installing:

composer install

Once installed, the next step is to properly configure the extension.

Go to the config folder and open web.php located inside components folder. Add the following code to DB:

Where it is indicated, add your site and secret keys provided by the Google reCAPTCHA and save the file.

Adding the reCAPTCHA to the Contact Form

Now, you can add the authentication method to contact forms that come with Yii 2 Basic.

Go to the view/site and open contact.php. In this file, find the following block of code:

Now replace it with this code:

Next, add a rule to the contact forms’ model. Go to models and open ContactForm.php. In rules(), add the new rule for reCAPTCHA:

Now in attributeLabels() function, add the label for reCAPTCHA:

For now, I’ve left it empty.

Testing

It is now time to test the form. Open up the form in the browser.

yii contact form

You will notice that reCAPTCHA replaces the CAPTCHA. Use the form to observe if it’s validating correctly or not.

Conclusion

In this tutorial, I demonstrated how you could replace CAPTCHA that comes preinstalled in Yii2 with reCAPTCHA. Feel free to leave your comments if you have any questions regarding the code or think that you can improve on them.

Create PHP websites without the worry of server management.

Deploy your PHP app on optimized PHP hosting servers.

About Ahmed Khan

Ahmed was a PHP community expert at Cloudways - A Managed PHP Hosting Cloud Platform. He is a software engineer with extensive knowledge in PHP and SEO. He loves watching Game of Thrones is his free time. Follow Ahmed on Twitter to stay updated with his works. You can email him at ahmed.khan@cloudways.com

Stay Connected:

You Might Also Like...