[yii2] Cara refresh captcha dengan tombol atau reload halaman

Secara default, captcha Yii2 tidak disertai dengan tautan / tombol “refresh” yang memungkinkan Anda untuk refresh gambar captcha. Demikian juga ketika reload halaman gambar captcha yang muncul tetap sama. Hal Ini bisa membuat frustasi karena seringkali gambar captcha tidak bisa terbaca (bahkan oleh manusia).

Pada tutorial kali ini, kita akan belajar membuat tautan/tombol “refresh” gambar captcha dan juga melakukan refresh gambar captcha setiap kali reload halaman.

1. Membuat CaptchaRefreshable

Langkah pertama yang perlu kita lakukan adalah membuat class CaptchaRefreshable pada direktori models atau commons\models jika Anda menggunakan yii2 advanced template.

<?php

namespace common\models;

class CaptchaRefreshable extends \yii\captcha\Captcha
{
    /**
     * Overrides the $template HTML
     */
    public function init()
    {
        $refresh_a = \yii\helpers\Html::a('refresh', '#', [
            'id' => 'refresh-captcha',
            'class' => 'text-small' // .text-small { font-size: 0.85em; } - include in your CSS
        ]);

        $this->template = '
            <div id="verify-code" class="row">
            <div class="large-3 columns">{image} ' . $refresh_a . '</div>
            <div class="large-6 columns">{input}</div>
            </div>';
        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. Membuat CaptchaRefreshableAction

Kemudian kita buat class CaptchaRefreshableAction pada direktori models atau commons\models jika Anda menggunakan yii2 advanced template.

<?php


namespace common\models;

use Yii;


class CaptchaRefreshableAction extends \yii\captcha\CaptchaAction
{
    public function validate($input, $caseSensitive)
    {
        // Skip validation on AJAX requests, as it expires the captcha.
        if (Yii::$app->request->isAjax) {
            return true;
        }
        return parent::validate($input, $caseSensitive);
    }

}

3. Menambahkan widget pada views/site/login.php

.............
.............

<div class="site-login">
	.............
	.............

    <div class="row">
        <div class="col-lg-5">
            <?php $form = ActiveForm::begin(['id' => 'login-form']); ?>

				.............
				.............

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

				.............
				.............
	
            <?php ActiveForm::end(); ?>
        </div>
    </div>
</div>

4. Menambahkan action pada controller/SiteController.php

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

5. Menambahkan action untuk refresh captcha pada reload halaman

Pada langkah 1-4 tersebut di atas, kita sudah berhasil membuat tombol/tautan untuk melakukan refresh gambar captcha. Permasalahannya adalah ketika reload halaman, gambar captcha yang ditampilkan tidak berubah. Agar gambar captcha berubah setiap reload halaman perlu kita tambahkan script pada fungsi login di controller/SiteController.php

.............
.............
 
class SiteController extends Controller
{
    .............
    .............
     
    public function actionLogin()
    {

        $this->createAction('captcha')->getVerifyCode(true);

		.............
		............. 
	
    }
     
    .............
    .............   
}