接入流程
易盾验证码 接入流程图
前端接入
点击查看 易盾文档 易盾
开始
- 引入初始化js
<script src="http://cstaticdun.126.net/load.min.js"></script>
- 调用初始化函数
// initNECaptcha为全局函数，可直接调用
initNECaptcha({
// config对象，参数配置
captchaId: '从易盾申请的captchaId',
element: '#captcha',
mode: 'float',
width: '320px'
}, function onload (instance) {
// 初始化成功后得到验证实例instance，可以调用实例的方法
}, function onerror (err) {
// 初始化失败后触发该函数，err对象描述当前错误信息
})
- 参数配置
这里指初始化时传入的config对象，即调用初始化函数initNECaptcha时传入的第一个参数。智能无感知验证码设置参数有些不同，详见表格下方特别说明。
| 参数 | 参数类型 | 必填 | 默认 | 说明 |
|---|---|---|---|---|
| captchaId | string | 是 | 无 | 验证码id |
| element | string/HTMLElement | * | 无 | 容器元素或容器元素选择器。当mode是"popup"且用户使用表单提交时，必填；mode是"float"或"embed"时均是必填 |
| mode | string | 否 | PC端默认"float"，移动端默认"popup" | 验证码模式，常规验证码三种模式可选："float"、"embed"、"popup"，即触发式、嵌入式、弹出式。智能无感知验证码类型可设置"bind"模式，绑定自有按钮模式 |
| protocol | string | 否 | 与用户网站的网络协议一致 | 验证码传输数据使用的网络协议，可选："http"、"https" |
| width | number/string | 否 | "auto" | 验证按钮宽度，推荐使用宽度260px-400px。类型为string时，支持后缀px、rem、%，类型为number时，内部会将其转换成px单位的值。"auto"时，其宽度与容器元素宽度一致。mode为"popup"时，百分比单位无效。 |
| lang | string | 否 | "zh-CN" | 验证码语言选项。支持"zh-CN"-简体中文"、"zh-TW"-繁体中文、"en"-英语、"ja"-日语、"ko"-韩语、"th"-泰语、"vi"-越南语、"fr"-法语、"ru"-俄语、"ar"-阿拉伯语 |
| onReady | function | 否 | 无 | NECaptcha所有工作准备就绪，用户可以使用验证码时触发该回调。具体使用见完整示例 |
| onVerify | function | 否 | 无 | 验证码验证结束回调函数。具体使用见完整示例 |
- 实例方法
这里指initNECaptcha初始化成功，onload触发时传入的实例的方法。
(1) refresh：刷新验证码，获取新的验证信息
(2) destroy：销毁当前实例
(3) popUp：当验证码是常规验证码并且mode为"popup"时，可调用该实例方法弹出验证码进行验证
示例：
initNECaptcha(config, function onload (instance) {
// 可在此处调用实例方法
}, onerror)
- 完整示例
使用popup模式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>验证码示例-popup模式</title>
</head>
<body>
<button id="j-popup">点击弹出验证码</button>
<div id="captcha"></div>
<script charset="UTF-8" type="text/javascript" src="http://cstaticdun.126.net/load.min.js"></script>
<script>
var captchaIns;
initNECaptcha({
element: '#captcha',
captchaId: '从易盾申请的captchaId',
mode: 'popup',
width: '280px',
onVerify: function(err, data) {
// 用户验证码验证成功后，进行实际的提交行为
console.log('data=====',data)
}
}, function(instance) {
// 初始化成功后得到验证实例instance，可以调用实例的方法
captchaIns = instance
// captchaIns && captchaIns.popUp()
}, function(err) {
// 初始化失败后触发该函数，err对象描述当前错误信息
})
// 监听button的点击事件，弹出验证码
document.getElementById('j-popup').addEventListener('click', function () {
captchaIns && captchaIns.popUp()
})
</script>
</body>
</html>
onload和onReady的区别：
onload和onReady触发时，均会返回验证码的实例，即传入的第一个参数。二者触发时机有所不同，onload触发时，初始化函数结束和完成实例的生成，注意这并不代表验证码是可用的（比如验证码相关背景图片和信息并没有加载），此方法只触发一次。onReady触发时，说明验证码准备就绪（比如背景图片等信息均已加载），在popup模式下，每次弹出均会触发onReady，其他模式下onReady只触发一次。
网友评论