ダークエリア

SEのお仕事の備忘録や、ゲームの話などなどを記事に放り込む!!

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が利用されないと、これらのグラフは表示されないのでご注意ください。