Cara Refresh Captcha Yii2: Tombol & Auto Reload

Refresh captcha Yii2 merupakan solusi untuk mengatasi keterbatasan widget captcha default yang tidak menyediakan tombol refresh dan gambar yang statis saat halaman dimuat ulang. Artikel ini membahas tutorial teknis untuk mengimplementasikan fitur tersebut dengan membuat kelas CaptchaRefreshable dan menambahkan logika auto refresh, sehingga meningkatkan pengalaman pengguna (UX) dan keamanan form.

Mengapa Membutuhkan Fitur Refresh pada Captcha Yii2?

Widget captcha bawaan Yii2 memiliki dua keterbatasan utama. Pertama, tidak ada tombol atau tautan untuk memperbarui gambar captcha. Kedua, gambar yang sama akan tetap muncul meskipun halaman di-reload. Hal ini dapat menimbulkan frustrasi jika gambar sulit dibaca. Oleh karena itu, penambahan fitur refresh captcha Yii2 menjadi penting untuk kelancaran proses verifikasi.

Langkah 1: Membuat Kelas CaptchaRefreshable

Buatlah file kelas baru dengan nama CaptchaRefreshable.php. Tempatkan file ini di direktori common/models/ untuk template Advanced, atau models/ untuk template Basic. Kelas ini akan memperluas fungsi dari yii\captcha\Captcha.

Baca juga: [Yii2] Perbandingan Kecepatan Cache

<?php
namespace common\models;

class CaptchaRefreshable extends \yii\captcha\Captcha
{
    /**
     * Mengoverride template HTML default untuk menambahkan tautan refresh.
     */
    public function init()
    {
        $refreshLink = \yii\helpers\Html::a('Gambar Baru', '#', [
            'id' => 'refresh-captcha',
            'class' => 'text-small'
        ]);

        $this->template = '
            <div id="verify-code" class="row">
                <div class="col-md-6">{image} ' . $refreshLink . '</div>
                <div class="col-md-6">{input}</div>
            </div>';
        parent::init();
    }

    /**
     * Mendaftarkan skrip JavaScript untuk menangani aksi klik pada tautan refresh.
     */
    public function registerClientScript()
    {
        $view = $this->getView();
        $view->registerJs("
            $('#refresh-captcha').on('click', function(e){
                e.preventDefault();
                $('#verify-code img').yiiCaptcha('refresh');
            });
        ");
        parent::registerClientScript();
    }
}

Langkah 2: Membuat Kelas CaptchaRefreshableAction

Selanjutnya, buat kelas action khusus untuk menangani validasi captcha. Kelas ini memastikan validasi tidak diperiksa pada permintaan AJAX, sehingga kode captcha tidak kadaluarsa saat tombol refresh ditekan.

<?php
namespace common\models;

use Yii;

class CaptchaRefreshableAction extends \yii\captcha\CaptchaAction
{
    public function validate($input, $caseSensitive)
    {
        // Lewati validasi jika request berasal dari AJAX.
        if (Yii::$app->request->isAjax) {
            return true;
        }
        return parent::validate($input, $caseSensitive);
    }
}

Langkah 3: Mengintegrasikan Widget ke View Login

Pada file view login (views/site/login.php), ganti penggunaan widget captcha biasa dengan widget CaptchaRefreshable yang telah kita buat.

<?php
use yii\widgets\ActiveForm;
// ... kode lainnya ...

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

        <?= $form->field($model, 'username') ?>
        <?= $form->field($model, 'password')->passwordInput() ?>

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

        <?= $form->field($model, 'rememberMe')->checkbox() ?>

        <div class="form-group">
            <?= Html::submitButton('Login', ['class' => 'btn btn-primary']) ?>
        </div>

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

Langkah 4: Mendaftarkan Action di SiteController

Daftarkan action CaptchaRefreshableAction ke dalam metode actions() di SiteController. Hal ini menggantikan konfigurasi captcha default.

<?php
namespace app\controllers;

class SiteController extends Controller
{
    // ... kode lainnya ...

    public function actions()
    {
        return [
            'error' => [ // ... ],
            'captcha' => [
                'class' => 'common\models\CaptchaRefreshableAction', // Action custom
                'fixedVerifyCode' => YII_ENV_TEST ? 'testme' : null,
            ],
        ];
    }
}

Langkah 5: Auto Refresh Captcha Saat Reload Halaman

Implementasi di atas telah menambahkan tombol refresh. Namun, gambar captcha belum berubah saat halaman di-reload. Untuk mengatasinya, panggil aksi pembuatan kode baru di awal aksi login controller. Dengan demikian, refresh captcha Yii2 juga terjadi secara otomatis.

Baca juga: [Yii2] Cara membuat dan menggunakan Fungsi pada Yii2

<?php
public function actionLogin()
{
    // Hasilkan kode captcha baru setiap kali aksi login diakses.
    $this->createAction('captcha')->getVerifyCode(true);

    // ... sisa kode untuk proses login ...
}

Dengan mengikuti kelima langkah ini, Anda telah berhasil mengimplementasikan fitur refresh captcha Yii2 secara lengkap. Solusi ini memberikan dua peningkatan utama: tombol refresh untuk pengguna dan pembaruan otomatis saat reload halaman. Implementasi ini juga mempertahankan kompatibilitas dengan validasi dan keamanan bawaan framework Yii2.