セキュリティ対策としてreCAPTCHAプラグインなしで導入方法代替としてはCloudflareTurnstile

今日は2025年4月16日です。

サイトのコメント欄やメールフォームなどにおいて、スパム的なコメントやスパムメールなどbot（機械的）と思われる投稿などの対策として有名なのがGoogleのreCAPTCHAがあります。他にもCloudflareのTurnstileなどもあります。今回はこれまでにバージョンをv1からv2そして現在ではv3（バージョン3）になっているreCAPTCHAの導入方法です。

reCAPTCHA とは、

reCAPTCHA は、bot、アカウントの乗っ取り、不正なトランザクションからウェブサイトやモバイルアプリを保護する、最新の不正行為防止プラットフォームです。reCAPTCHA は、数兆のトランザクション、数十億のユーザーとデバイス、数百万のウェブサイトから収集された Google 規模の不正行為情報テレメトリーを活用して、不正行為に対するグローバルな分析情報を提供し、カスタマー ジャーニー全体であらゆるエンドポイントを保護します。さらに、カスタムの AI モデルにより、エンドユーザーに負担をかけることなく、高度な脅威から組織を保護できます。https://cloud.google.com/security/products/recaptcha?hl=ja

もう少し簡単にしますと、reCAPTCHAとは、

簡単に追加できる高度なセキュリティ
reCAPTCHA は、スパムや不正行為からサイトを保護する無料のサービスです。高度なリスク分析手法を使用して、人間と bot を区別します。

reCAPTCHAv3の詳細は以下にある通りになります。

reCAPTCHA v3  |  Google for Developers

URL: https://developers.google.com/recaptcha/docs/v3?hl=ja

プラグインを使うのは簡単ですが、何かと不具合やサイトの重さ（軽さ）やプラグインを導入することによるさらなるセキュリティの懸念などからプラグインを使わずにfunctionにコードを追加することによりreCAPTCHAを導入することができることを以下サイトにおいて解説つきで紹介されています。

MW WP FormにプラグインなしでreCAPTCHA v3を設定するメモ - Qiita

プラグインなしで自作する背景MW WP Formでスパムメール対応をする場合、以前はMW WP Formの本家のアドオン「MW WP Form reCAPTCHA」がありましたが、今は配布停止して…

URL: https://qiita.com/soundweaver/items/6f3c9d6847f1502d80f5

上記サイトを拝見させていただくまでは、プラグインにてreCAPTCHAを導入することにするのかやめるのか考えていましたが、上記サイトの詳細丁寧な解説付きのコードをfunctionにコードを追加することによりreCAPTCHAが導入可能です。

reCAPTCHAのfunctionに記載するコードは以下になります。（上記サイトにもあります。）

/*
 * MW WP Formの自作バリテーション
 */
function mwform_validation_recaptcha( $validation_rules ) {

    if(! class_exists('MW_Validation_Recaptcha')) {

        
        class MW_Validation_Recaptcha extends MW_WP_Form_Abstract_Validation_Rule {
            /*
             * 独自のバリデーションルール名を設定します。
             * 他のバリテーションを被らない名前が良いです。
             */
            protected $name = 'mwformrecaptcha';

             public function rule( $item_name, array $options = array() ) {

               //データが送信されていない（最初にフォームページが表示された）時は以下の処理をしない設定
                if( strtoupper($_SERVER['REQUEST_METHOD']) !== 'POST' ) return '';
                
                /*
                 * 取得したトークンを取得
                 */
                $token = $this->Data->get($item_name);
                $token = !empty($token) ? $token : '';
                
                /*
                 * 管理画面のreCAPTCHAのバリテーションが設定されているかのチェックして変数にいれる
                 */
                $is_reCAPTCHA = isset($options['is_reCAPTCHA']) ? $options['is_reCAPTCHA'] : false;
                
                $secret_key = 'XXXXXXXXXX';//ここには取得したシークレットキーを記載します
                $threshold_score = 0.5;//閾値の設定
                
                //管理画面にてreCAPTCHAバリテーションのチェックがあった時の処理
                if($is_reCAPTCHA !== false) {
                    
                    if($item_name === 'recaptchaToken' && !isset($_POST['submitBack'])) {
                        
                        if(!isset($secret_key) || $secret_key === '') {
                            $defaults = array(
                                'message' => __('No reCAPTCHA Secret Key','efc-theme')
                            );
                            $options = array_merge($defaults,$options);
                            return $options['message'];
                        }
                        //Google reCAPTCHA APIに投げて判定してもらう設定
                        $url = 'https://www.google.com/recaptcha/api/siteverify?secret=' . $secret_key . '&response=' . $token;
                        $response = wp_remote_get($url);
                            if (!is_wp_error($response) && $response["response"]["code"] === 200) {
                                
                                $reCAPTCHA = json_decode($response["body"]);

                                if($reCAPTCHA->success) {
                                    if( $reCAPTCHA->score < $threshold_score) {
                                        
                                        $defaults = array(
                                            'message' => 'reCAPTCHAがスパムロボットと判断しましたので送信できませんでした!!'
                                        );
                                        $options = array_merge($defaults,$options);
                                        return $options['message'];
                                    }
                                } else {

                                    $defaults = array(
                                        'message' =>'reCAPTCHAがスパムロボットと判断しましたので送信できませんでした'
                                    );
                                    $options = array_merge($defaults, $options);
                                    return $options['message'];                                    
                                    
                                }
                                // \$reCAPTCHA->success
                                
                            } else {

                                $defaults = array(
                                    'message' => __('Faild reCAPtCHA Access','efc-theme')
                                );
                                $options = array_merge($defaults,$options);
                                return $options['message'];

                            }

                    }
                }
             }

            /*
             * フォーム編集画面の「バリデーションルール」に設定を追加する
             */
            public function admin($key, $value) {
                $is_reCAPTCHA = false;
                if (is_array($value[$this->getName()]) && isset($value[$this->getName()]['is_reCAPTCHA'])) {
                    $is_reCAPTCHA = $value[$this->getName()]['is_reCAPTCHA'];
                }
        ?>      
                <table>
                    <tr>
                        <td>reCAPTCHA V3</td>
                        <td><input type="checkbox" value="1" name="<?php echo MWF_Config::NAME; ?>[validation][<?php echo $key; ?>][<?php echo esc_attr($this->getName()); ?>][is_reCAPTCHA]" <?php if ($is_reCAPTCHA) : ?>checked<?php endif; ?> /></td>
                    </tr>
                </table>
        <?php
            }
        }
    }

    //上記ルールのインスタンスを作って返す
    if(!isset($instance)) {
        $instance = new MW_Validation_Recaptcha();
        $validation_rules[$instance->getName()] = $instance;
        return $validation_rules;
    }
}

add_filter('mwform_validation_rules','mwform_validation_recaptcha',20,1);

$siteKey = 'XXXXXXXXXX';//サイトキー
$loadReCaptcha = 'https://www.google.com/recaptcha/api.js?render=' . $siteKey;
wp_enqueue_script('reCAPTCHv3',$loadReCaptcha,array(),'v3',true);


$addTokenUsePreventDefault = '
if(document.querySelector(".mw_wp_form_input form")) {
    const myForm = document.querySelector(".mw_wp_form_input form");
    let preventEvent = true;
    const getToken =  (e) => {
        const target = e.target;
        if(preventEvent) {
            e.preventDefault();
            grecaptcha.ready(function() {
                grecaptcha.execute("'. $siteKey .'", {action: "homepage"})
                .then(function(token) {
                    preventEvent = false;
                    if(document.querySelector("[name=recaptchaToken]")) {
                        const recaptchaToken = document.querySelector("[name=recaptchaToken]");
                        recaptchaToken.value = token;
                    }
                    if(myForm.querySelector("[name=submitConfirm]")) {
                        const confirmButtonValue = myForm.querySelector("[name=submitConfirm]").value;
                        const myComfirmButton = document.createElement("input");
                        myComfirmButton.type = "hidden";
                        myComfirmButton.value = confirmButtonValue;
                        myComfirmButton.name = "submitConfirm";
                        myForm.appendChild(myComfirmButton);
                    }

                    myForm.submit();
                })
                .catch(function(e) {
                    alert("reCAPTCHA token取得時にエラーが発生したためフォームデータを送信できません");
                    return false;
                });
            });

        }

    }
    myForm.addEventListener("submit",getToken);

} else if(document.querySelector(".mw_wp_form_confirm form")){

    let count=0;
    const timer = 60 * 1000 * 2;
    getToken = () => {
        grecaptcha.ready(function(){
            grecaptcha.execute("'. $siteKey .'",{action:"homepage"})
            .then(function(token){
                const recaptchaToken=document.querySelector("[name=recaptchaToken]");
                recaptchaToken.value=token;
                if(count<4){
                    setTimeout(getToken,timer)
                }
                    count++
            })
            .catch(function(e){
                alert("reCAPTCHA token取得時にエラーが発生したためフォームデータを送信できません");
                return false
            });
        });
    }
    document.addEventListener("DOMContentLoaded",getToken);

}';

wp_add_inline_script('reCAPTCHv3',$addTokenUsePreventDefault);

上記コードのサイトキー部分とシークレットキー部分をご自分のキーに書き換えてご自分のサイト用のreCAPTCHAを導入してください。

• $siteKey = 'XXXXXXXXXX'→XXXXXXXXXXの部分をご自分のサイトキーに書き換えてください。
• $secret_key = 'XXXXXXXXXX'→XXXXXXXXXXの部分をご自分のシークレットキーに書き換えてください。

すると、管理画面においても通常のサイト表示時においても管理画面ログイン画面においても、すべての画面にてreCAPTCHAが表示されるようになっています。

プラグインを使用すればもっと簡単にGooglereCAPTCHA設定と導入ができると思います。

GooglereCAPTCHA設定方法自体は他のサイトなどでも解説されています。以下サイトなどです。現在ではv3ですがv2の解説のサイトなどもありますね。

URL: https://support.qubo.jp/hc/ja/articles/4414958598297-reCAPTCHA%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95

今後はGooglereCAPTCHAのみではなく、代替のサービスとしてCloudflareのTurnstileも多くなってくるかもしれません。