ThinkPHP + Vue 2.0 前后端分离, 登录遇到验证码问题,如何保证一一对应, 记录下
验证码生成类, 用的是框架自带的生成类 文档地址 , 用法按照文档上的操作就可以, 上代码
/**
* 输出验证码并把验证码的值保存的session中
* 验证码保存到session的格式为: array('verify_code' => '验证码值', 'verify_time' => '验证码创建时间');
* @access public
* @param string $id 要生成验证码的标识
* @return \think\Response
*/
public function entry($id = '')
{
// 图片宽(px)
$this->imageW || $this->imageW = $this->length * $this->fontSize * 1.5 + $this->length * $this->fontSize / 2;
// 图片高(px)
$this->imageH || $this->imageH = $this->fontSize * 2.5;
// 建立一幅 $this->imageW x $this->imageH 的图像
$this->im = imagecreate($this->imageW, $this->imageH);
// 设置背景
imagecolorallocate($this->im, $this->bg[0], $this->bg[1], $this->bg[2]);
// 验证码字体随机颜色
$this->color = imagecolorallocate($this->im, mt_rand(1, 150), mt_rand(1, 150), mt_rand(1, 150));
// 验证码使用随机字体, 我把类从vendor 目录下, 提取出来了, 所以路径需要更换
$ttfPath = ROOT_PATH . '/vendor/topthink/think-captcha/assets/' . ($this->useZh ? 'zhttfs' : 'ttfs') . '/';
if (empty($this->fontttf)) {
$dir = dir($ttfPath);
$ttfs = [];
while (false !== ($file = $dir->read())) {
if ('.' != $file[0] && substr($file, -4) == '.ttf') {
$ttfs[] = $file;
}
}
$dir->close();
$this->fontttf = $ttfs[array_rand($ttfs)];
}
$this->fontttf = $ttfPath . $this->fontttf;
if ($this->useImgBg) {
$this->background();
}
if ($this->useNoise) {
// 绘杂点
$this->writeNoise();
}
if ($this->useCurve) {
// 绘干扰线
$this->writeCurve();
}
// 绘验证码
$code = []; // 验证码
$codeNX = 0; // 验证码第N个字符的左边距
if ($this->useZh) {
// 中文验证码
for ($i = 0; $i < $this->length; $i++) {
$code[$i] = iconv_substr($this->zhSet, floor(mt_rand(0, mb_strlen($this->zhSet, 'utf-8') - 1)), 1, 'utf-8');
imagettftext($this->im, $this->fontSize, mt_rand(-40, 40), $this->fontSize * ($i + 1) * 1.5, $this->fontSize + mt_rand(10, 20), $this->color, $this->fontttf, $code[$i]);
}
} else {
for ($i = 0; $i < $this->length; $i++) {
$code[$i] = $this->codeSet[mt_rand(0, strlen($this->codeSet) - 1)];
$codeNX += mt_rand($this->fontSize * 1.2, $this->fontSize * 1.6);
imagettftext($this->im, $this->fontSize, mt_rand(-40, 40), $codeNX, $this->fontSize * 1.6, $this->color, $this->fontttf, $code[$i]);
}
}
// 保存验证码
$key = $this->authcode($this->seKey);
$code = $this->authcode(strtoupper(implode('', $code)));
$secode = [];
$secode['verify_code'] = $code; // 把校验码保存到session
$secode['verify_time'] = time(); // 验证码创建时间
Session::set($key . $id, $secode, '');
ob_start();
// 输出图像
imagepng($this->im);
$content = ob_get_clean();
imagedestroy($this->im);
return response($content, 200, ['Content-Length' => strlen($content), 'Uuid' => $key . $id])->contentType('image/png');
}
改动过程中, 需要修改 vendor 下的源文件, 预防其他人整体 composer install 之后, 源码 又改回去, 所以将代码放在了 vendor 目录外, 当做一个三方类使用. 只改动了两个地方其他
1. // 验证码使用随机字体, 我把类从vendor 目录下, 提取出来了, 所以路径需要更换, 确保字体文件可以找到
$ttfPath = ROOT_PATH . '/vendor/topthink/think-captcha/assets/' . ($this->useZh ? 'zhttfs' : 'ttfs') . '/';
2. // 将验证码唯一标识, 放在 header 头里, 返回给前端
return response($content, 200, ['Content-Length' => strlen($content), 'Uuid' => $key . $id])->contentType('image/png');
}
使用, 生成验证码
public function index()
{
$config = [
// 验证码字体大小
'fontSize' => 80,
// 验证码位数
'length' => 4,
// 关闭验证码杂点
'useNoise' => true,
];
$id = session_create_id(); // 生成一个随机 id 确保唯一
$captcha = new NewCaptcha($config);
return $captcha->entry($id);
}
PHP uniqid()函数可用于生成不重复的唯一标识符,该函数基于微秒级当前时间戳。在高并发或者间隔时长极短(如循环代码)的情况下,会出现大量重复数据。即使使用了第二个参数,也会重复。
使用session_create_id()函数生成唯一标识符,php session_create_id()是php 7.1新增的函数,用来生成session id,低版本无法使用。
校验
前端从验证码的 header 头里取出 uuid 参数, 登录的时候一起传递到后台, 进行校验
$uuid = $params['uuid'];
$captchaClass = new NewCaptcha();
if(!$captchaClass->check($captcha, $uuid)) {
jsonBack([1006, '验证码错误!']);
}
// 新的 check 方法, 和原来的比少了一个拼接参数的操作
/**
* 验证验证码是否正确
* @access public
* @param string $code 用户验证码
* @param string $key 验证码标识
* @return bool 用户验证码是否正确
*/
public function check($code, $key = '')
{
// 验证码不能为空
$secode = Session::get($key, '');
if (empty($code) || empty($secode)) {
return false;
}
// session 过期
if (time() - $secode['verify_time'] > $this->expire) {
Session::delete($key, '');
return false;
}
if ($this->authcode(strtoupper($code)) == $secode['verify_code']) {
$this->reset && Session::delete($key, '');
return true;
}
return false;
}
Tips: 生成的验证码, 放在 Session 中 有一定的局限性, 可以放在 Redis 中 , 有不对的地方, 欢迎指出.