Laravel7 reCAPTCHA実装方法

artisanでインストールする方法もあるけど、vendor配下に大量のファイルが追加されるし、いちいちartisanを使わず実装したい方向け。

reCAPTCHAに必要な情報をconst.phpに定義

reCAPTCHA APIURL、サイトキー、シークレットキーをconfig/const.phpに定義

    'RECAPTCHA' => array(
        'API_URL' => 'https://www.google.com/recaptcha/api/siteverify',
        'SITE_KEY' => 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
        'SECRET_KEY' => 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    ),

view側

submitするフォーム内にcontroller側でチェックする為のg-recaptcha-responseデータを置く

    <form method="POST" action="{{ route('xxxx') }}" id="form">
                ・
                ・
                ・
        <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
        <input type="submit" value="送信する" role="button" id="form_btn">
    </form>

「送信する」ボタンが押されたら発火するJavaScriptを追加

	<script src="https://www.google.com/recaptcha/api.js?hl=jp&render={{ config('const.RECAPTCHA.SITE_KEY') }}"></script>
	<script>
		$(function () {
			$('#form_btn').on('click',function (e){
				if(confirm('送信してもよろしいですか?')){
					e.preventDefault();
					grecaptcha.ready(function() {
						grecaptcha.execute('{{ config('const.RECAPTCHA.SITE_KEY') }}', {action: 'homepage'}).then(function(token) {
							$('#g-recaptcha-response').val(token);
							$('#form').submit();
						});
					});    
				}
			});
		});
	</script>

controller側

controller側でもチェックする為、「送信する」ボタン押下後のメソッドに追記

    public function thanks(ContactRequest $request)
    {
            ・
            ・
            ・
        // reCAPTCHAチェック
        $url = config('const.RECAPTCHA.API_URL');
        $secret = config('const.RECAPTCHA.SECRET_KEY');
        $recaptcha = $request->input('g-recaptcha-response');

        $verifyResponse = @file_get_contents($url.'?secret='.$secret.'&response='.$recaptcha);
        $reCAPTCHA = json_decode($verifyResponse);

        if(!$reCAPTCHA->success) abort(404);

        // reCAPTCHA通過後の処理
            ・
            ・
            ・
    }

以上で完了!!

reCAPTCHA v3だと、「私はロボットではありません」チェックボックスや読みにくい文字の入力とかしないし、人間がアクセスした時は正常にpost出来るので、robotがアクセスした時には、どんな処理になるのか、本当に正しく対処してくれているのかが気になったけど、reCAPTCHAを実装するまでは毎分お問い合わせされてたのが止まったので上手にやってくれているんだと思う。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です