验证码是比较常见的一个功能,当用户输入用户名密码后,必须也输入验证码才能提交。
实现原理:
1.随机生成验证码图片,并且把验证码储存在session中;
2.提交登录是验证
前端代码:
<form class="form-signin" method="post" action="">
<h2 class="form-signin-heading">登录系统</h2>
<span id="err_box"></span>
<input type="text" name="username" class="input-block-level" placeholder="账号">
<input type="password" name="password" class="input-block-level" placeholder="密码">
<input type="text" name="verify" id='verification' class="input-medium" placeholder="验证码">
<img src="/Home/Api/validatecode.html" onclick="this.src='/Home/Api/validatecode.html?'+Math.random();" alt="">
<br>
<input type="text" name="pcode" class="input-block-level" placeholder="手机验证码" style="display: none;">
<p><button class="btn btn-large btn-primary" type="submit">登录</button></p>
</form>
img的src属性直接放生成图片的接口路径;
后端代码
1.生成二维码图片接口:/Home/Api/validatecode.html,返回的数据必须是图片格式的文件;设置header('Content-type:image/png');
public function validatecode(){
ob_clean();
header('Content-type:image/png');
import('Common.Com.ValidateCode');
$_vc = new \ValidateCode(); //实例化一个对象
$_vc->doimg();
$code = $_vc->getCode();
$_SESSION['authnum_session'] = $code;//验证码保存到cookie中
}
2.附上封装好的生成二维码的类ValidateCode,
输出图片:$_vc->doimg();
获取验证码:¥_vc->getCode();
//验证码类
class ValidateCode {
// private $charset = 'abcdefghkmnprstuvwxyzABCDEFGHKMNPRSTUVWXYZ23456789';//随机因子
private $charset = '0123456789';//随机因子
private $code;//验证码
private $codelen = 4;//验证码长度
private $width = 130;//宽度
private $height = 50;//高度
private $img;//图形资源句柄
private $font;//指定的字体
private $fontsize = 20;//指定字体大小
private $fontcolor;//指定字体颜色
//构造方法初始化
public function __construct() {
$this->font = dirname(__FILE__).'/font/simkai.ttf';//注意字体路径要写对,否则显示不了图片
}
//生成随机码
private function createCode() {
$_len = strlen($this->charset)-1;
for ($i=0;$i<$this->codelen;$i++) {
$this->code .= $this->charset[mt_rand(0,$_len)];
}
}
//生成背景
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');
// $this->img = mb_convert_encoding($this->img, 'utf-8','gbk');
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->code);
}
}