はじめに

業務でGoogle reCAPTCHAを触る機会があったので備忘録としてまとめておきます。

Google reCAPTCHAとは

Google reCAPTCHAはbotによるwebフォームへの悪質なアクセスを防ぐ機能です。Googleが無償で提供しているのもあり、色々なサイトで見かけます。

2022年5月4日現在ではVersion3まで出ており、それぞれの特徴は以下のようになっています。

v1
機械では読みにくい文字列を並べてユーザに入力してもらう。
v2
チェックボックスをクリックし、怪しそうな場合は写真を表示して「信号機」をクリックしてください、のように試される。
v3
ユーザのサイト操作を監視し、機械学習によってbotかどうか判定
ユーザがreCAPTCHAに対して何かしらやる必要がなくなった。

v2まではユーザの入力する手間が増え、セキュリティ的には便利であるもののユーザーフレンドリーではないと言われ続けてきました。

v2を実装してみた（フロント側のみ）

備忘録として軽く実装もしておきましょう。
最近だとv3が主流ですが、とりあえずv2を実装してみました。

以下は手順です。

１. reCAPTCHAへの登録とサイトキー, 秘密キーの取得
Google reCAPTCHA の使い方（v2/v3）

２. formタグ内へreCAPTCHA生成のhtmlを入れる（1で取得したサイトキーをdata-sitekey属性へ追加）

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="サイトキー"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>