什么是图形验证码
图形验证码是验证码的一种。验证码(验证码)是“的全自动区分计算机和人类的图灵测试”(全自动区分计算机和人类的图灵测试的缩写,是一种区分用户是计算机还是人的公共全自动程序。可以防止:恶意破解密码,刷票,论坛灌的水,有效防止某个* * *对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试,实际上用验证码是现在很多网站通行的方式。
既然图形验证码是为了区分机器和人之间的操作,那么我们就可以在图形上绘制一个只有人可以解答的问题。比较常见的是在图片上生成文字验证码,然后用户输入图片上的文字吻合则验证通过。
虽然这种验证方法已经渐渐的被其他更先进的方法所淘汰了(图片上的文字依然可以被程序识别读取),并且前端生成验证码的方式相较于后端安全性不高,但我们的目的只是为了装x,提升程序的安全性只是附带的效果。
登录表单
首先我们需要在在登录表单上额外添加用于输入验证码的FormItem,并且给图形验证码提供一个画布容器。有时候生成的验证码看不明白,因此需要给验证码添加点击事件用以切换验证码:
<代码> web前端开发学习Q-q-u-n:⑦⑧④-⑦⑧③——零①②,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频) & lt;形式ref=發oginForm”:模型=靶问健?规则=肮嬖颉北? & lt; FormItem道具=坝没北? & lt;输入v模型="的形式。用户名“占位符=扒胧淙胗没痹? & lt;跨槽=扒爸谩北? & lt;图标:大??6”类型=叭恕痹? lt;/Icon> & lt;/span> & lt;/Input> & lt;/FormItem> & lt; FormItem道具=懊苈搿北? & lt;输入类型=懊苈搿眝模型="的形式。密码“占位符=扒胧淙朊苈搿北? & lt;跨槽=扒爸谩北? & lt;图标:大?" 14 " type="锁定"祝辞& lt;/Icon> & lt;/span> & lt;/Input> & lt;/FormItem> & lt; FormItem道具=" valiCode " v-show=皌his.count”比; & lt;输入v模型="的形式。valiCode "占位符="请输入验证码”比; & lt;跨槽=扒爸谩北? & lt;图标:大?" 14 " type=" ios-analytics祝辞& lt;/Icon> & lt;/span> & lt;/Input> & lt; div类=盎肌盄click=癵etImgYanzheng”比; & lt;帆布id=盎肌弊４? lt;/canvas> & lt;/div> & lt;/FormItem> & lt; FormItem> & lt;按钮@click=癶andleSubmit”类型=爸鳌眑ong>登录& lt;/Button> & lt;/FormItem> & lt;/Form>
需要用到的属性
表单需要额外添加valiCode用以记录用户输入的验证码。此处我们定义当用户登录失败一次则需要额外输入图形验证码,因此添加计数属性,当登陆失败时计数+ +,当然这样的处理方式并不是很严谨,并且用户刷新页面数则会清零。可以在此处可以增加更多限制,如异地登录等,由于本案例完全没有涉及到后端程序,因此只是简单的以数为判断依据。
<代码> data () {
返回{
形式:{
用户名:",//用户名
密码:",//密码
valiCode:“//验证码
},
数:0,//登录次数
show_num:[],//图形上的文字
}
}
生产图形验证码
页面上为画布容器绑定的方法getImgYanzheng就是在绘制图形验证码
。在绘制图形验证码时需要为你的验证码定义一个内容集合,此处使用的是:A, B, C, E, F, G, H, J, K、M, N, p, Q, R, S, T, W, X, Y, Z, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0,好,医,生。字母中剔除了容易误识别的几个字母并且可以随意加入文字(因此图形验证码也可在做成随机生成四个文字让用户点击,或者生成成语让用户填空等等各种形式),并且忽略用户大小写,因此需要用到toLowerCase方法。
接下来就是帆布绘图的一些技巧了。
帆布绘图
帆布元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成:
<代码> var c=. getelementbyid (“myCanvas”); var cxt=c.getContext (2 d);
在JavaScript中使用id来寻找帆布元素,然后创建上下文对象,getContext (“2 d")对象是内建的HTML5对象,拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。我们可以把画布想象成景色而背景则是景色呈现的画布。
由于绘制验证码的过程中是从左往右绘制的,因此需要规划好画布的使用范围,另外在验证码绘制时还要加上一些随机的元素使验证码不容易被程序识别。
