【迷惑メール対策】Google reCAPTCHA2の実装方法

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

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

【INDEX】－目次－

reCAPTCHAにサイトを登録
reCAPTCHAの読み込み
html側の実装
g-recaptcha属性
reCAPTCHAv2を使用したフォーム作成

reCAPTCHAに登録する方法

easy

【登録手順】

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

分かりやすい管理ラベル名をつけます
reCAPTCHAv2を選択し、リクエスト方法を選択します
管理しているドメインを追加します
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の設置イメージ

見たことあるやつだね

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

チェックを入れてから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/）さんより引用させていただきました。