怎樣操作node實(shí)現(xiàn)登錄圖片驗(yàn)證碼

1.安裝

cnpm i svg-captcha --save

2.在使用的地方導(dǎo)入

var svgCaptcha = require('svg-captcha');

3.獲取驗(yàn)證碼

3-1 安裝 cookie-parser ,作用是將獲取到的session保存到cookie，方便前端訪問(wèn)驗(yàn)證

cnpm i cookie-parser --save

3-2 使用 cookie-parser

const cookieParase = require('cookie-parser');
app.use(cookieParase());

這樣就可以在項(xiàng)目里使用cookie了

3-3 獲取驗(yàn)證碼

// 獲取驗(yàn)證碼
 getCaptcha(req, res, next){
 var captcha = svgCaptcha.create({ 
 // 翻轉(zhuǎn)顏色 
 inverse: false, 
 // 字體大小 
 fontSize: 36, 
 // 噪聲線條數(shù) 
 noise: 2, 
 // 寬度 
 width: 80, 
 // 高度 
 height: 30, 
 }); 
 // 保存到session,忽略大小寫 
 req.session = captcha.text.toLowerCase(); 
 console.log(req.session); //0xtg 生成的驗(yàn)證碼
 //保存到cookie 方便前端調(diào)用驗(yàn)證
 res.cookie('captcha', req.session); 
 res.setHeader('Content-Type', 'image/svg+xml');
 res.write(String(captcha.data));
 res.end();
 },

做到這只是實(shí)現(xiàn)了生成驗(yàn)證碼的功能，那么要訪問(wèn)呢？

4.編寫后臺(tái)路由

// 獲取驗(yàn)證碼
router.get('/api/getCaptcha', function(req, res, next) {
 return api.getCaptcha(req, res, next);
})

當(dāng)前端調(diào)用 /api/getCaptcha 這個(gè)接口的時(shí)候,返回驗(yàn)證碼信息,是svg格式

5.前端訪問(wèn)

<img src="/api/getCaptcha" alt="captcha" >

但是現(xiàn)在我們又有需求了,當(dāng)點(diǎn)擊這個(gè)驗(yàn)證碼的時(shí)候，驗(yàn)證碼會(huì)刷新

6.實(shí)現(xiàn)點(diǎn)擊驗(yàn)證碼刷新

更改一下剛剛驗(yàn)證碼的結(jié)果，給他加一個(gè)外層a標(biāo)簽，并給他綁定一個(gè)點(diǎn)擊事件,我這里用了 vue ，所以是 @click ,其他框架同理.

<a href="#" rel="external nofollow" @click="editCaptcha">
 <img src="/api/getCaptcha" alt="" ref="imgYzm">
</a>

點(diǎn)擊事件 editCaptcha

editCaptcha () {
 this.$refs.imgYzm.src = '/api/getCaptcha?d='+Math.random()
},

這樣就實(shí)現(xiàn)了點(diǎn)擊驗(yàn)證碼刷新的問(wèn)題

7.前端驗(yàn)證驗(yàn)證碼

剛剛我們?cè)诤笈_(tái)得到了驗(yàn)證碼，但是前端要怎么驗(yàn)證呢？

記得在3-2的時(shí)候我們安裝了 cookie-parser ，并且在3-3里將生成的session保存在cookie里，這里我們前端就可以通過(guò)訪問(wèn)這個(gè)cookie拿到驗(yàn)證碼的值了。

為什么要保存在cookie里？ 因?yàn)楹蠖松傻膕ession我們前端是訪問(wèn)不到的，如果等訪問(wèn)到的話，那還談什么安全性可言，所以保存一份在cookie里供前端訪問(wèn)。

let captcha = document.cookie.split('=')[1]
 if(this.yzm != captcha){
 return this.$message.warning('驗(yàn)證碼錯(cuò)誤')
 }

最后的前端輸入賬號(hào)密碼驗(yàn)證碼做登錄驗(yàn)證等等我就不多概述了。具體思想就是這樣。

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

如何使用vue源碼解析事件機(jī)制

如何操作JS獲取用戶所在城市及地理位置

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com