スパムメールを撃退!CAPTCHA認証システムを導入しよう

問合せフォームの迷惑メール対策-Google reCAPTCHAv2の実装方法-

Planet20xxバナー

問い合わせフォーム経由で送られてくる迷惑メールは、特定のドメイン拒否をしてもあまり効果がありません。そこでスパムメール対策として、今回はGoogleが提供している認証システムreCAPTCHAv2(リキャプチャ)の導入を紹介します。

reCAPTCHAv2は1秒間に1000回(1ヶ月に100万回)まで無料で利用できるので、これからの方におススメです( ´ ▽ ` )ノ。

reCAPTCHAに登録する方法

easy
迷惑メール対策に有効なreCAPTCHAの登録画面

【登録手順】

※グーグルアカウントが必要です

  1. 分かりやすい管理ラベル名をつけます
  2. reCAPTCHAv2を選択し、リクエスト方法を選択します
  3. 管理しているドメインを追加します
  4. reCAPTCHA利用条件に同意するにチェックします

全て確認して、送信ボタンをクリックするとキーが作成されます。

【リンク】:Goolge reCAPTCHA

サイトキーが付与されます。サイトキーは管理画面からいつでも確認することができます。

reCAPTCHAの登録をすると、サイトキーとシークレットキーが付与されます。キーはreCAPTCHAの管理画面からいつでも確認することができます。

reCAPTCHAの読み込み

<script src="https://www.google.com/recaptcha/api.js?hl=ja" async="async" defer="defer"></script>

FIDを意識して、JavaScript APIの読み込みは</body>の直前で読み込みます

reCAPTCHAv2の設置イメージ

reCAPTCHAv2のウィジェット設置イメージ
迷宮組曲のミロン
見たことあるやつだね

このページではウィジェットと送信ボタンを表示し、「わたしはロボットではありません」のチェックボックスにチェックを入れ、成功すると送信ボタンが有効になり送信できるようにします。

チェックを入れてから2分が経過すると期限切れになるので、その場合は「送信するにはチェックを入れてください」を再表示して送信ボタンを無効にするよう記述します。

HTML側の実装

<div class="g-recaptcha" data-sitekey="サイトキー" data-callback="verifyCallback" data-expired-callback="expiredCallback"></div>
<p id="warning">※記入した内容を確認の上、チェックをしてください。</p>
<button id="send" type="submit" disabled>送信</button>

div要素のクラスにg-recaptchaを指定し、属性を設定します。

ロードランナーが解説します
下に詳しく書いたよ

g-recaptcha属性

属性説明
data-sitekey取得したサイトキーを記述します
data-themeウィジェットのテーマ(light/dark)を指定。初期値:light
data-callbackウィジェットにチェックを入れて、成功した場合に呼び出されるコールバック関数。パラメータ response に g-recaptcha-response の値 を受け取る
data-expired-callbackチェックを入れた後、2分間経過すると呼び出されるコールバック関数
data-error-callbackエラーが発生した場合、呼び出されるコールバック関数
data-sizeウィジェットのサイズ(compact/normal)を指定。初期値:normal
data-tabindexウィジェットやチャレンジ画像のtabindexの値を指定。初期値:0

reCAPTCHAv2を使用した問い合わせフォーム

サンプル
<html lang="ja">
<head>
<title>g-recaptcha タグを使って表示</title>
</head>
<body>
  <h1>問い合わせフォーム</h1>
  //action属性には、データの送信先を定義します
  <form method="post" action="?">
    <div class="g-recaptcha" data-sitekey="サイトキー" data-callback="verifyCallback" data-expired-callback="expiredCallback"></div>
    <p id="warning">※記入した内容を確認の上、チェックをしてください。</p>
    <button id="send" type="submit" disabled>送信</button>
  </form>
  <script> 
  var verifyCallback = function(response) { //コールバック関数の定義
    //#warning の p 要素のテキストを空にする
    document.getElementById("warning").textContent = '';
    //#send の button 要素の disabled 属性を解除し、送信ボタンを有効にします
    document.getElementById("send").disabled = false;
  };
  var expiredCallback = function() { //コールバック関数の定義
    //#warning の p 要素のテキストに文字列を設定
    document.getElementById("warning").textContent = '※記入した内容を確認の上、チェックをしてください。'
    //#send の button 要素に disabled 属性を設定
    document.getElementById("send").disabled = true;
  };
  </script>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</body>
</html>
※action属性には送信先を指定してください。
※Web Design Leaves(https://www.webdesignleaves.com/)さんより引用させていただきました。
  1. data-sitekey 属性:取得したサイトキー
  2. data-callback 属性:チェックを入れて成功した場合に呼び出されるコールバック関数
  3. data-expired-callback 属性:チェックを入れた後に2分経過した場合に呼び出されるコールバック関数

「verifyCallback」は、ユーザーがウィジェットにチェックをいれて成功した場合に呼び出されるコールバック関数の定義です。

id属性「warning」のp要素のテキストを空にし、送信ボタンのdisabled属性をfalseにすることで送信できるようになります。

「expiredCallback」は、チェックを入れてから2分経過した場合に呼び出されるコールバック関数の定義です。テキストを表示して、disabled属性をtrueにし、再び送信ボタンを無効にします。

※コールバック関数の定義は、APIの読み込みより前に記述します。

まとめ

reCAPTCHAv2をローカルホストでテストする場合、「127.0.0.1」をreCAPTCHAv2のドメインに追加することで実装テストができます。

reCAPTCHA → Admin Console → 設定(歯車) → ドメイン

reCAPTCHAをhtml側に実装すると迷惑メールがだいぶ減るかと思いますが、続いてサーバ側でレスポンスがユーザにより生成されたものかを検証する必要があります。続きは後日…。

以上reCAPTCHAv2のhtml側の実装の解説でした( ´ ▽ ` )ノ。

【関連記事】

PC(HP)
画像の最適化手順を説明したページへのリンク画像

画像を軽くする最適化はお済みですか?

画像にはいろいろな情報が入っています。ムダな部分を削除して容量を小さくしましょう。

PC(html/Javascript)
スマホでの画像遅延読み込みイメージイラスト

表示スピードアップ!画像遅延読み込み実装

PagespeedInsightのスコア改善に役立つ画像遅延読み込みの実装方法についてわかりやすく解説します

PC(Javascript)
CDNとサーバー読み込みのイメージ画像

CDNとレンタルサーバーのjsファイル読み込み比較

jsファイルを利用できるCDNのパフォーマンスと稼働時間を調べてみました。

PC(html)
DNSプリフェッチでリレーションしているイメージ画像

GoogleAdsense広告を速く表示する

DNSプリフェッチで5つの参照先を事前リレーションするだけで、すばやく表示されます

PC(html/CSS)
ソースコードのハイライト表示のやり方を説明したページへのリンク画像

ソースコードのハイライト表示のやり方

負担が少ない軽量ライブラリを使用して、ハイライト表示する方法を解説。

PC(Windows)

WindowsでもHelveticaフォントを使いたい!Arialじゃ満足できない方必見

PC(HP)
Googleアナリティクスで特定のIP除外する方法

Googleアナリティクスで特定のIPアドレスを除外する方法

自分アクセスによる訪問カウントを取得しないための設定

TOP