Captcha

Characteristic

CabloyJS abstracts a general mechanism of captcha, which isolates the API interface of captcha from the specific implementation ways, so it has the following characteristics:

1. The business module only needs to call the general captcha API interface, without considering the implementation details
2. We can develop captcha providers with different difficulties and styles, and each captcha provider is an independent module to achieve the effect of out of the box

Architecture Diagram

How to Change Captcha Provider

To change the current captcha provider, simply override the following parameters

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

// provider
config.provider = {
  module: 'a-captchasimple',
  name: 'simple',
};

Name	Description
module	captcha module name
name	captcha component name for rendering at frontend

Usage of Captcha

Render

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. Module a-captcha is an asynchronous loading module, so you need to use module.use to load the module, and then inject the component captchaContainer provided by module a-captcha into the component list

2. Component captchaContainer is responsible for the rendering of captcha

The component captchaContainer will use the rendering component provided by the captcha provider module according to the actual configuration, such as the rendering component of simple provided by the module a-captchasimple

3. The captcha entered by the user is saved in the variable captcha.code

4. Perform the backend API route and pass the variable captcha to the backend

Middleware - captchaVerify

Specify the middleware captchaVerify in the API route. The middleware captchaVerify will automatically verify whether the parameter captcha.code passed in from the frontend is correct. If not, an exception will be thrown automatically

Because the frontend uses the component eb-validate to wrap the form, it will automatically prompt the information of validation failure

test-party/backend/src/routes.js

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

How to Develop Captcha Provider

Please refer to the source code of the core module a-captchasimple