구글에서 제공하는 리캡챠 API는 연속적인 행동을 막기위한 용도로 많이 사용되는데 주로 게시글 등록 또는 로그인 시 많이 사용된다. 이번에 소개할 리캡챠 버전은 v2 버전으로 아래의 이미지와 같이 `로봇이 아닙니다.` 라는 기능을 제공한다.
이렇게 `로봇이 아닙니다.` 에 체크를 하면 검증이 되고 이를 이용하여 구글 API와 통신하여 체크를 할 수 있다.
리캡챠 API를 사용하기 위해선 구글 API 생성을 해야하는데 자세한 방법은 아래의 절차를 통해 발급 가능하다.
리캡챠 URL에 접속 후 아래의 이미지와 같이 v3 Admin Console 을 클릭
최초 리캡챠 등록을 진행할 경우 아래와 같이 새 사이트 등록이 필요하다.
제출을 눌러 생성을 하면 아래와 같이 사이트 키값과 비밀키값 을 확인할 수 있다.
위와 같이 간략하게 구글 리캡챠 API 키값 생성에 대해 알아보았고 이제부턴 해당 키값을 이용하여 리캽챠 적용하는 방법에 대해 알아보자
<?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>
<?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) 일 경우에만 성공처리를 해주어야한다.