[yii2] Como refrescar un captcha con un boton o recargar una pagina

Por defecto, Yii2 captcha no viene con un enlace/botón «refrescar» que te permita refrescar las imágenes captcha. Del mismo modo, cuando se recarga la página de la imagen captcha, que aparece sigue siendo el mismo. Esto puede frustrar porque a menudo las imágenes captcha son ilegibles (incluso por humanos).

En este tutorial, aprenderemos a crear un enlace/botón para «refrescar» imágenes captcha y también refrescar imágenes captcha cada vez que recargan la página.

1. Crear CaptchaRefreshable

El primer paso que tenemos que hacer es crear una CaptchaRefreshable clase en el directorio models o commons\models si estás usando la plantilla avanzada yii2.

<?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. Crear CaptchaRefreshableAction

Luego creamos una clase CaptchaRefreshableAction en el directorio models o commons\models si estás usando la plantilla avanzada yii2.

<?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. Añadir widgets a 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. Añadir acción al controlador/SiteController.php

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

5. Añadir acción para actualizar el captcha al recargar la página

En los pasos 1-4 anteriores, hemos creado un botón/enlace para actualizar la imagen captcha. El problema es que al recargar la página, la imagen captcha que se muestra no cambia. Para que la imagen captcha cambie cada recarga de página, necesitamos añadir un script a la función de login en el controlador / SiteController.php.

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