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:
- The business module only needs to call the general captcha API interface, without considering the implementation details
- 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>
-
Module
a-captcha
is an asynchronous loading module, so you need to usemodule.use
to load the module, and then inject the componentcaptchaContainer
provided by modulea-captcha
into the component list -
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 ofsimple
provided by the modulea-captchasimple
-
The captcha entered by the user is saved in the variable
captcha.code
-
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
Comments: