워드프레스에서 플러그인 없이 구글 reCAPTCHA v3 적용하기

구글 reCAPTCHA 로고 구글 reCAPCHA
뭐 다들 알겠지만 구글에서 개발한 봇방지 기술임.

티스토리 같은데는 다음이 기본적으로 관리를 해서 그런지 스팸문자가 많이 달리지는 않았는데 워드프레스로 넘어오고 스팸댓글이 하나둘씩 붙더니 하루 일과가 블로그 스팸 지우는게 될정도로 늘어나기 시작했음.

다행이 워드프레스 기본 플러그인인 Akismet이 대부분을 걸러줘서 그냥 스팸함 비우기 누르면 되는거 였지만 초반에는 멀쩡한 한글 댓글도 오진하는 경우가 있어서 자동 삭제는 안하고 확인후 삭제 했음.

지난 Akismet 통계

내 Akismet 통계인데  잘은 모르지만 7월 중반부터 폭팔적으로 스팸이 늘어나는게 눈으로 보이기 시작함. (하루에 쌓이는 양이 이전보다 배로 증가) 8월의 경우엔 182건이 2일만에 달린것임.

8월 3일쯤에 리캡챠를 도입했고 그 뒤로 단 한건도 안달렸는데…. ㅋㅋㅋㅋ 이게 이유가 있었음.

나중에 알았지만 플러그인이 불량(?)이라 댓글이 정상적임에도 불구하고 안달렸기 때문이었음.
가끔 달린 댓글에 답변을 다는데… 내가 자꾸 리캡챠 실패가 뜨는걸 보고 플러그인 교체를 함.

v2는 I’m not robot 이라는 체크 하는 확실한게 있어서 v2가 되는 플러그인으로 썼는데 러시아 형님들은 이걸 뚫고 들어오더군 -_-;;

뭐 이래저래 다시 고민하다가 블로그 플러그인이랑 기존에 작성했던 코드 및 css 등등 정리를 시작함.
reCAPTCHA 플러그인이 약 3일정도 없는 상태로 방치했더니만 그동안 밀린거 몰아내듯이 1138건이라는 어마어마한 스팸이 달리기 시작함 -_-;

reCAPTCHA 인기 플러그인 몇개 더 시도 해봤는데 뭔가 기능이 많아보이는게 그냥 심플하게 적용하자 라는 생각에 직접 코드 찾아서 적용함. 그리고 여기에 정리해둠.

 

google reCAPTCHA v3 적용하는 방법!

사이트키, 시크릿키는 https://www.google.com/recaptcha/admin/create 사이트 등록하면 사이트키와 시크릿키를 발급해줍니다.

코드들은 스킨폴더에 functions.php에 추가하면 됩니다.

//코멘트 버튼 태그 앞에 구글리캡차 태그 담
function add_reCAPTCHA_Comments($submit_field) {
	$submit_field['submit_field'] = '<input type="hidden" id="id_reCAPTCHA" name="g-recaptcha">'. $submit_field['submit_field'];
    return $submit_field;
}
add_filter('comment_form_defaults','add_reCAPTCHA_Comments');

이건 코멘트 버튼 옆(?)에 리캡챠 값을 같이 전송할 폼을 붙인다고 생각하면 됩니다.

//리캡차 스크립트 로딩
function loadScript_reCAPTCHA_Comments(){
	if( is_single() ){?>
<script src="https://www.google.com/recaptcha/api.js?render=사이트키"></script>
<script>
grecaptcha.ready(function() {
    grecaptcha.execute('사이트키', {action: 'linsoo_reCAPTCHA_Comments'}).then(function(token) {
		//스크립트가 로딩되면 token이 생성되고 코멘트 버튼 밸류값으로 넣어줌
		document.getElementById('id_reCAPTCHA').value = token;
	});
});
</script>
<?php
	}
}
add_action('wp_head', 'loadScript_reCAPTCHA_Comments');

본문이 열리면 리캡챠 스크립트를 로딩합니다.
스크립트 로딩이 끝나면 알아서 토큰을 던져주는데 이 토큰값을 위에 코멘트 버튼 옆에 추가했던것 값으로 넣어주게 됩니다.

여기서 수정해야 하는 부분은 사이트키, linsoo_reCAPTCHA_Comments 부분을 본인 사이트에 맞게 변경해야 합니다. 사이트키는 구글이 사이트 마다 다르게 발급 하기 때문에 틀리면 정상 작동을 안합니다.

action 부분에 ‘linsoo_reCAPTCHA_Comments’ 부분은 어드민 콘솔에서 트래픽 분류 구분할때 사용합니다.

reCAPTCHA 어드민 콘솔에 트래픽 표시

이렇게요. 하루이틀이 지나야 통계가 표시되는거라 제가 쓴거랑 스샷이랑 안맞긴 한데 구글 문서 확인하니 맞으니 믿어도 좋아요.

// 리캡차 확인
function verify_google_recaptcha() {
	if (empty($_POST['g-recaptcha']) == FALSE){
		$captcha_postdata = http_build_query(array(
							'secret' => '시크릿키',
							'response' => $_POST['g-recaptcha']
							), '', '&');

		$captcha_opts = array(
			'http' => array(
					  'method'  => 'POST',
					  'header'  => 'Content-type: application/x-www-form-urlencoded',
					  'content' => $captcha_postdata)
		);
		
		$captcha_context  = stream_context_create($captcha_opts);
		$responseKeys = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify" , 
									false , $captcha_context), true);

		return $responseKeys;
	}
	else
		return null;
}

구글로 부터 reCAPTCHA 결과 값을 받아오는 함수입니다.
여기서 주의점이라면 본인 시크릿키를 적용한다는 점밖엔 없습니다.

마지막으로

function check_reCAPTCHA_Comments(){
	$result = verify_google_recaptcha();
	if ($result["success"] && strcmp($result["action"], "linsoo_reCAPTCHA_Comments") == 0 ){
		// 리캡챠 통과 했을때.
		// wp_die( __('리캡챠 통과 했습니다'));
	}
	else{
		//리캡챠 통과 못했을때.
		wp_die( __('너어는 인간이 아니구나'));
	}
}
add_action('pre_comment_on_post', 'check_reCAPTCHA_Comments');

이 코드를 넣어주면 됩니다.

뭐 여기서 주의점이라면 linsoo_reCAPTCHA_Comments 부분만 위에서 고친대로 적용하면 됩니다.
굳이 통과 했을때 코드를 넣고 주석 처리 한 이유는 정상 작동 되는지 확인해보기 위함입니다.

주석 해지한담에 댓글을 달아보고 나오는 메세지를 보면 제대로 스크립트가 작동하는지 판단할 수 있죠.

 

참고 사이트
https://developers.google.com/recaptcha/docs/v3
https://www.oueta.com/wordpress/add-google-recaptcha-to-wordpress-comments-without-plugin/

크리에이티브 커먼즈 라이선스Linsoo의 저작물인 이 저작물은(는)크리에이티브 커먼즈 저작자표시-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.

댓글 남기기

이메일은 공개되지 않습니다.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

This site uses Akismet to reduce spam. Learn how your comment data is processed.