MW WP Formにプラグインを使用せずにreCAPTCHA v3を導入する方法
カテゴリ：WEB制作
WordPressを利用してサイトを構築されている方でメールフォームプラグイン、MW WP Formを使っている方もいらっしゃるかと思います。
最近ではbotによるスパムメールが多くサーバー管理者の頭を悩ましていることかと思います。
MW WP FormにはMW WP Form reCAPTCHAというリキャプチャを導入するプラグインは存在するものの、プラグインの最終更新日は7年前。さらに、利用者数もあまり多くはないようで導入には少し不安もあるかと思います。
そこで今回は『MW WP Formにプラグインを使用せずにreCAPTCHA v3を導入する方法』を紹介します。
コードを紹介
functions.phpに記載
/**
* フォーム内にGoogle reCAPTCHA v3を追加するスクリプト
* 必要に応じて、'your-site-key'を実際のGoogle reCAPTCHA v3のサイトキーに置き換えてください。
*/
function display_recaptcha_v3() {
$site_key = 'your-site-key'; // ここにGoogle reCAPTCHA v3のサイトキーを入力 (置き換え必須)
ob_start();
?>
<!-- Google reCAPTCHA v3のJavaScript API -->
<script src="https://www.google.com/recaptcha/api.js?render=<?php echo esc_attr($site_key); ?>"></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('<?php echo esc_attr($site_key); ?>', { action: 'submit' }).then(function(token) {
// トークンをhiddenフィールドに設定
document.getElementById('g-recaptcha-response').value = token;
});
});
</script>
<!-- hiddenフィールドにトークンを格納 -->
<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
<?php
return ob_get_clean(); // バッファの内容を返す
}
add_shortcode('recaptcha', 'display_recaptcha_v3'); // ショートコードを登録
/**
* フォーム送信後にGoogle reCAPTCHAのトークンを検証する処理
* フォームIDに基づいてアクションフックを設定し、特定のフォーム送信後にreCAPTCHAを検証します。
* XXXXはMW FORMのフォームID()に置き換える必要があります。
* また、'your-secret-key'を実際のGoogle reCAPTCHAのシークレットキーに置き換えてください。
*/
add_action('mwform_after_send_mw-wp-form-XXXX', 'verify_recaptcha_v3_token', 10, 1);
function verify_recaptcha_v3_token($Data) {
$secret_key = 'your-secret-key'; // ここにGoogle reCAPTCHA v3のシークレットキーを入力 (置き換え必須)
// フォーム送信時にPOSTされたreCAPTCHAのトークンを取得
$recaptcha_response = isset($_POST['g-recaptcha-response']) ? sanitize_text_field($_POST['g-recaptcha-response']) : '';
// reCAPTCHAのトークンが存在しない場合のエラーハンドリング
if (empty($recaptcha_response)) {
return new WP_Error('recaptcha_error', 'リキャプチャが確認できませんでした。'); // エラーメッセージを返す
}
// Google reCAPTCHA APIにトークンの検証リクエストを送信
$response = wp_remote_post('https://www.google.com/recaptcha/api/siteverify', array(
'body' => array(
'secret' => $secret_key,
'response' => $recaptcha_response, // ユーザーのトークン
'remoteip' => $_SERVER['REMOTE_ADDR'], // ユーザーのIPアドレス
),
));
// Googleからのレスポンスを取得し、JSONとしてデコード
$response_body = wp_remote_retrieve_body($response);
$result = json_decode($response_body, true);
// reCAPTCHAの検証が失敗した場合
if (empty($result['success']) || $result['score'] < 0.5) {
return new WP_Error('recaptcha_error', 'リキャプチャの検証に失敗しました。'); // スコアが低い場合はエラーとする
}
// reCAPTCHAの検証が成功した場合、送信されたデータをそのまま返す
return $Data;
}
/**
* 確認画面から入力画面に戻った場合、再度reCAPTCHAを表示する処理
* 「戻る」ボタンが押されたとき、reCAPTCHAを再表示するためのフック
* XXXXはMW FORMのフォームID()に置き換える必要があります。
* また、'your-site-key'を実際のGoogle reCAPTCHAのサイトキーに置き換えてください。
*/
add_action('mwform_before_render_mw-wp-form-XXXX', 'add_recaptcha_to_confirmation_v3', 10, 1);
function add_recaptcha_to_confirmation_v3($Data) {
if (!empty($_POST['back'])) {
// 再度reCAPTCHA v3のトークンを生成
echo '<script>
document.addEventListener("DOMContentLoaded", function() {
// 確認画面に到達した際に再度トークンを生成
grecaptcha.ready(function() {
grecaptcha.execute("your-site-key", { action: "submit" }).then(function(token) {
document.getElementById("g-recaptcha-response").value = token;
});
});
// 送信ボタンがクリックされた時に再度トークンを生成する
var submitButton = document.getElementById("submit-button-id");
if (submitButton) {
submitButton.addEventListener("click", function() {
grecaptcha.ready(function() {
grecaptcha.execute("your-site-key", { action: "submit" }).then(function(token) {
document.getElementById("g-recaptcha-response").value = token;
});
});
});
}
});
</script>';
}
}
入力ページ、確認ページにショートコードを出力
<?php echo do_shortcode('
'); ?>
コードを解説
フォーム内にGoogle reCAPTCHAのJavascriptを出力するための関数を作成します。
『your-site-key』はGoogle reCAPTCHA Admin Consoleからコピーして置き換えてください。
function display_recaptcha_v3() {
$site_key = 'your-site-key'; // ここにGoogle reCAPTCHA v3のサイトキーを入力 (置き換え必須)
ob_start();
?>
<!-- Google reCAPTCHA v3のJavaScript API -->
<script src="https://www.google.com/recaptcha/api.js?render=<?php echo esc_attr($site_key); ?>"></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('<?php echo esc_attr($site_key); ?>', { action: 'submit' }).then(function(token) {
// トークンをhiddenフィールドに設定
document.getElementById('g-recaptcha-response').value = token;
});
});
</script>
<!-- hiddenフィールドにトークンを格納 -->
<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
<?php
return ob_get_clean(); // バッファの内容を返す
}
add_shortcode('recaptcha', 'display_recaptcha_v3'); // ショートコードを登録
対象とするフォームIDを指定しアクションフックを設定します。
『mwform_after_send_mw-wp-form-XXXX』のXXXXをフォーム識別子に変更してください。
また、『your-secret-key』はGoogle reCAPTCHA Admin Consoleからコピーして置き換えてください。
add_action('mwform_after_send_mw-wp-form-XXXX', 'verify_recaptcha_v3_token', 10, 1);
function verify_recaptcha_v3_token($Data) {
$secret_key = 'your-secret-key'; // ここにGoogle reCAPTCHA v3のシークレットキーを入力 (置き換え必須)
// フォーム送信時にPOSTされたreCAPTCHAのトークンを取得
$recaptcha_response = isset($_POST['g-recaptcha-response']) ? sanitize_text_field($_POST['g-recaptcha-response']) : '';
// reCAPTCHAのトークンが存在しない場合のエラーハンドリング
if (empty($recaptcha_response)) {
return new WP_Error('recaptcha_error', 'リキャプチャが確認できませんでした。'); // エラーメッセージを返す
}
// Google reCAPTCHA APIにトークンの検証リクエストを送信
$response = wp_remote_post('https://www.google.com/recaptcha/api/siteverify', array(
'body' => array(
'secret' => $secret_key,
'response' => $recaptcha_response, // ユーザーのトークン
'remoteip' => $_SERVER['REMOTE_ADDR'], // ユーザーのIPアドレス
),
));
// Googleからのレスポンスを取得し、JSONとしてデコード
$response_body = wp_remote_retrieve_body($response);
$result = json_decode($response_body, true);
// reCAPTCHAの検証が失敗した場合
if (empty($result['success']) || $result['score'] < 0.5) {
return new WP_Error('recaptcha_error', 'リキャプチャの検証に失敗しました。'); // スコアが低い場合はエラーとする
}
// reCAPTCHAの検証が成功した場合、送信されたデータをそのまま返す
return $Data;
}
また、確認画面から戻るボタンをクリックして前ページに戻った際に再度reCAPTCHAを表示させる関数を設定します。
『mwform_after_send_mw-wp-form-XXXX』のXXXXをフォーム識別子に変更してください。
add_action('mwform_before_render_mw-wp-form-XXXX', 'add_recaptcha_to_confirmation_v3', 10, 1);
function add_recaptcha_to_confirmation_v3($Data) {
if (!empty($_POST['back'])) {
// 再度reCAPTCHA v3のトークンを生成
echo '<script>
document.addEventListener("DOMContentLoaded", function() {
// 確認画面に到達した際に再度トークンを生成
grecaptcha.ready(function() {
grecaptcha.execute("your-site-key", { action: "submit" }).then(function(token) {
document.getElementById("g-recaptcha-response").value = token;
});
});
// 送信ボタンがクリックされた時に再度トークンを生成する
var submitButton = document.getElementById("submit-button-id");
if (submitButton) {
submitButton.addEventListener("click", function() {
grecaptcha.ready(function() {
grecaptcha.execute("your-site-key", { action: "submit" }).then(function(token) {
document.getElementById("g-recaptcha-response").value = token;
});
});
});
}
});
</script>';
}
}
そのあと、Google reCAPTHAのv3 Admin Consoleに入ってリクエスト回数を確認してください。(タイムラグがありますので翌日に確認しましょう。)
カウントが入っていれば無事に稼働しています。
まとめ
昨今では、Google reCAPTCHAの導入は多くの場面で求められます。
プラグインを使用してのGoogle reCAPTCHAの導入が不安な方はぜひ、本記事を参考にしてください。
