このサイトのお問い合わせページのスパム対策にGoogle reCAPTCHA v3を導入してみました。

Google reCAPTCHAとは

そもそも、

CAPTCHAとは？

CAPTCHA（キャプチャ）は チャレンジ/レスポンス型テストの一種で、応答者がコンピュータでないことを確認するために使われる。

ウィキペディアにおいても、ログインしていない状態のユーザ(IPユーザー)が外部リンクを追加する際、スパム (メール)の防止のためこの種の認証が用いられる。 外部リンクを追加しない場合にも濫用される。

この用語はカーネギーメロン大学のルイス・フォン・アン、マヌエル・ブラム、ニコラス・J・ホッパー、IBMのジョン・ラングフォードによって2000年に造られた。 CAPTCHA という語は「completely automated public Turing test to tell computers and humans apart」（コンピュータと人間を区別する完全に自動化された公開チューリングテスト）のバクロニムである。

認知ソフトウェアに対抗するために難化が繰り返された結果、既に人間の認識が困難になるほど難化しており、本来の目的を果たせていない場合がある。CAPTCHA

では、

Google reCAPTCHAとは？

reCAPTCHA（リキャプチャ）とは、ウェブサイトの制限エリアへのアクセスを試みるボットからサイトを防御するためCAPTCHAを利用するのと同時に、そのCAPTCHAに対する返答を紙の本のデジタル化に活かすシステムである。 オリジナルは2007年にカーネギーメロン大学ピッツバーグ本校にて開発された。 2009年9月16日にGoogleはこのテクノロジーを買い取っている。reCAPTCHA

Google reCAPTCHAにサイトを登録

まず、Google reCAPTCHAのページにアクセスし、「Admin console」をクリックして、サイトの登録画面へ。

「ラベル」にサイトを識別するためのラベル（名前）を入力し、「reCAPTCHAタイプ」は、今回は「reCAPTCHA v3」を選択、「ドメイン」に、今回reCAPTCHAを設定するドメイン名を入力します。 「reCAPTCHA利用条件に同意する」にチェックを入れ、「送信」をクリックし、次の画面でサイトキーとシークレットキーの２種類のキーを取得し、メモしておきます。

実装

フォームを修正

JavaScriptを追加

お問い合わせフォームのページに下記のJavaScriptファイルを読み込ませます。

【】内の値は、先ほど取得した指定された値に置き換えます。

*.html

<script src="https://www.google.com/recaptcha/api.js?render=【サイトキー】"></script>
<script>
grecaptcha.ready(() => {
  grecaptcha.execute(
    '【サイトキー】',
    {
      action: 'homepage'
    }
  ).then((token) => {
    var recaptchaResponse = document.getElementById('recaptchaResponse');
    recaptchaResponse.value = token;
  });
});
</script>

上記のコードを挿入する場所は特に決まりごとは無いようだけど、</body>の直前に挿入するのが良いと思います。

form内にinput要素を追加

下記の１行を<form>要素内に追加します。

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

ここまでで、フロント側での設定は完了です。

フォーム送信後の処理

お問い合わせフォームの送信内容を受け取る、サーバ側のファイル（今回はPHP）に下記のコードを追加します。

【】内の値は、先ほど取得した指定された値に置き換えます。

*.php

if( isset($_POST['recaptchaResponse']) && !empty($_POST['recaptchaResponse'])){
  $url = 'https://www.google.com/recaptcha/api/siteverify';
  $secret = '【シークレットキー】';
  $verifyResponse = file_get_contents( $url .'?secret='. $secret .'&response='. $_POST['recaptchaResponse']);
  $reCAPTCHA = json_decode($verifyResponse);
  if($reCAPTCHA->success){
    ...
    // メール送信処理など
  }else{
    ...
    // エラー処理など
  }
}

ここまでで、サーバ側の設定も完了です。

あとは、スパムメールが来ないことを祈るだけ。