什么是验证码:
为了区分人还是计算机操作的一种公共全自动程序 随机因子(验证码中可能出现的内容) 干扰因子 (干扰项,防止工具抓包)
可以通过增加每次操作的时间,起到一定的抗并发效果
本节课的目的:
1.熟练使用验证码类生成验证码 并完成相关操作
2.掌握laravel框架中第三方类的引入
实际操作:
1.添加一个填写验证码的输入框,承载验证码的一个图片 在登录页面 合适位置填入下面的代码
<dl>
<input id="verifycode" type="text" placeholder="请输入验证码" maxlength="4" /><b></b>
<img src="" alt="">
</dl>
2.引入验证码类
在app目录下新建一个工具文件夹 Tools 在文件中新建一个验证码的类 Captcha.php
在网上找一个自己喜欢的验证码类
下面是demo
<?php
/**
* Created by PhpStorm.
* User: jinlei
* Date: 2019/3/19
* Time: 9:11
*/
namespace App\Tools;
//验证码类
class Captcha {
private $charset = 'abcdefghkmnprstuvwxyzABCDEFGHKMNPRSTUVWXYZ23456789';//随机因子
private $code;//验证码
private $codelen = 4;//验证码长度
private $width = 130;//宽度
private $height = 50;//高度
private $img;//图形资源句柄
private $font;//指定的字体
private $fontsize = 20;//指定字体大小
private $fontcolor;//指定字体颜色
//构造方法初始化
public function __construct() {
//echo dirname(__FILE__);die;
$this->font = public_path().'/fonts/Elephant.ttf';//注意字体路径要写对,否则显示不了图片
}
//生成随机码
private function createCode() {
$_len = strlen($this->charset)-1;
for ($i=0;$i<$this->codelen;$i++) {
$this->code .= $this->charset[mt_rand(0,$_len)];
}
return $this->code;
}
//生成背景
private function createBg() {
$this->img = imagecreatetruecolor($this->width, $this->height);
$color = imagecolorallocate($this->img, mt_rand(157,255), mt_rand(157,255), mt_rand(157,255));
imagefilledrectangle($this->img,0,$this->height,$this->width,0,$color);
}
//生成文字
private function createFont() {
$_x = $this->width / $this->codelen;
for ($i=0;$i<$this->codelen;$i++) {
$this->fontcolor = imagecolorallocate($this->img,mt_rand(0,156),mt_rand(0,156),mt_rand(0,156));
imagettftext($this->img,$this->fontsize,mt_rand(-30,30),$_x*$i+mt_rand(1,5),$this->height / 1.4,$this->fontcolor,$this->font,$this->code[$i]);
}
}
//生成线条、雪花
private function createLine() {
//线条
for ($i=0;$i<6;$i++) {
$color = imagecolorallocate($this->img,mt_rand(0,156),mt_rand(0,156),mt_rand(0,156));
imageline($this->img,mt_rand(0,$this->width),mt_rand(0,$this->height),mt_rand(0,$this->width),mt_rand(0,$this->height),$color);
}
//雪花
for ($i=0;$i<100;$i++) {
$color = imagecolorallocate($this->img,mt_rand(200,255),mt_rand(200,255),mt_rand(200,255));
imagestring($this->img,mt_rand(1,5),mt_rand(0,$this->width),mt_rand(0,$this->height),'*',$color);
}
}
//输出
private function outPut() {
header('Content-type:image/png');
imagepng($this->img);
imagedestroy($this->img);
}
//对外生成
public function doimg() {
$this->createBg();
$this->createCode();
$this->createLine();
$this->createFont();
$this->outPut();
}
//获取验证码
public function getCode() {
return strtolower($this->createCode());
}
}
创建一个控制器 生成验证码图片和存储验证码的值
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Tools\Captcha;
class CaptchaController extends Controller
{
public function create()
{
$verify = new Captcha();
$code = $verify->getCode();
//var_dump($code);
session(['verifycode'=>$code]);
return $verify->doimg();
}
}
然后配置一个路由 能够访问生成验证码的方法
route::any('verify/create','CaptchaController@create');
然后在页面中调用生成的类 就可以实现验证码了
<dl>
<input id="verifycode" type="text" placeholder="请输入验证码" maxlength="4" /><b></b>
<img src="{{url('/verify/create')}}" alt="" id="img">
</dl>
这时候验证出现 但是点击不能切换
需要写一个验证码切换的方法
$("#img").click(function(){
$(this).attr('src',"{{url('/verify/create')}}"+"?"+Math.random())
})
然后 验证通过后就可以实现验证码的功能了