[Spring] 자동 등록 방지를 구현하자 - google reCAPTCHA -2

## 완성본 파일 ##

구글리캡챠예제.zip

## 글을 보시기 전 꼭 읽어주세요. ##

이번 게시물을 보기 위해서는 구글 리캡챠 등록, 도메인 등록, STS 환경 설정, JDK 환경설정, MAVEN프로젝트 생성등의 기본적인 설정이 필요 합니다. 아래 글을 확인하신뒤 설정 바랇니다.

이전 게시글을 통해 설정을 안해두신분은 아래의 링크를 눌러주세요.

[Spring] 자동 등록 방지를 구현하자 - google reCAPTCHA -1

스프링과 관련된 설정을 안하셨다면 아래의 링크를 눌러주세요.

[Spring] JSP 개발 환경을 구축하자 - 1

[Spring] JSP 개발 환경을 구축하자 - 2

[Spring] JSP 개발 환경을 구축하자 - 3

[Spring] MVC 패턴의 프로젝트를 생성하자

## 이제 시작하자 ##

구글이나 검색엔진을 사용하는 포털사이트에서 구글 리캡챠를 검색 해주세요.

만약, 필자와 검색 결과가 다르시다면 여기를 눌러주세요.

오른쪽 상단에 MyreCAPTCHA를 눌러주세요.

만약, 구글 아이디가 로그인 되어 있지 않다면 로그인 해주세요.

페이지에 들어오시게 된다면, 등록한 리캡챠 사이트 목록이 뜨게 되고 등록한 항목을 클릭해주세요.

Keys, Stemp 1: Client side integration, Step 2: Server side integration을 눌러주세요.

Keys에 Site key는 사이트에 공개가 되도 되는 키 입니다. 즉, HTML에 넣어도 무관

Secret Key는 서버단에서 사용하는 비공개 키 입니다. HTML에서는 사용을 안하시는거를 추천 합니다. 그리고, 서버단에서 처리가 되기 때문에 공개 될 이유도 없죠.

Step 1은 클라이언트 단에서 처리해야하는 부분 입니다. (즉, JSP쪽)

빨간색 칸은구글 리캡챠를 사용하기 위한 자바스크립트 CDN주소

검은색 칸은 HTML에 넣은 div 태그 입니다.

Step 2는 서버단에서 처리할것에 대해 작성 해야하는 부분 입니다. (즉, 서버 단에서 받아야할 파라미터입니다.)

1. 시크릿키 (설명 x)

2. 서버 단으로 보낼떄 사용하는 벨류값이 g-recaptcha-response 입니다.

3. 사용자의 마지막으로 사용되는 IP (자세한거는 모르겠지만 여러번 요청을 할 경우 이미지로 검증하는 역활을 하는듯해요.)

인터넷창은 잠시 최소화 해주시고 STS를 켜주세요.

VerifyRecaptcha.java class를 하나 만들어 주시고, pom.xml을 열어주세요.

여기서 class를 만드실때 자신이 원하는 이름으로 하셔도 무관 합니다.

하지만, 게시글을 보고 따라하실때는 아마, 클래스명을 동일하게 해주시는게 좋을꺼 같아요.

pom.xml

        <!-- 구글 리캡챠 -->
        <dependency>
            <groupId>net.tanesha.recaptcha4j</groupId>
            <artifactId>recaptcha4j</artifactId>
            <version>0.0.7</version>
        </dependency>
 
        <!-- 구글 리캡챠 사용하기 위한 json -->
        <dependency>
            <groupId>javax.json</groupId>
            <artifactId>javax.json-api</artifactId>
            <version>1.1.2</version>
        </dependency>
 
        <dependency>
            <groupId>org.glassfish</groupId>
            <artifactId>javax.json</artifactId>
            <version>1.1</version>
        </dependency>
 
        <!-- 잭슨 -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.5</version>
        </dependency>

POM.XML에 안에 디펜던시를 추가 해주세요.

디펜던시를 넣은 결과 입니다.

만약, 디펜던시를 넣을줄 모르신다면 아래의 링크를 눌러주세요.

[Spring] STS 기본설정과 pom.xml

VerifyRecaptcha.java

import java.io.BufferedReader;
import java.io.DataOutputStream;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.StringReader;
import java.net.URL;
 
import javax.json.Json;
import javax.json.JsonObject;
import javax.json.JsonReader;
import javax.net.ssl.HttpsURLConnection;

라이브러리 import 참고 자료

    public static final String url = "https://www.google.com/recaptcha/api/siteverify";
    private final static String USER_AGENT = "Mozilla/5.0";
    private static String secret = ""; //local
 
    public static void setSecretKey(String key){
        secret = key;
    }
    
    public static boolean verify(String gRecaptchaResponse) throws IOException {
        if (gRecaptchaResponse == null || "".equals(gRecaptchaResponse)) {
            return false;
        }
        
        try{
        URL obj = new URL(url);
        HttpsURLConnection con = (HttpsURLConnection) obj.openConnection();
 
        // add reuqest header
        con.setRequestMethod("POST");
        con.setRequestProperty("User-Agent", USER_AGENT);
        con.setRequestProperty("Accept-Language", "en-US,en;q=0.5");
 
        String postParams = "secret=" + secret + "&response="
                + gRecaptchaResponse;
 
        // Send post request
        con.setDoOutput(true);
        DataOutputStream wr = new DataOutputStream(con.getOutputStream());
        wr.writeBytes(postParams);
        wr.flush();
        wr.close();
 
        int responseCode = con.getResponseCode();
        System.out.println("\nSending 'POST' request to URL : " + url);
        System.out.println("Post parameters : " + postParams);
        System.out.println("Response Code : " + responseCode);
 
        BufferedReader in = new BufferedReader(new InputStreamReader(
                con.getInputStream()));
        String inputLine;
        StringBuffer response = new StringBuffer();
 
        while ((inputLine = in.readLine()) != null) {
            response.append(inputLine);
        }
        in.close();
 
        // print result
        System.out.println(response.toString());
         
        //parse JSON response and return 'success' value
        JsonReader jsonReader = Json.createReader(new StringReader(response.toString()));
        JsonObject jsonObject = jsonReader.readObject();
        jsonReader.close();
         
        return jsonObject.getBoolean("success");
        }catch(Exception e){
            e.printStackTrace();
            return false;
        }
    }

위 소스코드를 http://VerifyRecaptcha.java 에 추가 해주세요.

import하실떄 잘 모르시겠으면 위 소스코드 확인

HomeController.java(자신이 원하는 컨트롤러에 넣어도 무관)

    @ResponseBody
    @RequestMapping(value = "VerifyRecaptcha", method = RequestMethod.POST)
    public int VerifyRecaptcha(HttpServletRequest request) {
        VerifyRecaptcha.setSecretKey("자신의 시크릿키");
        String gRecaptchaResponse = request.getParameter("recaptcha");
        System.out.println(gRecaptchaResponse);
        //0 = 성공, 1 = 실패, -1 = 오류
        try {
            if(VerifyRecaptcha.verify(gRecaptchaResponse))
                return 0;
            else return 1;
        } catch (IOException e) {
            e.printStackTrace();
            return -1;
        }
    }

이제, 컨트롤러에 위 소스코드를 넣어주세요.

여기서, 자신의 시크릿키는 구글 리캡챠 사이트에서 Keys 카테고리에 있는 Secret key에 있는 값을 추가 하시면 됩니다.

home.jsp(자신이 원하는 jsp에 넣어도 무관)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>구글 리캡챠 테스트</title>
</head>
 
<body>
 
    <!--여기에 div 추가 -->
    <button id="test_btn">테스트 버튼</button>
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- 여기에 스크립트 추가 -->
 
    <script>
        $(document).ready(function() {
            $("#test_btn").click(function() {
                $.ajax({
                    url: '/reCAptcha/VerifyRecaptcha',
                    type: 'post',
                    data: {
                        recaptcha: $("#g-recaptcha-response").val()
                    },
                    success: function(data) {
                        switch (data) {
                            case 0:
                                alert("자동 가입 방지 봇 통과");
                                break;
 
                            case 1:
                                alert("자동 가입 방지 봇을 확인 한뒤 진행 해 주세요.");
                                break;
 
                            default:
                                alert("자동 가입 방지 봇을 실행 하던 중 오류가 발생 했습니다. [Error bot Code : " + Number(data) + "]");
                                break;
                        }
                    }
                });
            });
        });
 
    </script>
</body>
 
</html>
 

여기서, 파란색으로 줄그어둔 여기에 div 추가, 여기에 스크립트 추가를 확인 해주세요.

구글 리캡챠 사이트로 가신뒤, 빨간색으로 네모를 그어둔것이 여기에 div 추가 밑에 넣어주시고.

검은색으로 네모를 그어둔것이 여기에 스크립트 추가 입니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>구글 리캡챠 테스트</title>
</head>
 
<body>
 
    <!--여기에 div 추가 -->
    <div class="g-recaptcha" data-sitekey="6LdJlH8UAAAAAAjWVI8ZD-lTXDv_a4eLdnzB8w9t"></div>
    <button id="test_btn">테스트 버튼</button>
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- 여기에 스크립트 추가 -->
    <script src='https://www.google.com/recaptcha/api.js'></script>
 
    <script>
        $(document).ready(function() {
            $("#test_btn").click(function() {
                $.ajax({
                    url: '/자신의최상위폴더/VerifyRecaptcha',
                    type: 'post',
                    data: {
                        recaptcha: $("#g-recaptcha-response").val()
                    },
                    success: function(data) {
                        switch (data) {
                            case 0:
                                alert("자동 가입 방지 봇 통과");
                                break;
 
                            case 1:
                                alert("자동 가입 방지 봇을 확인 한뒤 진행 해 주세요.");
                                break;
 
                            default:
                                alert("자동 가입 방지 봇을 실행 하던 중 오류가 발생 했습니다. [Error bot Code : " + Number(data) + "]");
                                break;
                        }
                    }
                });
            });
        });
 
    </script>
</body>
 
</html>
 

필자 기준에서 값을 집어넣은 결과 입니다.

파란색으로 그어둔곳을 집중 해주세요.

그리고, 여기서 빨간색으로 그어둔, /자신의최상위폴더/java파일이름을 적어주세요.

자신의최상위폴더를 확인 하는 방법은 아래의 이미지 참고

POM.XML

이제 모든 설정이 끝났습니다.

## 결과 ##

로봇이 아닙니다.를 누르게 되면 위와같은 이미지가 나올수도 있고 그냥 체크가 될수도 있습니다.

문제를 통과 하시고 테스트 버튼을 누르게 되면..

위와 같은 결과가 나오게 됩니다.

만약, 체크를 하지 않게 된다면 위와같은 결과

STS CONSOLE 결과로도 확인이 가능 합니다.

## 기타 문제사항 ##

만약, 위와같은 문제가 생긴다면 확인해야할것은 2가지가 있습니다.

1. 도메인이 아닌 localhost로 접속을 한 경우 (도메인/경로)

2. 시크릿키, 사이트키 제대로 입력이 된지 확인 (div태그 확인, 컨트롤러 확인)

## 도메인으로 접속을 했는데 사이트에 제대로 접속이 안된다면? ##

cmd 창에서 [ping 자신의 도메인]을 적어주세요.

여기서 가려진곳의 아이피를 확인 해주신뒤 아래의 링크를 눌러 자신의 아이피를 확인 해주세요.

PC : 여기

모바일 : 여기

만약, 동일한데도 접속이 안된다면 공유기 dmz 설정을 해주세요.

이상 마무리 하겠습니다.