みなさん、reCAPTCHAを使ってますか？
CAPTCHAと呼ばれる機能は問い合わせフォームやログインフォームなどいわゆるbot系対策として有効で、その中でもreCAPTCHAは無料かつ簡単に導入できるたため、様々な場所で使われてます。
2024年4月から実質有料化？
しかし、2024年4月から今まで100万リクエストまで無料だったのが、1アカウント合計1万リクエストまでに縮小され、それ以降はスコアが0.9でとして処理される感じになるようです。実はGoogle的には100万アクセスまで無料というのではなく評価枠として認めており、それ以降は有料プランでという考えのようで、それが今回の改訂でプラン追加と条件が変わったことで、影響が出ててきているようです。
| 項目 | reCAPTHA Essentials | reCAPTCHA Standard | reCAPTCHA Enterprise |
|---|---|---|---|
| 料金 | 1 か月あたり最大 10,000 件の評価まで無料* | 1 か月あたり最大 100,000 件の評価までは月額 $8、その後は 1,000 件ごとに $1 | 1 か月あたり最大 10,000 件の評価まで無料*、その後は 1,000 件ごとに $1 |
| 1 か月あたりの評価数 | 10,000 未満 | 10,000～100,000 | 無制限 |
月1万アクセスの場合だと中規模以上のサイト場合は簡単に超えてくる数字ではあるので、そのような規模を想定する場合は有料プランを検討する必要があるようです。
他にないのだろうか？
とはいえ、今まで無料だから使っていた部分を有料で使うかという話になりますので、代替するサービスを調べてみると、「Cloudflare（クラウドフレア） Turnstile」というサービスがありました。
こちらをPHPで実装していきたいと思います。
アカウントを作る
まずはcloudflareにアカウントを作る必要があります。アカウントはメールアドレスがあれば簡単に作れます。
https://www.cloudflare.com/ja-jp/products/turnstile/
サイトを見てもわかるとおり明らかにreCAPTCHAから奪い取るつもりの内容です
プランを見てみると
となっており、ウィジェットの数は最大10個となりますが、ボリュームは無制限なので複数サイトを管理するのでなければ無料プランでいけそうです。
アカウント登録を行うと、メール認証後に「Turnstile」のサイトを追加する画面が表示されます。
サイト名はユーザー側には表示されないので、管理しやすい名前にしましょう。
ドメインは今回使用するサイトのドメイン（サブドメイン）を入力してください。
ウィジェットモードですがデフォルトは管理対象でよいかと思います。
ちなみに管理対象だとreCAPTCHAでいうv2と同じ機能となります。
「不可視」はv3になるとは思いますが、デフォルトは「管理対象」なので、これが無難かなと思います。
その後クリアランスは「いいえ」でいいと思うのですが、これはなんなんだろうか･･･
作成するとreCAPTCHAと同じく「サイトキー」と「シークレットキー」が表示されますので大事に保存してください。
PHPでの実装
JavaScriptを使った実装もありますが、今回はPHPで実装をしていきます。基本的にreCAPTCHA v2の実装を踏襲しています。
まずはソース
|
1 2 3 4 5 6 7 8 9 |
<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="POST"> <div class="mb-3 form-check"> <!-- Cloudflare Turnstile --> <div class="cf-turnstile" data-sitekey="<?php echo SITE_KEY; ?>"></div> </div> <input type="hidden" name="cmd" value="post" /> <button type="submit" class="btn btn-primary">Submit</button> </form> <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?compat=recaptcha" async defer></script> |
あきらかにreCAPTCHAを意識した組み方になってますね。
|
1 2 |
<div class="cf-turnstile" data-sitekey="<?php echo SITE_KEY; ?>"></div> <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?compat=recaptcha" async defer></script> |
上記のようにサイトキーをdata-sitekeyに渡してやると勝手に表示されます。
次にサーバーサイドです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
// パラメータはreCAPCHAと同じ $responseKey = $_POSTS['g-recaptcha-response'] ?? ""; // reCAPTCHA の検証 $url = sprintf("https://challenges.cloudflare.com/turnstile/v0/siteverify"); // POSTリクエストで送信するデータを準備します。 $data = array( 'secret' => SECRET_KEY, 'response' => $responseKey ); // curlセッションを初期化します。 $ch = curl_init($url); // POSTリクエストの設定を行います。 curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data)); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); // POSTリクエストを実行し、レスポンスを取得します。 $response = curl_exec($ch); // curlセッションをクローズします。 curl_close($ch); // 取得したレスポンスをJSON形式からPHPのオブジェクトにデコードします。 $response = json_decode($response); // reCAPTCHA の検証結果をチェック if($response->success) { // 正しい reCAPTCHA レスポンスが得られた場合の処理 } else { // 不正な reCAPTCHA レスポンスの場合の処理 } |
なんとreCAPTCHAと全く同じパラメータ名です･･･
しかし、reCAPTCHAはURLパラメータによるGET形式で渡してましたが、TurnstileはPOST形式で渡す必要があるので、curlで渡しています。
レスポンスもreCAPTCHAのv2と同じなので、reCAPTCHA v2とのマイグレーションは簡単にできるかと思います。
一応レスポンスの戻り値は
|
1 2 3 4 5 6 7 |
curl 'https://challenges.cloudflare.com/turnstile/v0/siteverify' --data 'secret=verysecret&response=<RESPONSE>' { "success": true, "error-codes": [], "challenge_ts": "2022-10-06T00:07:23.274Z", "hostname": "example.com" } |
ですのでエラー時の処理を細かく入れたい場合は使ってみてください
最後に
実装自体は簡単なので、技術的・コスト的にはreCAPTCHAの代替サービスとしては使えると思いますが、すでにreCAPTCHAのネームバリューが大きいため、既存のreCAPTCHAで問題ないのであれば今のままでもいいかもしれないです。ただ、選択肢が増えるという意味ではよいかと思いますので、変な改悪をせずに安全なサービスを提供してほしいですね。
