reCAPTCHAとは
reCAPTCHA(リキャプチャ)とは、CAPTCHAと呼ばれる
ボットの攻撃からWebサイトを守る機能の一種。
CAPTCHAとは「completely automated public Turing test to tell computers and humans apart 」の略で、人間とコンピュータを区別するためのテストというような意味を持つ。
具体的な方法としては、下の画像のように崩れた文字を認識させたり、あてはまる画像を選択させたりする。
2021年2月現在、reCAPTCHAはv1(提供停止)、v2、v3まで開発されてGoogleが提供している。
reCAPTCHAについて詳しく書かれた記事はこちら
→ 「reCAPTCHA」って?スパム対策に効果的なreCAPTCHAをフォームに入れてみた
reCAPTCHA v2 導入手順
クライアント側につける「サイトキー」とサーバー側につける「シークレットキー」によって機能をつけることができる。メール送信フォームを参考に、鍵を作成→クライアント側(HTMLとjQuery)を記述→サーバー側(PHP)を記述という流れで実装する。
-
Google reCAPTCHA にアクセス
-
サイトキーとシークレットキーが表示されるので、閉じずにそのままにしておく。
-
HTMLでメール送信フォームを作り、サーバー側でreCAPCHAのデータをチェックする
<html>
<head>
<!-- reCAPTCHAapi読み込み -->
<script src='https://www.google.com/recaptcha/api.js'></script>
<!-- jQuery読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form id="form" method="post">
<div>
<label for="name">名前</label>
<input type="text" id="name">
</div>
<div>
<label for="email">メールアドレス</label>
<input type="email" id="email">
</div>
<div>
<label for="body">本文</label>
<textarea id="body"></textarea>
</div>
<!-- formタグの内側でreCAPTHA登場場所を記述 サイトキーを入れる-->
<div class="g-recaptcha" data-callback="onSubmit" data-sitekey=""></div>
<!-- 送信ボタンのデフォルトをdisaledにする -->
<button type="submit" class="submit-button" disabled>送信</button>
</form>
<script>
function onSubmit(recaptcha) {
if (recaptcha !== ''){
// reCAPTHAによるチェックをしたあとは送信ボタンを押せるようにする
$('.submit-button').removeAttr('disabled');
}
}
</script>
</body>
</html>
// メール送信処理の中で
$recaptcha = h($this->request->data['g-recaptcha-response']);
if (isset($recaptcha)) {
$captcha = $recaptcha;
} else {
$captcha = '';
}
// シークレットキーを入れる
$secretKey = "";
$resp = @file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secretKey}&response={$captcha}");
$resp_result = json_decode($resp,true);
if(intval($resp_result["success"]) !== 1) {
// reCAPTCHA承認失敗時の処理
} else {
// reCAPTCHA承認成功時の処理
}
ただし日々のコンピュータの進化は早く、これらを突破するソフトウェアやreCAPCHTAの脆弱性についてもすでにいくつか報告されている。
コンピュータと人を見分けるテスト。熱い戦いが続きそう。