koa2 + koa-session + svg-captcha生成验证码

前端效果

最近需要用到验证码验证功能，于是就发现了这两个：

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