0.1.5 • Published 5 years ago
mcaptcha v0.1.5
工作流程
验证体系
验证码(验证码类型为滑动拼图、文字点选)组件工作流程如下:
- 用户访问产品应用页面,请求显示验证码
- 用户按照提示要求完成云安全验证码拼图/点击
- 用户提交表单
- 产品后台将用户提交表单的验证码相关数据发送到云安全后台进行二次校验
- 验证码后台返回校验通过/失败
接入流程
兼容性
IE7+、Chrome、Firefox、Safari、Opera、主流手机浏览器、iOS 及 Android上的内嵌Webview。
开始使用
安装
npm install mcaptcha --save
浏览器引入
在浏览器中使用 script 和 link 标签直接引入文件。
<link href="http://dun.midea.com/assets/css/captcha.min.css?t=201903281201" rel="stylesheet"/>
<script src="http://dun.midea.com/assets/js/captcha.min.js?t=201903281201"></script>
地址中的t参数强烈建议设置为分钟级别时间戳,避免该文件被浏览器长时间缓存。
示例
import 'mcaptcha/dist/assets/js/captcha.min.js';
引入样式
import 'mcaptcha/dist/assets/css/captcha.min.css';
调用初始化函数
Captcha.init({config, refresh, success, fail)
// Captcha为全局函数,可直接调用
Captcha.init({
// config对象,参数配置
el: document.getElementById('captcha'),
// d: 'float',
t: 0,
dpr: 2,
w: 320,
refresh: () => {
// 刷新验证码
},
success: () => {
// 初始化成功后触发该函数
},
fail: () => {
// 初始化失败后触发该函数
},
});
参数配置
这里指初始化时传入的config对象,即调用初始化函数Captcha时传入的第一个参数。
参数 | 参数类型 | 必填 | 默认 | 说明 | |
---|---|---|---|---|---|
u | string | 否 | "http://10.16.38.76:4000" | api地址 | |
el | HTMLElement | 是 | 无 | 容器元素或容器元素选择器。 | |
d | string | 否 | "embed" | 验证码模式,常规验证码二种模式可选:"float"、"embed",即触发式、嵌入式。 | |
t | number | 否 | 0 | 验证码类型,常规验证码二种类型可选:0、1,即滑块、文字点选。 | |
w | number | number | string | 320 | 验证按钮宽度,推荐使用宽度260px-400px。 |
i | string | 否 | "zh" | 验证码语言选项。支持"zh"-简体中文"、"en"-英语、"ja"-日语。 |
实例方法
这里指 Captcha 初始化成功后得到的实例的方法。
- reset:重置验证码,获取新的验证信息
示例:
Captcha.reset();