Google reCAPTCHA V3を導入する

reCAPTCHA フォーム

PHPメールフォームの場合です。

1. シークレットキー・サイトキーを発行する

Google reCAPTCHAの管理画面でドメインを指定し、 シークレットキーとサイトキーを発行します。

reCAPTCHA管理画面

reCAPTCHAタイプはV2かV3のどちらかを選択します。
V2はユーザによる写真選択等のアクションが必要なのに対し、V3方式はユーザが何も選択する必要はなく全自動でgoogleが不正判断します。

個人的にはセキュリティ性が高く、ユーザにも負担がないためV3の方がオススメです。

シークレットキーとサイトキーが発行できました。ウインドウを開いたままにしておくか、どこかにコピペしておきましょう。

2. フォームの入力画面にコードを追加する

フォームの入力画面にHTMLタグとjavascriptの記述を追加します。

HTML

<form>〜</form>の間に一行追加します。
照合のためにトークンを埋め込んで、hidden(非表示)で送信する用です。

<input type="hidden" name="recaptchaToken" id="recaptchaToken">

JavaScript

JavaScriptファイルの読み込みと、ちょっとした処理を書きます。【サイトキー】の箇所には先程取得したサイトキーを、【フォームID】にはformタグに設定したIDを書きます。

こちらは送信ボタンが押されたときの動作に関する処理です。送信ボタンが押されたらフォーム項目にトークンを埋め込んで送信します。

<script src="https://www.google.com/recaptcha/api.js?render=【サイトキー】" defer></script>
<script>
document.getElementById('【SUBMITボタンのID】').addEventListener('submit', onSubmit);
function onSubmit(e) 
{
  e.preventDefault();
  grecaptcha.ready(function() 
  {
    grecaptcha.execute('【サイトキー】', {action: 'submit'}).then(function(token)
    {
      // Add your logic to submit to your backend server here.
      var recaptchaToken = document.getElementById('recaptchaToken');
      recaptchaToken.value = token;
      document.getElementById('【フォームのID】').submit();
    });
  });
}
</script>

3. フォームの実行ファイルに処理を追加する

フォームの送信プログラム側にチェック処理を追加します。不正投稿かどうかをgoogleのプログラムを利用して判断します。googleのプログラムではOKかNGかだけしか分からないので、その後の処理は自分で書く必要があります。

【シークレットキー】 には取得したシークレットキーを書いてください。

<?php

$RECAPTUER = "【シークレットキー】";

if (isset($_REQUEST["recaptchaToken"]) == true)
{
  $token = $_REQUEST["recaptchaToken"];
  if (token_chk($token) == true)
  {
    /* トークンチェックOKのときの処理 */
  }
  else
  {
    /* トークンチェックNGのときの処理 */
  }
}

function token_chk($token)
{
  global $RECAPTUER;
  $sts = false;
  $result = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=${RECAPTUER}&response=${token}");
  $chk = json_decode($result);
  if ($chk->success == true)
  {
    $sts = true;
  }
  return $sts;
}

成功するとフォームの右下にバナーが出現します。フッターやPageTopボタンと被る事があるので、その際はCSSで調整しましょう。ホバーするとニョキッとでてきて中々うざいです。

タイトルとURLをコピーしました