Java: Spring 프로젝트에 자동 방지 captcha 적용(OCR)

- 필요한 라이브러리

1. simplecaptcha-1.2.1.jar

2. maven일 경우 : 2016.10월 기준으로 현재 maven으로 다운로드 되지 않기 때문에 아래 방법 사용

1) simplecaptcha-1.2.1.jar 파일 직접 다운로드

2) src/main/webapp/WEB-INF/lib 폴더 생성 후 jar파일 이동

3) pom.xml에 dependency 추가

- 다운로드 방식이 아니기 때문에 scope와 systemPath를 추가 작성한것을 유의할것

 

<dependency>
	<groupId>nl.captcha</groupId>
	<artifactId>simplecaptcha</artifactId>
	<version>1.2.1</version>
	<scope>system</scope>
	<systemPath>${basedir}\src\main\webapp\WEB-INF\lib\simplecaptcha-1.2.1.jar</systemPath>
</dependency>

 

 

- 프로세스

1. view 페이지 img태그의 src속성에 OCR전용 servlet에 mapping된 url 설정

2. OCR전용 servlet에서 코드 생성 및session의 Attribute에 저장 및 이미지 생성

3. response된 이미지 를 view페이지의 img태그가 표현

 

- 특이사항

1. OCR전용 servlet을 추가 하여 작동 한다.

- img태그의 src속성을 이용하여 url이동 없이 이미지를 새로고침 하기 위함

 

- xml 설정 및 소스 코드

1. 이미지 요청 url을 받아들일 HttpServlet을 상속 받은 CaptchaServlet 클래스 생성

- package servlet; (web.xml에 servlet등록시 필요함)

public class CaptchaServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Captcha captcha = new Captcha.Builder(148, 48)
                .addText() // default: 5개의 숫자+문자
                .addNoise().addNoise().addNoise() // 시야 방해 라인 3개
                .addBackground() // 기본 하얀색 배경
                .build();

        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", 0);
        response.setHeader("Pragma", "no-cache");
        response.setDateHeader("Max-Age", 0);
        response.setContentType("image/png");
        CaptchaServletUtil.writeImage(response, captcha.getImage()); // 이미지 그리기
        request.getSession().setAttribute("captcha", captcha.getAnswer()); // 값 저장
    }

}

 

2. web.xml에 servlet 등록

- 기존 사용하던 DispatcherServlet과 별도로 추가 mapping

<servlet>
	<servlet-name>captcha</servlet-name>
	<servlet-class>servlet.CaptchaServlet</servlet-class>
	<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
	<servlet-name>captcha</servlet-name>
	<url-pattern>/captcha</url-pattern>
</servlet-mapping>

 

3. view 페이지에서 넘어온 값(captcha)를 확인할 Controller에 메서드 생성

- 실제 서비스시에는 Board VO에 captcha 멤버 필드를 추가하면 인자로 Board클래스만 받을 수 있다.

- 아래 코드는 테스트용 이므로 captcha만 RequestParam으로 받았음

    // 글 작성 captcha 테스트
    @RequestMapping(value = "/board/write", method = RequestMethod.POST)
    public String boardWrite(HttpSession session, @RequestParam String captcha) {
        String captchaValue = (String) session.getAttribute("captcha");
        if (captcha == null || !captchaValue.equals(captcha)) {
            return "redirect:/board/write"; // 글 작성 페이지로 이동
        }
        
        // TODO 글 작성 처리
        return "redirect:/board/5"; // 작성한 게시글 페이지로 이동
    }

 

4. view 페이지 작성

- 테스트용 이므로 captcha만 작성 하였다.

- captcha 새로고침시 param을 넘기는 이유

1) ie에서는 param을 넘기지 않을시 이미지를 새로고침 하지 않음

2) 그 외 브라우저는 param을 넘기지 않아도 정상 작동함

3) 즉, 아무 의미없는 param이다.

- jQuery script로드는 따로 작성하지 않았다.

<form action="/board/write" id="writeForm" method="post">
	<fieldset>
		<legend class="screen_out">게시글 작성 폼</legend>

		<div class="box captcha">
			<div class="loading"></div>
			<!-- // .loading -->

			<label for="captcha">자동 방지 코드</label>
			<input type="text" id="captcha" name="captcha" autocomplete="off" required />
			<img src="/captcha" alt="캡차 이미지" title="클릭시 새로고침" />
		</div>
		<!-- // .box.captcha -->

		<div class="box btn">
			<a href="/board" class="btn cancel">취소</a>
			<button type="submit" class="btn write">작성 완료</button>
		</div>
	</fieldset>
</form>

<script>
	var $captchaLoader = $("#writeForm .box.captcha .loading");
	var $captchaImg = $("#writeForm .box.captcha img");

	// captcha 새로고침
	$captchaImg.click(function() {
		$captchaLoader.show();
		$(this).attr("src", "/captcha?ran=" + Math.random());
		$captchaLoader.fadeOut(500);
	});
</script>