前端效果
最近需要用到验证码验证功能，于是就发现了这两个：
svg-captcha：svg-captcha文档
koa-session：koa-session文档
这里的验证码就是这个，经常在一些网站或者系统登录填写几个字母或者数字的简单验证码。下面的这个。
验证码
那就直接上代码咯，来自代码搬运工的复制和粘贴~
我服务端用的是koa2，所以有些方法看到不一样的是koa2的咯，其实也都差不多，反正这这俩东西用起来也很简单。
svg-captcha
首先得install上咯
npm install --save svg-captcha // 不管三七二十八先install
let svgCaptcha = require('svg-captcha'); // 导入咯
svg-captcha
就是这两块，require之后直接就可以使用了，里面配置的话上边图片有注释了，其实可以在官网文档直接copy，按照自己需要的参数修改就好。然后我这边不是在接口开放出去了嘛，然后去看下这个get请求有没有拿到。
验证码
这图能看到，这个帅的一批的验证码就出来了。然后因为因为验证码用来交互的，和前端校验的，所以这里也用到了一个session在服务端保存，关于cookie和session都是干啥的可以去google~
koa-session文档
一样，也是先install上
$ npm install koa-session
然后依旧的导入它，然后也是这两块，一个要设置下签名，和一个session的配置，然后下面直接将它实例化就可以使用了，然后配置的下面的图，这里是我这边的配置，具体配置可以去看官方文档的配置来自定义
配置
使用
然后就可以直接在接口里面写入了，ctx.session.key = value。
然后去看下前端那边的使用。一个简单的demo，在页面上显示一个验证码，点击刷新。由于这里验证码的接口直接返回的图片，每次获取请求这个地址就可以了，那么可以在每次点击验证码图片的时候去刷新这个地址，后面加上时间戳或者随机数啥的都ok，你钟意就好~
html
网友评论