Spring Boot를 사용하여 XML없이 kaptcha 사용

15201 단어 Groovyspring-boot

개요



  • Spring Boot 에서 또는 pt 차 사용
  • 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>

    완성된 화면



    이런 식으로 이미지가 표시됩니다.



    참조



    지금까지의 모든 소스 코드는 다음 리포지토리에 있습니다.
    * SpringBootCaptcha
    Jmeter의 결과를 Chatwork에서 알리는 방법
    Jenkins에 등록한 모든 계정의 이메일 주소 받기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage