CAPTCHA機能サンプル¶

業務画面側で行う処理¶

CAPTCHA認証を行う際、業務画面側で必要な処理を下記に示す。

本サンプルが行う処理¶

CAPTCHA認証を行う際、本サンプルが行う処理を下記に示す。

クラス図¶

CaptchaUtilの使用方法¶

CaptchaUtilの使用方法について解説する。

CaptchaUtilでは、以下のユーティリティメソッドを実装している。なお、システムリポジトリからコンポーネントを取得する際のコンポーネント名は、後述の CaptchaGenerateHandlerの設定方法 で登録しているそれぞれのコンポーネント名とあわせる必要があるため、上記の設定例と異なるコンポーネント名で登録している場合にはソースコードを修正すること。

CaptchaGenerateHandlerの設定方法¶

CaptchaGenerateHandlerの設定方法について解説する。

<!-- CaptchaGeneratorの設定 -->
<component name="captchaGenerator" class="please.change.me.common.captcha.CaptchaGenerator">
  <property name="imageType" value="jpg"/>
  <property name="configParameters">
    <map>
      <entry key="kaptcha.textproducer.char.string" value="abcdegfynmnpwx" />
      <entry key="kaptcha.textproducer.char.length" value="4" />
    </map>
  </property>
</component>

<!-- CaptchaGenerateHandlerの設定 -->
<component name="captchaGenerateHandler" class="please.change.me.common.captcha.CaptchaGenerateHandler"/>

<!-- ハンドラキュー構成 -->
<component name="webFrontController"
            class="nablarch.fw.web.servlet.WebFrontController">
  <property name="handlerQueue">
    <list>

      ～(途中省略)～

      <component class="nablarch.fw.RequestHandlerEntry">
        <property name="requestPattern" value="/action/path/to/hoge"/>
        <property name="handler" ref="captchaGenerateHandler"/>
      </component>

      ～(途中省略)～

    </list>
  </property>
</component>

CaptchaGeneratorコンポーネントに対し、以下のプロパティ設定を行うことで、生成する文字列の内容や画像形式を制御することができる。

property名	設定内容
imageType	生成する画像の形式を定義する。 指定可能な値は javax.imageio.ImageIO#getWriterFormatNames() で取得できる値である。ただし、「wbmp」は使用できない。 省略した場合、「jpeg」となる。
configParameters	kaptchaに対する設定値をMap形式で定義する。 具体的に設定可能な値はkaptchaのサイト(https://code.google.com/p/kaptcha/wiki/ConfigParameters)を参照。 省略した場合、全ての設定値がkaptcha内で定められたデフォルト値となる。

CAPTCHA識別キー取得方法¶

CAPTCHA識別キーを取得するアクションの実装例を以下に示す。

public HttpResponse xxxxx(HttpRequest request, ExecutionContext context) {
    XxxForm form = new XxxForm();
    form.setCaptchaKey(CaptchaUtil.generateKey());
    context.setRequestScopedVar("form", form);
    return new HttpResponse("/xxxx/xxxx.jsp");
}

CAPTCHA画像の取得方法¶

CAPTCHA画像を取得するJSPの実装例を以下に示す。

<n:form>
  <n:img src="/action/path/to/hoge?captchaKey=${form.captchaKey}" alt=""/>
  <n:plainHidden name="form.captchaKey"></n:plainHidden>
  <n:text title="表示されている文字を入力" name="form.captchaValue" />
</n:form>

入力文字列判定方法¶

入力文字列の判定はサーバサイドのアクションクラスまたはフォームクラスのバリデーション処理から呼び出すことを想定している。

フォームクラスのバリデーション処理として実装した場合の例を以下に示す。

@ValidateFor("xxxxxxxxxx")
public static void validateForCaptcha(ValidationContext<XxxForm> context) {
    // 単項目精査
    ValidationUtil.validate(context, new String[]{"captchaKey", "captchaValue"});
    if (!context.isValid()) {
        return;
    }

    // CAPTCHA文字列判定
    XxxForm form = context.createObject();
    if (!CaptchaUtil.authenticate(form.getCaptchaKey(), form.getCaptchaVal())) {
        context.addResultMessage("captchaValue", "MSG90001");
    }
}

認証エラー時のCAPTCHA画像の取得方法¶

認証エラー時には、認証画像を再取得し認証画面に表示する必要がある。 しかしながら、認証エラー時には例外が送出されトランザクションがロールバックされるため、 アクションで識別キーを生成してもCAPTCHA管理テーブルに情報が保存できない問題が発生する。

このため、認証エラー時には以下の方法で識別キーを生成しCAPTCHA画像を取得すること。

内部フォワードを使用して識別キーを生成しCAPTCHA画像を表示させる

認証処理を行うActionのエラー時遷移先には、認証画面表示用のActionを指定する。 標準ハンドラ構成で内部フォワードを使用した場合、内部フォワード後のActionは別トランザクションで処理が行われるため、 トランザクションがロールバックされる問題を回避することができる。

以下に例を示す。

// 認証画面表示処理
public HttpResponse index(HttpRequest request, ExecutionContext context) {
  // 識別キーを生成しリクエストスコープに設定する
  context.setRequestScopedVar("captchaKey", CaptchaUtil.generateKey());
  return new HttpResponse("/WEB-INF/view/login/index.jsp");
}

// 認証処理
// エラー時の遷移先は、上記の認証画面表示Actionとする
@OnErrors({
        @OnError(type = ApplicationException.class, path = "forward://index"),
        @OnError(type = AuthenticationException.class, path = "forward://index")
})
public HttpResponse login(HttpRequest request, ExecutionContext context) {
  // 認証処理は省略
}