栃木県のJavaエンジニア、WEBプログラマーのためのサイト

2016.02.02とにかく簡単にreCAPTCHAを設置する。

「過去に設置したメールフォームからスパムが送信されてくる。」
「急ぎで画像認証的なものを導入してくれ。」

そんな相談をされる事があります。
Google 様の reCAPTCHA というAPIをパパっと設置してしまいましょう。

https://www.google.com/recaptcha/intro/index.html

どこかのASPへPOSTする構成だったりするとお手上げなので、
HTML / JS(jQuery)だけで設置してしまいます。
(あくまで「無いよりマシ」の割り切りです。
 本当は、直接CGIにポストされてくる事を考えて、CGI側(PHPなど)でも判定が必要です。)

フォーム上では下記の動作の流れとなります。
1. 初期は送信ボタン非表示
2. reCAPTHA認証
3. OKなら送信ボタン表示

簡単です。
いいんです。
とりあえずなんです。

SITE_IDの取得の仕方は適当にググってください。

g-recapcha クラスを設定した div に data-callback=”コールバック関数名” を追加します。
Enterキー で送信されないように、formの onsubmitにfalseを返しておいてください。

<form action="{送信CGIのURL}" method="post" onsubmit="return false;">
<input name="text1">
<input name="text2">
<div data-callback="recaptchaCallback" class="g-recaptcha" data-sitekey="{{SITEID}}"></div>
<input id="sendbutton" type="submit" style="display:none">
</form>

<script>
function recaptchaCallback( code ) {
 if(code != "") {
  //ボタン表示
  $( '#sendbutton' ).show() ;
 }      
}
</script>

くどいようですが、本来は受け側のCGIで認証チェックしないと意味がないです。

ご注意ください。