用 Zend_Dojo 实现 captcha 图片切换

当我们实现诸如会员注册功能时，通常会给出一个验证码和输入框，要求用户输入，以确认该用户的有效性。

 

这个功能在 Zend Framework 里面由 Zend_Captcha 组件提供，特别是 Zend_Captcha_Image，它允许用户把验证码用图片的形式展示出来。

 

如下图 ：

 

 

以下我要实现的就是，当我们点击上面图片时，图片会自动更新，就像通常我们在论坛注册时看到的那样。

 

为此，我们需要做一些前期工作。首先是准备好字体，这个可以在任何免费字体网站下载你喜欢的 ttf 字体。这里我下载了一种名为 Faktos 的字体，并放在 public/fonts/faktos/ 目录下 ：

 

 

这是作为图片里面的文字的默认字体。

 

此外，还要创建图片存放的文件夹，如本例中，我将把图片放在 public/img/captcha/ 目录下 ：

 

 

好了，接着就是代码了，在这里我使用了 Zend_Dojo ，通过它调用 Dojo toolkit 强大 Ajax 支持。文件一共两个，一个是 IndexController.php 控制器文件，另一个是 index.phtml 视图文件。下面是代码 ：

 

// IndexController.php
class IndexController extends Zend_Controller_Action
{
    // 创建 form 和验证码输入框
    public function indexAction()
    {
        $form = new Zend_Form();
        $captcha = $this->createCaptcha();
        $form->addElement($captcha);
        $this->view->captchaImageUrl = $captcha->getCaptcha()->getImgUrl()
                                     . $captcha->getCaptcha()->getId()
                                     . $captcha->getCaptcha()->getSuffix();
 
        $this->view->formLogin = $form->render();
    }
 
    // Ajax ： 输出的是新图片的路径
    public function ajaxAction()
    {
        $captcha = $this->createCaptcha()->getCaptcha();
        $captcha->generate();
        echo $captcha->getImgUrl() . $captcha->getId() . $captcha->getSuffix();
        die;
    }
 
    // 创建 captcha 验证码输入框
    public function createCaptcha()
    {
        // 验证码的修饰器，主要是添加 id 和 onclick 事件
        $decorators = array(
            array('HtmlTag', array('tag' => 'div',
                                   'id' => 'captchaId',
                                   'onclick' => 'changeImage()'))
        );
 
        $form = new Zend_Form();
 
        // Zend_Captcha_Image : 图片存放在 public/img/captcha/
        $captcha = $form->createElement('captcha', 'captcha', array(
            'captcha' => array(  
                'captcha' => 'Image',
                'wordLen' => 6,
                'fontsize' => 20,
                'width' => 200,
                'height' => 100,
                'dotNoiseLevel' => 2,
                'timeout' => 300,  
                'font' => 'fonts/faktos/Faktos.ttf',
                'imgDir' => './img/captcha/',
                'imgUrl' => '/img/captcha/',
            ),
            'decorators' => $decorators
        ));
 
        return $captcha;
    }
}

 

视图中的 Dojo 用的是 CDN 1.3.1 版的，所以不需要其它操作，而直接粘贴就可以看到效果。

 

// index.phtml 视图文件
<?php
// 通过 CDN 使用 Dojo 最新版本，并配置相关参数
$this->dojo()->enable()
             ->setCdnVersion('1.3.1')
             ->setDjConfigOption('parseOnLoad', true)
             ->setDjConfigOption('isDebug', false)
             ->setDjConfigOption('locale', 'zh');
 
// 输出 Dojo 内容，当然可以把这移到页面顶部输出
echo $this->dojo();
?>
 
<script type="text/javascript">
    // changeImage 函数
    function changeImage()
    {
        // 如果点击的是输入框，则不换图片
        if (document.activeElement.id == 'captcha-input') {
            return false;         
        }
 
        // Dojo 封装的 Ajax 方法
        dojo.xhrGet( {
            // Url 响应
            url: "/index/ajax",
 
            // 作为 text 处理
            handleAs: "text",
 
            // 超时单位为微秒
            timeout: 5000,
 
            // 成功返回响应时调用 load 方法
            load: function(response, ioArgs) {
                // 查找原图片并更新其路径
                dojo.query("img", document.getElementById("captchaId")).forEach(
                    function(selectTag) {
                        if (selectTag.src.indexOf("<?php echo $this->captchaImageUrl; ?>")) {
                            selectTag.src = response;
                        }
                    }
                );
                return response;
            },
 
            // 当发生错误时
            error: function(response, ioArgs) {
                console.error("HTTP status code: ", ioArgs.xhr.status);
                return response;
            }
        });
    }
</script>
 
<?php
// 输出 form
echo $this->formLogin;
?>

 

这个功能简单，但是却很实用！

 

转自：http://kbs.kimbs.cn/blog/list/post/23/title/onclick-change-captcha-image-with-Zend_Dojo