node實現登陸圖片驗證碼

今天搗鼓本身的後臺項目的時候有一個登陸驗證碼的功能須要實現，開個坑記錄下。

具體源碼: 個人博客

完整功能界面:

實現

實現這裏的圖形驗證碼我是用的node裏svg-captcha模塊,能夠所有支持字符和數字，全平臺支持，用起來很簡單。

1.安裝

cnpm i svg-captcha --save
複製代碼

2.在使用的地方導入

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({  
        // 翻轉顏色 
        inverse: false,  
        // 字體大小 
        fontSize: 36,  
        // 噪聲線條數 
        noise: 2,  
        // 寬度 
        width: 80,  
        // 高度 
        height: 30,  
      });  
      // 保存到session,忽略大小寫 
      req.session = captcha.text.toLowerCase(); 
      console.log(req.session); //0xtg 生成的驗證碼
      //保存到cookie 方便前端調用驗證
      res.cookie('captcha', req.session); 
      res.setHeader('Content-Type', 'image/svg+xml');
      res.write(String(captcha.data));
      res.end();
    },
  複製代碼

作到這只是實現了生成驗證碼的功能，那麼要訪問呢？

4.編寫後臺路由

// 獲取驗證碼
router.get('/api/getCaptcha', function(req, res, next) {
  return api.getCaptcha(req, res, next);
})
複製代碼

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

5.前端訪問

<img src="/api/getCaptcha" alt="captcha" >
複製代碼

可是如今咱們又有需求了,當點擊這個驗證碼的時候，驗證碼會刷新

6.實現點擊驗證碼刷新

更改一下剛剛驗證碼的結果，給他加一個外層a標籤，並給他綁定一個點擊事件,我這裏用了vue，因此是 @click,其餘框架同理.

<a href="#" @click="editCaptcha">
    <img src="/api/getCaptcha" alt="" ref="imgYzm"> </a>
複製代碼

點擊事件editCaptcha

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

這樣就實現了點擊驗證碼刷新的問題

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('驗證碼錯誤')
    }
複製代碼

最後的前端輸入帳號密碼驗證碼作登陸驗證等等我就很少概述了。具體思想就是這樣。