reCAPTCHAv3とは
簡単にまとめると数々のサイトで使用されている「私はロボットではありません」をチェックさせるアレの最新版です。
reCAPTCHAv2ではユーザがチェックを入れる必要がありましたが 今回のv3ではユーザの操作は一切必要ありません。
詳細は割愛させていただきます。以下参考にどうぞ。
https://developers.google.com/recaptcha/docs/v3
導入方法
とても簡単です。1分もかからないです。
1.以下で登録を行う(Googleアカウントが必要となります)
https://www.google.com/recaptcha/intro/v3.html
v3をチェックしてRegister→ドメインなどの入力事項を埋める
2.フロント側に処理を追加する
登録を済ませるとわかりますが、登録完了後の管理画面に
Keys
Step1
Step2
と表示してくれているので、コピーして導入したいコードの部分に貼り付け。ね！簡単でしょ。
actionに関しては公式を参考に↓
| アクション | 説明 |
|---|---|
| homepage | See a cohesive view of your traffic on the admin console while filtering scrapers. |
| login | With low scores, require 2-factor-authentication or email verification to prevent credential stuffing attacks. |
| social | Limit unanswered friend requests from abusive users and send risky comments to moderation. |
| e-commerce | Put your real sales ahead of bots and identify risky transactions. |
※アクションによって動作が変わるというより、どういう用途で使うか？と捉えた方がいいかもしれません。
(管理画面での確認しやすさのためにあると思っております)
3.サーバ側に処理を追加する
※サーバ側もやらないとreCAPTCHAの意味がないです
以下の情報を基にapiをたたきます。
URL:https://www.google.com/recaptcha/api.js?render=<サイトキー>
secret:シークレットキー
responce: Step1で取得できるtoken
apiのレスポンスとしては
success: true/false
challenge_ts: タイムスタンプ
hostname: ホスト名
score: 0~1 人間がやると0.9らしい。実際には0.90000000000000002が返ってきた
action: step1で選択したアクション
が返ってきます。
reCAPTCHAv3はこの帰ってきたscoreを基にどのような処理を行わせるかを自分で決めることができます。
例えばログイン画面にreCAPTCHAを導入した場合、スコアが低かったらエラーメッセージを表示してセッションを削除するとかロックするとか…
それぞれのサイトに合わせた動きをさせることができます。
まとめ
・reCAPTCHAv3は非常に簡単に導入できる
・どういった判定基準なのかさっぱりわからないので心配
・管理画面でスコアやアクセス数、どのreCAPTCHAを通ったか(アクションの設定が必要)がわかりやすい
以上、ありがとうございました。