溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

node實現(xiàn)登錄圖片驗證碼的示例代碼

發(fā)布時間：2020-08-25 15:35:00 來源：腳本之家 閱讀：276 作者：瞌睡有點香 欄目：web開發(fā)

實現(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);
})

當前端調(diào)用 /api/getCaptcha 這個接口的時候,返回驗證碼信息,是svg格式

5.前端訪問

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

node實現(xiàn)登錄圖片驗證碼的示例代碼

但是現(xiàn)在我們又有需求了,當點擊這個驗證碼的時候，驗證碼會刷新

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拿到驗證碼的值了。

node實現(xiàn)登錄圖片驗證碼的示例代碼

為什么要保存在cookie里？ 因為后端生成的session我們前端是訪問不到的，如果等訪問到的話，那還談什么安全性可言，所以保存一份在cookie里供前端訪問。

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手