[yii2] How to refresh a captcha with a button or reload a page

21 April 2021

Home » Blogs » Technology » [yii2] How to refresh a captcha with a button or reload a page

By default, does not come with a “refresh” link/button that allows you to refresh images. Likewise, when reloading the image page, that appears remains the same. This can frustrate because often captcha images are unreadable (even by humans).

In this tutorial, we will learn to create a link/button to “refresh” captcha images and also refresh captcha images every time they reload the page.

TOP TUTORIALS:  [yii2] Easy way to hide frontend/web and backend/web

1. Create CaptchaRefreshable

The first step we need to do is to create a CaptchaRefreshable class in the models directory or commons\models if you are using the advanced template.

 'refresh-captcha',
            'class' => 'text-small' // .text-small { font-size: 0.85em; } - include in your CSS
        ]);
 
        $this->template = '
            
{image} ' . $refresh_a . '
{input}
'; parent::init(); } /** * Register the refresh JS */ public function registerClientScript() { $view = $this->getView(); $view->registerJs(" $('#refresh-captcha').on('click', function(e){ e.preventDefault(); $('#verify-code img').yiiCaptcha('refresh'); }) "); parent::registerClientScript(); } }

2. Create CaptchaRefreshableAction

Then we create a CaptchaRefreshableAction class in the models directory or commons\models if you are using the advanced template.

request->isAjax) {
            return true;
        }
        return parent::validate($input, $caseSensitive);
    }
 
}

3. Add widgets to views/site/login.php

.............
.............
 
............. .............
'login-form']); ?> ............. ............. = $form->field($model, 'verifyCode')->widget(\common\models\CaptchaRefreshable::class) ?> ............. .............

4. Add action to the controller/SiteController.php

.............
.............
 
class SiteController extends Controller
{
    .............
    .............
     
public function actions()
    {
        return [
            .............
            .............
             
'captcha' = > [
                'class' => 'common\models\CaptchaRefreshableAction',
            ],
            .............
            .............
        ];
    }
     
.............
    .............   
}

5. Add action to refresh captcha on page reload

In steps 1-4 above, we have created a button/link to refresh the captcha image. The problem is that when reloading the page, the captcha image displayed does not change. In order for the captcha image to change every reload page, we need to add a script to the login function in the controller / SiteController.php

.............
.............
  
class SiteController extends Controller
{
    .............
    .............
      
    public function actionLogin()
    {
 
        $this->createAction('captcha')->getVerifyCode(true);
 
        .............
        ............. 
     
    }
      
    .............
    .............   
}

0 Comments