:::tip
此文档的示例代码使用Nodejs
,仅供参考,部分方法需用户自己实现,具体实现可根据实际情况作调整。
:::
用户服务器端应增加 outage
接口,此接口为jsonp
类型, 接口地址以参数的形式传入前端验证码初始化函数中,进入宕机模式后由sdk调用。
前端初始化示例代码:
vaptcha({
vid: '****',
container: '#vaptcha-container',
outage: '/outage', // 你服务端提供的接口地址,包含获取图片和验证轨迹两种操作
mode: 'downtime' // 加入此参数直接进入宕机模式,用于调试,上线请删除
}).then(function(obj){
obj.render()
})
参数名 | 类型 | 说明 |
---|---|---|
callback | string |
jsonp回调函数名 |
action | string |
值为get 获取验证图片,值为verify 进行人机验证。 |
v | string |
轨迹参数 |
challenge | string |
流水号 |
outage
接口的aciton
值 为get
时的操作
获取流程:
-
获取服务器宕机
key
请求 http://d.vaptcha.com/config ,此接口返回
json
数据,格式{ "key":"*************", "active": false }
其中
key
即为宕机key
,示例代码:// getJson 方法需自行实现,获取接口的Json数据 const result = getJson('http://d.vaptcha.com/config'); const downtimeKey = result.key;
active
表示是否进入宕机,true
表示进入宕机。if(!result.active) { // vaptcha并未宕机,返回失败 // 调试时需跳过此判断 }
-
生成随机数
randomStr
从“0123456789abcdef”中取4位16进制数的字符串
randomStr
,示例代码:const getRandomStr = () => { const str = '0123456789abcdef' return Array(4).fill(0).map(v => str[Math.floor(Math.random() * 16)]).join('') } const randomStr = getRandomStr();
-
生成验证图
imgid
取宕机
key
和randomStr
的md5
值作为验证图的imgid
,示例代码:const imgid = md5(key + radomStr);
-
生成流水号
challenge
服务器端生成唯一字符串
challenge
,用于标识本次验证操作,如:GUID ,自增数等,官方的示例操作是将字符串作为键,imgid
作为值存入session
中,示例代码const challenge = uniqueId(); setSession(challenge, imgid, 3 * 60 * 1000); // challenge 3分钟有效期
同一次验证多次请求图片,所以会带上上一次的
challenge
,get
接口接受到参数challenge
后,不用再次生成challenge
,只需重新生成imgid
。示例代码:let challenge = getRequest('challenge'); if(isEmpty(challenge)) { challenge = uniqueId(); } setSession(challenge, imgid, 3 * 60 * 1000); // challenge 3分钟有效期
-
返回
jsonp
格式数据,code
为返回码,0103
表示获取成功,0104
表示获取失败。callback({ code: '0103', imgid: imageid, challenge:challenge })
outage
接口的aciton
值 为verify
时的操作
用户在浏览器上完成人机验证后,前端sdk向outage接口发起验证请求。
验证流程:
-
生成轨迹验证
validatekey
首先通过请求参数
challenge
获取session
中缓存的imgid
,再取请求参数v
和imgid
的md5
值作为用于验证的validatekey
,示例代码:const challenge = getRequest('challenge'); const v = getRequest('v'); const imgid = getSession(challenge); const validatekey = md5(imgid + v);
-
服务器端发起轨迹验证请求
请求地址 "http://d.vaptcha.com/",接口返回`json`数据,示例代码:
const result = getJson('http://d.vaptcha.com/' + validatekey); if(result.code === 200) { /*验证成功,返回token*/} else {/*验证错误*/}
-
验证成功,返回
token
验证成功后生成一个唯一的
token
,存在服务端用于提交表单的验证,并将token
返回,同时清除chalenge
的session
信息,示例代码:clearSession(challenge); const token = uniqueId(); setSession('token', token, 3 * 60 * 1000); // token 3分钟有效期
-
返回验证结果 返回
jsonp
格式数据,正确返回:callback({ code:'0103', token:validatetoken })
前端完成验证提交表单数据时,将 token
一并提交,服务器端验证通过 token
内容判断用户验证操作是否有效,token
只可验证一次,验证通过后应清除token
。示例代码:
const token = getRequest('token');
if (getSession('token')) {
clearSession('token');
return /*pass*/
} else {
return /*fail*/
}