구글 리캡챠v2(로봇이 아닙니다.) API 키 생성 및 연동 + 서버단 체크(PHP) 예제
구글 리캡챠v2(로봇이 아닙니다.) API 키 생성 및 연동 + 서버단 체크(PHP) 예제
REDINFO
약 1년전 2023-02-20 00:18:52

구글에서 제공하는 리캡챠 API는 연속적인 행동을 막기위한 용도로 많이 사용되는데 주로 게시글 등록 또는 로그인 시 많이 사용된다. 이번에 소개할 리캡챠 버전은 v2 버전으로 아래의 이미지와 같이 `로봇이 아닙니다.` 라는 기능을 제공한다. 

 

이렇게 `로봇이 아닙니다.` 에 체크를 하면 검증이 되고 이를 이용하여 구글 API와 통신하여 체크를 할 수 있다. 

 

리캡챠 API를 사용하기 위해선 구글 API 생성을 해야하는데 자세한 방법은 아래의 절차를 통해 발급 가능하다. 

 

리캡챠 API 키값 발급 방법 
 
reCAPTCHA
reCAPTCHA is a security service that protects your websites from fraud and abuse.
www.google.com/recaptcha/about/

리캡챠 URL에 접속 후 아래의 이미지와 같이 v3 Admin Console 을 클릭

 

최초 리캡챠 등록을 진행할 경우 아래와 같이 새 사이트 등록이 필요하다. 

 

제출을 눌러 생성을 하면 아래와 같이 사이트 키값과 비밀키값 을 확인할 수 있다. 

 

위와 같이 간략하게 구글 리캡챠 API 키값 생성에 대해 알아보았고 이제부턴 해당 키값을 이용하여 리캽챠 적용하는 방법에 대해 알아보자 

 

리캽챠 클라이언트 소스  (index.php)
<?php 
	$siteKey = ''; // 구글 리캡챠 사이트 키값을 입력한다. 
?>
<!-- jquery 3.5.1 -->
<script src="//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 

<!-- 리캽챠 API -->
<script src='//www.google.com/recaptcha/api.js' async defer></script>

<!-- 스타일 -->
<style>
	.form{ margin:30px auto; border:solid 1px #eee; max-width:400px; width:100%; padding: 1%;}
	.form .submit{ margin:20px 0; }

</style>

<!-- 스크립트 -->
<script>
	var authSubmit = true;
	$(document).on('submit','#server',function(){
		if( authSubmit !== true){  alert("잠시만 기다려 주세요."); return false; }
		var recatchaResponse = grecaptcha.getResponse()
		if( !recatchaResponse ){
			alert("로봇이 아닙니다에 체크해주세요.");
			return false;
		}
		var $server = $('#server');
		$server.find('[name="recatchaResponse"]').val(recatchaResponse);
		authSubmit =  false;

		// ajax 통신
		$.ajax({url:$server.attr('action'), type:$server.attr('method'), dataType:'json', data:$server.serialize()})
		.done(function(e){
			alert(e.msg); 
			return false;
		})
		.fail(function(e){
			alert(e.responseText);
		})
		.always(function(){
			authSubmit = true;
			grecaptcha.reset(); // 리캡챠 초기화
			$server.find('[name="recatchaResponse"]').val('');
		})
		return false;
	});
</script>
<div class="form">
	<form id="server" action="server.php" method="post">
		<input type="hidden" name="recatchaResponse" value="">
		<div class="recaptcha">
			<div class="g-recaptcha" data-sitekey="<?php echo $siteKey ?>"></div>
		</div>
		<div class="submit">
			<input type="submit" value="등록">
		</div>
	</form>
</div>

 

리캡챠 서버단 소스 (server.php)
<?php // 리캽챠 서버단 프로그램 예제

$secretKey = ''; // 구글 리캡챠 비밀 키값을 입력한다. 

extract($_POST);
if(empty($recatchaResponse)){
	die(json_encode(array('rst'=>'fail','msg'=>'`로봇이 아닙니다.`에 체크해주세요.')));
}

// API URL 데이터
$apiData = array(
	"secret"=>$secretKey,
	"response"=>$recatchaResponse,
	"remoteip"=>$_SERVER['REMOTE_ADDR'],
);

// API URL 셋팅
$url = "https://www.google.com/recaptcha/api/siteverify?".http_build_query($apiData);

// CURL 통신 
$ch = curl_init(); 
curl_setopt($ch, CURLOPT_URL, $url); 
curl_setopt($ch, CURLOPT_REFERER, 'http'.(!empty($_SERVER['HTTPS']) ? 's':null).'://'.$_SERVER['HTTP_HOST']); 
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); 
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0); 
curl_setopt($ch, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
curl_setopt($ch, CURLOPT_POST, 0); 
$response = curl_exec($ch); 
if (curl_error($ch)){ 
	$response = array('curl_error'=>true,'msg'=>'CURL Error('.curl_errno( $ch ).') '.curl_error($ch));
} 
curl_close($ch); 

// 통신 에러 처리
if( isset($response['curl_error'])){
	die(json_encode(array('rst'=>'fail','msg'=>$response['msg'])));
}

if( empty($response)){ die(json_encode(array('rst'=>'fail','msg'=>'응답에러'))); }
$responseData = json_decode($response,true);
if( empty($responseData['success']) || $responseData['success'] !== true){ 
	die(json_encode(array('rst'=>'fail','msg'=>'인증실패'))); 
}
die(json_encode(array('rst'=>'success','msg'=>'인증성공!'))); 

 

중요 포인트

리캡챠의 경우 제공되는 API가 몇가지 있는데 클라이언트 소스에서 보면 `grecaptcha.getResponse()` 와 `grecaptcha.reset()` 이 사용된것을 알 수 있다. 예제소스에서는 간단한 예제로 보여주기위 사용되었고 상세한 설명은 아래 이미지를 참고해보자 

 

두번째로는 예제소스에서 서버단(server.php) 체크 부분인데 아래와 같이 파라미터값을 보내주었다. 

// API URL 데이터
$apiData = array(
	"secret"=>$secretKey,
	"response"=>$recatchaResponse,
	"remoteip"=>$_SERVER['REMOTE_ADDR'],
);
secret 구글 리캡챠 API 비밀 키값
reponse 클라이언트단에서 받은 `grecaptcha.getResponse()` 의 값 
remoteip 유저의 아이피

 

최종 응답값은 API를 통해 success  값으로 받을 수 있으며 해당 값이 true(bool) 일 경우에만 성공처리를 해주어야한다. 

 

이 포스트글이 도움이 되었나요?
5
카테고리 연관글

Comment

댓글작성

0(500) | 1(30)