ProgrammingLanguageJavaScript

자동가입 방지문자(SimpleCaptcha) 사용 방법

, , ,

로그인 또는 회원가입 시 자동 등록 방지가 필요할 경우가 있다.
이를 구현하기 위해 여러 가지가 있는데 CATPCHA를 사용하는 방법을 사용하였다.

CAPTCHA는 HIP 기술의 일종으로, 어떠한 사용자가 실제 사람인지 컴퓨터 프로그램인지를 구별하기 위해 사용되는 방법이다. 사람은 구별할 수 있지만 컴퓨터는 구별하기 힘들게 의도적으로 비틀거나 덧칠한 그림을 주고 그 그림에 쓰여 있는 내용을 물어보는 방법이 자주 사용된다. 위키백과

다운로드

CATPCHA를 사용하기 위해선 https://sourceforge.net/projects/simplecaptcha/ 사이트로 이동해서 jar 파일을 다운로드 받는다.

다운로드

jar 파일 추가

사용하는 툴이 이클립스 일 경우 jar 파일을 프로젝트에 포함시켜야 한다.

[Eclipse] 프로젝트에 jar 파일 추가하는 방법 사이트를 참고해서 추가합니다.

사용

HTML

먼저 자동입력 방지 기능을 넣기 위한 화면 코드다. CATPCHA 이미지를 보여주고 이미지 안의 숫자들을 새로고침 할 수 있는 버튼을 만들었다.

1
2
3
4
5
6
7
8
9
10
<div class="mt-3">
  <label class="form-label fw-bold">자동입력 방지문자</label>
  <div class="d-flex">
    <img id="captchaImg" src="captchaImg" title="캡차 이미지" alt="캡차 이미지" />
    <button type="button" id="refresh_btn" class="btn btn-sm btn-gray w-50 ms-2">새로고침</button>
  </div>
  <div class="d-flex mt-1">
    <input id="captcha" type="text" class="form-control input-control" />
  </div>
</div>

Controller 부분

html에서 /captchaImg 경로를 호출하면 아래 컨트롤러가 호출된다. Captcha 이미지 설정을 한 후 세션에 값을 저장하고 이미지를 그려준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/**
	 * captchaImg
	 * @param request
	 * @param response
	 * @throws IOException
	 */
@GetMapping("captchaImg")
public void captchaImg(HttpServletRequest request, HttpServletResponse response) throws IOException {
  try {
    // 폰트 설정 =========================================================
    List<Font> fontList = new ArrayList<Font>();
    fontList.add(new Font("", Font.HANGING_BASELINE, 28));
    fontList.add(new Font("Courier", Font.ITALIC, 28));
    fontList.add(new Font("", Font.PLAIN, 28));

    List<Color> colorList = new ArrayList<Color>();
    colorList.add(Color.black);

    Captcha captcha = new Captcha.Builder(200, 36) // 이미지 크기 설정
        .addText(new NumbersAnswerProducer(6), new DefaultWordRenderer(colorList, fontList))
        //.gimp(new DropShadowGimpyRenderer()).gimp() // 그림자 효과 추가
        .addNoise().addNoise() // 한번 호출할 떄마다 하나의 라인이 추가된다
        .addBackground(new GradiatedBackgroundProducer())  // Gradiated백그라운드 효과 추가
        .addBorder() // 검정 테두리 선 생성
        .build();

    response.setHeader("Cache-Control", "no-cache");
    response.setHeader("Pragma", "no-cache");

    // 캐쉬를 지우기 위해 헤더값을 설정
    response.setDateHeader("Expires", 0);
    response.setDateHeader("Max-Age", 0);

    // 리턴값을 image형태로 설정
    response.setContentType("image/png");

    // 세션에 자동가입방지 문자를 저장한다.
    request.getSession().setAttribute(Captcha.NAME, captcha);

    // Image를 write 한다
    CaptchaServletUtil.writeImage(response, captcha.getImage());
  } catch (Exception e) {
    response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
    return;
  }
}

다음은 현재 보이는 자동입력 방지문자와 입력한 문자가 일치하는 하는지 확인하는 코드다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
 * 자동입력 방지문자 확인
 */
@GetMapping("isCorrect")
public ResponseEntity<?> isCorrect(HttpServletRequest request, String answer) {
  boolean result = false;

  Captcha captcha = (Captcha) request.getSession().getAttribute(Captcha.NAME);
  if (captcha.isCorrect(answer)) {
    result = true;
  }

  return new ResponseEntity<>(result, HttpStatus.OK);
}

JavaScript

화면단에서 자등입력 방지문자를 잘 입력했는지 확인하는 코드다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 자동입력 방지문자가 일치하는지 확인
const isCaptCha = () => {
  const answer = $('#captcha').val();
  if (answer == '') {
    alert('자동입력 방지문자를 입력해주세요.');
    return;
  }

  let result = false;

  $.ajax({
    url: `${contextPath}/signup/isCorrect`,
    type: 'GET',
    data: { answer: answer },
    async: false,
    success: function (response) {
      result = response;
    },
  });

  return result;
};

if (!isCaptCha()) {
  alert('자동입력 방지문자가 일치하지 않습니다.', function () {
    $('#captcha').focus();
  });
  return;
} else {
  alert('자동입력 방지문자가 일치합니다.');
}

새로고침 버튼을 누를 경우 자동입력 방지문자 이미지 안의 숫자가 바뀐다.

1
2
3
4
5
6
/**
 * 자동입력 방지문자 새로고침
 */
$('#refresh_btn').click(function () {
  $('#captchaImg').attr('src', 'captchaImg');
});

화면

성공적으로 자동입력 방지문자 이미지를 가져왔다! 위의 방법처럼 쉽게 구현할 수 있다.

방지문자

Share