React Simple Captcha(자동입력방지) 추가하기(1)

담당자에게서 몇몇 사용자들이 예약 관련 매크로를 사용해

 

예약을 한다는 항의 전화가 자꾸 와서

 

자동 입력 방지 라이브러리를 추가하여 매크로를 방지해보려고 함.

 

여기서 잠깐 Captcha란?

※Captcha란?
Completely
Automated
Public
Turing test to tell
Computers and
Humans
Apart의 약자로, 컴퓨터와 사람을 구분 짓기 위한 완전 자동 튜링 테스트라고 함.

 

찾아보니 Captcha 종류가 여러 개였는데 아마 우리가 가장 잘 알고 있는 게

 

구글의 reCAPTCHA가 아닐까 싶음.

 

(사실 필자는 이 친구 별로 안 좋아함. 인증 스트레스🤬🤬)

 

reCaptcha

 

어르신들이 많이 쓰는 예약사이트라 reCAPTCHA를 넣으면 민원이 최소 10배는 늘 것 같아서 제외함.

 

담당자 쪽에서 간단하게 랜덤 숫자 4~6개 정도 나오는 시스템을 원해서

 

이름처럼 간단한 Simple Captcha란 라이브러리를 찾음.

 

바로 사용방법 진행해보겠음.

 

1. 시작 전 https://simplecaptcha.sourceforge.net/ 에서 simplecaptcha-1.2.1.jar 파일 다운로드 후

자신의 프로젝트 lib 폴더 안에 저장.

 

simplecaptcha 다운로드 사진

 

심플 캡차에는 이미지 생성, 음성 듣기 기능을 지원해주는데,

 

필자는 음성 기능은 필요 없어서 제외함.

 

 

 

 

2. 먼저 뷰단(react)에 이미지와 새로고침 버튼을 만들어 줌.

 

//react 코드 
<ul className="formUl">
    <li>
        <label htmlFor="captcha">
            자동 입력 방지
        </label>
    </li>
    <li>
        <img							//랜덤 숫자가 나타날 이미지
            id="captchaImg"
            title="캡차이미지"
            style={{
                width: "50%",
                height: "60px",
                marginBottom: "10px"
            }}
            src={			//중요! 이미지 경로를 서버에서 만들 Captcha 메소드에 매핑해야 함.
                Config.url +
                Config.contextPath +
                "/api/rent/captchaImg"
            }
            alt="캡차이미지"
        />
        <button								//새로고침 버튼
            style={{						//css는 자유롭게~
                border: "1px solid #ccc",
                borderRadius: "4px",
                backgroundColor:
                    "#e8e7f1",
                fontFamily:
                    "Nanum Gothic",
                color: "#555",
                fontSize: "12px",
                padding: "0.3em",
                marginLeft: "5px"
            }}
            onClick={e =>
                getImage(e)
            }
        >
            새로고침
        </button>
        <input							//숫자를 입력할 input태그
            id="answer"
            type="text"
            autoComplete="off"
            {...register("answer", {	//필수 값 설정
                required: true
            })}
        />
        {errors.answer && (				//에러메세지
            <div
                style={{
                    color: "red"
                }}
            >
                자동입력방지 숫자를
                입력해주세요.
            </div>
        )}
    </li>
</ul>

 

 

3. CaptCha 이미지 생성 클래스 추가

 

//캡차 이미지 생성 클래스
public class CaptchaUtil {
	
    public void getCaptcaImg(HttpServletRequest request, HttpServletResponse response) throws IOException {
        try{
        	//심플캡차 이미지 생성 코드
            List<Font> fontList = new ArrayList<Font>();	//폰트 및 컬러 설정도 커스터 마이징 가능
            fontList.add(new Font("", Font.HANGING_BASELINE, 50));
            fontList.add(new Font("Courier", Font.CENTER_BASELINE, 50));
            fontList.add(new Font("", Font.PLAIN, 50));
            List<Color> colorList = new ArrayList<Color>();
            colorList.add(Color.BLACK);
							//크기나 숫자 등 커스터 마이징 가능
            Captcha captcha = new Captcha.Builder(200, 60)  //이미지 크기 200x60
                    .addText(new NumbersAnswerProducer(4), new DefaultWordRenderer(colorList, fontList))  //4자리 숫자
                    .addBackground(new GradiatedBackgroundProducer())   //배경색
                    .gimp()
                    .addNoise().addNoise().addNoise()            //방해선 3개
                    .addBorder()    //테두리
                    .build();

            response.setHeader("Cache-Control", "no-store");
            response.setHeader("Pragma", "no-cache");
            response.setDateHeader("Expires",0);
            response.setContentType("image/jpeg");

            request.getSession().setAttribute(Captcha.NAME, captcha);	//세션에 캡차 등록 > 사용자가 입력한 보안문자와 비교하기 위해서
            CaptchaServletUtil.writeImage(response, captcha.getImage());
        }catch (Exception e){
            e.printStackTrace();
        }

    }
}

 

 

4. Controller에 캡차 이미지 생성 메소드 추가

 

    // captcha 이미지 생성
    @GetMapping("/rent/captchaImg")	//중요! 매핑은 앞서 이미지 태그 경로와 일치해야함.
    @ResponseBody
    public void captchaImg(HttpServletRequest req, HttpServletResponse res) throws Exception{
        new CaptchaUtil().getCaptcaImg(req, res);
    }

 

여기까지 진행하면

 

심플 캡차 이미지

 

 

짜잔.

 

이런 식으로 캡차 이미지가 나옴. 끝.

 

React Simple Captcha(자동입력방지) 추가하기(2)에서 

 

사용자가 입력한 문자 체크하는 방법 및 새로고침 기능 구현을 계속해서 진행해 봄.

 

그럼 안녕.

 

 

📢참조

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=mailbonejo&logNo=221535289522

https://haenny.tistory.com/106

[Java] SimpleCaptcha를 이용한 이미지 보안문자 생성하기