常用驗證碼之字符串驗證碼

寫在前面

驗證碼 這個玩意忍弛，無論是開發(fā)者還是用戶都十分熟悉：

注冊戒财？請輸入驗證碼...
登錄咽斧？請輸入驗證碼...
修改密碼？請輸入驗證碼...
刪除呼胚？請輸入驗證碼...
……

總之茄唐，各類敏感操作，請輸入驗證碼蝇更！

check_text.png

這么多場景中用到驗證碼沪编，它到底有什么用呼盆？作為前端開發(fā)者，如何去實現(xiàn)呢漾抬？
接下來步入正題宿亡。

驗證碼

是一種區(qū)分用戶是計算機還是人的公共全自動程序。區(qū)分用戶是真人還是程序纳令，防止程序頻繁訪問服務(wù)器占用過多的資源挽荠。

作用：

防止惡意破解密碼、刷票平绩、論壇灌水等圈匆；
有效防止某個黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試
敏感操作前的提示
防止惡意注冊

驗證碼表現(xiàn)方式：

隨機字符串驗證碼
算數(shù)驗證碼
Gif動畫驗證碼
滑動驗證碼
點選驗證碼
短信驗證碼
手機語音驗證碼

接下來會使用純前端方式實現(xiàn)其中的一些表現(xiàn)，如隨機字符串驗證碼捏雌、算數(shù)驗證碼跃赚、滑動驗證碼等。

本篇記錄隨機字符串驗證碼性湿。

隨機字符串驗證碼

一般來講纬傲，字符串、算數(shù)肤频、gif叹括、短信語音等驗證碼放在后端實現(xiàn)，但本著技術(shù)無界限的原則宵荒，前端依然是能照葫蘆畫瓢給實現(xiàn)出來的汁雷。
本次要實現(xiàn)的效果如下：

效果

check_text.gif

分析

驗證碼實現(xiàn)步驟：

canvas畫布
生成隨機字符串
隨機顏色
背景色（可固定色）
噪音線設(shè)置
繪制驗證碼

其他一些基礎(chǔ)內(nèi)容也包含其中，如點擊驗證碼刷新报咳、點擊下一步驗證等操作侠讯。

步驟實現(xiàn)：

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

1. canvas畫布

html

<!-- 輸入框 -->
<input v-model="inputCode" placeholder="請輸入驗證碼厢漩，不區(qū)分大小寫" />
<!-- canvas畫布：驗證碼 -->
<canvas ref="checkCode" @click="getCode"></canvas>
<!-- 按鈕 -->
<button @click="checkMe">下一步</button>

// 需要的數(shù)據(jù)
data() {
    return {
        inputCode: '',  // 輸入的值
        checkCode: '',  // 圖片驗證碼的值
        // canvas各種設(shè)置
        cvs: {
            w: 100, // 給出默認寬度  寬度會在圖片繪制時根據(jù)長度更改
            h: 40,  // 高 與input保持一致
            fontSize: 24,   // 字體大小
            // 字符串生成范圍
            str: '1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM',  
            len: 4, // 字符串長度 
            line: 3 // 噪音線個數(shù)
        }
    }
}

2. 生成隨機字符串

寫一個隨機整數(shù)生成器，在各個環(huán)節(jié)都會用到
生成隨機字符串岩臣，長度是在data里面cvs中對應(yīng)長度

// 隨機整數(shù)生成器袁翁，范圍[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支持程度
取隨機字符串
設(shè)置canvas寬高大小
繪制

具體過程如下：

// 驗證碼圖片繪制
drawCode(domCvs) {
    let _this = this;
    // 隨機字符串
    let checkCode = this.rCode();
    // 寬設(shè)置
    this.cvs.w = 10 + this.cvs.fontSize * this.cvs.len;

    // 判斷是否支持canvas
    if(domCvs !== null && domCvs.getContext && domCvs.getContext('2d')){
        // 設(shè)置顯示區(qū)域大小
        domCvs.style.width = _this.cvs.w;
        // 設(shè)置畫板寬高
        domCvs.setAttribute('width', _this.cvs.w);
        domCvs.setAttribute('height', _this.cvs.h);
        // 畫筆
        let pen = domCvs.getContext('2d');
        // 背景: 顏色  區(qū)域
        pen.fillStyle = '#eee';
        pen.fillRect(0, 0, _this.cvs.w, _this.cvs.h);
        // 水平線位置
        pen.textBaseline = 'middle';   // top middle bottom
        // 內(nèi)容
        for(let i = 0; i < _this.cvs.len; i ++) {
            pen.fillStyle = _this.rColor(); // 隨機顏色
            pen.font = `bold ${_this.cvs.fontSize}px 微軟雅黑`; // 字體設(shè)置
            // 字符繪制: (字符, X坐標(biāo), Y坐標(biāo))
            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的時候重新執(zhí)行g(shù)etCode()
mounted() {
    // 獲取驗證碼圖
    this.getCode();
}

結(jié)語

搞定抑钟，手工涯曲，最終效果如效果圖所示~
根據(jù)本篇，那算術(shù)驗證碼的效果已然是呼之欲出了……下一篇更新在塔！

qrcode.jpg

關(guān)注微信公眾號【流眸】回復(fù)【20620】獲取本案例源碼喲～