[java] 캡차(captcha) 체크 / 이미지, 오디오 생성

java [ captcha 이미지, 오디오 생성 ]

public class CaptchaUtil {

    /* CaptCha Image 생성 */
    public void captchaImg(HttpServletRequest request, HttpServletResponse response) {
            Captcha captcha = new Captcha.Builder(200,60)  // 이미지 크기  200 x 60
                    .addText(new NumbersAnswerProducer(6))   // 6자리 숫자
                    .addNoise().addNoise().addNoise() // 방해선
                    .addBackground(new GradiatedBackgroundProducer()) // 배경색
                    .addBorder()  // 테두리
                    .build();

            request.getSession().setAttribute(Captcha.NAME, captcha);
            CaptchaServletUtil.writeImage(response, captcha.getImage());
    }
    
    /* CaptCha Audio 생성 */
    public void captchaAudio(HttpServletRequest req, HttpServletResponse res, String answer) throws IOException {
        HttpSession session = req.getSession();

        Captcha captcha = (Captcha) session.getAttribute(Captcha.NAME);
        String getAnswer = answer;

        if(getAnswer == null || getAnswer.equals("")) {
            getAnswer = captcha.getAnswer();
        }

        AudioCaptcha audiocaptcha = new AudioCaptcha.Builder()
                .addAnswer(new SetTextProducer(getAnswer))
                .addNoise()	/*잡음 추가*/
                .build();

        CaptchaServletUtil.writeAudio(res,  audiocaptcha.getChallenge());
    }
    
}

 

java [ 보안문자 체크 ]

// 보안문자 이미지 가져오기
@RequestMapping(value="/captchaImg.do")
public void captchaImg(HttpServletRequest request, HttpServletResponse response) throws Exception {
    new CaptchaUtil().captchaImg(request, response);
}

// 보안문자 오디오 가져오기
@RequestMapping(value="/captchaAudio.do")
public void captchaAudio(HttpServletRequest request, HttpServletResponse response) throws Exception {
    Captcha captcha = (Captcha) request.getSession().getAttribute(Captcha.NAME);
    String getAnswer = captcha.getAnswer();
    new CaptchaUtil().captchaAudio(request, response, getAnswer);
}

// 사용자가 입력한 보안문자 체크하는 메서드
@ResponseBody
@RequestMapping(value = "/chkAnswer.do", method = RequestMethod.POST)
public String chkAnswer(
        HttpServletRequest request, 
        HttpServletResponse res
){
    String result = "";
    Captcha captcha = (Captcha) request.getSession().getAttribute(Captcha.NAME);
    String answer = request.getParameter("answer");

    if(answer != null && !"".equals(answer)) {
        if(captcha.isCorrect(answer)) {
            request.getSession().removeAttribute(Captcha.NAME);
            result = "200";
        }else {
            result = "300";
        }
    }

    return result;
}

 

javaScript

// 자동입력방지 : S
// 새로고침시 이미지가 변경되고, 음성듣기 클릭시 음성이 들리는 기능구현
function audio(){
    var rand = Math.random();
    var url = 'captchaAudio.do'

    $.ajax({
        url : url,
        type : 'POST',
        dataType : 'text',
        data : 'rand=' + rand,
        async : false,
        success : function(resp){
            var uAgent = navigator.userAgent;
            var soundUrl = 'captchaAudio.do?rand=' + rand;

            // 브라우저별 오디오 처리
            if (uAgent.indexOf('Trident') > -1 || uAgent.indexOf('MSIE') > -1) { //IE인 경우
                audioPlayer(soundUrl);
            }else if (!!document.createElement('audio').canPlayType){ //Chrome인 경우
                try {
                    new Audio(soundUrl).play();
                }catch (e) {
                    audioPlayer(soundUrl);
                 }
            } else {
                window.open(soundUrl, '', 'width=1,height=1');
            }
        }
    });
}

function audioPlayer(objUrl) {
    $("#captchaAudio").html(' <bgsoun src="' + objUrl + '">'); //bgsound 배경음악 제어
}

function getImage(){
    var rand = Math.random();
    var url = '${ctx}/captchaImg.do?rand='+rand;
    //document.querySelector('img').setAttribute('src', url);
    $('#captchaImg').attr('src', url);

}

window.onload = function(){
    getImage();	// 이미지 가져오기

    $('#reply_save').click(function() {
        // 유효성 체크 
        if($("#reply_content_area").val() == ""){
            alert("내용을 입력하세요.");
            $("#reply_content_area").focus();
            return false;
        }

        if($("#answer").val() == ""){
            alert("보안문자를 입력하세요.");
            $("#answer").focus();
            return false;
        }

        //값 셋팅
        var params = {
            answer : $('#answer').val()
        };

        //ajax 호출
        $.ajax({
            url : '${ctx}/chkAnswer.do', 
            type : 'POST',
            data : params, 
            success : function(returnData){
                if(returnData == 200){
                    alert('입력값이 일치합니다.');
                    reply_save();
                }else{
                    alert('입력값이 일치하지 않습니다.');
                    getImage();
                    $('#answer').val('');
                }
            }
        });
    });
}
// 자동입력방지 : E

 

html

<!-- 자동입력방지 : S -->
<div class="form-group" style="float: right; display: block; width: 26em; margin-left: 0.6em;">
    <div class="captcha" style="display: flex;">
        <div class="captcha_child">
            <img id ="captchaImg" title ="캡차 이미지" src="captchaImg.do" alt="캡차 이미지"/>
            <div id ="captchaAudio" style="display:none"></div>
        </div>
        <div class="captcha_child_two">
            <a onclick="javaScript:getImage()" class="refreshBtn">
                <i class="fa fa-refresh" aria-hidden="true"></i> 새로고침
            </a>
            <a onclick="javaScript:audio()" class="refreshBtn">
                <i class="fa fa-volum-up" aria-hidden="true"></i> 음성듣기
            </a>
        </div>
    </div>
    
    <!-- 댓글 등록버튼 : S -->
    <div style="display: flex; padding-top:5px">	
        <input id="answer" type="text" value="" style="width:193px; margin-right: 8px;">
        <input id="reply_save" type="button" value="등록"/>
    </div>
    <!-- 댓글 등록버튼 : E -->
</div>
<!-- 자동입력방지 : E -->