如何在页面刷新/加载时刷新验证码图像

How to refresh captcha image on page refresh/load?

本文关键字:刷新 验证 图像 加载      更新时间:2023-09-26

我想强制我的网站每次加载时刷新验证码图像,所以我有一个使用 onload(( 事件触发的 javascript 方法。在这里我有以下行:

document.getElementById('yw0_button').click;

Firebug 不会检测到任何错误,出于测试目的,我在显示的行之后添加了警报,每次加载页面时都会弹出警报。但是,图像不会刷新!

这是我认为与视图文件相关的内容:

<?php if(extension_loaded('gd')): ?>
    <div class="row">
        <?php echo $form->labelEx($model,'verifyCode'); ?>
        <div>
            <?php
            $this->widget('CCaptcha',
                          array('showRefreshButton'=>true,
                                'buttonType'=>'button',
                                'buttonOptions'=>
                                                    array('type'=>'image',
                                                          'src'=>"/path/images/refresh-icon.png",
                                                          'width'=>30,
                                                    ),                                                            
                                'buttonLabel'=>'Refrescar imagen'),
                          false); 
            ?>
            <br>
            <?php echo $form->textField($model,'verifyCode'); ?>
        </div>
    <div class="hint">
        Porfavor ingrese las letras como las ve en la imagen superior.
        <br/>No hay distincion entre minúsculas y mayúsculas.</div>
    </div>
<?php endif; ?>

有什么想法吗?


@k到Z刚刚看到这个!是的,当然,如果您能帮助我找到更合适的解决方案,那就太棒了!这是我认为与视图文件相关的内容:

<?php if(extension_loaded('gd')): ?>
        <div class="row">
            <?php echo $form->labelEx($model,'verifyCode'); ?>
            <div>
                <?php
                $this->widget('CCaptcha',
                              array('showRefreshButton'=>true,
                                    'buttonType'=>'button',
                                    'buttonOptions'=>
                                                        array('type'=>'image',
                                                              'src'=>"/path/images/refresh-icon.png",
                                                              'width'=>30,
                                                        ),                                                            
                                    'buttonLabel'=>'Refrescar imagen'),
                              false); 
                ?>
                <br>
                <?php echo $form->textField($model,'verifyCode'); ?>
            </div>
        <div class="hint">
            Porfavor ingrese las letras como las ve en la imagen superior.
            <br/>No hay distincion entre minúsculas y mayúsculas.</div>
        </div>
    <?php endif; ?>

在控制器中,我在accessRules((方法中授予授权用户对验证码操作的权限,仅此而已。我还能发布什么吗?

如果有人在开始使用 Yii 时遇到类似的问题。这就是我解决触发点击的 CAPTCHA 问题的方式:我有一个事件触发了 onload 事件,该事件具有以下代码:

$('#yw0_button'(.click((;

肯定有更好的方法,我愿意接受建议!但是,作为临时解决方案,这工作得很好,每次加载页面时都会刷新验证码图像。祝你好运!

编辑:我所做的是像这样处理我的html页面的onload事件

<body onload="initialize()"> 
.. 
</body> 

然后在我的js文件中:

function initialize() 
{ 
     $('#yw0_button').click(); 
} 
我希望

我能提出一个更好的方法来解决Soph提到的问题。我知道这不是与JavaScript相关的解决方案,这个问题令人上瘾,但正如我所看到的,这是最正确的方法。

我面临着同样的要求 - 在页面刷新时刷新标题,但在用户在其他字段上的输入无效时保留此标题,因为在每次验证失败时重复新的验证码很烦人。因此,此任务看起来像是在请求POST不刷新标题,否则刷新它(GET请求(。Soph 自己提出的解决方案无法实现这一目标 - 因为人们可以知道POST请求被发送到服务器,并且客户端 JavaScript 无法分析它们的数据。

因此,我决定看看 Yii 的验证码实现。它由位于包system.web.widgets.captcha的两个类组成。前者CCaptchaCWidget扩展而来,我们在视图中使用它以如下方式将验证码添加到 Web 表单中:

<?php 
    $this->widget("CCaptcha", array(
    'buttonLabel' => "Generate another code",
    'showRefreshButton' => false,
    'clickableImage' => true
));
?>

后者CCaptchaAction通过生成验证码和创建图像来提供验证码。考虑到 Yii 被设计为面向对象的,我们可以创建几个我们自己的类CaptchaCaptchaActionCCaptchaCCaptchaAction 相对扩展,并将它们放在我们 Web 应用程序目录components子目录中。

我对这两个类的实现如下。

run() CCaptchaAction方法被覆盖,并且与原始方法非常相似,除了在设置GET参数时执行render_refreshed并且正在动态生成新的验证码并呈现相应的新图像并作为操作的结果返回,则执行一个额外的if分支。

类中引入了一个公共refresh变量Captcha默认为false这意味着小部件的行为类似于CCaptcha的行为。覆盖renderImage方法,我们更改负责准备小部件输出HTML代码的代码。为了更精确,它是准备验证码操作的链接的地方src用作img标签的属性。如果refresh成员设置为true则附加一个render_refreshed参数将附加到此链接。

这是CaptchaAction.php

<?php
Yii::import("system.web.widgets.captcha.CCaptchaAction");
class CaptchaAction extends CCaptchaAction
{
    const RENDER_REFRESHED_GET_VAR = "render_refreshed";
    public function run()
    {
        if (isset($_GET[self::REFRESH_GET_VAR]))  // AJAX request for regenerating code
        {
            $code = $this->getVerifyCode(true);
            echo CJSON::encode(array(
                'hash1' => $this->generateValidationHash($code),
                'hash2' => $this->generateValidationHash(strtolower($code)),
                // we add a random 'v' parameter so that FireFox can refresh the image
                // when src attribute of image tag is changed
                'url'=> $this->getController()->createUrl($this->getId(), array(
                    'v' => uniqid()
                )),
            ));
        }
        else if (isset($_GET[self::RENDER_REFRESHED_GET_VAR]))
        {
            $this->renderImage($this->getVerifyCode(true));
        }
        else
            $this->renderImage($this->getVerifyCode());
        Yii::app()->end();
    }
}

这是Captcha.php

<?php
Yii::import("web.system.widgets.CCaptcha");
class Captcha extends CCaptcha
{
    public $refresh = false;
    protected function renderImage()
    {
        if (!isset($this->imageOptions['id']))
            $this->imageOptions['id'] = $this->getId();
        if ($this->refresh)
        {
            $url = $this->getController()->createUrl($this->captchaAction, array(
                'v' => uniqid(),
                CaptchaAction::RENDER_REFRESHED_GET_VAR => 1
            ));
        }
        else
        {
            $url = $this->getController()->createUrl($this->captchaAction, array(
                'v' => uniqid()
            ));
        }
        $alt = isset($this->imageOptions['alt']) ? $this->imageOptions['alt'] : '';
        echo CHtml::image($url, $alt, $this->imageOptions);
    }
}

所以用法很简单。在为站点页面准备模型数据的操作中,请执行以下操作:

...
// Creating order model's instance
$model = new MyModel();
$refreshCaptcha = true;
if (isset($_POST['MyModel']))
{
    $refreshCaptcha = false;
    ...
}
...
$this->render("myView", array(
    'model' => $model,
    'refreshCaptcha' => $refreshCaptcha
));

之后myView在此页面操作的模板中修改验证码的小部件调用:

<?php 
    $this->widget("Captcha", array(
    'buttonLabel' => "Generate another code",
    'showRefreshButton' => false,
    'clickableImage' => true,
    'refresh' => $refreshCaptcha
));

并且不要忘记通过将类替换为CaptchaAction来修改页面控制器actions CCaptchaAction方法:

public function actions()
{
    return array(
        'captcha'=>array(
            'class'=>'CaptchaAction',
            'backColor'=>0xFFFFFF
        )
    );
}

在我看来,它按预期工作。希望这会帮助某人。

这是另一种(正确?(方法(讨论(:

Yii::app()->getController()->createAction('captcha')->getVerifyCode(true);
我想

在 Ezze 的回答中添加一些东西:

要使客户端验证正常工作,您可以使用自定义验证码验证:

class CaptchaValidatorRefresh extends CCaptchaValidator
{
    public function clientValidateAttribute($object,$attribute)
{
    $js="";
    if(!$this->allowEmpty)
    {
        $message=$this->message!==null ? $this->message : Yii::t('yii','The verification code is incorrect.');
        $js="
            if($.trim(value)=='') {
                messages.push(".CJSON::encode($message).");
            }
        ";
    }       
    return $js;
    }
}

然后

public function rules()
{
    return array(
        array('verifyCode', 'CaptchaValidatorRefresh', 'on'=>'request', 'allowEmpty'=>!CCaptcha::checkRequirements()),                          
    );
}

添加此 JavaScript:

jQuery(document).ready(function() {
    jQuery.ajax({
        'success':function(html){jQuery("#yw0").attr("src",html)},
        'url':'/checkout/finish/captcha?refresh=1',
        'cache':false
    });
    return false;
});

您可以在表单开始之前编写脚本Wedget。

在每个页面加载时生成新的验证码。

  $script=' $(document).ready(function() {
            document.getElementById("yw0_button").click();
    });';
  Yii::app()->clientScript->registerScript('yw0_button', $script);
  $form=$this->beginWidget('CActiveForm', array(
    'id'=>'test-form',
    'action'=>Yii::app()->createUrl('controllerName/actionName'),
    'enableClientValidation'=>true, 
    'clientOptions'=>array(
        'validateOnSubmit'=>true,
    ),
  ));

这对我来说是工作。

我希望它也适合你

我用过:http://www.yiiframework.com/extension/captcha-extended/

并更改验证码扩展操作.php(路径:扩展/验证码扩展(

在第 154 行

$this->renderImage($this->getVerifyCode());  

$this->renderImage($this->getVerifyCode(true));

我有一个更好的解决方案给你们:

public function beforeAction($action)
{
    if($action->id == 'captcha'){
        $action->getVerifyCode(true);
    }
    return parent::beforeAction($action); 
}

将这些代码放入包含验证码操作的控制器中!