常用验证码之字符串验证码

写在前面

验证码 这个玩意，无论是开发者还是用户都十分熟悉：

注册？请输入验证码...
登录？请输入验证码...
修改密码？请输入验证码...
删除？请输入验证码...
……

总之，各类敏感操作，请输入验证码！

check_text.png

这么多场景中用到验证码，它到底有什么用？作为前端开发者，如何去实现呢？
接下来步入正题。

验证码

是一种区分用户是计算机还是人的公共全自动程序。区分用户是真人还是程序，防止程序频繁访问服务器占用过多的资源。

作用：

防止恶意破解密码、刷票、论坛灌水等；
有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试
敏感操作前的提示
防止恶意注册

验证码表现方式：

随机字符串验证码
算数验证码
Gif动画验证码
滑动验证码
点选验证码
短信验证码
手机语音验证码

接下来会使用纯前端方式实现其中的一些表现，如随机字符串验证码、算数验证码、滑动验证码等。

本篇记录随机字符串验证码。

随机字符串验证码

一般来讲，字符串、算数、gif、短信语音等验证码放在后端实现，但本着技术无界限的原则，前端依然是能照葫芦画瓢给实现出来的。
本次要实现的效果如下：

效果

check_text.gif

分析

验证码实现步骤：

canvas画布
生成随机字符串
随机颜色
背景色（可固定色）
噪音线设置
绘制验证码

其他一些基础内容也包含其中，如点击验证码刷新、点击下一步验证等操作。

步骤实现：

注：本案例基于vue操作，UI使用element完成，原生js同样道理

1. canvas画布

html

<!-- 输入框 -->
<input v-model="inputCode" placeholder="请输入验证码，不区分大小写" />
<!-- canvas画布：验证码 -->
<canvas ref="checkCode" @click="getCode"></canvas>
<!-- 按钮 -->
<button @click="checkMe">下一步</button>

// 需要的数据
data() {
    return {
        inputCode: '',  // 输入的值
        checkCode: '',  // 图片验证码的值
        // canvas各种设置
        cvs: {
            w: 100, // 给出默认宽度  宽度会在图片绘制时根据长度更改
            h: 40,  // 高 与input保持一致
            fontSize: 24,   // 字体大小
            // 字符串生成范围
            str: '1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM',  
            len: 4, // 字符串长度 
            line: 3 // 噪音线个数
        }
    }
}

2. 生成随机字符串

写一个随机整数生成器，在各个环节都会用到
生成随机字符串，长度是在data里面cvs中对应长度

// 随机整数生成器，范围[0, max)
rInt(max) {
    return Math.floor(Math.random() * 100000 % max);
},

// 生成随机字符串
rCode() {
    let code = '';
    let len = this.cvs.len;
    let strLen = this.cvs.str.length;
    for(let i = 0; i < len; i ++) {
        code += this.cvs.str.charAt(this.rInt(strLen));
    }
    this.checkCode = code;
    return code;
},

3. 生成随机颜色

rgba格式
a：透明度，取值为0.5-1

 // 生成随机颜色 rgba格式
rColor() {
    let a = ((Math.random()*5 + 5) / 10).toFixed(2);
    return `rgba(${this.rInt(256)}, ${this.rInt(256)}, ${this.rInt(256)}, ${a})`
},

4. 开始绘制

方法接收一个dom对象
判断浏览器对canvas支持程度
取随机字符串
设置canvas宽高大小
绘制

具体过程如下：

// 验证码图片绘制
drawCode(domCvs) {
    let _this = this;
    // 随机字符串
    let checkCode = this.rCode();
    // 宽设置
    this.cvs.w = 10 + this.cvs.fontSize * this.cvs.len;

    // 判断是否支持canvas
    if(domCvs !== null && domCvs.getContext && domCvs.getContext('2d')){
        // 设置显示区域大小
        domCvs.style.width = _this.cvs.w;
        // 设置画板宽高
        domCvs.setAttribute('width', _this.cvs.w);
        domCvs.setAttribute('height', _this.cvs.h);
        // 画笔
        let pen = domCvs.getContext('2d');
        // 背景: 颜色  区域
        pen.fillStyle = '#eee';
        pen.fillRect(0, 0, _this.cvs.w, _this.cvs.h);
        // 水平线位置
        pen.textBaseline = 'middle';   // top middle bottom
        // 内容
        for(let i = 0; i < _this.cvs.len; i ++) {
            pen.fillStyle = _this.rColor(); // 随机颜色
            pen.font = `bold ${_this.cvs.fontSize}px 微软雅黑`; // 字体设置
            // 字符绘制: (字符, X坐标, Y坐标)
            pen.fillText(checkCode.charAt(i), 10 + _this.cvs.fontSize * i, 17 + _this.rInt(10));   
        }
        // 噪音线
        for(let i = 0; i < _this.cvs.line; i ++) {
            // 起点
            pen.moveTo(_this.rInt(_this.cvs.w) / 2, _this.rInt(_this.cvs.h));
            // 终点
            pen.lineTo(_this.rInt(_this.cvs.w), _this.rInt(_this.cvs.h));
            // 颜色
            pen.strokeStyle = _this.rColor();
            // 粗细
            pen.lineWidth = '2';
            // 绘制
            pen.stroke();
        }

    } else {
        this.$message.error('不支持验证码格式，请升级或更换浏览器重试');
    }
},

5. 绑定canvas的dom元素

html

<canvas class="codeCanvas" ref="checkCode" @click="getCode"></canvas>

js：getCode方法

// vue的话可直接用$refs取值，不用vue的话可绑定id然后通过document处理
let domCvs = this.$refs.checkCode;
this.drawCode(domCvs);

6. 完成~

在页面初始化的时候，也来一个验证码
点击下一步，验证data中inputCode和checkCode的值是否一样即可。注意，要都换成小写toLowerCase()或者大写去处理~

// 初始化先搞一个验证码~点击canvas的时候重新执行getCode()
mounted() {
    // 获取验证码图
    this.getCode();
}

结语

搞定，手工，最终效果如效果图所示~
根据本篇，那算术验证码的效果已然是呼之欲出了……下一篇更新！

qrcode.jpg

关注微信公众号【流眸】回复【20620】获取本案例源码哟～