基于react+koa的图片验证码

滑动图片验证码

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

效果图

基于react+koa的图片验证码

使用

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

业务逻辑

  1. 前端请求数据
  2. 后台返回主图片,和小滑块图片
  3. 前端交互,滑动之后,获取滑动的 x 值
  4. 将用户信息和 x 传给后台
  5. 后台判断是否正确,返回信息给前端

后端

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

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

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

前端

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

相关推荐