스프링부트 리캡챠 등록,사용 법

Google reCAPTCHA

 

reCAPTCHA ?

접속을 시도하는 유저가 사람인지 로봇인지를 구분해주는 구글에서 만든 자동 테스트 기술

구글 리캡챠 사이트에 등록을 하여 발급을 받게되면, 사이트키와 비밀키를 발급받고 그 키들을

검증 하는 URL로 보내주고 인증받으면 된다.

 

구글 리캡챠 사이트는 아래 글을 읽다보면 포스팅 했다.

 

 

시작하기전 필자 개발 환경

Spring Boot 2.1.6v , Maven, Thymeleaf, JDK 1.8 

 

아래 포스팅한 글 순서대로 따라하시면 전혀 문제 없어요. 혹시몰라 맨 아래에 깃허브 주소도 남겨봅니다.

 

MAVEN or GRADLE

<!--JSON  -->
<dependency>
	<groupId>org.glassfish</groupId>
	<artifactId>javax.json</artifactId>
	<version>1.1</version>
</dependency>

리캡챠로 부터 받아온 결과가 JSON형태 이기에 JSON 관련 추가

 

application.yaml or properties

google:
  recaptcha:
    key:
      site: 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
      secret: 6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe
      url: https://www.google.com/recaptcha/api/siteverify

리캡챠에서 기본적으로 제공해주는 테스트 용도 key,secret

 

테스트 용도가 아닌 자기만에 키를 발급 받고 싶다면, 아래 사이트를 가서 등록를 해줘야하며 도메인 주소가 있어야한다.

 

리캡차 등록 : https://developers.google.com/recaptcha/

reCAPTCHA  |  Google Developers

 

리캡챠 HTML에 등록 (혹은 템플릿 엔진)

<!--타임리프 -->
 	<div id="recaptcha" class="g-recaptcha" th:attr="data-sitekey=${@captchaSettings.getSite()}" 
 		data-callback="recaptchaCallback">
 	</div>

필자 같은 경우는 로그인 페이지에 리캡챠를 넣었다. (나름 2차 인증이랄까?)

리캡챠를 넣고 싶은 HTML 혹은 템플릿 엔진 파일에 아래 코드를 넣어 주면된다.

 

th:attr 값을 제외한 나머지 값들은 그대로 복붙 해주면 된다.( 타임리프 문법이기에... )

*data-callback="recaptchaCallback" 이부분은 내가 만든 자바스크립트 함수이다.

왜 만들었냐면 리캡챠를 클릭했는지, 안했는지 자바스크립트로 체크하기 위해서다

예를들면 인풋 값 체크라던지, 콤보박스 값 체크인 것!

 

리캡챠는 아래와 같은 체크박스 형태다. 

 

리캡챠 HTML 등록시 모습

체크 박스 체크 여부는 아래와 같은 코드를 넣으면 된다.

 

var isRecaptchachecked=false;

function recaptchaCallback(){// 리캡챠 체크 박스 클릭시 isRecaptchachecked 값이 true로 변경

  isRecaptchachecked = true;

}

isRecaptchachecked 변수를 가지고 자바스크립트에서 먼저 체킹 해주면 되겠다.

 

위 코드를 보게되면 *@captchaSettings.getSite()를 확인할 수 있는데 이부분은 바로 다음에 설명 하겠다. 

 

 

리캡챠 속성파일 class로 관리 

아까 등록한 yaml 파일 혹은 프러퍼티스 파일에 등록한 키값과 사이트 값을 불러와야 한다. 

그러기 위해선 아래와 같이  VO 클래스를 만들어야 한다. 필자는 lombok를 사용해 

getter,setter를 어노테이션으로 관리했다. 필자처럼 하고 싶다면 maven에 lombok를 등록하자

 

1. lombok 등록

<!--Lombok -->
<dependency>
	<groupId>org.projectlombok</groupId>
		<artifactId>lombok</artifactId>
	<optional>true</optional>
</dependency>

 

2. VO 클래스로 프로퍼티스 값 매핑

import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

import lombok.Getter;
import lombok.Setter;

@Component
@ConfigurationProperties(prefix = "google.recaptcha.key")
@Getter
@Setter
public class CaptchaSettings {
	 private String site;
	 private String secret;
	 private String url;
}

@ConfigurationProperties(prefix = "google.recaptcha.key")를 사용하여 프로퍼티스, yaml 파일 값들을 호출해 해당 변수에 매핑 시킬 수 있다. 변수 이름은 당연히 같아야 한다!!

 

 

리캡챠 서버로 사이트키 보내기

필자는 AJAX를 이용해서 전송을 했다.

function doVaildRecaptcha(){	
	var formData= $("#loginForm").serialize();
		$.ajax({
    		type: 'POST',
    		contentType: "application/x-www-form-urlencoded",
    		url:'/valid-recaptcha',	    		    		
		data: formData,		
		dataType: 'text', 
		cache : false,
		success: function(data){
		if(data == 'success'){        
			console.log('리캡챠 성공!');
			$('#loginForm').submit(); //리캡쳐 성공후 로그인 id,pw 체킹 (security 사용)
		}
 		else{
			alert('인증되지 않은 주소입니다.');
			}      
		},
          	error:function(xhr,status,error){
            	console.log(error);
            }
	});	
}

 

컨트롤러 작성

필자랑 똑같이 따라 했다면 아래 코드를 넣어주자.

@PostMapping("/valid-recaptcha")
    public @ResponseBody String validRecaptcha(HttpServletRequest request){
    	String result = null;
    	String response = request.getParameter("g-recaptcha-response");
    	boolean isRecaptcha = homeService.verifyRecaptcha(response); //인증 메소드 서비스로 분리

    	if(isRecaptcha) {
    		result = "success";
    	}else {
    		result = "false";
    	}  	
    	return result;
   }

request.getParameter("g-recaptcha-response") 값이 발급받은 사이트키 이다.

 

서비스 작성 인증 하는 메소드 

public boolean verifyRecaptcha(String recaptcha) {
      	
    	final String SECRET_KEY = captchaSettings.getSecret(); // 비밀키 호출
    	final String RE_URL = captchaSettings.getUrl(); // 인증할 URL
    	
		try {
			URL obj = new URL(RE_URL);
			HttpsURLConnection con = (HttpsURLConnection) obj.openConnection();
			con.setRequestMethod("POST");
			
			String postParams = "secret=" + SECRET_KEY + "&response=" + recaptcha;
			con.setDoOutput(true);
			
			DataOutputStream wr = new DataOutputStream(con.getOutputStream());
			wr.writeBytes(postParams);
			wr.flush();
			wr.close();

			BufferedReader in = new BufferedReader(new InputStreamReader(con.getInputStream()));
			String inputLine;
			StringBuffer response = new StringBuffer();

			while ((inputLine = in.readLine()) != null) {
				response.append(inputLine);
			}
			in.close();

			JsonReader jsonReader = Json.createReader(new StringReader(response.toString()));
			JsonObject jsonObject = jsonReader.readObject();
			jsonReader.close();
			return jsonObject.getBoolean("success"); //최종 Return 값 : true or false
			
		} catch (Exception e) {
			e.printStackTrace();
			return false;
		}

	}

 

마치며 

 

https://github.com/HyunSangWon/admin-site 

HyunSangWon/admin-site

제 깃허브 사이트에서 확인 할 수 있습니다. 스프링 부트 매뉴얼을 보면 다른 방법으로 인증을 하는 것을 볼 수 도 있습니다. 방법은 여러가지이며 저는 이런 방법으로 인증을 진행했습니다. 테스트키로 인증을 받았지만 글을 보시는 분들은 

도메인으로 직접 발급받아 연습해보실 추천합니다.