2011年7月16日土曜日

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>


  • 0 件のコメント: