node實現(xiàn)登錄圖片驗證碼的示例代碼
實現(xiàn)這里的圖形驗證碼我是用的node里svg-captcha模塊,可以全部支持字符和數(shù)字，全平臺支持，用起來很簡單。
1.安裝
cnpm i svg-captcha --save
2.在使用的地方導(dǎo)入
var svgCaptcha = require('svg-captcha');
3.獲取驗證碼
3-1 安裝 cookie-parser ,作用是將獲取到的session保存到cookie，方便前端訪問驗證
cnpm i cookie-parser --save
3-2 使用 cookie-parser
const cookieParase = require('cookie-parser');
app.use(cookieParase());
這樣就可以在項目里使用cookie了
3-3 獲取驗證碼
// 獲取驗證碼
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 生成的驗證碼
//保存到cookie 方便前端調(diào)用驗證
res.cookie('captcha', req.session);
res.setHeader('Content-Type', 'image/svg+xml');
res.write(String(captcha.data));
res.end();
},
做到這只是實現(xiàn)了生成驗證碼的功能，那么要訪問呢？
4.編寫后臺路由
// 獲取驗證碼
router.get('/api/getCaptcha', function(req, res, next) {
return api.getCaptcha(req, res, next);
})
當(dāng)前端調(diào)用 /api/getCaptcha 這個接口的時候,返回驗證碼信息,是svg格式
5.前端訪問
<img src="/api/getCaptcha" alt="captcha" >
但是現(xiàn)在我們又有需求了,當(dāng)點擊這個驗證碼的時候，驗證碼會刷新
6.實現(xiàn)點擊驗證碼刷新
更改一下剛剛驗證碼的結(jié)果，給他加一個外層a標簽，并給他綁定一個點擊事件,我這里用了 vue ，所以是 @click ,其他框架同理.
<a href="#" rel="external nofollow" @click="editCaptcha"> <img src="/api/getCaptcha" alt="" ref="imgYzm"> </a>
點擊事件 editCaptcha
editCaptcha () {
this.$refs.imgYzm.src = '/api/getCaptcha?d='+Math.random()
},
這樣就實現(xiàn)了點擊驗證碼刷新的問題
7.前端驗證驗證碼
剛剛我們在后臺得到了驗證碼，但是前端要怎么驗證呢？
記得在3-2的時候我們安裝了 cookie-parser ，并且在3-3里將生成的session保存在cookie里，這里我們前端就可以通過訪問這個cookie拿到驗證碼的值了。
為什么要保存在cookie里？ 因為后端生成的session我們前端是訪問不到的，如果等訪問到的話，那還談什么安全性可言，所以保存一份在cookie里供前端訪問。
let captcha = document.cookie.split('=')[1]
if(this.yzm != captcha){
return this.$message.warning('驗證碼錯誤')
}
最后的前端輸入賬號密碼驗證碼做登錄驗證等等我就不多概述了。具體思想就是這樣。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
windows離線環(huán)境安裝node-sass全過程
文章介紹了如何在Windows系統(tǒng)上安裝和配置node-sass,并提供了一個詳細的步驟指南,首先,通過命令行查看支持版本；然后,下載對應(yīng)版本的node-sass安裝包；接著,在npm配置文件中增加SASS_BINARY_PATH路徑配置；最后,執(zhí)行npmi命令完成安裝2024-12-12
由于npm軟件包管理器有時可能不太穩(wěn)定,安裝依賴包容易報錯,所以就有了cnpm,這篇文章主要給大家介紹了關(guān)于cnpm安裝的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-02-02
Express 是一個簡潔、靈活的 node.js Web 應(yīng)用開發(fā)框架, 它提供一系列強大的特性，幫助你創(chuàng)建各種 Web 和移動設(shè)備應(yīng)用，本篇文章給大家介紹nodejs的express使用教程，感興趣的朋友參考下2015-11-11
Nodejs Playwright 2Captcha 驗證碼識別實現(xiàn)自動登陸功能
日常工作當(dāng)中,為了提高工作效率,我們可能會寫腳本來自動執(zhí)行任務(wù),有些網(wǎng)站因為需要用戶登陸,所以腳本的自動登陸功能必不可少,這篇文章主要介紹了Nodejs Playwright 2Captcha 驗證碼識別實現(xiàn)自動登陸功能,需要的朋友可以參考下2024-05-05
在JavaScript里面，運行過程中的錯誤的類型總是被人忽略，這篇文章給大家詳細介紹了如何在Node.js下自定義錯誤類型，對大家學(xué)習(xí)或者使用Node.js具有一定的參考借鑒價值，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-10-10
nodejs+koa2 實現(xiàn)模仿springMVC框架
這篇文章主要介紹了nodejs+koa2 實現(xiàn)模仿springMVC框架,本文通過實例圖文相結(jié)合給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
本篇文章主要介紹了詳解使用 nvm 管理多版本 node的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了node.js中的fs.renameSync方法使用說明,本文介紹了fs.renameSync的方法說明、語法、接收參數(shù)、使用實例和實現(xiàn)源碼,需要的朋友可以參考下2014-12-12
Node.js是一種對應(yīng)于JavaScript運行時環(huán)境的編程語言,這篇文章主要給大家介紹了關(guān)于Linux?Ubuntu升級nodejs版本的簡單步驟,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-12-12
Express + Session 實現(xiàn)登錄驗證功能
本文主要介紹在 Express 框架中，如何使用 Session 來實現(xiàn)用戶登錄身份驗證。對express session實現(xiàn)登錄驗證相關(guān)知識，感興趣的朋友一起看看吧2017-09-09