mcaptcha

工作流程

验证体系

验证码（验证码类型为滑动拼图、文字点选）组件工作流程如下:

• 用户访问产品应用页面，请求显示验证码
• 用户按照提示要求完成云安全验证码拼图/点击
• 用户提交表单
• 产品后台将用户提交表单的验证码相关数据发送到云安全后台进行二次校验
• 验证码后台返回校验通过/失败

接入流程

兼容性

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
i	string	否	"zh"	验证码语言选项。支持"zh"-简体中文"、"en"-英语、"ja"-日语。

实例方法

这里指 Captcha 初始化成功后得到的实例的方法。

• reset：重置验证码，获取新的验证信息

示例：

Captcha.reset();