댓글에 구글 리캡챠(reCaptcha) v3 적용

qpress 2020년 3월 6일 104

Google reCaptcha v2

인터넷 상에서 자주 보와 왔던, ‘나는 로봇이 아닙니다.’는 구글의 reCaptcha Version2 이다. 근데 이 방식은 이용자에게 다소 불편을 주고, 보안상의 허점도 발견되어 Version3 가 더 선호 되고 있다.

Google reCaptcha v2 intro

V3에서는 숨겨진 필드(Hidden Field)를 통해 토큰을 전달하고 서버사이드에서 토큰을 검증하는 방식을 취하기 때문에 이용자의 별도 액션이 필요 없다. v3를 워드프레스 댓글에 적용하는 방법을 알아본다.

1. Google reCaptcha Key 받기

https://www.google.com/recaptcha/admin/create 로 이동하여 reCAPTCHA v3를 선택하여 Key를 발급 받습니다.

Key는 두가자기 있는데, Site key는 입력폼 등의 Front-end에서 사용하고, Secret Key는 서버사이드에서 검증에 서용하는 Key 임

2. Script 작업(Front-End)

먼저 사용 중인 테마의 head 파일, <head>테그 내에 아래와 같이 코드를 삽입 합니다.

<?php if(is_single()) { ?>
    <script src="https://www.google.com/recaptcha/api.js?render=Your_Site_Key"></script>
    <script>
        grecaptcha.ready(function() {
            grecaptcha.execute('Your_Site_Key', {action: 'homepage'}).then(function(token) {
                var target = document.getElementById('google-recaptcha');
                if(target) target.value = token;
            });
        });
    </script>
<?php } ?>

댓글 폼이 출력 되는 글(Post) 보기 페이지인 경우에(is_single())만 작동하며, 나의 Site Key를 통해 생성된 토큰(token)을 ‘google-recaptcha’라는 id를 가진 hidden 필드의 값(Value)으로 할당 하게 된다.

3. 입력폼 작업(Front-End)

이제 댓글 입력폼에 hidden 필들을 추가해 주어야 한다. 테마의 functions.php 파일 내 적당한 곳에 아래와 같이 comment form hook을 삽입 한다.

add_action( 'comment_form_after_fields', 'additional_fields' );
add_action( 'comment_form_logged_in_after', 'additional_fields' );
function additional_fields () {
    echo '<input type="hidden" id="google-recaptcha"  name="google-recaptcha">';
}

이렇게 되면 비로그인용 댓글폼과 로그인 이후 댓글폼 모두에 ‘google-recaptcha’라는 hidden 필드가 적용되게 되고, 위의 스크립트에 의해서 이 히든필드의 값으로 토큰이 할당 된다.

4. 서브측 작업

댓글 입력 버튼을 클릭 했을 때 서버사이드에서 Hidden 필드의 토큰 값을 받아서 검증한 후 스팸 징후가 있으면 입력을 중지하고 정상이면 기존의 입력 프로세스를 진행하게 해야 한다. 그런데 워드프레스에서 공식적으로 공개하고 있는 Hook에 댓글 저장 전에 수행할 수 있는 것을 찾기기 힘들다. (comment_post, wp_insert_comment 등은 모두 댓글 저장 이후의 프로세스임) 필자가 워드프레스 소스 코드를 뒤져가마 찾아낸 저장 전 Hook은 add_action(‘pre_comment_on_post’) 인데, 다른 것이 있는지는 정확히 알 수 없다.

add_action( 'pre_comment_on_post','check_google_recaptcha');
function check_google_recaptcha() {
    $captcha = $_POST['google-recaptcha'];
    $secretKey = Your_Secret_Key; // 발급 받은 비밀 키
    $data = array(
      'secret' => $secretKey,
      'response' => $captcha,
    );

    $url = "https://www.google.com/recaptcha/api/siteverify";
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
    $response = curl_exec($ch);
    curl_close($ch);

    $responseKeys = json_decode($response, true);

    if ($responseKeys["success"] == false) {
      wp_die('로봇은 저리 가');
    }
}

여기까지 완료하면 댓글 입력 창 오른쪽 하단에 구글 리캡챠 마크가 뜨는 것을 볼수 있다.

1 Comments

Q.PRESS    2020년 3월 12일8:16 오후
[…] 댓글에 구글 리캡챠(reCaptcha) v3 적용 […]