驗證碼這個玩意，無論是開發者還是使用者都十分熟悉：
- 注冊？請輸入驗證碼...
- 登入？請輸入驗證碼...
- 修改密碼？請輸入驗證碼...
- 删除？請輸入驗證碼...
- ……
總之，各類敏感操作，請輸入驗證碼！
這麼多場景中用到驗證碼，它到底有什麼用？作為前端開發者，如何去實作呢？接下來步入正題。
驗證碼
- 是一種區分使用者是計算機還是人的公共全自動程式。區分使用者是真人還是程式，防止程式頻繁通路伺服器占用過多的資源。
作用：
- 防止惡意破解密碼、刷票、論壇灌水等；
- 有效防止某個黑客對某一個特定注冊使用者用特定程式暴力破解方式進行不斷的登陸嘗試
- 敏感操作前的提示
- 防止惡意注冊
驗證碼表現方式：
- 随機字元串驗證碼
- 算數驗證碼
- Gif動畫驗證碼
- 滑動驗證碼
- 點選驗證碼
- 短信驗證碼
- 手機語音驗證碼
接下來會使用純前端方式實作其中的一些表現，如
随機字元串驗證碼
、
算數驗證碼
、
滑動驗證碼
等。
本篇記錄随機字元串驗證碼。
随機字元串驗證碼
一般來講，字元串、算數、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> 複制
js
// 需要的資料
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();
} 複制
結語
搞定，收工～最終效果如效果圖所示~ 根據本篇，那算術驗證碼的效果已然是呼之欲出了……下一篇更新！