この記事では、私が関わったECサイト開発の一環として、GoogleのreCAPTCHA v3を導入した実際の開発経験を基に、その背景と具体的な運用方法をシェアします。
今回のオンライン販売システムでは、ユーザーがクーポンを申請する際にボット対策としてreCAPTCHA認証を利用し、正当なユーザーかどうかを判断する仕組みを実装しました。
本文は、まずreCAPTCHA v2とv3の違いを簡単に説明し、その後、v3を選んだ理由と実際の導入方法について具体的なコード例を交えて解説します。
ECサイトでは、クーポンや特典の申請システムを狙ったボットアクセスが問題になることが多くあります。
今回のプロジェクトでも、ボットによる不正なクーポン申請が大量に発生し、存在しないメールアドレスにクーポンが送られることで、多くのバウンスメールが発生し、重要な不達通知が埋もれてしまう問題がありました。
この問題を解決するために、ユーザーがクーポンを申請する際に、Google reCAPTCHAを導入して、ユーザーが人間かボットかを判断するプロセスを追加しました。
特に、今回の導入ではreCAPTCHA v3を使用し、ユーザーの利便性を損なわずに高精度なボット判定を行うことが可能となりました。
今回のプロジェクトでは、reCAPTCHA v3を採用しました。これは、ユーザーに追加の操作を要求せずに、バックグラウンドで正確にボットを検出できるためです。
まず最初に、Google reCAPTCHA認証のコンソールサイトにアクセスし、v3の「サイトキー」と「シークレットキー」を取得していきます。
ラベル
reCAPTCHAタイプ
ドメイン
GOOGLE CLOUD PLATFORM
最後に「送信」ボタンを押下します。
以下は個人テスト用に実装したreCAPTCHA v3のコード例です。 実際のプロジェクトコードではなく、汎用的なPHP実装例に基づいて説明します。
環境
先ほど発行したサイトキーとシークレットキーを記入します。
※以下はダミーのキーを使っています。
RECAPTCHA_SITE_KEY=6LdyWDgqAAAAAAUNIUTGGTYFMiB7J4ixxxxxxxxx
RECAPTCHA_SECRET_KEY=6LdyWDgqAAAAADtOZU-Y10EhL4-2qxxxxxxxxxxx
<?php
return [
'recaptcha' => [
'site_key' => env('RECAPTCHA_SITE_KEY'),
'secret_key' => env('RECAPTCHA_SECRET_KEY'),
],
];
reCAPTCHAを設定したいビューファイルを開きます。
設定したいフォームにinputタグをいれておきます。
<input type="hidden" name="recaptchaToken" id="recaptchaToken">
JavaScriptを使って<script>タグに下記を動的に加えます。
<script>
function loadRecaptchaScript() {
const script = document.createElement('script')
script.src = `https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha.site_key') }}`
script.async = true
script.defer = true
script.onload = () => {
console.log('reCAPTCHA is loaded and ready.')
grecaptcha.ready(async () => {
const token = await grecaptcha.execute('{{ config('services.recaptcha.site_key') }}', {action: 'submit'})
document.getElementById('recaptchaToken').value = token
})
}
document.head.appendChild(script)
}
window.addEventListener('load', function () {
loadRecaptchaScript()
})
</script>
フォーム送信を処理する時に、reCAPTCHA トークンを検証するロジックを追加します。
<?php
class SubscriptionController extends Controller
{
public function store()
{
$recaptchaToken = request()->input('recaptchaToken');
$recaptchaSecret = config('services.recaptcha.secret_key');
$response = Http::asForm()->post('https://www.google.com/recaptcha/api/siteverify', [
'secret' => $recaptchaSecret,
'response' => $recaptchaToken,
'remoteip' => request()->ip(),
]);
$recaptchaData = json_decode($response->body());
if (! $recaptchaData->success || $recaptchaData->score < 0.5) {
Log::error('recaptcha error', ['recaptcha' => $response->body()]);
return redirect()->back()->withErrors(['recaptcha' => 'reCAPTCHA verification failed.']);
}
Log::info('recaptcha success', ['recaptcha' => $response->body()]);
// メールサブスクリプションのロジックを処理します
}
}
こちら、スコアが0.5以上なら「成功」となり、通常どおりの処理が行われます。
スコアが0.5より少ない場合には、「ユーザーは人間ではないのでは？」と判断され、 それ以降の処理は実行されません。
実行が成功したときのログ。
reCAPTCHA v3は、ユーザーに煩わしさを与えずに高精度なボット判定を行える非常に便利なツールです。
特に、ECサイトのように大量のアクセスが見込まれる環境では、reCAPTCHA v3を導入することで、システムの負担を減らし、正当なユーザーに優しい環境を提供することが可能になります。
同じようにボット被害に悩んでいたら、参考にしてくださいね。
最後までお読みいただきありがとうございました！