Laravel6でreCAPTCHAを実装
LinuxCentOS7 Apache2.4 PHP7 Laravel6
「私はロボットではありません」チェックボックスを実装
1.Googleのアカウントを作成
2.reCAPTCHAのキーを生成
3.画面側にreCAPTCHAチェックボックスを設置(js、html)
4.サーバ側でreCAPTCHAと通信
1.Googleのアカウントを作成
Googleのアカウントを作っておく。メールアドレスを使うよ。xxx@gmail.com
2.reCAPTCHAのキーを生成
https://www.google.com/u/1/recaptcha/admin/create
上記ページでキーを作成。
今回は、v2のチェックボックス式で生成する。
2.α.事前準備、no-captchaインストール
4の作業のために事前準備
Laravelにno-captchaをインストール、configファイルを生成しておくこと。
$ composer require arcanedev/no-captcha
$ php artisan vendor:publish --provider="Arcanedev\NoCaptcha\NoCaptchaServiceProvider"
生成されたconfig/no-captcha.phpファイルに下記を設定
'version' => 'v2', // v3ではなく、チェックボックスを使うためv2
'lang' => 'jp', // 初期値nullなので、jpに設定
config/no-captcha.phpから参照するために、.envファイルに下記を設定
NOCAPTCHA_SITEKEY=【2で生成したサイトキー】
NOCAPTCHA_SECRET=【2で生成したシークレットキー】
php artisan config:cache もわすれずに。
3.画面側にreCAPTCHAチェックボックスを設置
フォームに reCAPTCHA を導入しよう | 2017春合宿 | ハンズオン | a-blog cms developer
上記を参考に、こんなjsとhtmlを実装
・js
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script type="text/javascript">
function validateRecaptcha ( code ) {
if ( !!code ) {
var form = document.querySelector(".recaptcha");
form.removeAttribute('disabled');
}
}
</script>
・html
<div class="g-recaptcha" data-callback="validateRecaptcha" data-sitekey="{{ config('no-captcha.sitekey') }}"></div>
4.サーバ側でreCAPTCHAと通信
Laravel で reCAPTCHA | idealive tech blog
上記を参考に、こんな実装をしていく。
・バリデーション
$request->validate([
'g-recaptcha-response' => ['required', new \Arcanedev\NoCaptcha\Rules\CaptchaRule]
], [
'g-recaptcha-response.required' => 'チェックボックスにチェックをしてください。', // 'v2のチェックボックスなら、チェックがされていないときのメッセージ',
'g-recaptcha-response.captcha' => '通信に失敗しました。もう一度お試しください。', // 'ロボットだと判断されてしまった時のメッセージ',
]);
以上。
まだちょっとお試し中でもあるけどこんな感じでできる。簡単だな!やったぜ。
※他、注意点など
・composer requireの際、PHP Fatal error: Allowed memory size~が発生
composer updateしたときのPHP Fatal error:Allowed memory size of xxx bytes exhausted - suzu6
ここを参考に、/etc/php.iniのmemory_limitを-1に設定し、念のため下記をして解決。
$ systemctl restart php-fpm
$ systemctl restart httpd
・composer requireでインストール時、バージョン自動取得できなかった…?
Installation request for laravel/framework (locked at v6.18.31, required as ^6.2) -> satisfiable by laravel/framework[v6.18.31]. のあと、
Installation failed, reverting ./composer.json to its original content. が出た。
え?インストールしたんちゃうん???となって、composer.jsonを編集。
「"arcanedev/no-captcha": "*",」として、なんでもいいから入れろとw
$ vi composer.json
$ composer update
Discovered Package: arcanedev/no-captcha
ほう?できてそう。と思い、インストールできたかを下記で確認
$ composer show | grep arcanedev/no-captcha
arcanedev/no-captcha 10.1.0 No CAPTCHA (new Google reCAPTCHA) with Laravel support
バージョンちゃうかっただけやんけ!!!!(#^ω^)
・エラーメッセージが英語
https://readouble.com/laravel/6.x/ja/auth-php.html
ここの方法でja用のlangファイルをダウンロードし、
resources/lang/ja/validation.phpを編集。下記を追加。
'captcha' => '通信に失敗しました。再度お試しください。',
・強制的にreCAPTCHAを失敗させ、ロボットと判断させる方法は?
recaptcha — テスト目的でrecaptcha v2を強制的に失敗させることは可能ですか? (つまり、ロボットのふりをする)
画面上でチェックはせず、F12してコンソールで下記jsを実行。
$('[name=g-recaptcha-response]').val('test');
reCAPTCHAの値を「test」にしている。これをこのまま送信(submit)。
(実際には、このオブジェクト(textarea)は、チェックボックスにチェックを入れた際にランダムなキーが入る場所。そのため、不正な値を入れればよいということ。)
・アクセスはしてるのにグラフに何も出ない
アクセスが少ないか、数日使わないとでないらしい…
TECHSCORE|reCAPTCHA v3 入れてみた | TECHSCORE BLOG
アクション毎のTOP10の分布も表示されるそうですが、今回対応したページが1つのためか、表示されませんでした。管理するページが増えていけば、どのアクションのページがbotによる攻撃を受けていて、閾値による判定を設定すべきなのか、といった検討の助けとなるようです。ただし、設置したreCAPTCHAの利用が少なかったり数日reCAPTCHAが利用されないと、これらのグラフは表示されないのでご注意ください。