node_egg驗證碼svg-captcha插件

egg驗證碼svg-captcha插件

安裝

$ npm install svg-captcha --save

egg中使用

// 大致的流程就是：
定義router路由=>定義一個處理該路由的Controller=>Controller把生成驗證碼交給Service來做=>Service調用svg-captcha生成一張svg二維碼返回給controller

router部分

module.exports = app => {
  const { router, controller } = app;
  router.post('/verify', controller.login.verify); 
}

Controller部分

const Controller = require('egg').Controller;
class LoginController extends Controller {
async verify() {
    const { ctx } = this;
    // 服務里面的方法
    let captcha = await this.service.verifyTools.captcha();
    // 返回的類型
    ctx.response.type = 'image/svg+xml';  
    // {data: '<svg.../svg>', text: 'abcd'}
    ctx.body = captcha.data; 
  }
}
module.exports = LoginController;

Service部分

'use strict';
const Service = require('egg').Service;
const svgCaptcha = require('svg-captcha');
// 驗證碼配置信息
const options = {
  size: 5,                 // 驗證碼長度(顯示幾個字符)
  fontSize: 100,           // 驗證碼的字體大小
  width: 500,              // 驗證碼的寬度
  height: 200,             // 驗證碼的高度
  background: '#cc9966',   // 驗證碼的背景顏色
};
class VerifyToolsService extends Service {
  async captcha() {
    // 第三方插件，實現驗證碼功能
    const captcha = svgCaptcha.create(options);
    // 將驗證碼text文本保存到全局session中， 觀察者/發布者訂閱模式
    this.ctx.session.code = captcha.text;
    return captcha;
  }
}
module.exports = VerifyToolsService;