Rafraîchir le captcha Yii2 résout les limitations du widget captcha par défaut, qui ne dispose pas de bouton de rafraîchissement et affiche la même image au rechargement de la page. Ce guide technique explique comment implémenter un captcha rafraîchissable en créant une classe personnalisée CaptchaRefreshable et en ajoutant une logique de rechargement automatique, améliorant ainsi l’expérience utilisateur (UX) et la sécurité du formulaire.
Pourquoi Ajouter une Fonction de Rafraîchissement au Captcha Yii2 ?
Le widget captcha par défaut de Yii2 présente deux limitations principales. Premièrement, il ne fournit pas de bouton ou de lien pour rafraîchir l’image du captcha. Deuxièmement, la même image persiste même lors du rechargement de la page. Cela peut être frustrant lorsque l’image est difficile à lire. Par conséquent, implémenter une fonction pour rafraîchir le captcha Yii2 est crucial pour un processus de vérification plus fluide.
Étape 1 : Créer la Classe CaptchaRefreshable
Créez un nouveau fichier de classe nommé CaptchaRefreshable.php. Placez-le dans le répertoire common/models/ pour le template Advanced, ou dans models/ pour le template Basic. Cette classe étendra les fonctionnalités de yii\captcha\Captcha.
<?php
namespace common\models;
class CaptchaRefreshable extends \yii\captcha\Captcha
{
/**
* Remplace le modèle HTML par défaut pour ajouter un lien de rafraîchissement.
*/
public function init()
{
$lienRafraichir = \yii\helpers\Html::a('Nouvelle Image', '#', [
'id' => 'refresh-captcha',
'class' => 'text-small'
]);
$this->template = '
<div id="verify-code" class="row">
<div class="col-md-6">{image} ' . $lienRafraichir . '</div>
<div class="col-md-6">{input}</div>
</div>';
parent::init();
}
/**
* Enregistre le script JavaScript pour gérer l'action de clic sur le lien de rafraîchissement.
*/
public function registerClientScript()
{
$view = $this->getView();
$view->registerJs("
$('#refresh-captcha').on('click', function(e){
e.preventDefault();
$('#verify-code img').yiiCaptcha('refresh');
});
");
parent::registerClientScript();
}
}Étape 2 : Créer la Classe CaptchaRefreshableAction
Ensuite, créez une classe d’action personnalisée pour gérer la validation du captcha. Cette classe garantit que la validation n’est pas vérifiée sur les requêtes AJAX, évitant ainsi l’expiration du code captcha lors du clic sur le bouton de rafraîchissement.
<?php
namespace common\models;
use Yii;
class CaptchaRefreshableAction extends \yii\captcha\CaptchaAction
{
public function validate($input, $caseSensitive)
{
// Ignorer la validation si la requête est AJAX.
if (Yii::$app->request->isAjax) {
return true;
}
return parent::validate($input, $caseSensitive);
}
}Étape 3 : Intégrer le Widget dans la Vue de Connexion
Dans le fichier de vue de connexion (views/site/login.php), remplacez le widget captcha standard par le widget personnalisé CaptchaRefreshable.
<?php
use yii\widgets\ActiveForm;
// ... autre 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('Connexion', ['class' => 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>
</div>Étape 4 : Enregistrer l’Action dans SiteController
Enregistrez l’action CaptchaRefreshableAction dans la méthode actions() de SiteController. Cela remplace la configuration captcha par défaut.
<?php
namespace app\controllers;
class SiteController extends Controller
{
// ... autre code ...
public function actions()
{
return [
'error' => [ // ... ],
'captcha' => [
'class' => 'common\models\CaptchaRefreshableAction', // Action personnalisée
'fixedVerifyCode' => YII_ENV_TEST ? 'testme' : null,
],
];
}
}Étape 5 : Rechargement Automatique du Captcha au Rafraîchissement de la Page
L’implémentation ci-dessus ajoute un bouton de rafraîchissement. Cependant, l’image du captcha ne change pas lors du rechargement de la page. Pour résoudre ce problème, appelez l’action pour générer un nouveau code au début de l’action de connexion dans le contrôleur. Cela garantit que le rafraîchissement du captcha Yii2 se produit également automatiquement.
<?php
public function actionLogin()
{
// Génère un nouveau code captcha à chaque accès à l'action de connexion.
$this->createAction('captcha')->getVerifyCode(true);
// ... reste du code du processus de connexion ...
}En suivant ces cinq étapes, vous avez implémenté avec succès une fonction complète pour rafraîchir le captcha Yii2. Cette solution apporte deux améliorations principales : un bouton de rafraîchissement pour les utilisateurs et un renouvellement automatique lors du rechargement de la page. Cette implémentation maintient également la compatibilité avec la validation et la sécurité intégrées du framework Yii2.