Laravel5.7でreCAPTCHAを導入してみる #Laravel

需要があるのでreCAPTCHAを導入法を調べました。

参考サイトはこちら。ほぼまんまです。すみません。

準備

Laravelのインストール

割愛してもいいですが、一応。

composer create-project laravel/laravel recap

reCAPTCHA簡易導入パッケージを入れる

anhskohbo/no-captchaってやつをみんな使ってるようです。
本家サイトに詳しい導入の方法があります。

composer require anhskohbo/no-captcha

configファイルの生成

設定ファイルをPublishします。config/captcha.phpが出力されます。

php artisan vendor:publish --provider="Anhskohbo\NoCaptcha\NoCaptchaServiceProvider"

reCAPTCHAサイトでのキー取得と.envの設定

Googleサイトで取得します。
Domainはテスト用のドメイン（localhost）と本番用（あれば）を追記しておけばいいでしょう（1ドメイン1行）。

取得したSite KeyとSecret Keyを登録します。
キーの名前はcaptcha.phpで定義されているので、それに合わせます。

NOCAPTCHA_SITEKEY=xxxxxxxxxxxxxxx
NOCAPTCHA_SECRET=xxxxxxxxxxxxxxx

実装

Router

必要なルートは２つ。reCAPTCHAを表示するページ（recaptcha）とバリデーションするページ（store)。

Route::get('recaptcha', 'RecaptchaController@create');
Route::post('store', 'RecaptchaController@store');

Controller

Controllerは新規に作成。

php artisan make:Controller RecaptchaController

ルートに対応する機能を実装します。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class RecaptchaController extends Controller
{

    //画面表示
    public function create()
    {
        return view('recaptchacreate');
    }

　　　　　　　　//バリデーション
    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required',
            'email' => 'required|email',
            'password' => 'required|min:6',
            'g-recaptcha-response' => 'required|captcha', //reCAPTCHA評価
        ]);

        return "success";
    }
}

View

以下の2つを追加することで機能します。

標準の初期化コード

 {!! NoCaptcha::renderJs() !!}

標準のreCAPTCHA表示コード

{!! NoCaptcha::display() !!}

コード全体。name, email, password, recaptchaの全部が必須要件。

resources/view/recaptcha.blace.php

<html lang="ja">

<head>
    <title>reCAPTCHA in Laravel</title>
    <link rel="stylesheet" href="{{asset('css/app.css')}}">
</head>

<body>
    <div class="container">
        <h2 class="mt-5 text-center">reCAPTCHA in Laravel</h2><br />
        @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div><br/>
        @endif
        <form method="post" action="{{url('store')}}">
            @csrf
            <div class="row">
                <div class="col-md-4"></div>
                <div class="form-group col-md-4">
                    <label for="Name">Name:</label>
                    <input type="text" class="form-control" name="name">
                </div>
            </div>
            <div class="row">
                <div class="col-md-4"></div>
                <div class="form-group col-md-4">
                    <label for="Email">Email:</label>
                    <input type="text" class="form-control" name="email">
                </div>
            </div>
            <div class="row">
                <div class="col-md-4"></div>
                <div class="form-group col-md-4">
                    <label for="Password">Password:</label>
                    <input type="password" class="form-control" name="password">
                </div>
            </div>
            <div class="row">
                <div class="col-md-4"></div>
                <div class="form-group col-md-4">
                    <label for="ReCaptcha">Recaptcha:</label>
                    {!! NoCaptcha::renderJs() !!}
                    {!! NoCaptcha::display() !!}
                </div>
            </div>
            <div class="row">
                <div class="col-md-4"></div>
                <div class="form-group col-md-4">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </form>
    </div>
    <script src="{{asset('js/app.js')}}"></script>
</body>
</html>

テスト

では試してみます。

php artisan serve

何も入力・選択せずにSubmitとするとreCAPTCHA含めたエラーとなる（もちろんreCAPTCHAのみでもエラー）。