蓝创图文验证示例代码

最新推荐文章于 2023-06-09 16:01:18 发布

短暂又灿烂的

最新推荐文章于 2023-06-09 16:01:18 发布

阅读量480

点赞数 1

分类专栏：前端文章标签： webview javascript vue.js 滑块验证第三方

本文链接：https://blog.csdn.net/weixin_42232156/article/details/124626535

版权

前端专栏收录该内容

266 篇文章 11 订阅

订阅专栏

本文档详细介绍了如何使用创蓝云智的图文验证码服务，包括注册激活、获取账号、HTML引入、验证方法及接口调用。用户需通过注册创蓝云智账号并获取验证码账号，然后在HTML中引入Captcha.js，使用提供的方法展示和验证验证码。验证成功后，调用验证码校验接口，传递相关参数如appId、appKey、AppSecretKey等，根据返回的CaptchaCode判断验证结果。

摘要由CSDN通过智能技术生成

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	状态描述及验证错误信息注意：此字段可能返回 null，表示取不到有效值。
EvilLevel	Integer	[0,100]，恶意等级注意：此字段可能返回 null，表示取不到有效值。
RequestId	string	验证码系统返回的唯一请求 ID，每次请求都会返回。定位问题时需要提供该次请求的 RequestId。
CaptchaCode	Integer	1 OK 验证通过 6 user code len error 验证码长度不匹配 7 captcha no match 验证码答案不匹配/Randstr参数不匹配 8 verify timeout 验证码签名超时 9 Sequnce repeat 验证码签名重放 10 Sequnce invalid 验证码签名序列 11 Cookie invalid 验证码cooking信息不合法 12 sig len error 签名长度错误 13 verify ip no match ip不匹配 15 decrypt fail 验证码签名解密失败 16 appid no match 验证码强校验appid错误 17 cmd no much 验证码系统命令不匹配 18 uin no match 号码不匹配 19 seq redirect 重定向验证 20 opt no vcode 操作使用pt免验证码校验错误 21 diff 差别，验证错误 22 captcha type not match 验证码类型与拉取时不一致 23 verify type error 验证类型错误 24 invalid pkg 非法请求包 25 bad visitor 策略拦截 26 system busy 系统内部错误 100 param err appsecretkey 参数校验错误
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>