仕事で「reCAPTCHA v3」導入する機会がありましたので、
最新流行っている？reCAPTCHAについて記載していきたいと思います。
まず「reCAPTCHA」とは？
みなさんご存知かと思いますが、アクセスを試みるボットからサイトを防御するためのシステムですね。
よく検索など行っていたら
・○○の写真を選んでください
・文字を入力してください
など表示されることがあると思いますが、まさにそれです。
今回は「v3」ということで設定を行うと自動で判定してくれbotの可能性を数値でレスポンスを返してくれます。
では、設定方法です。
（※アカウントがある前提です）
[設定側]
Ｇｏｏｇｌｅのコンソールにログインする。
（ログイン方法はいろいろあると思います。）
導入した際は「https://www.google.com/recaptcha/」からアクセスを行い
右上の「Admin console」ボタンよりログインが可能なのでログインをしました。
ログイン後、reCAPTCHAに必要な設定を行います。
設定を行うと[サイトキー]と[シークレットキー]が発行されます。
こちら組み込み時に必要なのでメモしておきましょう。
Ｇｏｏｇｌｅ側の設定は以上です。
[プログラム側]
対象画面のHTMLに下記を記載する。
◆下記を読み込む
https://www.google.com/recaptcha/api.js?render=[サイトキー]
◆実行処理に下記を埋め込む
grecaptcha.ready(function() {
grecaptcha.execute([サイトキー], { action: ‘homepage’ }).then(function (token) {
…（処理内容）
});
});
[…]の部分にtokenをPOSTできるようにformにセットする処理とsubmit処理を記載する。
下記一例
$(‘#TokenKey’).val(token);
$(‘#BtnSubmit’).click();
———————-
actionは下記の種類があり、ベースはhomepageでいいかと思います。
*homepage
スクレイパーをフィルタリングする際に、管理コンソールでトラフィックの一貫したビューを表示する。
*login
スコアが低い場合、攻撃を防ぐために2つの要素認証または電子メールの検証が必要とする。
*social
悪意のあるユーザーからの未解決の友だちリクエストを制限し、危険であるコメントを送る。
*e-commerce
正式な取引する前に判断することで、危険な取引を特定する。
———————-
POST値でサーバーサイドで下記APIを実行しレスポンスを受ける。
（実行処理はプログラムによりけりなので略）
https://www.google.com/recaptcha/api/siteverify?secret=[シークレットキー]&response=[ＰＯＳＴされたtoken]
レスポンス内容は下記になっている。
{
‘success’: true|false, // whether this request was a valid reCAPTCHA token for your site
‘score’: number // the score for this request (0.0 – 1.0)
‘action’: string // the action name for this request (important to verify)
‘challenge_ts’: timestamp, // timestamp of the challenge load (ISO format yyyy-MM-dd’T’HH:mm:ssZZ)
‘hostname’: string, // the hostname of the site where the reCAPTCHA was solved
‘error-codes’: […] // optional
}
score値でbot判定を行う。
数値によって処理させるかさせないかロジック側で処理を分岐する。
どうやってbotか人間かを数値化して判定しているんですかね。
通常の操作で人間が行うとだいたい0.9が返ってきていました。
（数値は0.0～1.0で0.0に近づくとbotの可能性大という判定です。）
以上、reCAPTCHA v3の導入までの流れでした。