主要解决方法:
1)继承Yii2的yii\captcha\CaptchaAction,重写run方法进行验证码的生成、显示等操作。
2)改变getVerifyCode的参数false改为true,让每次刷新和请求都更新验证码
3)让验证码更美观,用新的字体,加上线条,背景等
有其他特殊需求可以在这些代码中自己添加即可。
控制器代码SiteController.php:
public function actions()
{
return [
'captcha' => [
'class' => 'common\components\MyCaptcha',
//'class' => 'yii\captcha\CaptchaAction',
'fixedVerifyCode' => YII_ENV_TEST ? 'testme' : null,
'maxLength' => 4, //生成的验证码最大长度
'minLength' => 4, //生成的验证码最短长度
'width'=>130,
'height'=>50,
],
];
}
验证码common/components/MyCaptcha.php:
<?php
namespace common\components;
use Yii;
use yii\captcha\CaptchaAction;
use yii\helpers\Url;
use yii\web\Response;
class MyCaptcha extends CaptchaAction
{
public function init()
{
parent::init();
$this->fontFile = dirname(Yii::$app->basePath) . '/source/font/elephant.ttf';
}
/**
* Runs the action.
*/
public function run()
{
if (Yii::$app->request->getQueryParam(self::REFRESH_GET_VAR) !== null) {
// AJAX request for regenerating code
$code = $this->getVerifyCode(true);
Yii::$app->response->format = Response::FORMAT_JSON;
return [
'hash1' => $this->generateValidationHash($code),
'hash2' => $this->generateValidationHash(strtolower($code)),
// we add a random 'v' parameter so that FireFox can refresh the image
// when src attribute of image tag is changed
'url' => Url::to([$this->id, 'v' => uniqid()]),
];
} else {
$this->setHttpHeaders();
Yii::$app->response->format = Response::FORMAT_RAW;
return $this->renderImage($this->getVerifyCode(true));
}
}
/**
* Renders the CAPTCHA image based on the code using GD library.
* @param string $code the verification code
* @return string image contents in PNG format.
*/
protected function renderImageByGD($code)
{
$image = imagecreatetruecolor($this->width, $this->height);
$backColor = imagecolorallocate($image, mt_rand(157,255), mt_rand(157,255), mt_rand(157,255));
imagefilledrectangle($image, 0, 0, $this->width - 1, $this->height - 1, $backColor);
imagecolordeallocate($image, $backColor);
if ($this->transparent) {
imagecolortransparent($image, $backColor);
}
$foreColor = imagecolorallocate($image,mt_rand(0,156),mt_rand(0,156),mt_rand(0,156));
//雪花线条
for ($i=0;$i<6;$i++) {
$color = imagecolorallocate($image,mt_rand(0,156),mt_rand(0,156),mt_rand(0,156));
imageline($image,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($image,mt_rand(200,255),mt_rand(200,255),mt_rand(200,255));
imagestring($image,mt_rand(1,5),mt_rand(0,$this->width),mt_rand(0,$this->height),'*',$color);
}
$length = strlen($code);
$box = imagettfbbox(30, 0, $this->fontFile, $code);
$w = $box[4] - $box[0] + $this->offset * ($length - 1);
$h = $box[1] - $box[5];
$scale = min(($this->width - $this->padding * 2) / $w, ($this->height - $this->padding * 2) / $h);
$x = 10;
$y = round($this->height * 27 / 40);
for ($i = 0; $i < $length; ++$i) {
$fontSize = (int) (rand(26, 32) * $scale * 0.8);
$angle = rand(-10, 10);
$letter = $code[$i];
$box = imagettftext($image, $fontSize, $angle, $x, $y, $foreColor, $this->fontFile, $letter);
$x = $box[2] + $this->offset;
}
imagecolordeallocate($image, $foreColor);
ob_start();
imagepng($image);
imagedestroy($image);
return ob_get_clean();
}
}
视图中的代码:
<ul>
<li><i class="icon-user"></i><input type="text" id="user" placeholder="请输入账号" maxlength="20" autocomplete="false"><span></span></li>
<li><i class="icon-pwd"></i><input type="password" id="pwd" placeholder="请输入密码" maxlength="20" autocomplete="false"><span></span></li>
<li><i class="icon-ver"></i><input type="text" id="ver" placeholder="请输入验证码" maxlength="4" autocomplete="false"><span></span>
<?php echo Captcha::widget(['name'=>'captchaimg','captchaAction'=>'site/captcha','imageOptions'=>['class'=>'captchaimg', 'title'=>'换一个', 'alt'=>'换一个'],'template'=>'{image}']);?></li>
<li><button id="login">登录</button></li>
</ul>
<script type="text/javascript">
$(".captchaimg").click(function(){
var date = new Date();
$(this).attr('src',['site/captcha','data=',(new Date())].join('?'));
})
<script>
- Yii2使用Url组件
- Yii2的Html,Request组件详解
- YII2.0框架, 多图片上传功能
- yii2-imagine配置
- 有洁癖的禁止默认YII自带垃圾代码(个人认为)、JS、CSS(新手教程)
- Yii2 API接口输出统一Json和jsonp格式方法
- MySql 创建表的一些语句释义
- Yii2联合查询(配合GridView)
- Yii 通用系统字典
- ArrayHelper的多维数组排序函数multisort,强大无比。
- 路由规则,在Url中替换使用'/'以外的符号连接
- 从excel文件中读取表格内容,并批量写入数据库
- yii2注册时验证用户名、邮箱等唯一性
- Yii2最全的实战教程
- Composer安装yii2-imagine 压缩,剪切,旋转,水印
- LinkPager增加总页数 和总记录数
- Yii2 获取模块名控制器名方法名
- Yii2使用yii2-adminlte+yii2-admin左侧菜单子路径不高亮问题又解
- 前端CSS框架
- Yii2 之 frontend 子模块实践之一:添加前后台子模块
- Yii2 之 frontend 子模块实践之二:构建子模块的独立配置
- Yii2 之 frontend 子模块实践之三:布局和语言配置
- 完美解决ajax验证码不刷新问题,让验证码更加美观,不修改任何源代码
- yii2.0 表单小部件常用的默认选中
- Yii2 controller 传值给layout
- yii2 dropDownList 二级和三级 联动写法
- 微信扫码登录 新窗口二维码 扫完关闭二维码页面 进入登录页面
- yii2 实现 "上一篇,下一篇" 功能
- Yii 行为简单应用
- SQL语句