Laravel 5 表单中如何集成使用 Google reCAPTCHA 验证码


1、简介

有时候我们需要在表单提交时使用验证码以防止灌水、机器人等恶意操作,关于验证码有很多开源库可供使用,目前使用率最高的当属Google reCAPTCHA——无论是客户端还是服务器端使用起来都很简单方便,所以这里我们以Google reCAPTCHA为例演示如何在Laravel应用的表单中嵌入验证码。

Google reCAPTCHA In Laravel

Github上有现成的集成Google reCAPTCHA到Laravel的项目:anhskohbo/no-captcha。在这篇教程中我们将演示如何在Laravel 5中使用验证码。

2、安装&配置

我们使用Composer安装该扩展包:

composer require anhskohbo/no-captcha

对于 Laravel 5.5 以下版本,安装完成后,我们需要在config/app.php中注册服务提供者到providers数组(5.5 以上版本会自动发现该服务提供者,无需手动注册):

Anhskohbo\NoCaptcha\NoCaptchaServiceProvider::class

然后将扩展包的配置文件发布到 config 目录下:

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

接下来需要为站点获取 Google recaptcha site key 和 secret key,登录Recaptcha Admin,初次获取需要先注册站点:

b59b75f0ff9fa63458c3511a10148b55.jpg

点击“Register”,即可获取站点对应的 site key 和 secret key:

5f23842e1822f21a51ed45b23f825813.jpg

将刚刚获取到的site key和secret key添加到.env文件中:

NOCAPTCHA_SECRET=[secret-key]
NOCAPTCHA_SITEKEY=[site-key]

这样我们就为Laravel应用配置好了recaptcha,下面我们在表单中显示验证码。

3、在表单中集成验证码

要在视图中显示验证码,需要插入如下这行代码:

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

并且引入相应的 JS 代码:

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

接下来,我们来演示如何在具体 Laravel 项目中集成并渲染 Google reCAPTCHA。 

首先我们在routes.php中定义相应的访问路由:

Route::get('contact', function() {
    return view('contact');
});
Route::post('contact', 'EnquiryController@index');

然后我们创建一个控制器EnquiryController

<?php 
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Input;
use Illuminate\Support\Facades\Validator;
use Illuminate\Support\Facades\Redirect;

class EnquiryController extends Controller
{
    public function index()
    {
        $data = Input::all();
        $rules = array(
            'name' => 'required',
            'email' => 'required|email',
            'subject' => 'required',
            'g-recaptcha-response' => 'required|captcha',
            'msg' => 'required',
        );
        $validator = Validator::make($data, $rules);
        if ($validator->fails()){
            return Redirect::to('/contact')->withInput()->withErrors($validator);
        } else {
            // Do your stuff.
        }
    }
}

最后我们创建一个视图文件resources/views/contact.blade.php,编辑其内容如下:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8 col-md-offset-2">
            <div class="card">
                <div class="card-header">Contact us</div>
                <div class="card-body">
                    @if (count($errors) > 0)
                        <div class="alert alert-danger">
                            <strong>Whoops!</strong> There were some problems with your input.<br /><br />
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="/contact" method="POST" id="myform">

                    <div class="form-group row">
                        <label class="col-md-4 col-form-label text-md-right">Name</label>
                        <div class="col-md-6">
                            <input name="name" class="form-control" placeholder="Your Full Name">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-md-4 col-form-label text-md-right">E-Mail Address</label>
                        <div class="col-md-6">
                            <input name="email" class="form-control" placeholder="Your Email">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-md-4 col-form-label text-md-right">Subject</label>
                        <div class="col-md-6">
                            <input name="subject" class="form-control" placeholder="Your Subject">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-md-4 col-form-label text-md-right">Message</label>
                        <div class="col-md-6">
                            <input name="msg" class="form-control" placeholder="Your Message">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-md-4 col-form-label text-md-right">Captcha</label>
                        <div class="col-md-6">
                            {!! NoCaptcha::display() !!}
                        </div>
                    </div>

                    <div class="form-group row mb-0">
                        <div class="col-md-6 offset-md-4">
                            <button type="submit" class="btn btn-primary">
                                Submit
                            </button>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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

在浏览器中访问https://xueyuanjun.com/contact,就可以看到对应的验证码效果了:

7efd5301705b3ee2b611b6a7240c10ad.jpg

实际使用案例:使用 Laravel 快速构建网站系列 —— 开源电子商务网站:Antvel


点赞 取消点赞 收藏 取消收藏

<< 上一篇: 通过 Nebula 扩展包构建基于 Laravel + Alpine + Tailwind 的后台管理系统

>> 下一篇: 使用 Captcha 扩展包 为 Laravel 5 应用生成验证码