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

저번 글에 이어서 사용자가 입력한 문자 체크하는 방법 및

새로고침 기능 구현을 계속해서 진행해 봄.

혹시 캡차 이미지 구현을 아직 안 하신 분을 위해(https://precious-value.tistory.com/14)

 

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

 

 

---

 

먼저 1. 새로고침 기능 구현을 진행해 봄.

 

//새로고침 버튼
<button
    style={{
        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>

 

저번시간에 만들었던 새로고침 버튼을 클릭했을 때

 

getImage 함수를 실행.

 

//새로고침 버튼을 클릭했을 때
const getImage = e => {
    e.preventDefault();
    var rand = Math.random();
    var url =				//캡차 이미지 생성 url
        Config.url +
        Config.contextPath +
        "/api/rent/captchaImg?rand=" +	//파라미터로 랜덤숫자를 생성해서 보내줌.
        rand;      
    document.getElementById("captchaImg").setAttribute("src", url);		
	//javasciprt문으로 캡차 이미지태그에 경로를 설정해줌.      
};

 

이제 새로고침 버튼을 클릭하면 캡차 이미지가 갱신되는 것을 볼 수 있음.

 

심플 캡차 실행 영상

 

2. 입력한 문자 체크하는 방법을 진행해 봄.

 

먼저 Controller에 보안문자를 비교하는 메소드를 만들어야 함.

 

// 사용자가 입력한 보안문자 비교하는 메서드
@PostMapping("/rent/check")
public boolean checkCaptcha(@RequestParam(value = "answer") String answer, HttpServletRequest req) {
    Captcha captcha = (Captcha) req.getSession().getAttribute(Captcha.NAME);	//캡차 이미지를 생성할 때 등록한  세션
    if(answer != null && !answer.equals("")) {	
        if(captcha.isCorrect(answer)) {	//세션에 등록된 캡차와 일치하면 true, 불일치하면 false 리턴
            req.getSession().removeAttribute(Captcha.NAME);
            return true;
        }else {
            return false;
        }
    }else{
        return false;
    }
}

 

이제 뷰단에서 form submit 하는 코드에 체크 로직을 추가하면 됨.

 

//submit할 때 실행되는 함수 안에 추가
RentService.checkCaptCha(data.answer).then(response => {	//입력한 숫자 값을 파라미터로 같이보내 줌.
    if (response.data) {	//return 값이 true면 일치, false 불일치   
		//일치 시 실행될 로직 구현        
    }else{
        alert(
            "자동입력방지 숫자가 일치하지 않습니다. 다시입력해주세요."
        );
        return;    
    }
})

 

꼭 form submit할 때 아니더라도 입력방지 문자 체크 버튼을 만들어서 진행해도 무관함!!

 

지금까지 Simple Catpcha 라이브러리를 사용하여 자동입력방지 기능을 구현해 봄. 끝.

 

다들 건강하고 행복하시길.😊