Yii2 Captcha Tutorial: Aktualisierungs-Button erstellen

Yii2 Captcha zu aktualisieren löst die Einschränkungen des Standard-Captcha-Widgets, das keinen Aktualisierungs-Button hat und bei Seitenneuladung das gleiche Bild anzeigt. Diese technische Anleitung erklärt die Implementierung eines aktualisierbaren Captchas durch Erstellung einer benutzerdefinierten CaptchaRefreshable-Klasse und Hinzufügen von Auto-Reload-Logik, was sowohl die Benutzererfahrung (UX) als auch die Formularsicherheit verbessert.

Warum eine Aktualisierungsfunktion für Yii2 Captcha benötigt wird

Das Standard-Yii2-Captcha-Widget hat zwei Hauptbeschränkungen. Erstens bietet es keinen Button oder Link zum Aktualisieren des Captcha-Bildes. Zweitens bleibt das gleiche Bild selbst beim Neuladen der Seite bestehen. Dies kann frustrierend sein, wenn das Bild schwer lesbar ist. Daher ist die Implementierung einer Funktion zum Yii2 Captcha Aktualisieren für einen reibungsloseren Verifizierungsprozess entscheidend.

Schritt 1: Erstellen der CaptchaRefreshable-Klasse

Erstellen Sie eine neue Klassendatei namens CaptchaRefreshable.php. Platzieren Sie sie im Verzeichnis common/models/ für die Advanced-Vorlage oder models/ für die Basic-Vorlage. Diese Klasse erweitert die Funktionalität von yii\captcha\Captcha.

Auch lesen: [Yii2] Vergleich der Cache-Geschwindigkeit

<?php
namespace common\models;

class CaptchaRefreshable extends \yii\captcha\Captcha
{
    /**
     * Überschreibt die Standard-HTML-Vorlage, um einen Aktualisierungs-Link hinzuzufügen.
     */
    public function init()
    {
        $aktualisierungsLink = \yii\helpers\Html::a('Neues Bild', '#', [
            'id' => 'refresh-captcha',
            'class' => 'text-small'
        ]);

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

    /**
     * Registriert das JavaScript-Skript zur Handhabung des Klicks auf den Aktualisierungs-Link.
     */
    public function registerClientScript()
    {
        $view = $this->getView();
        $view->registerJs("
            $('#refresh-captcha').on('click', function(e){
                e.preventDefault();
                $('#verify-code img').yiiCaptcha('refresh');
            });
        ");
        parent::registerClientScript();
    }
}

Schritt 2: Erstellen der CaptchaRefreshableAction-Klasse

Erstellen Sie als Nächstes eine benutzerdefinierte Action-Klasse zur Handhabung der Captcha-Validierung. Diese Klasse stellt sicher, dass die Validierung bei AJAX-Anfragen nicht geprüft wird, um ein Ablaufen des Captcha-Codes bei Betätigung des Aktualisierungs-Buttons zu verhindern.

<?php
namespace common\models;

use Yii;

class CaptchaRefreshableAction extends \yii\captcha\CaptchaAction
{
    public function validate($input, $caseSensitive)
    {
        // Validierung überspringen, wenn die Anfrage AJAX ist.
        if (Yii::$app->request->isAjax) {
            return true;
        }
        return parent::validate($input, $caseSensitive);
    }
}

Schritt 3: Integration des Widgets in die Login-View

Ersetzen Sie in der Login-View-Datei (views/site/login.php) das Standard-Captcha-Widget durch das benutzerdefinierte CaptchaRefreshable-Widget.

<?php
use yii\widgets\ActiveForm;
// ... anderer Code ...

<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>

Schritt 4: Registrieren der Action im SiteController

Registrieren Sie die CaptchaRefreshableAction in der Methode actions() des SiteController. Dies ersetzt die Standard-Captcha-Konfiguration.

<?php
namespace app\controllers;

class SiteController extends Controller
{
    // ... anderer Code ...

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

Schritt 5: Auto-Reload des Captcha bei Seitenneuladung

Die obige Implementierung fügt einen Aktualisierungs-Button hinzu. Das Captcha-Bild ändert sich jedoch nicht bei einer Seitenneuladung. Um dies zu lösen, rufen Sie die Action zum Generieren eines neuen Codes am Anfang der Login-Action im Controller auf. Dies stellt sicher, dass die Aktualisierung des Yii2 Captcha auch automatisch erfolgt.

Auch lesen: Wi-Fi-Netzwerke infiltrieren – Software & Techniken

<?php
public function actionLogin()
{
    // Generiert bei jedem Aufruf der Login-Action einen neuen Captcha-Code.
    $this->createAction('captcha')->getVerifyCode(true);

    // ... restlicher Code des Login-Prozesses ...
}

Durch Befolgen dieser fünf Schritte haben Sie erfolgreich eine vollständige Funktion zum Yii2 Captcha Aktualisieren implementiert. Diese Lösung bietet zwei Hauptverbesserungen: einen Aktualisierungs-Button für Benutzer und automatische Erneuerung bei Seitenneuladung. Diese Implementierung bewahrt zudem die Kompatibilität mit der integrierten Validierung und Sicherheit des Yii2-Frameworks.