基于react+koa的图片验证码

李世赞发布于2019-08-02 14:32 / 651人阅读

摘要：滑动图片验证码基于和的一个图片滑动验证码效果图使用前端后端业务逻辑前端请求数据后台返回主图片，和小滑块图片前端交互，滑动之后，获取滑动的值将用户信息和传给后台后台判断是否正确，返回信息给前端后端这里主要是图片处理的问题，尝试过。

滑动图片验证码

基于 react 和 koa2 的一个图片滑动验证码

效果图

使用

git clone https://gitee.com/darcrandex/image-code.git

// 前端
cd image-code/client
npm i
npm start

// 后端
cd image-code/server
npm i
npm start

业务逻辑

前端请求数据

后台返回主图片，和小滑块图片

前端交互，滑动之后，获取滑动的 x 值

将用户信息和 x 传给后台

后台判断是否正确，返回信息给前端

后端

这里主要是图片处理的问题，尝试过node-canvas,node-images,node-sharp。但是都存在安装不了或者需要安装很麻烦的依赖库的问题。最后选择node-gm。基本上可以满足需求。

不过还是需要安装一个依赖库，GraphicsMagick或者ImageMagick。推荐是GraphicsMagick，但其实ImageMagick也够用了。

关于安装ImageMagick。我的环境是windows，除了安装软件之外，还需要配置windows 环境变量。网上查一下好了。

前端

前端部分没有什么大的问题。只有axios需要配置一下(/src/utils/axios.js)，主要是跨越的问题。如果不使用axios，就根据情况解决跨域就可以了。

云服务器 GPU云服务器图片验证码识别验证码图片生成验证码图片接口图片验证码接口

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53872.html

基于react+koa的图片验证码

摘要：滑动图片验证码基于和的一个图片滑动验证码效果图使用前端后端业务逻辑前端请求数据后台返回主图片，和小滑块图片前端交互，滑动之后，获取滑动的值将用户信息和传给后台后台判断是否正确，返回信息给前端后端这里主要是图片处理的问题，尝试过。滑动图片验证码基于 react 和 koa2 的一个图片滑动验证码效果图 showImg(https://segmentfault.com/img/bVb...

AlexTuan 2019-08-23 15:58 评论0 收藏0
一只node爬虫的升级打怪之路

摘要：我是一个知乎轻微重度用户，之前写了一只爬虫帮我爬取并分析它的数据，我感觉这个过程还是挺有意思，因为这是一个不断给自己创造问题又去解决问题的过程。所以这只爬虫还有登陆知乎搜索题目的功能。我一直觉得，爬虫是许多web开发人员难以回避的点。我们也应该或多或少的去接触这方面，因为可以从爬虫中学习到web开发中应当掌握的一些基本知识。而且，它还很有趣。我是一个知乎轻微重度用户，之前写了一只爬...

shiweifu 2019-08-21 17:37 评论0 收藏0
Vue+Koa+Mongodb 小练习

摘要：小练习作者本文首发博客功能基于进行登录，注册，留言的简单网站。所以这个小练习，从一个简单的方面入手，希望能给踩过同样多坑的同路人一点启发。就意味着要重新登录。的作用是进行进程守护，当你的意外的停止的时候，进行重启。 Vue+Koa+Mongodb 小练习作者： Pawn 本文首发： Pawn博客功能：基于vue koa mongodb进行登录，注册，留言的简单网站。体验地址： ...

赵春朋 2019-06-26 17:51 评论0 收藏0
2017年1月前端月报

摘要：平日学习接触过的网站积累，以每月的形式发布。年以前看这个网址概况在线地址前端开发群月报提交原则技术文章新的为主。平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 概况在线地址：http://www.kancloud.cn/jsfront/month/82796 JS前端开发群月报提交原则：技...

FuisonDesign 2019-08-29 12:35 评论0 收藏0