reCAPTCHAを超簡単にHTMLサイトに組み込む方法（POST-MAIL CGIを使用）

reCAPTCHAとは、Googleが提供するスパムメール防止ツール。お問い合わせフォームに「私はロボットではありません」というチェックボックスのやつ。WordPressはプラグイン「Contact Form 7」の設定から簡単に組み込みできますが、HTMLサイトはちょっと難しそうですよね？

そんな方におすすめな方法をご紹介します。

メールフォームCGIはシンプルで機能的な「POST-MAIL」を使用しますが、同様の機能があれば問題ありません。

reCAPTCHAのアカウントを作成

まずは「アカウント作成」から。以下のURLにアクセス。

Googleアカウントでログインしたらメニューの「v3 Admin Console（今後v4やv5になっている可能性あり）」をクリック。

次のページ。「ラベル」は適当にサイト名でOK。

「reCAPTCHA タイプ」はv3でもv2でもOKですが、「私はロボットではありません」のチェックボックスと画像認証があった方が目に見えて分かりやすいのでv2で作成します。

ちなみにv3はAIが自動でbotがそうでないかを判断するのでチェックボックスすら表示されません。WordPressではv2が使えなくなったので、今後はv3に統一されると思われます。

「ドメイン」には組み込むサイトのドメインを入力。

同意のチェックボックスをクリック、アラートは送信しても送信しなくてOKです。

作成完了すると「サイトキー」と「シークレットキー」が発行されます。使うのはサイトキーのみ。

問い合わせフォームのHTMLに以下を追記。

<head>内

<script src="https://www.google.com/recaptcha/api.js"></script>

<form>内（送信ボタンの前とか）

<div class="g-recaptcha" data-sitekey="発行されたサイトキー"></div>

※divタグじゃなくてもspanでもpタグでもOK

上記を追記してアップロードするとreCAPTCHAが組み込まれ、メールフォームにチェックボックスが表示されます。これだけではbotでも送信できてしまうので、ひと手間必要となります。

シークレットキーを使う方法などが正攻法ですが、CGIが分からない人が下手にいじるとエラーが出るのでおすすめしません。そこでreCAPTCHAから吐き出させるPOSTパラメータを使います。

reCAPTCHAの認証をクリアすると「g-recaptcha-response」という値に乱数時の文字列が生成されます。そこでPOST-MAILの「need（必須項目）」を使って「g-recaptcha-response」の値を必須項目にします。下記を<from>タグの直後に追加すればOK。

<input type="hidden" name="need" value="g-recaptcha-response">

こうすることで「g-recaptcha-response」が空だと送信できない状態、つまりreCAPTCHAの認証をクリアしないと送信できない状態となります。

なお、reCAPTCHAの認証は約2分間有効とのこと。

このままでも機能しますが、もうひと手間。init.cgiの「フォームのname値の置き換えをする場合」に以下を追記。

	'g-recaptcha-response' => 'reCAPTCHA認証'

これでメールフォームの確認画面、また自動返信メールの項目名が変更されます。

ただ、生成された長い乱数時の消し方は分かりませんでした。（分かる人はコメントで教えて頂ければ幸いです）