node實(shí)現(xiàn)登錄圖片驗(yàn)證碼的示例代碼
實(shí)現(xiàn)這里的圖形驗(yàn)證碼我是用的node里svg-captcha模塊,可以全部支持字符和數(shù)字，全平臺(tái)支持，用起來(lái)很簡(jiǎ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,忽略大小寫(xiě)
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.編寫(xiě)后臺(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ī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
windows離線環(huán)境安裝node-sass全過(guò)程
文章介紹了如何在Windows系統(tǒng)上安裝和配置node-sass,并提供了一個(gè)詳細(xì)的步驟指南,首先,通過(guò)命令行查看支持版本；然后,下載對(duì)應(yīng)版本的node-sass安裝包；接著,在npm配置文件中增加SASS_BINARY_PATH路徑配置；最后,執(zhí)行npmi命令完成安裝2024-12-12
由于npm軟件包管理器有時(shí)可能不太穩(wěn)定,安裝依賴(lài)包容易報(bào)錯(cuò),所以就有了cnpm,這篇文章主要給大家介紹了關(guān)于cnpm安裝的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
Express 是一個(gè)簡(jiǎn)潔、靈活的 node.js Web 應(yīng)用開(kāi)發(fā)框架, 它提供一系列強(qiáng)大的特性，幫助你創(chuàng)建各種 Web 和移動(dòng)設(shè)備應(yīng)用，本篇文章給大家介紹nodejs的express使用教程，感興趣的朋友參考下2015-11-11
Nodejs Playwright 2Captcha 驗(yàn)證碼識(shí)別實(shí)現(xiàn)自動(dòng)登陸功能
日常工作當(dāng)中,為了提高工作效率,我們可能會(huì)寫(xiě)腳本來(lái)自動(dòng)執(zhí)行任務(wù),有些網(wǎng)站因?yàn)樾枰脩?hù)登陸,所以腳本的自動(dòng)登陸功能必不可少,這篇文章主要介紹了Nodejs Playwright 2Captcha 驗(yàn)證碼識(shí)別實(shí)現(xiàn)自動(dòng)登陸功能,需要的朋友可以參考下2024-05-05
在JavaScript里面，運(yùn)行過(guò)程中的錯(cuò)誤的類(lèi)型總是被人忽略，這篇文章給大家詳細(xì)介紹了如何在Node.js下自定義錯(cuò)誤類(lèi)型，對(duì)大家學(xué)習(xí)或者使用Node.js具有一定的參考借鑒價(jià)值，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-10-10
nodejs+koa2 實(shí)現(xiàn)模仿springMVC框架
這篇文章主要介紹了nodejs+koa2 實(shí)現(xiàn)模仿springMVC框架,本文通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
本篇文章主要介紹了詳解使用 nvm 管理多版本 node的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
node.js中的fs.renameSync方法使用說(shuō)明
這篇文章主要介紹了node.js中的fs.renameSync方法使用說(shuō)明,本文介紹了fs.renameSync的方法說(shuō)明、語(yǔ)法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12
Linux?Ubuntu升級(jí)nodejs版本的簡(jiǎn)單步驟
Node.js是一種對(duì)應(yīng)于JavaScript運(yùn)行時(shí)環(huán)境的編程語(yǔ)言,這篇文章主要給大家介紹了關(guān)于Linux?Ubuntu升級(jí)nodejs版本的簡(jiǎn)單步驟,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
Express + Session 實(shí)現(xiàn)登錄驗(yàn)證功能
本文主要介紹在 Express 框架中，如何使用 Session 來(lái)實(shí)現(xiàn)用戶(hù)登錄身份驗(yàn)證。對(duì)express session實(shí)現(xiàn)登錄驗(yàn)證相關(guān)知識(shí)，感興趣的朋友一起看看吧2017-09-09