特点

CabloyJS提炼出了一个验证码通用框架,将验证码调用接口与验证码具体的实现方式隔离开来,从而具有以下特点:

  1. 业务模块只需调用通用的验证码接口,不需考虑验证码实现细节
  2. 可以开发不同难度、不同风格的验证码提供者,而且每个验证码提供者均是独立的模块,达到即插即用的效果
  3. 切换不同的验证码提供者,仅需修改配置即可

架构图

验证码通用框架a-captcha

如何切换验证码提供者

若要切换当前使用的验证码提供者,只需覆盖如下参数即可

a-captcha/backend/src/config/config.js

// provider
config.provider = {
  module: 'a-captchasimple',
  name: 'simple',
};
名称 说明
module 验证码提供者模块的名称
name 模块提供的验证码前端渲染组件的名称

如何使用

前端验证码渲染

test-party/front/src/kitchen-sink/pages/form-schema-validation/captcha.vue

<template>
  <eb-page>
    ...
          <f7-list-item>
            <template v-if="moduleCaptcha">
              <captchaContainer></captchaContainer>
            </template>
          </f7-list-item>
          <eb-list-input :label="$text('Captcha code')" floating-label type="text" clear-button :placeholder="$text('Captcha code')" v-model="captcha.code" dataPath="captcha/code">
          </eb-list-input>
    ...        
  </eb-page> 
</template>
<script>
export default {
  data() {
    return {
      item: {
        userName: null,
        password: null,
      },
      validateParams: {
        module: 'test-party',
        validator: 'formCaptchaTest',
      },
      captcha: {
        code: null,
      },
      moduleCaptcha: null,
    };
  },
  ...
  created() {
    // captcha
    this.$meta.module.use('a-captcha', module => {
      this.$options.components.captchaContainer = module.options.components.captchaContainer;
      this.moduleCaptcha = module;
    });
  },
  methods: {
    ...
    onPerformValidate() {
      return this.$api.post('kitchen-sink/form-captcha/signup', {
        data: this.item,
        captcha: this.captcha,
      }).then(() => {
        return true;
      });
    },
  },
};

</script>
  1. 模块a-captcha是异步加载模块,所以需要使用module.use加载模块,然后把模块a-captcha提供的组件captchaContainer注入到当前组件实例的组件清单中

  2. 组件captchaContainer负责验证码的渲染

组件captchaContainer会根据实际配置,使用验证码提供者模块提供的渲染组件,如模块a-captchasimple提供的渲染组件simple

  1. 用户输入的验证码保存在变量captcha.code

  2. 调用后端Api接口,将变量captcha传入后台

使用中间件captchaVerify

在后端Api接口的路由上使用中间件captchaVerify,中间件captchaVerify会自动验证前端传入的参数captcha.code是否正确,如果不正确会自动抛出异常

由于前端使用组件eb-validate包裹Form表单,因此会自动提示验证失败的信息

test-party/backend/src/routes.js

{ method: 'post', path: 'kitchen-sink/form-captcha/signup', controller: testKitchensinkFormSchemaValidation, middlewares: 'validate,captchaVerify',
  meta: { validate: { validator: 'formCaptchaTest' } },
},

如何开发验证码提供者

请参考核心模块a-captchasimple源码