Node+express中添加驗證碼

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

1.使用的包
svg-captcha
　　在node.js或express.js中生成svg captcha驗證碼
cookie-parser
　　存儲驗證碼的值

//安裝
npm i svg-captcha cookie-parser express-session

2.index.js代碼

// 驗證碼
let svgCaptcha=require('svg-captcha');
// cookie
let cookoeParser=require('cookie-parser');
// 啓用cookie
app.use(cookoeParser());
// 啓用session
let session=require('express-session')
app.use(session());
// 創建一個驗證碼的路由
app.get('/verifyCode',(req,res)=>{
    // 創建驗證碼
    var captcha = svgCaptcha.create({
        color: true, // 驗證碼的字符是否有顏色，默認沒有，如果設定了背景，則默認有
        inverse:false,// 反轉顏色
        background: '#eee' // 驗證碼圖片背景顏色
        width:100, //  寬度
        height:40, // 高度
        fontSize:48, // 字體大小
        size:4, // 驗證碼的長度
        noise:3, // 干擾線條的數量
        ignoreChars: '0oO1ilI' // 驗證碼字符中排除 0o1i 這些較難識別的
    });
    // session裏面也放一份，並且文本不區分大小寫
    req.session=captcha.text.toLowerCase();
    // cookie放一份
    res.cookie('captcha',req.session);
    res.send(captcha.data);
    // 往session，cookie中都存入一個驗證碼，並且把驗證碼顯示在頁面上
})

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

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

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

生產的驗證碼如下：