開発者ドキュメント

Wicket Kaptcha統合の例

getdocs

Kaptchaはシンプルで使いやすいJavaライブラリを使用して、キャプチャ画像の検証を行います。このチュートリアルでは、KaptchaをWicketフレームワークとSpring ** を使って統合する方法を紹介します。

使用されるライブラリ:

  1. Kaptcha v2.3.2

  2. ウィケットv1.4.17

  3. 改札 – v1.4.17

  4. Spring v3.0.5.RELEASE

1. Kaptchaを入手する

このhttp://code.google.com/p/kaptcha/issues/detail?id=12[thread]によれば、所有者はMavenが気に入らないので、ライブラリをローカルのMavenリポジトリに手動でインストールする必要があります。

{空} 1。 Kaptchaライブラリをhttp://code.google.com/p/kaptcha/から入手してください。2. Mavenコマンドの下で手動でインストールしてください。 

mvn install:install-file -Dfile=c:\kaptcha-2.3.2.jar -DgroupId=com.google.code
    -DartifactId=kaptcha -Dversion=2.3.2 -Dpackaging=jar

{空} 3。その後、pom.xmlファイルにkaptchaを含めることができます。


File:pom.xml
 

    <dependency>
        <groupId>com.google.code</groupId>
        <artifactId>kaptcha</artifactId>
        <version>2.3.2</version>
    </dependency>

2. Springを介したDefaultKaptcha

  • captchaProducer

    という名前の ”

    DefaultKaptcha ** “用のSpring Beanを作成します。


File:applicationContext.xml
 

<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/spring-beans-3.0.xsd">

    <bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
        <property name="config">
            <bean class="com.google.code.kaptcha.util.Config">
                <constructor-arg type="java.util.Properties" value="null">
                </constructor-arg>
            </bean>
        </property>
    </bean>

</beans>

3. CaptchaImage

Wicketの

NonCachingImage`を拡張し、

DynamicImageResource`クラスを使ってCaptchaイメージを動的に生成するCaptchaImageクラスを作成します。


File:CaptchaImage.java
 

package com.mkyong.user;

import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import javax.servlet.http.HttpServletRequest;
import org.apache.wicket.Request;
import org.apache.wicket.RequestCycle;
import org.apache.wicket.markup.html.image.NonCachingImage;
import org.apache.wicket.markup.html.image.resource.DynamicImageResource;
import org.apache.wicket.protocol.http.WebRequest;
import org.apache.wicket.spring.injection.annot.SpringBean;
import com.google.code.kaptcha.Constants;
import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;

public class CaptchaImage extends NonCachingImage {

    private static final String CAPTCHA__PRODUCER = "captchaProducer";

   //inject via Spring
    @SpringBean
    private DefaultKaptcha captchaProducer;

   //private DefaultKaptcha captchaProducer;
    public CaptchaImage(String id) {
        super(id);

        setImageResource(new DynamicImageResource() {

            public byte[]getImageData() {
                ByteArrayOutputStream os = new ByteArrayOutputStream();

                JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(os);

                try {
                    BufferedImage bi = getImageCaptchaService();
                    encoder.encode(bi);
                    return os.toByteArray();
                } catch (Exception e) {
                    throw new RuntimeException(e);
                }

            };

            private BufferedImage getImageCaptchaService() {

                Request request = RequestCycle.get().getRequest();
                HttpServletRequest httpRequest = ((WebRequest) request)
                        .getHttpServletRequest();

                String capText = captchaProducer.createText();

               //store the text in the session
                httpRequest.getSession().setAttribute(
                        Constants.KAPTCHA__SESSION__KEY, capText);

               //create the image with the text
                BufferedImage bi = captchaProducer.createImage(capText);

                return bi;

            }
        });

    }
}

4. CaptchaValidator

”

CaptchaValidator

“というカスタムバリデーターを作成し、ユーザーの入力を検証し、Kaptcha生成コードと比較します。


File:CaptchaValidator.java
 

package com.mkyong.user;

import javax.servlet.http.HttpServletRequest;
import org.apache.wicket.Request;
import org.apache.wicket.RequestCycle;
import org.apache.wicket.protocol.http.WebRequest;
import org.apache.wicket.validation.IValidatable;
import org.apache.wicket.validation.validator.AbstractValidator;

public class CaptchaValidator extends AbstractValidator<String> {

    private static final long serialVersionUID = 1L;
    private String INVALID__CODE = "captcha.invalid";

    public void onValidate(IValidatable validatable) {
        String kaptchaReceived = (String) validatable.getValue();

        Request request = RequestCycle.get().getRequest();
        HttpServletRequest httpRequest = ((WebRequest) request)
                .getHttpServletRequest();

        String kaptchaExpected = (String) httpRequest.getSession()
            .getAttribute(com.google.code.kaptcha.Constants.KAPTCHA__SESSION__KEY);

        if (kaptchaReceived == null
                || !kaptchaReceived.equalsIgnoreCase(kaptchaExpected)) {
            error(validatable);
        }

    }

   //validate on numm value as well
    @Override
    public boolean validateOnNullValue() {

        return true;

    }

    @Override
    protected String resourceKey() {
        return INVALID__CODE;
    }
}


File:package.properties
 

captcha.invalid = Incorrect answer, type words in image again!

5. Wicketコンポーネント

KaptchaをWicketコンポーネントと統合する。 

package com.mkyong.user;

import org.apache.wicket.PageParameters;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.AjaxFallbackLink;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.TextField;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.model.PropertyModel;

public class KaptchaPage extends WebPage {

    private String captchaInput;

    public KaptchaPage(final PageParameters parameters) {

        final CaptchaImage captchaImage = new CaptchaImage("kaptchaImage");
        captchaImage.setOutputMarkupId(true);

        TextField<String> captchaTF = new TextField<String>("captcha",
                new PropertyModel<String>(this, "captchaInput"));
        captchaTF.add(new CaptchaValidator());

        Form<?> form = new Form<Void>("form") {
            @Override
            protected void onSubmit() {

                info("Image words are correct!!!");
            };
        };

        form.add(new AjaxFallbackLink("link") {
            @Override
            public void onClick(final AjaxRequestTarget target) {

                captchaImage.detach();

                if (target != null) {
                    target.addComponent(captchaImage);
                } else {
                   //javascript is disable
                }
            }
        }.add(captchaImage));

        form.add(captchaTF);
        add(form);
        add(new FeedbackPanel("feedback"));
    }

}

  • 注意** `captchaImage.detach（）;`はユーザーがcaptchaイメージをクリックしている間に新しいcaptchaイメージを動的に生成できるようにします。 

<html>
<head>
<style>
.feedbackPanelINFO {
    color: green;
}

.feedbackPanelERROR {
    color: red;
}
</style>
</head>
<body>

    <h1>Wicket + Kaptcha integration example</h1>
    <div wicket:id="feedback"></div>
    <form wicket:id="form">
        <a wicket:id="link" title="Refresh image words">
        <img wicket:id="kaptchaImage"/></a>
        <br>
        <label>Type the image words :</label>
        <input type="text"wicket:id="captcha">
        <input type="submit" value="Submit"/>
    </form>

</body>
</html>

6.デモ

開始と訪問 –


http://localhost:8080/WicketExamples/

imputが正しくない場合:



入力が正しい場合:



ダウンロードする – リンク://wp-content/uploads/2009/05/Wicket-Kaptcha-Integration-Example.zip[Wicket-Kaptcha-Integration-Example.zip]（10 KB）

参考文献


  1. Kaptcha公式ウェブサイト

  2. リンク://wicket/wicket-spring-integration-example/[Wicket Spring

統合例]。 link://maven/how-to-include-library-man-in-maven-local-repository/[インクルード

ライブラリをローカルMavenリポジトリに追加]


captcha


wicket

モバイルバージョンを終了