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 2.*

安装完成后,我们需要在config/app.php中注册服务提供者到providers数组:

Anhskohbo\NoCaptcha\NoCaptchaServiceProvider::class

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

到Google reCAPTCHA注册站点

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

到Google reCAPTCHA获取Key

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

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

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

3、在表单中集成验证码

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

{!! app('captcha')->display(); !!}

首先我们在routes.php中定义一个访问路由:

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

然后我们定义一个控制器EnquiryController

<?php 
namespace App\Http\Controllers;
use Input;
use Validator;
use Redirect;
use Session;

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,编辑其内容如下:

<div class="container-fluid">
	<div class="row">
		<div class="col-md-8 col-md-offset-2">
			<div class="panel panel-default">
				<div class="panel-heading">Contact us</div>
				<div class="panel-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::open(array('url'=>'contact','method'=>'POST', 'id'=>'myform')) !!}
					
					<div class="form-group">
						<label class="col-md-4 control-label">Name</label>
						<div class="col-md-6">
							{!! Form::text('name','',array('id'=>'','class'=>'form-control span6','placeholder' => 'Your Full Name')) !!}
						</div>
					</div>

					<div class="form-group">
						<label class="col-md-4 control-label">E-Mail Address</label>
						<div class="col-md-6">
							{!! Form::text('email','',array('id'=>'','class'=>'form-control span6','placeholder' => 'Your Email')) !!}
						</div>
					</div>

					<div class="form-group">
						<label class="col-md-4 control-label">Subject</label>
						<div class="col-md-6">
							{!! Form::text('subject','',array('id'=>'','class'=>'form-control span6','placeholder' => 'Your Subject')) !!}
						</div>
					</div>

					<div class="form-group">
						<label class="col-md-4 control-label">Message</label>
						<div class="col-md-6">
							{!! Form::textarea('msg','',array('id'=>'','class'=>'form-control span6','placeholder' => 'Your Full Name')) !!}
						</div>
					</div>

					<div class="form-group">
						<label class="col-md-4 control-label">Captcha</label>
						<div class="col-md-6">
							{!! app('captcha')->display(); !!}
						</div>
					</div>

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

在浏览器中访问http://laravelacademy.org/contact,显示效果如下:

laravel-captcha

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

学院君

学院君 has written 548 articles

资深PHP工程师,Laravel学院院长