思路: 前端 1.登录页面打开后,ajax异步获取一个验证码图片的base64,且登录失败或点击验证码图片时,重新获取 以html+jquery为例的代码
<div id="captcha" alt="验证码"></div>
<script>
$(function () {
$('#captcha').click(function () {
$.post("/admin/login/captcha",{},function(result){
$(this).html('<img src="result">'); //将base64图片验证码加载到当前div下
});
});
//初始化获取验证码
$('#captcha').map(function () {
$(this).trigger('click'); //触发获取验证码,自己写的登录js代码中,如果登录失败也可以$('#captcha').trigger('click')重新生成验证码
});
})
<script>
后端 1.生成并返回验证码
use think\admin\service\CaptchaService;
public function captcha()
{
$image = CaptchaService::instance()->initialize();
$data =$image->getData();
$code = $image->getCode();
Session::set('captcha',$code );
return $data ; 输出验证码图片
}
验证码类参考以下
<?php
declare (strict_types=1);
namespace think\admin\service;
use think\admin\Service;
class CaptchaService extends Service
{
private $code;
private $uniqid;
private $charset = 'ABCDEFGHKMNPRSTUVWXYZ23456789';
private $width = 130;
private $height = 50;
private $length = 4;
private $fontfile;
private $fontsize = 20;
public function initialize(array $config = []): CaptchaService
{
foreach ($config as $k => $v) if (isset($this->$k)) $this->$k = $v;
$this->uniqid = uniqid('captcha') . mt_rand(1000, 9999);
[$this->code, $length] = ['', strlen($this->charset) - 1];
for ($i = 0; $i < $this->length; $i++) {
$this->code .= $this->charset[mt_rand(0, $length)];
}
$this->fontfile = __DIR__ . '/bin/captcha.ttf';
$this->app->cache->set($this->uniqid, $this->code, 360);
return $this;
}
public function config(array $config = []): CaptchaService
{
return $this->initialize($config);
}
public function getCode(): string
{
return $this->code;
}
public function getData(): string
{
return "data:image/png;base64,{$this->createImage()}";
}
public function getUniqid(): string
{
return $this->uniqid;
}
public function getAttrs(): array
{
return [
'code' => $this->getCode(),
'data' => $this->getData(),
'uniqid' => $this->getUniqid(),
];
}
public function check(string $code, ?string $uniqid = null): bool
{
$_uni = is_string($uniqid) ? $uniqid : input('uniqid', '-');
$_val = $this->app->cache->get($_uni, '');
if (is_string($_val) && strtolower($_val) === strtolower($code)) {
$this->app->cache->delete($_uni);
return true;
} else {
return false;
}
}
public function __toString()
{
return $this->getData();
}
private function createImage(): string
{
$img = imagecreatetruecolor($this->width, $this->height);
$color = imagecolorallocate($img, mt_rand(220, 255), mt_rand(220, 255), mt_rand(220, 255));
imagefilledrectangle($img, 0, $this->height, $this->width, 0, $color);
for ($i = 0; $i < 6; $i++) {
$color = imagecolorallocate($img, mt_rand(0, 50), mt_rand(0, 50), mt_rand(0, 50));
imageline($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($img, mt_rand(200, 255), mt_rand(200, 255), mt_rand(200, 255));
imagestring($img, mt_rand(1, 5), mt_rand(0, $this->width), mt_rand(0, $this->height), '*', $color);
}
$_x = $this->width / $this->length;
for ($i = 0; $i < $this->length; $i++) {
$fontcolor = imagecolorallocate($img, mt_rand(0, 156), mt_rand(0, 156), mt_rand(0, 156));
if (function_exists('imagettftext')) {
imagettftext($img, $this->fontsize, mt_rand(-30, 30), intval($_x * $i + mt_rand(1, 5)), intval($this->height / 1.4), $fontcolor, $this->fontfile, $this->code[$i]);
} else {
imagestring($img, 15, intval($_x * $i + mt_rand(10, 15)), mt_rand(10, 30), $this->code[$i], $fontcolor);
}
}
ob_start();
imagepng($img);
$data = ob_get_contents();
ob_end_clean();
imagedestroy($img);
return base64_encode($data);
}
}
这样登录方法里,可以取session中的captcha进行对比
|