[yii2] Wie man ein Captcha mit einer Schaltfläche auffrischt oder eine Seite neu lädt

Standardmäßig verfügt Yii2 captcha nicht über einen „Refresh“-Link/Button, mit dem Sie Captcha-Bilder aktualisieren können. Ebenso bleibt die Seite mit den Captcha-Bildern beim Neuladen unverändert. Dies kann frustrierend sein, weil Captcha-Bilder oft unlesbar sind (sogar für Menschen).

In diesem Tutorial werden wir lernen, wie man einen Link/Button zum „Auffrischen“ von Captcha-Bildern erstellt und auch Captcha-Bilder jedes Mal auffrischt, wenn die Seite neu geladen wird.

1. CaptchaRefreshable erstellen

Der erste Schritt ist die Erstellung einer CaptchaRefreshable Klasse im Verzeichnis models oder commons\models, wenn Sie das yii2 advanced template verwenden.

<?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. CaptchaRefreshableAktion erstellen

Dann erstellen wir eine CaptchaRefreshableAction Klasse im models Verzeichnis oder commons\models wenn Sie das yii2 advanced Template verwenden.

<?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. Widgets zu views/site/login.php hinzufügen

.............
.............
 
<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. Hinzufügen einer Aktion zum Controller/SiteController.php

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

Weitere interessante Artikel

5. Aktion zum Aktualisieren von Captcha beim Neuladen der Seite hinzufügen

In den Schritten 1-4 oben haben wir eine Schaltfläche/Link zum Aktualisieren des Captcha-Bildes erstellt. Das Problem ist, dass sich das angezeigte Captcha-Bild beim Neuladen der Seite nicht ändert. Damit sich das Captcha-Bild bei jedem Neuladen der Seite ändert, müssen wir ein Skript zur Login-Funktion in dem Controller / SiteController.php hinzufügen

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

Neueste Artikel

Verwandte Artikel