node.js和express.js中添加驗證碼

驗證碼在平時訪問網站中非常常見，能夠有效的避免機器操作，惡意攻擊

比如：學信網中https://www.chsi.com.cn/

用戶輸入三次密碼不正確的時候，再輸入密碼提交的時候就該提醒你輸入驗證碼，那為什么會存在驗證碼，驗證碼是怎么運作的呢？

 

抱歉，畫的有點像鬼畫符，哈哈，總結來說就是，生成驗證碼后會在cookie中存儲驗證碼，然后再用驗證碼生成一張圖片，用戶輸入完驗證碼之后和cookie中的值進行對比，如果一樣就驗證成功

 

1.使用的包

svg-captcha

　　在node.js或express.js中生成k可縮放向量圖形驗證碼

cookie-parser

　　存儲驗證碼的值

 

2.index.js代碼

// 驗證碼
let svgCaptcha=require('svg-captcha');
// cookie
let cookoeParser=require('cookie-parser');
// 啟用cookie
app.use(cookoeParser());
// 創建一個驗證碼
app.get('/verifyCode',(req,res)=>{
    // 創建驗證碼
    var captcha = svgCaptcha.create({
        color: true, // 彩色
        //inverse:false,// 反轉顏色
        width:100, //  寬度
        height:40, // 高度
        fontSize:48, // 字體大小
        size:4, // 驗證碼的長度
        noise:3, // 干擾線條
        ignoreChars: '0oO1ilI' // 驗證碼字符中排除 0o1i
    });
    // console.log(captcha.data); svg 直接輸出到頁面
    // session里面也放一份
    req.session=captcha.text.toLowerCase();
    // cookie放一份
    res.cookie('captcha',req.session);
    res.send(captcha.data);
    // 往session，cookie中都存入一個驗證碼，並且把驗證碼顯示在頁面上
})

 

3.index.html頁面調用驗證碼

調用的時候使用ajax的方式調用，每次點擊圖片也重新調用驗證碼

<input type='text' name='verify' placeholder='請輸入驗證碼'/>
<span id='verify'></span>
<script>
function getVerify(){
    $.ajax({
        url:'/verifyCode?t='+Math.random(),
        type:'get',
        success:function(data){
            $('#verify').html(data);
        }
    })
}
getVerify()
$('#verify').on('click',function(){
    getVerify()
})
</script>

 

這樣就能在模板頁面顯示驗證碼了，后面就可以做驗證碼是否正確的處理了

 

4.生成一個可計算的驗證碼

// 生成一個可計算的驗證碼
app.get('/verify',(req,res)=>{
    const captcha = svgCaptcha.createMathExpr({
        size: 4, // 驗證碼長度
        width:160,
        height:60,
        fontSize: 50,
        ignoreChars: '0oO1ilI', // 驗證碼字符中排除 0o1i
        noise: 2, // 干擾線條的數量
        color: true, // 驗證碼的字符是否有顏色，默認沒有，如果設定了背景，則默認有
        background: '#eee' // 驗證碼圖片背景顏色
    })
    res.send(captcha.data);
})

5.在koa中使用驗證碼

const Koa = require('koa'); 
const Router = require('koa-router') // koa 路由中間件 
const svgCaptcha = require('svg-captcha')
const app = new Koa();
const router = new Router(); // 實例化路由 

router.get('/home', async (ctx, next) => {

  const cap = svgCaptcha.create({
    size: 4, // 驗證碼長度
    width:160,
    height:60,
    fontSize: 50,
    ignoreChars: '0oO1ilI', // 驗證碼字符中排除 0o1i
    noise: 2, // 干擾線條的數量
    color: true, // 驗證碼的字符是否有顏色，默認沒有，如果設定了背景，則默認有
    background: '#eee' // 驗證碼圖片背景顏色
  })
  
  let img = cap.data // 驗證碼
  let text = cap.text.toLowerCase() // 驗證碼字符，忽略大小寫
  ctx.type = 'html'
  ctx.body = `${img}<br><a href="javascript: window.location.reload();">${text}</a>`
});

app.use(router.routes());

app.listen(3333, () => {
  console.log('This server is running at http://localhost:' + 3333)
})