サイトのコメント欄やメールフォームなどにおいて、スパム的なコメントやスパムメールなど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の詳細は以下にある通りになります。
プラグインを使うのは簡単ですが、何かと不具合やサイトの重さ（軽さ）やプラグインを導入することによるさらなるセキュリティの懸念などからプラグインを使わずにfunctionにコードを追加することによりreCAPTCHAを導入することができることを以下サイトにおいて解説つきで紹介されています。
上記サイトを拝見させていただくまでは、プラグインにて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の解説のサイトなどもありますね。
今後はGooglereCAPTCHAのみではなく、代替のサービスとしてCloudflareのTurnstileも多くなってくるかもしれません。
あなたにおすすめ
関連記事
-
-
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法
本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…
-
-
日産ディーラーオプションナビMM316D-WからMM518D-L交換（換装）NISSAN純正ナビリモコン
ある程度、年式がたった車においてはディーラーオプションナビ（DOP）やメーカーオプションナビ（MOP）の地図データが古くなったり、ナビのモニタインチ数が大きくなったりします。地図データが古くなるのはも…
-
-
車のキーナンバー確認方法。キーレス紛失や壊れた時
初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
ポチップ 
ポチップ 
新着コメント