机器人恶意刷接口？加个验证码几分钟搞定！_登录系统 防止机器人登录(1)

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

校验成功，则认为是小白的人工操作，继续放行后续操作。

npm install -S svg-captcha

核心代码如下：

const express = require('express');
const session = require('express-session');
const serveStatic = require('serve-static');
const bodyParser = require('body-parser');

const app = express();
// parse application/x-www-form-urlencoded so that req will has a body attribute
app.use(bodyParser.urlencoded({ extended: false }))

app.use(serveStatic('./public'));
const port = 12024;

app.use(session({
  secret: '雷学委mySecret2021',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: false}
}))

const svgCaptcha = require('svg-captcha');
// a function to generate captcha and display on user screen
const captChaHandler = function(req, res){
    var captcha = svgCaptcha.create();
    req.session.captcha = captcha.text;
    res.type('svg');
    res.status(200).send(captcha.data);
}

app.get('/captcha',captChaHandler);

//user will submit form with code in request body and login handler will get captcha from session and check it with given code
app.post('/login', function(req, res){
    console.log('[雷学委] try login');
    console.log('[雷学委] body:', req.body);   
    var captchaCode = req.session.captcha
    console.log('[雷学委] captchaCode:', captchaCode)
    if(req.body && req.body.code == captchaCode){
        res.status(200).send(req.body.user + " 登录验证成功!"); 
    }else{
        console.log('[雷学委] 验证码校验失败');
        res.status(400).send("BadRequest, 验证码不对！");
    }
});

console.log('listening port ' + port);
app.listen(port);

对应的我们在页面可以编写类似下面的代码（非完整，仅重点展示核心实现）

<form>
姓名: <input type="text" id="username" value="雷学委" /><br/>
验证码：<input type="text" id="code" value="" />&nbsp;<img class="captcha" src="/captcha" οnclick={$(event.target).attr('src','/captcha?'+Math.random())} /> <br/>
<input type="submit" value="Submit" />
</form>
<br/><div id="result"></div>
<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("form").submit(function(e){
        e.preventDefault();
        var userName = $("#username").val();
        var code = $("#code").val();
        $.ajax({
            type: 'post',
            data: {user:userName, code: code},
            url: "http://localhost:12024/login/",
            success:function(data){$('#result').html(JSON.stringify(data));},
            error:function(error){$("#result").html(JSON.stringify(error));}
        })
    });
}

主要是为了实现下面的form表单：

对了，学委还有这个可以关注长期阅读 =>雷学委趣味编程故事汇编
或者=> 雷学委NodeJS系列

持续学习持续开发，我是雷学委！
编程很有趣，关键是把技术搞透彻讲明白。
创作不易，请多多支持，点赞收藏支持学委吧！

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

需要这份系统化资料的朋友，可以戳这里获取