# 滑块验证码
## 接入说明
### 步骤1：动态引入验证码 JS
Web 页面需动态引入验证码 JS，在业务需要验证时，唤起验证码进行验证。
```
<!-- 动态引入验证码JS示例 -->
<script src="http://libs.kis6.com/js/capter/stable.js"></script>
```
>[info] 注意：必须动态引入验证码 JS。如使用本地缓存，或通过其他手段规避动态加载，会导致验证码无法正常更新，对抗能力无法保证，甚至引起误拦截。
### 步骤2：设置发起验证码的按钮ID
```
<!--不可修改按钮id-->
<button id="CaptchaId" type="button" class="btn btn-primary">发起验证按钮</button>
```
### 步骤3：在回调函数中发起后端验证
~~~
<script src="http://libs.kis6.com/js/jquery/1.8.3.min.js"></script>
<script>
// 定义回调函数
function callback(res) {
// 第一个参数传入回调结果，结果如下：
// ret Int 验证结果，0：验证成功。2：用户主动关闭验证码。
// ticket String 验证成功的票据，当且仅当 ret = 0 时 ticket 有值。
// randstr String 本次验证的随机串，后续票据校验时需传递该参数。
console.log('callback:', res);
// res（用户主动关闭验证码）= {ret: 2, ticket: null}
// res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
// res（请求验证码发生错误） = {ret: 0, ticket: "String", randstr: "String", errorCode: Number, errorMessage: "String"}
// 此处代码仅为验证结果的展示示例，真实业务接入，建议基于ticket和errorCode情况做不同的业务处理
if (res.ret === 0) {
// 复制结果至剪切板
var str = '【randstr】->【' + res.randstr + '】 【ticket】->【' + res.ticket + '】';
var ipt = document.createElement('input');
ipt.value = str;
document.body.appendChild(ipt);
ipt.select();
document.execCommand("Copy");
document.body.removeChild(ipt);
alert('1. 返回结果（randstr、ticket）已复制到剪切板，ctrl+v 查看。\n2. 打开浏览器控制台，查看完整返回结果。');
if($('#appcode').val().length!=32){
alert('APPCODE不正确，请重新输入');
return false;
}
//前端用户滑动成功，传入后端进行安全验证
$.ajax({
type: "GET",
url:"http://capter.market.alicloudapi.com/",
dataType: "json",
data: {"Randstr":res.randstr,"Ticket":res.ticket},//接口的参数
headers : {'Authorization':'APPCODE '+$('#appcode').val() },
success: function(data){
//获取到数据，打印到控制台
console.log(data);
if(data.response===1){
alert('后端验证成功');
}else{
alert('后端验证失败，原因为：'+data.err_msg);
}
},
error: function(data){ console.log(data); } ,
});
}
}
</script>
~~~
## 代码示例
以下代码示例，单击**验证**，激活验证码，并弹窗展示验证结果。
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滑动验证码前端接入示例</title>
<link rel="stylesheet" href="http://libs.kis6.com/css/bootstrap/3.3.4.min.css">
<!--核心js必须头部加载-->
<script src="http://libs.kis6.com/js/capter/stable.js"></script>
</head>
<body>
<div class="container" style="margin-top:9%;">
<div class="jumbotron">
<div class="panel panel-success">
<div class="panel-heading">
<h2>滑动验证码前端接入示例</h2>
<p>可直接使用本页源代码</p>
<p>
填入appcode<input name="appcode" id="appcode" type="text" style="min-width:320px;" class=input>
<a href="https://market.aliyun.com/products/57124001/cmapi00056930.html" target="_blank">如何获取?</a>
</p>
<!--不可修改按钮id-->
<button id="CaptchaId" type="button" class="btn btn-primary">发起验证按钮</button>
<p id="output" name="Word" ></p>
</div>
</div>
</body>
<script src="http://libs.kis6.com/js/jquery/1.8.3.min.js"></script>
<script>
// 定义回调函数
function callback(res) {
// 第一个参数传入回调结果，结果如下：
// ret Int 验证结果，0：验证成功。2：用户主动关闭验证码。
// ticket String 验证成功的票据，当且仅当 ret = 0 时 ticket 有值。
// randstr String 本次验证的随机串，后续票据校验时需传递该参数。
console.log('callback:', res);
// res（用户主动关闭验证码）= {ret: 2, ticket: null}
// res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
// res（请求验证码发生错误） = {ret: 0, ticket: "String", randstr: "String", errorCode: Number, errorMessage: "String"}
// 此处代码仅为验证结果的展示示例，真实业务接入，建议基于ticket和errorCode情况做不同的业务处理
if (res.ret === 0) {
// 复制结果至剪切板
var str = '【randstr】->【' + res.randstr + '】 【ticket】->【' + res.ticket + '】';
var ipt = document.createElement('input');
ipt.value = str;
document.body.appendChild(ipt);
ipt.select();
document.execCommand("Copy");
document.body.removeChild(ipt);
alert('1. 返回结果（randstr、ticket）已复制到剪切板，ctrl+v 查看。\n2. 打开浏览器控制台，查看完整返回结果。');
if($('#appcode').val().length!=32){
alert('APPCODE不正确，请重新输入');
return false;
}
//前端用户滑动成功，传入后端进行安全验证
$.ajax({
type: "GET",
url:"http://capter.market.alicloudapi.com/",
dataType: "json",
data: {"Randstr":res.randstr,"Ticket":res.ticket},//接口的参数
headers : {'Authorization':'APPCODE '+$('#appcode').val() },
success: function(data){
//获取到数据，打印到控制台
console.log(data);
if(data.response===1){
alert('后端验证成功');
}else{
alert('后端验证失败，原因为：'+data.err_msg);
}
},
error: function(data){ console.log(data); } ,
});
}
}
</script>
</html>
```
- API无忧介绍
- 短信验证码接口
- 签名模板审核标准
- 短信签名审核规则
- 短信模板审核规则
- 普通短信
- 营销短信
- 申请签名的常见问题
- 接口说明
- 单发接口
- 群发接口
- 无参数单发接口
- 代码示例
- 【测试推荐】纯前端ajax代码
- Python代码示例
- php代码示例
- java代码示例
- curl代码示例
- ObjectC代码示例
- C#代码示例
- 错误码
- 常用模板
- 返回说明
- 频率限制
- 国际短信价格表
- 在阿里云市场购买的短信接口说明
- 短信调用demo(ajax版)
- 前端代码
- ajaxsms.php
- php post示例代码
- 短信计费说明
- 阿里云市场说明
- 阿里云调用次数的说明
- 阿里云市场GET/POST方法
- php版本
- java版本
- python3版本
- ajax版本
- 阿里云店铺
- 身份证识别接口
- 身份证识别购买说明
- 身份证识别接口请求说明
- 简道云集成身份证识别接口
- 基金数据接口
- 当前数据查询
- 历史数据查询
- 基金接口存档
- 金融数据接口
- 产品说明
- 产品代码表
- 股票代码
- 股指代码
- 股指期货代码
- 数字货币代码
- 外汇代码
- 国内期货代码
- 国际期货代码
- v1产品留档
- ETF代码表
- 大宗商品代码表
- 股指期货代码表
- 债券代码表
- 股指代码表
- 数字货币数据
- 外汇代码表
- 贵金属代码表
- 金融数据图表代码下载
- 金融数据返回结果说明
- 金融数据调用代码(java)
- 金融数据调用代码（php）
- V2产品留档
- V3外汇高频
- 在线调试
- 金融数据报价查询
- 下线接口留档
- 新独立数据平台
- 报价real
- 分笔tick
- 分时trend
- K线kline
- 资料info
- 个股资料
- 股东资料
- 财务信息
- 所属板块
- 资金流fundflow
- 排序sort
- 各市场排序
- 指数排序
- 资金流排序
- 板块列表排序
- 板块内个股排序
- 检索search
- 新闻news
- 新闻列表
- 新闻详情
- 高速多产品查询
- 港美股数据接口
- 报价查询
- 分时图查询
- 旧股票数据接口(已下线)
- 股票接口说明
- 实时数据
- K线数据
- 分时数据
- 5日分时
- F10数据查询
- 公司概况
- 行情_排序
- 沪深股票列表
- 香港股票列表
- 美国股票列表
- 板块查询说明
- 期货列表查询
- 行情_分笔
- 板块_关系
- 查询_除息除权
- 新股日历
- 沪深资讯简报
- 股票代码说明
- 股票常见问题
- 交易状态
- 股票demo说明
- 支持外汇品种
- 支持期货品种
- 财经日历
- 快递查询接口
- 快递公司代码表
- 快递查询代码(php)
- 快递查询返回结果
- 图形验证码识别接口
- 滑块验证码