1、注册激活产品
chuagnlan.com 注册账号,进行认证,并激活 公共数据->图文验证码产品 创蓝云智-全面的API数据接口
2、获取验证码账号
联系万数对接技术,申请验证码账号 AppSecretKey、CaptchaAppId,用来验证滑块验证码是否正确。
3、使用方法
Html中通过<script id="CaptchaScript" src="https://captcha.253.com/Captcha.js"></script> 引入js,然后在html中通过使用定义button引用js。比如:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="demo.js"></script>
<script id="CaptchaScript" src="https://captcha.253.com/Captcha.js"></script>
<title>Document</title>
</head>
<body>
<h1>Welcome to use captcha!</h1>
<button id="CaptchaEl" data-appid="CaptchaAppId值" data-cbfn="callback" type="button" >验证</button>
</body>
</html>
此处提供操作验证码的常用方法
方法名 | 说明 | 传入参数 | 返回内容 |
show | 显示验证码。 | 无 | 无 |
destroy | 隐藏验证码。 | 无 | 无 |
getTicket | 获取验证码验证成功后的 ticket。 | 无 | Object:{"appid":"","ticket":""} |
其中 data-appid填写对接技术提供的 CaptchaAppId。
Demo.js内容如下:
window.callback = function(res){
console.log(res)
// res(用户主动关闭验证码)= {ret: 2, ticket: null}
// res(验证成功) = {ret: 0, ticket: "String", randstr: "String"}
if(res.ret === 0){
this.console.log("ticket:"+res.ticket);
this.console.log("randstr:"+res.randstr);
}
}
其中res.ticket、res.randstr 就是需要传给的验证码校验接口的参数值
4、验证码校验接口
接口描述
协议:HTTPS Post from-data
接口地址:https://api.253.com/open/wool/yzm
输入参数
参数名 | 类型 | 说明 |
appId | string | 应用id |
appKey | string | 应用key |
AppSecretKey | string | 验证码密钥(咨询对接人员) |
CaptchaAppId | string | 验证码appId(咨询对接人员) |
RendStr | string | 验证票据需要的随机字符串 |
Ticket | string | 验证码返回给用户的票据 |
IP | string | 用户操作来源的外网 IP |
输出参数
参数名 | 类型 | 说明 |
tradeNo | string | 交易流水号 |
chargeStatus | string | 是否收费 1收费,0不收费 |
message | string | 验证码密钥(咨询对接人员) |
CaptchaMsg | string | 状态描述及验证错误信息 |
EvilLevel | Integer | [0,100],恶意等级 |
RequestId | string | 验证码系统返回的唯一请求 ID,每次请求都会返回。定位问题时需要提供该次请求的 RequestId。 |
CaptchaCode | Integer | 1 OK 验证通过 |
code | 响应code码 200000 请求成功 400001 参数校验异常 400101 商户信息不存在 400102 商户IP地址不合法 400200 黑名单列表 400201 手机号码不能为空 400901 账户信息不存在 400902 应用类型信息不存在 403000 用户校验失败 403101 账户被系统禁用 403102 账户未激活 415000 请求数据转换异常 500000 系统异常 500002 数据处理异常 500003 业务操作失败 500004 远程调用失败 500005 账户余额异常 500006 请求外部系统失败 500901 邮箱未设置 500902 账户信息已存在 500903 账户相关能力已激活 504000 系统超时 510101 用户产品可用数量不足 |
返回示例:
正常:
{
· tradeNo: "656221037519835137",
· chargeStatus: 1,
· message: "成功",
· data: {
· CaptchaMsg: "OK",
· EvilLevel: 0,
· RequestId: "984d6957-902c-4be8-af3a-012309b63d80",
· CaptchaCode: 1
},
· code: "200000"
}
验证码CaptchaAppId、AppSecretKey错误:
{
· tradeNo: "656198616582455296",
· chargeStatus: 1,
· message: "成功",
· data: {
· CaptchaMsg: "SecretKeyCheck Error",
· EvilLevel: 0,
· RequestId: "e82f459a-cbf5-4167-9a9e-1d2c1bbdf9bd",
· CaptchaCode: 100
},
· code: "200000"
}
验证码ticket超时,需要重新获取:
{
· tradeNo: "656221420577095680",
· chargeStatus: 1,
· message: "成功",
· data: {
· CaptchaMsg: "verify timeout",
· EvilLevel: 0,
· RequestId: "060352db-3767-4a3c-bd31-3beb624b17ce",
· CaptchaCode: 8
},
· code: "200000"
}
Ticket和rendStr不一致,返回示例:
{
· tradeNo: "656222083289710592",
· chargeStatus: 1,
· message: "成功",
· data: {
· CaptchaMsg: "decrypt fail",
· EvilLevel: 0,
· RequestId: "593dd626-8563-4f4d-9f17-6fe3a216937a",
· CaptchaCode: 15
},
· code: "200000"
}
前端
方式一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://captcha.253.com/Captcha.js"></script>
</head>
<body>
<button id="CaptchaEl" data-appid="2027340696" data-cbfn="callback" type="button">
验证
</button>
</body>
<script>
window.callback = function (res) {
if (res.ret === 0) {
alert(res.ticket); // 票据
}
};
var captcha1 = new Captcha(
document.getElementById("CaptchaEl")
);
captcha1.show();
</script>
</html>
方式二
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="demo.js"></script>
<script id="CaptchaScript" src="https://captcha.253.com/Captcha.js"></script>
<title>Document</title>
</head>
<body>
<h1>Welcome to use captcha!</h1>
<button id="CaptchaEl" data-appid="2027340696" data-cbfn="callback" type="button" >验证</button>
</body>
<script>
window.callback = function(res){
console.log(res)
// res(用户主动关闭验证码)= {ret: 2, ticket: null}
// res(验证成功) = {ret: 0, ticket: "String", randstr: "String"}
if(res.ret === 0){
this.console.log("ticket:"+res.ticket);
this.console.log("randstr:"+res.randstr);
}
}
</script>
</html>