在Laravel中有很多图片验证码的库可以使用,本篇介绍其中之一:gregwar/captcha,这个库比较简单,在Laravel中比较常用。下面我们就来介绍下使用细节:
首先, composer.json中如下加入配置:
<code class="json" style="margin: 0px; padding: 0px;"><span class="hljs-string" style="margin: 0px; padding: 0px; color: rgb(163, 21, 21);">"require": { ... <span style="margin: 0px; padding: 0px; background-color: rgb(255, 0, 0);">"</span><span class="hljs-attribute" style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; background-color: rgb(255, 0, 0);">gregwar/captcha": </span><span class="hljs-value" style="margin: 0px; padding: 0px;"><span class="hljs-string" style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; background-color: rgb(255, 0, 0);">"1.*"</span> },</span></span></span></span></code>
然后,已成习惯的命令:用cmd执行下面这条命令
composer update
以下演示了其中一种使用方式,直接输出图片到网页。
我定义了一个Controller:
<code class="php" style="margin: 0px; padding: 0px;"><span class="hljs-preprocessor" style="margin: 0px; padding: 0px;"><?php <span class="hljs-keyword" style="margin: 0px; padding: 0px; color: rgb(0, 0, 255);">namespace <span class="hljs-title" style="margin: 0px; padding: 0px; color: rgb(163, 21, 21);">App\<span class="hljs-title" style="margin: 0px; padding: 0px;">Http\<span class="hljs-title" style="margin: 0px; padding: 0px;">Controllers;
<span class="hljs-keyword" style="margin: 0px; padding: 0px; color: rgb(0, 0, 255);">use <span class="hljs-title" style="margin: 0px; padding: 0px; color: rgb(163, 21, 21);">App\<span class="hljs-title" style="margin: 0px; padding: 0px;">Http\<span class="hljs-title" style="margin: 0px; padding: 0px;">Requests;
<span class="hljs-keyword" style="margin: 0px; padding: 0px; color: rgb(0, 0, 255);">use <span class="hljs-title" style="margin: 0px; padding: 0px; color: rgb(163, 21, 21);">App\<span class="hljs-title" style="margin: 0px; padding: 0px;">Http\<span class="hljs-title" style="margin: 0px; padding: 0px;">Controllers\<span class="hljs-title" style="margin: 0px; padding: 0px;">Controller;
<span class="hljs-keyword" style="margin: 0px; padding: 0px; color: rgb(0, 0, 255);">use <span class="hljs-title" style="margin: 0px; padding: 0px; color: rgb(163, 21, 21);">Illuminate\<span class="hljs-title" style="margin: 0px; padding: 0px;">Http\<span class="hljs-title" style="margin: 0px; padding: 0px;">Request;
<span class="hljs-comment" style="margin: 0px; padding: 0px; color: green;">//引用对应的命名空间
<span class="hljs-keyword" style="margin: 0px; padding: 0px; color: rgb(0, 0, 255);">use <span class="hljs-title" style="margin: 0px; padding: 0px; color: rgb(163, 21, 21);">Gregwar\<span class="hljs-title" style="margin: 0px; padding: 0px;">Captcha\<span class="hljs-title" style="margin: 0px; padding: 0px;">CaptchaBuilder;
<span class="hljs-keyword" style="margin: 0px; padding: 0px; color: rgb(0, 0, 255);">use <span class="hljs-title" style="margin: 0px; padding: 0px; color: rgb(163, 21, 21);">Session;
<span class="hljs-class" style="margin: 0px; padding: 0px;"><span class="hljs-keyword" style="margin: 0px; padding: 0px; color: rgb(0, 0, 255);">class <span class="hljs-title" style="margin: 0px; padding: 0px; color: rgb(163, 21, 21);">KitController <span class="hljs-keyword" style="margin: 0px; padding: 0px; color: rgb(0, 0, 255);">extends <span class="hljs-title" style="margin: 0px; padding: 0px; color: rgb(163, 21, 21);">Controller {
<span class="hljs-comment" style="margin: 0px; padding: 0px; color: green;">/**
* Display a listing of the resource.
*
* <span class="hljs-doctag" style="margin: 0px; padding: 0px; color: gray;">@return Response
*/
<span class="hljs-keyword" style="margin: 0px; padding: 0px; color: rgb(0, 0, 255);">public <span class="hljs-function" style="margin: 0px; padding: 0px;"><span class="hljs-keyword" style="margin: 0px; padding: 0px;">function <span class="hljs-title" style="margin: 0px; padding: 0px; color: rgb(163, 21, 21);">captcha<span class="hljs-params" style="margin: 0px; padding: 0px;">(<span class="hljs-variable" style="margin: 0px; padding: 0px; color: green;">$tmp)
{
<span class="hljs-comment" style="margin: 0px; padding: 0px;">//生成验证码图片的Builder对象,配置相应属性
<span class="hljs-variable" style="margin: 0px; padding: 0px;">$builder = <span class="hljs-keyword" style="margin: 0px; padding: 0px; color: rgb(0, 0, 255);">new CaptchaBuilder;
<span class="hljs-comment" style="margin: 0px; padding: 0px; color: green;">//可以设置图片宽高及字体
<span class="hljs-variable" style="margin: 0px; padding: 0px;">$builder->build(<span class="hljs-variable" style="margin: 0px; padding: 0px;">$width = <span class="hljs-number" style="margin: 0px; padding: 0px;">100, <span class="hljs-variable" style="margin: 0px; padding: 0px;">$height = <span class="hljs-number" style="margin: 0px; padding: 0px;">40, <span class="hljs-variable" style="margin: 0px; padding: 0px;">$font = <span class="hljs-keyword" style="margin: 0px; padding: 0px; color: rgb(0, 0, 255);">null);
<span class="hljs-comment" style="margin: 0px; padding: 0px; color: green;">//获取验证码的内容
<span class="hljs-variable" style="margin: 0px; padding: 0px;">$phrase = <span class="hljs-variable" style="margin: 0px; padding: 0px;">$builder->getPhrase();
<span class="hljs-comment" style="margin: 0px; padding: 0px;">//把内容存入session
Session::flash(<span class="hljs-string" style="margin: 0px; padding: 0px; color: rgb(163, 21, 21);">'milkcaptcha', <span class="hljs-variable" style="margin: 0px; padding: 0px; color: green;">$phrase);
<span class="hljs-comment" style="margin: 0px; padding: 0px;">//生成图片
header(<span class="hljs-string" style="margin: 0px; padding: 0px; color: rgb(163, 21, 21);">"Cache-Control: no-cache, must-revalidate");
header(<span class="hljs-string" style="margin: 0px; padding: 0px;">'Content-Type: image/jpeg');
<span class="hljs-variable" style="margin: 0px; padding: 0px; color: green;">$builder->output();
}
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />
下面我们可以设置相应的router访问这个验证码图片, 修改router.php:
<code class="php" style="margin: 0px; padding: 0px;">Route::get(<span class="hljs-string" style="margin: 0px; padding: 0px; color: rgb(163, 21, 21);">'kit/captcha/{tmp}', <span class="hljs-string" style="margin: 0px; padding: 0px;">'KitController@captcha');</span></span></code>
现在可以通过具体的url,可以访问看到这张图片了
验证码
表单内部写的比较简单,看看即可:
<code class="xml" style="margin: 0px; padding: 0px;"><span class="hljs-tag" style="margin: 0px; padding: 0px; color: rgb(0, 0, 255);"><span class="hljs-title" style="margin: 0px; padding: 0px; color: rgb(163, 21, 21);"><form action="wer_add" method="get"><br style="margin: 0px; padding: 0px;" /> <table><br style="margin: 0px; padding: 0px;" /> 用户名: <input type="text" name="username"><br><br style="margin: 0px; padding: 0px;" /> 密码: <input type="text" name="password"><br><br style="margin: 0px; padding: 0px;" /> 11: <input type="text" name="captcha" style="width: 100px; height:20px "></br><br style="margin: 0px; padding: 0px;" /> <a οnclick="javascript:re_captcha();" ><br style="margin: 0px; padding: 0px;" /> <img src="{{ URL('kit/captcha/1') }}" alt="验证码" title="刷新图片" width="100" height="40" id="c2c98f0de5a04167a9e427d883690ff6" border="0"><br style="margin: 0px; padding: 0px;" /> </a><br><br style="margin: 0px; padding: 0px;" /> <input type="submit" value="提交"> <br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" /> </table><br style="margin: 0px; padding: 0px;" /> </form> <span class="hljs-tag" style="margin: 0px; padding: 0px; color: rgb(0, 0, 255);"><<span class="hljs-title" style="margin: 0px; padding: 0px; color: rgb(163, 21, 21);">script><span class="javascript" style="margin: 0px; padding: 0px;"> <span class="hljs-function" style="margin: 0px; padding: 0px;"><span class="hljs-keyword" style="margin: 0px; padding: 0px; color: rgb(0, 0, 255);">function <span class="hljs-title" style="margin: 0px; padding: 0px; color: rgb(163, 21, 21);">re_captcha(<span class="hljs-params" style="margin: 0px; padding: 0px;">) { $url = <span class="hljs-string" style="margin: 0px; padding: 0px;">"{{ URL('kit/captcha') }}"; $url = $url + <span class="hljs-string" style="margin: 0px; padding: 0px;">"/" + <span class="hljs-built_in" style="margin: 0px; padding: 0px; color: rgb(0, 0, 255);">Math.random(); <span class="hljs-built_in" style="margin: 0px; padding: 0px;">document.getElementById(<span class="hljs-string" style="margin: 0px; padding: 0px; color: rgb(163, 21, 21);">'c2c98f0de5a04167a9e427d883690ff6').src=$url; } <span class="hljs-tag" style="margin: 0px; padding: 0px; color: rgb(0, 0, 255);"></<span class="hljs-title" style="margin: 0px; padding: 0px; color: rgb(163, 21, 21);">script></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />
最后就是在form提交页面验证相应验证码,库中也为我们提供了相应方法:
<code class="php" style="margin: 0px; padding: 0px;"><span class="hljs-variable" style="margin: 0px; padding: 0px; color: green;"><span class="hljs-variable" style="margin: 0px; padding: 0px;"><span class="hljs-string" style="margin: 0px; padding: 0px; color: rgb(163, 21, 21);">public function wer_add(){<br style="margin: 0px; padding: 0px;" /> $username=Request::input("username");<br style="margin: 0px; padding: 0px;" /> $password=Request::input("password");<br style="margin: 0px; padding: 0px;" /> //读取验证码<br style="margin: 0px; padding: 0px;" /> $captcha = Session::get('milkcaptcha');<br style="margin: 0px; padding: 0px;" /> if(Request::input("captcha")==$captcha){<br style="margin: 0px; padding: 0px;" /> $results = DB::select('select * from v9_admin where username = ? and password = ? ',array($username,$password));<br style="margin: 0px; padding: 0px;" /> <br style="margin: 0px; padding: 0px;" /> if(empty($results)){<br style="margin: 0px; padding: 0px;" /> echo '用户名或密码错误';<br style="margin: 0px; padding: 0px;" /> }else{<br style="margin: 0px; padding: 0px;" /> $userid=$results[0]->userid;<br style="margin: 0px; padding: 0px;" /> Session::put('username',$username);<br style="margin: 0px; padding: 0px;" /> Session::put('userid',$userid);<br style="margin: 0px; padding: 0px;" /> <br style="margin: 0px; padding: 0px;" /> echo '登陆成功';<br style="margin: 0px; padding: 0px;" /> }<br style="margin: 0px; padding: 0px;" /> }else{<br style="margin: 0px; padding: 0px;" /> echo '验码错误';<br style="margin: 0px; padding: 0px;" /> }<br style="margin: 0px; padding: 0px;" /> } </span></span></span></code>