X
    Categories: Learn PHP Tutorials, Tips And GuidesYii Tutorials, Tips And Guides for beginners

How to Add Google reCAPTCHA in Yii 2

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.

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.

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.

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.

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:

composer require --prefer-dist "himiklab/yii2-recaptcha-widget" "*"

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

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:

'reCaptcha' => [

       'name' => 'reCaptcha',

       'class' => 'himiklab\yii2\recaptcha\ReCaptcha',

       'siteKey' => 'sitekey',

       'secret' => 'secret key',

       ],

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:

<?= $form->field($model, 'verifyCode')->widget(Captcha::className(), [

                       'template' => '<div class="row"><div class="col-lg-3">{image}</div>
<div class="col-lg-6">{input}</div></div>',

                   ]) ?>

Now replace it with this code:

<?= $form->field($model, 'reCaptcha')->widget(\himiklab\yii2\recaptcha\ReCaptcha::className()) ?>

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

public function rules()
{
return [
// name, email, subject and body are required
[['name', 'email', 'subject', 'body','reCaptcha'], 'required'],
// email has to be a valid email address
['email', 'email'],
// verifyCode needs to be entered correctly
['reCaptcha', \himiklab\yii2\recaptcha\ReCaptchaValidator::className(), 'secret' => '6LeTXQgUAAAAALExcpzgCxWdnWjJcPDoMfK3oKGi']

];
}

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

public function attributeLabels()

   {

       return [

           'reCaptcha' => '',

       ];

   }

For now, I’ve left it empty.

Testing

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

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.

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