問い合わせフォームをPHPとかで自作した場合・・・
何の対策もしてないと、あっという間にスパムの温床になります。
そんな時に便利なのが reCAPTCH という機能
昔は「消火栓の画像を選べ！」とか出てきて嫌われてたアレですが、
今は reCAPTCH v3 が使えるので、ストレスのないスパム対策もできるようになりました。
そこで reCAPTCH v3 を問い合わせフォームに実装する手順を紹介！
意外と簡単な手順だったので、実装するのもそれほど難しくないです。
このページの目次
手順１．まずサイト専用のreCAPTCHAキーを取得
それでは reCAPTCHA v3 を使える準備をしていきます。
そのために必要なのが reCAPTCHA サイトキーの取得
必ず必要なので、絶対に取得しておきましょう。
ではまず、次のページにアクセス
そして次画像のようにオプションを設定します。
- ラベル
ここは適当な名前でOK。自分のサイト名とかサービス名とか...
- reCAPTCHAタイプ
ここではストレスフリーで利用できる reCAPTCHA v3 の方を選ぶ
- ドメイン
reCAPTCHAを利用したいサイトのドメイン
あと利用規約とかに同意したら「送信」ボタンをクリック
次の画面に進むとサイトキーとシークレットキーの２種類が生成されます。
とりあえずこの２つが手に入ればOK
ちなみに次の手順で説明するように、次の場面で必要になります。
- サイトキー
問い合わせフォーム側で reCAPTCH API に送るレスポンスを生成するのに使う
- シークレットキー
サーバーサイド側で reCAPTCH API を呼び出しするのに使う
サイトキーならまだしも、シークレットキーは外部にばれるとマズいです。
手順２．フロントサイド（JS）側の実装
お次は問い合わせフォーム側での準備
今手に入れたサイトキーを使い、 reCAPTCHA を実装していきます。
その手順とかコード例は次の通り
まずサイトの head タグ内で次みたいな scriptタグ を追加
|
1 |
<script src="https://www.google.com/recaptcha/api.js?render=[YOUR_SITE_KEY]"></script> |
ただし、[YOUR_SITE_KEY] は各自の reCAPTCHA サイトキーに置き換えてください。
そうしたら、適当に問い合わせフォームとかを作ります。
▼ PHP + JavaScript で作る簡易的なフォームの作り方
もしフォームの作り方が分からない場合、上記事をご覧ください。
それで肝心なのがここから、
作成した問い合わせフォームの中で、reCAPTCH 用の隠しフィールドを作ります。
▼ 例えばこんな感じで
|
1 |
<input type="hidden" name="recaptcha_response" id="recaptchaResponse"> |
そしてこの隠しフィールド用に、次のスクリプトも追加
|
1 2 3 4 5 6 7 |
grecaptcha.ready(function () { grecaptcha.execute('[YOUR_SITE_KEY]', { action: 'contact' }) .then(function (token) { var recaptchaResp = document.getElementById('recaptchaResponse'); recaptchaResp.value = token; }); }); |
ただし [YOUR_SITE_KEY] は各自のモノに置き換えること（２回目）
何をしてるかについては、あんまり深く考える必要ないと思います。
手順３．サーバー側（PHP）での reCAPTCH の実装
最後はサーバーサイド側での reCAPTCHA の実装
ここでは次のステップを踏んで、送信がボットか人間かを判別することにします。
- reCAPTCHAレスポンスを受け取る
- レスポンスから怪しさスコアを取得
- 怪しさスコアを元にボットか判別
まあ "怪しさスコア" って自分が勝手に作った言葉なんですが・・・
この 怪しさスコア は 0 <= x <= 1 までの範囲で
0に近づくほどボットの可能性大、1に近づくほど人間の可能性大になる みたいです。
ここでは念のため 0.7 以下はボットとして扱うことにします。
▼ 具体的なPHPコード例は次の通り
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$recaptcha_response = $_POST['recaptcha_response']; $recaptcha_secret = '[YOUR_SECRET_KEY]'; $recaptch_url = 'https://www.google.com/recaptcha/api/siteverify?secret='; $recaptcha = file_get_contents( $recaptch_url.$recaptcha_secret. '&response='.$recaptcha_response ); $recaptcha = json_decode($recaptcha); print_r('$recaptcha->score : '.var_export($recaptcha->score,true)); if ($recaptcha->score >= 0.5) { // reCAPTCHA合格 } else { // reCAPTCH不合格。ボットの可能性があるので、送信しない } |
必ず [YOUR_SECRET_KEY] は各自のモノに置き換えてください（３回目）
このコードで何をしてるか簡単に説明すると、
- まず $_POST['recaptch_response'] からレスポンスを取得
- recaptch API にレスポンスを渡して結果を取得
- スコア（ $recaptch->score ）の値からボットか判別
実際にスコアを表示してみたら、大体 0.9 が返ってくるのがほとんどでした。
なのでスパムを防ぐこと重視ならスコア 0.7 以上、
少し緩い基準でもいいならスコア 0.5 以上を人間とみなすのがいいかもしれない
自分はスパムメールを徹底的に防ぎたいので、0.7以上を閾値にしてます。
reCAPTCH v3 の実装手順まとめ
ここまでの手順を箇条書きすると、こんな感じ
スパムを予防するなら、reCAPTCH の実装も大事です。ではでは($・・)/~~~
