So-net無料ブログ作成

reCAPTCHAをPHPが使えないサーバで暫定的に導入する [備忘録]

7月2日のブログで、バックエンドのサーバ環境を気にせずフロントエンドの設定でフォームメールを送信出来るようにしました。ただこのままだとボットとかに検知されてスパムメールを大量に受信しかねないので、同じくGoogleのreCAPTCHAを導入することにしました。「私はロボットではありません」という所にチェックする仕組み、です。この部分はBotには認識されないようになっているので、スパム投稿に有効だとか。

Google reCAPTCHA

これもgoogleのアカウントがあればすぐに登録出来ます。導入の仕方も以下のページに詳細に書いてあるので割愛します。

簡単操作でサクサク導入。reCAPTCHA導入で認証強化!

私も途中の設定で「reCAPTCHA V2」を選び、送信する前にチェックマークを入れてもらうことにしました。

htmlは以下の分を付け加えました。フォームはテンプレートにあるものをそのまま利用しました。PHPが使える場合、以下のサイトが参考になります。

WEBサイトのフォームにreCAPTCHAを付ける方法 その1
ウェブサイトにキャプチャを導入する方法【reCAPTCHAの使い方】

1. Java scriptによるGoogle APIの読み込み
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script>
を</head>の前に挿入しました。

2. </form>の前に以下の1文を挿入
<div class="g-recaptcha" data-sitekey="== xxxxxx ==">
(sitekey以下のダブルクオーテーション内は取得した自分のサイトキーを入れて下さい)

これでローカルでhtmlを表示させると、確かに以下のような認証が表示されました。

reCAPTCHA.jpg

一瞬あれ?と思いましたが登録したドメインが大学のサーバなので、ローカル環境ではこのようになるのは仕方ないことです。なのでこのファイルをこのまま大学のサーバにFTPで送ってみた所、確かに「I'm not a robot」の表示が見れました。ただ以下のサイトにも書いてある通り、これだけではだめなようです。

How to check in js that user has checked the checkbox in Google recaptcha?

上に紹介した2つのサイトもPHPを使うことが前提になっているので、私の場合使うことができません。しばらく悩みましたが以下のサイトを参考にg-recapcha クラスを設定した div に data-callback=”コールバック関数名” を追加し、認証をチェックする前は送信ボタンを「使えない状態(disabled)」に設定、reCAPTCHAをチェックすることでそのdisabledをはずすようにしました。

以下のサイトは認証しないと送信ボタンが現れない方法を説明しています。

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

私の場合は、こんな感じ。

<form>
 <!-- この間に名前やメールアドレスを記入させるhtml文が入っています-->
 <div data-callback="recaptchaCallback" class="g-recaptcha" data-sitekey="== xxxxxx ==">
 <input class="send_btn" disabled="disabled" value="Send message!" type="submit">
</form>
 <script>
function recaptchaCallback() {
$('.send_btn').removeAttr('disabled');
}
 </script>

これで認証をチェックしないと送信ボタンを押してもメールが送れないようになりました。本当は上の例のように送信ボタンそのものを表示しない方法のがいいかと思ったのですが、自分の知識ではうまくいきませんでした。まぁ、スパムの数を減らすという目的なので取り急ぎこれでいいかな、と思いアップした次第です。それでも上のサイトがいうように暫定的な対策です。

ご参考になれば。
nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ:blog