ZK: コミュニティ・エディションで Captchaを使う

ZK コミュニティ・エディション(CE)では残念ながらCaptchaコンポーネントを利用することができません。
しかし SimpleCaptcha を用いることで、CEでも Captchaを簡単に利用することができる方法が ZKforum で紹介されていたのでまとめてみました。

元ネタ

SimpleCaptcha サイトからsimplecaptcha.jarをダウンロードし WEB-INF/libへ配備する。

CaptchaUtils クラスを作成する。

import nl.captcha.Captcha;
import nl.captcha.backgrounds.GradiatedBackgroundProducer;
import nl.captcha.text.renderer.ColoredEdgesWordRenderer;

/**
 * CAPTCHAを作成するユーティリティクラス <br>
 * Captchaは直接 org.zkoss.zul.Imageにロード可能 <br>
 * 
 * <pre>
 * Image img = new org.zkoss.zul.Image();
 * img.setContent(CaptchaUtils.getCaptcha());
 * 
 * String verifyStr = captcha.getAnswer();
 * </pre>
 * 
 * @author Stephan Gerth
 */
public class CaptchaUtils 
    public CaptchaUtils(){
    }

    /**
    * 5桁のキャプチャを作成する
    */
    public static Captcha getCaptcha() {

        Captcha captcha = new Captcha.Builder(140, 50)
                       .addText(new ColoredEdgesWordRenderer()).addNoise()
                       .addBackground(new GradiatedBackgroundProducer())
                       .addBorder()
                       .build();

        return captcha;
    }
}

コントローラ クラスを作成する。

public class CaptchaCtrl extends GenericForwardComposer {
    private static final long serialVersionUID = -804655396850565215L;
    private Image img_captcha;
    private Textbox txt_captcha;
    private Captcha captcha;
 

    public void onCreate$win(Event event){
        doReCaptcha();
    }
 
    public void onClick$btn1(Event event){
        if (txt_captcha.getValue().equals(captcha.getAnswer())){
            alert("正しいキャプチャです。"); 
        } else { 
            alert("間違っています!!"); 
       } 
    }

    public void onClick$btn2(Event event){
        doReCaptcha();
    }

    /**
    * キャプチャを再表示する<br>
    * 
    */
    private void doReCaptcha() {
        captcha = CaptchaUtils.getCaptcha();
        img_captcha.setContent(captcha.getImage());
    } 
}

ZULを作成する。

<window id="win"  border="normal" width="350px" 
          title="コミュニティ・エディションでもキャプチャが使えます"  apply="ctrl.CaptchaCtrl" >
    <vlayout id="input" width="100%" >
        <hbox>
            <image id="img_captcha" /> 
            <button label="再表示" id="btn2"/>  
        </hbox>
    キャプチャを入力してください。 
        <textbox id="txt_captcha" hflex="1" width="250px"/>
        <button label="確認" id="btn1"/> 
   </vlayout> 
</window>