node實現登入圖片驗證碼

是肖途不是鄭途丶發表於2018-04-19

今天搗鼓自己的後臺專案的時候有一個登入驗證碼的功能需要實現，開個坑記錄下。

具體原始碼: 我的部落格

完整功能介面:

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" >
複製程式碼

node實現登入圖片驗證碼

但是現在我們又有需求了,當點選這個驗證碼的時候，驗證碼會重新整理

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

node實現登入圖片驗證碼

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

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

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

相關文章