사이트가 reCAPTCHA 토큰을 확인하지 않는 것이 감지되었습니다. 라고 뜰때 해결법..

한동안 잊고 안들어갔던 리캡챠 사이트에 들어가니 저런 경고가 나옵니다.
저는 이전에 리캡챠를 적용할때 남들처럼 플러그인 쓰지 않고 차일드테마 function.php에 직접 넣는 방법을 사용했었는데 그로 인해 발생한 것이었습니다.

구글 공식문서에 나오듯이 리캡챠 작동은

1. Load the JavaScript API with your sitekey.
2. Call grecaptcha.execute on each action you wish to protect.
3. Send the token immediately to your backend with the request to verify.

이게 한 세트인데 제 코드는 1번과 2번은 페이지가 로딩되면서 실행하지만 3번은 댓글을 다는 순간에만 체크하게 되어 있었죠.

//리캡차 스크립트 로딩
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: 'recaptcha_wp_comments'}).then(function(token) {
        //스크립트가 로딩되면 token이 생성되고 코멘트 버튼 밸류값으로 넣어줌
        document.getElementById('id_reCAPTCHA').value = token;
    });
});
</script>
<?php
    }
}
add_action('wp_footer', 'loadScript_reCAPTCHA_Comments');

이게 이전의 코드입니다. footer에 스크립트 로딩하고 로딩이 다 되면 토큰을 생성하죠.
처음에는 저 스크립트 로딩과 토큰생성을 댓글 다는 순간에 하고 싶었는데 제가 웹개발자도 아니고 이래저래 검색해보다가 방법을 못찾았습니다.

//리캡차 스크립트 로딩
function reCAPTCHA_loadScriptComment(){
    if( is_single() ){?>
<script src="https://www.google.com/recaptcha/api.js?render=사이트키"></script>
<script>
//코멘트 label을 클릭하면 리캡챠 스크립트 실행한다.
const elComment = document.getElementById('comment');
var focusListener = function() {
    grecaptcha.ready(function() {
        grecaptcha.execute('사이트키', {action: 'recaptcha_wp_comments'}).then(function(token) {
            document.getElementById('id_reCAPTCHA').value = token;
        });
    });
    elComment.removeEventListener('focus', focusListener);
};
elComment.addEventListener('focus', focusListener);</script>
<?php
    }
}
add_action('wp_footer', 'reCAPTCHA_loadScriptComment');

결국 고민하다 내린 결론은 코멘트 입력창에 포커스가 잡히면 토큰을 생성하도록 변경했죠.
(이글 쓰면서 생각난건 스크립트 로딩 까지 포커스 잡혔을때 해도 될듯)

이렇게 코드를 수정하고 하루가 지나니

경고문구가 사라졌습니다.

끝!