手動でGoogle reCAPTCHAを設定する

Google reCAPTCHAの設定方法について書きます。

WordPressのプラグイン「Contact Form 7」「MW WP Form」を使ってお問い合わせフォームを作った場合は、reCAPTHAの設定は簡単です。

これは各プラグインがreCAPTHAのサイトキーとシークレットキーを入力すれば利用できるように設定してくれるからです。

しかし、プラグインを使わずにお問合せフォームを作った場合は、reCAPTCHAの全ての設定を自分で対応しなければならず、けっこう大変です。

今回はreCAPTCHA v3の設定について記事にします。

サイトキーとシークレットキーを取得する

reCAPTHAの登録方法は割愛します。

公式サイトからがんばって登録してください。

https://www.google.com/recaptcha/about/

ネットで検索するとたくさんヒットするのでそちらで対応してください。

ウェブサイトへ設定するのに必要な情報は、WordPressの各プラグインで設定する時と同じくサイトキーシークレットキーです。

設定したコード一覧

とりあえず設定したコードを載せておきます。

PHP部分。ページの先頭に記載した方が良いです。
「ここにシークレットキーを記載」の部分にシークレットキーを記載します。

<?php
/* ----------------------------------------
サーバ側にAPIリクエストを送り、受け取る
----------------------------------------- */ 
// サーバー側のkey
$secretKey =  'ここにシークレットキーを記載';
// トークン
$captchaResponse = $_POST['g-recaptcha-response'];

// サーバ側にAPIリクエスト
// keyとトークンが必須
// file_get_contentsはファイルの内容を全て文字列に読み込む関数
$verifyResponse = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secretKey}&response={$captchaResponse}");

// APIレスポンス応答
// JSONオブジェクトで受け取る
// json_decodeはJSONエンコードされた文字列を受け取り、それをPHPの値に変換
$responseData = json_decode($verifyResponse);
if ($responseData->success) {
  // 成功のメッセージを入れる
  $complete_message = '<strong id="okmessage">お問い合わせありがとうございます。</strong><br>メッセージが送信されました。'; 
} else {
  // 失敗のメッセージを入れる
  $complete_message = 'メッセージの送信に失敗しました。<br>後でまたお試しください。';
}

?>

HTML部分 送信ボタンに追記します。
「ここにサイトキーを記載する」の部分にサイトキーを記載します。

<form class="c-form" id="c-form" action="" method="post">

---- 省略 -----

<!-- 送信ボタン  -->
<input class="c-btn01 g-recaptcha" id="form-submit" type="button" name="form-submit"
      data-sitekey="ここにサイトキーを記載する" data-callback='onSubmit' data-action='submit' value="送信">

</form>

JavaScript部分 recaptchaファイルの読み込み、トークン、サブミット時に処理を記載

<!-- reCAPTCHA -->
<script src="https://www.google.com/recaptcha/api.js"></script>
<script src="https://www.google.com/recaptcha/api.js?render=ここにサイトキーを記載する"></script>
<script>
function onClick(e) {
  e.preventDefault();
  grecaptcha.ready(function() {
    grecaptcha.execute('ここにサイトキーを記載する', {
      action: 'submit'
    }).then(function(token) {
      // Add your logic to submit to your backend server here.
    });
  });
}

// submit 
function onSubmit(token) {
  //フォームの要素を取得
  const form = document.getElementById("c-form");
  // form.submit()だとHTML5のバリデーションが効かない
  // reportValidity()・・・子コントロールが制約検証を満たしているか判定
  if (!(form).reportValidity()) {
    // 満たしていなければ終了
    return false;
  } else {
    // 満たしていたら処理
    form.submit();
  }
}

</script>

外部ファイルの読み込みやサイトキーの設定

ほとんどは公式サイトに書いてあるコードを貼り付ければOKです。英語ですが日本語翻訳すれば理解できると思います。

サイトキーの設定までは問題なく設定できると思います。

https://developers.google.com/recaptcha/docs/v3

サーバー側の設定

サーバー側の設定については、公式サイトの説明を見ても分かりませんでした。

https://developers.google.com/recaptcha/docs/verify

よってこちらの記事を参考にしました。見出し「PHPの設定をする」の部分です。

サーバー側の設定です。上記のPHP部分になります。

<?php
/* ----------------------------------------
サーバ側にAPIリクエストを送り、受け取る
----------------------------------------- */ 
// サーバー側のkey
$secretKey =  'ここにシークレットキーを記載';
// トークン
$captchaResponse = $_POST['g-recaptcha-response'];

// サーバ側にAPIリクエスト
// keyとトークンが必須
// file_get_contentsはファイルの内容を全て文字列に読み込む関数
$verifyResponse = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secretKey}&response={$captchaResponse}");

// APIレスポンス応答
// JSONオブジェクトで受け取る
// json_decodeはJSONエンコードされた文字列を受け取り、それをPHPの値に変換
$responseData = json_decode($verifyResponse);
if ($responseData->success) {
  // 成功のメッセージを入れる
  $complete_message = '<strong id="okmessage">お問い合わせありがとうございます。</strong><br>メッセージが送信されました。'; 
} else {
  // 失敗のメッセージを入れる
  $complete_message = 'メッセージの送信に失敗しました。<br>後でまたお試しください。';
}

?>

サーバー側の設定でやっていることは以下の通りです。

  1. トークンを取得
  2. APIをリクエスト
    APIリクエストにはシークレットキー(secret)、トークン(response)が必須
  3. 認証の結果を受け取る
    結果はJSONオブジェクトで受け取る
  4. 受け取ったJSONオブジェクトのsuccessキーの値がtrueだったら処理成功、falseだったら処理失敗

上記4.のJSONオブジェクトはsuccessキー以外にもいくつかあり、その中にscoreキーがあります。scoreキーはGoogle側で0.0(不正なデータ)~1.0(安全なデータ)までスコアを付けています。追加でscoreキーの数値を条件として追加すると、より精度の高いスパム対策になるでしょう。

今回はscoreキー利用しませんでしたが、スパムが送られてくるようであれば利用を検討します。

submit()メソッドはHTML5のバリデーションが効かない

あと1つポイントがあります。

<script>
   function onSubmit(token) {
     document.getElementById("demo-form").submit();
   }
 </script>

公式サイトを見ながら設定しましたが、HTML5のバリデーションが効きませんでした。submit()メソッドが原因みたいです。

よってコードをひと手間くわえました。

function onSubmit(token) {
  //フォームの要素を取得
  const form = document.getElementById("c-form");
  // form.submit()だとHTML5のバリデーションが効かない
  // reportValidity()・・・子コントロールが制約検証を満たしているか判定
  if (!(form).reportValidity()) {
    // 満たしていなければ終了
    return false;
  } else {
    // 満たしていたら処理
    form.submit();
  }
}

まとめ

正直めんどうです。一応設定しましたが、本当に効いているのか、まだ確認できていません。

もしGoogle reCAPTCHAを設定できるツールがあれば、それを利用することをおすすめします。

facebook
twitter
line
hatena
pocket
TOP