recaptcha spring ajax example (캡차, 리캡차)

듀오링고를 개발한 루이스 폰 안 이라는 사람이 듀오링고 이전에 개발한 리캡차입니다.

컴퓨터가 인식 불가능한 문자, 주소를 자동가입 방지를 통해 입력하는 시스템 입니다. (사람에게 시키는거죠.)

듀오링고도 언어교육을 빌미로 사람에게 번역을 시키는 시스템이죠 ㅋㅋ

자세한 내용은 아래 동영상을 참고하여 주시기 바랍니다.

개인적으로 아주 좋은 프로젝트라고 생각합니다.

이번에 개발하는 프로젝트에서 회원가입에 해당 리캡차를 추가 하기 위해 테스트 소스를 만들어 봤습니다.

일단 키발급을 위해 사이트에 접속합니다. https://www.google.com/recaptcha

Get reCAPTCHA

Label은 이름 하나 정해서 적어주시고

Domains는 사이트의 도메인 적어주시면 됩니다. (저는 개발중이라서 그냥 localhost 적어 주었습니다.)

등록하시면 Site key, Secret key를 받으실 수 있습니다.

해당 키를 잘 적어주시기 바랍니다.

pom.xml

<!-- reCaptcha -->
<dependency>
    <groupId>net.tanesha.recaptcha4j</groupId>
    <artifactId>recaptcha4j</artifactId>
    <version>0.0.7</version>
</dependency>

recaptcha.jsp

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script>
    $(function(){
        
        var siteKey = "recaptchaSiteKey";//Site key
        var div = "recaptcha";
        Recaptcha.create(siteKey, div, {theme: "red"});
            
        $("#recaptchaCheck").click(function(){
            
            var challenge = Recaptcha.get_challenge();
            var response = Recaptcha.get_response();
            var host = $(location).attr('host');
            
            $.ajax({
                type: "POST",
                url: "/test/validateRecaptcha",
                async: false,
                data: {
                    host: host,
                    challenge: challenge,
                    response: response
                },
                success: function(data) {
                    if(data == "Y") {
                        document.getElementById("message").innerHTML = "Success!";
                    }else{
                        document.getElementById("message").innerHTML = "Incorrect Recaptcha! Please try again!";
                        Recaptcha.reload();
                    }
                }
            });
            
        });
            
    });    
</script>
<div id="message" style="color:#ff0000; "></div>
<div id="recaptcha"></div>
<input id="recaptchaCheck" type="button" value="Check">

TestController.java

@ResponseBody
@RequestMapping(value = "/test/validateRecaptcha", method = RequestMethod.POST)
public String validateRecaptcha(@RequestParam Map<String, String> paramMap) {
    
    String check = "Y";
    
    ReCaptchaImpl reCaptcha = new ReCaptchaImpl();
    reCaptcha.setPrivateKey("recaptchaSecretKey");//Secret key
 
    String host = paramMap.get("host");
    String challenge = paramMap.get("challenge");
    String res = paramMap.get("response");
    
    ReCaptchaResponse reCaptchaResponse = reCaptcha.checkAnswer(host, challenge, res);
 
    if (reCaptchaResponse.isValid()) {
        System.out.println("true");
        check = "Y";
    } else {
        System.out.println("false");
        check = "N";
    }
    
    return check;
 
}

저장하신 키정보를 주석에 적힌 부분을 참고 하시어 적으시면 됩니다.

여기서는 테스트 및 예제로 키를 직접 입력했는데 모두 외부로 빼주시는거 알죠? ㅋ

그리고 controller에서 리캡차 인증을 처리 하였는데 해당 부분도 service쪽으로 빼주세요.