概要
- Spring Boot で kaptcha を使う
- kaptchaは通常XML設定ファイルを使うけど、せっかくSpring Bootを使うのでXMLファイルなしでkaptchaを使いたい
- アプリケーションはGroovy + Gradleで
build.gradle
ポイントは、kaptchaがMavenリポジトリにないので、jarをlib以下に入れて依存関係に追加しているとこ。lib以下の全jarを対象にしているのは手抜き。
（省略）
dependencies {
compile fileTree(dir: 'lib', include: '*.jar')
}
（省略）
Bean定義のクラスを作る
kaptchaの例だと、web.xmlでservletに kaptcha.jpg をマッピングしているのを、 @Configuration で指定したクラスで設定する。
@Configuration
public class AppConfig {
@Bean
public ServletRegistrationBean kaptcha() {
new ServletRegistrationBean(new KaptchaServlet(), "/kaptcha.jpg")
}
}
入力データクラスを作る
画面から受け取るのは、kaptchaの文字列だけ。
かつ、Groovyなのでsetter/getterも不要。ただし、属性を def で宣言しちゃうと、Object型になって実行時にエラーになっちゃう。
public class KaptchaFormData {
@NotNull
@Size(min = 5, message = "入力した文字が短すぎます")
String kaptcha
}
kaptcha解決のサービスクラスを作る
といっても、文字列同士を大文字/小文字関係なく比較するだけ。
@Service
public class SolveKaptchaService {
public boolean solve(String expected, String actual) {
actual.equalsIgnoreCase(expected)
}
}
Controllerクラスを作る
kaptchaActionメソッドでリクエストを受ける。入力値が短いとか、入力されてない、のはデータクラスに指定したアノテーション通りにチェック。
kaptchaActionメソッドは、HttpSessionオブジェクトも受け取るようになっていて、セッションからkaptchaの正解文字列を取得してくる。
あとは、入力文字列と正解文字列をServiceクラスに渡して完了。
@Controller
public class KaptchaController {
@Autowired
SolveKaptchaService solveKaptcha
@ModelAttribute("kaptchaFormData")
KaptchaFormData setUp() {
new KaptchaFormData()
}
@RequestMapping(value = "/", method = RequestMethod.GET)
public String kaptcha() {
"index"
}
@RequestMapping(value = "/", method = RequestMethod.POST)
public String kaptchaAction(@Validated KaptchaFormData kaptchaFormData, BindingResult bindingResult,
Model model, HttpSession session) {
if (bindingResult.hasErrors()) {
return "index"
}
def expectedKaptcha = (String)session.getAttribute(Constants.KAPTCHA_SESSION_KEY)
if (!solveKaptcha.solve(expectedKaptcha, kaptchaFormData.kaptcha)) {
model.addAttribute("exception", new Exception("入力した文字が画像と違います。"))
return "index"
}
"success"
}
}
画面
画面は、Thymeleafを使ってテンプレート化してる。
ポイントになるのは、kaptchaをクリックするたびに画像が変更されるようにしているとこ。Thymeleafの th:inline"javascript" を使ってるとこ。
<!DOCTYPE html>
<html xmlns:th="http:///www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>kaptcha Login</title>
<script th:src="@{/jquery-1.11.1.min.js}" />
</head>
<body>
<h1>ログイン</h1>
<form name="kForm" method="post" th:action="@{/}" th:object="${kaptchaFormData}">
<div>
<span th:if="${#fields.hasErrors('kaptcha')}" th:errors="*{kaptcha}" style="color: red;">error!</span>
<span th:if="${exception != null}" th:text="${exception.message}" style="color: red;">error!</span>
</div>
<div><img th:src="@{/kaptcha.jpg}" width="200" id="kaptchaImage" /></div>
<script th:inline="javascript">
var kaptchaUrl = /*[[@{/kaptcha.jpg}]]*/ "/kaptcha.jpg";
$(function(){
$('#kaptchaImage').on('click', function() {
$(this).attr('src', kaptchaUrl + '?' + Math.floor(Math.random()*100) );
})
});
</script>
<div>
<input type="text" name="kaptcha" value="" th:field="*{kaptcha}" />
</div>
<div>
<button id="loginButton" onCLick="document.kForm.submit();">ログイン</button>
</div>
</form>
</body>
</html>
完成した画面
こんな感じで画像が表示される。
参照
ここまでの全ソースコードは、以下のリポジトリに置いてあります。