前提条件
- 已经订购边缘安全加速平台-安全与加速服务，若未订购，请参见服务开通。
- 在控制台新增域名，请参见添加服务域名。
- 开通套餐为高级版及以上版本，支持验证码功能。
- 需先完成验证码配置。暂时未开放控制台，请通过提交工单给天翼云客服，由其人工操作开启。
代码示例
以下代码示例，单击打开验证码，激活验证码，并弹窗展示验证结果。点击携带 ticket 发请求，能够验证拦截情况
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>滑块验证接入demo</title>
<style>
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-top: 100px;
}
h1 {
text-align: center;
}
input[type="text"],
input[type="password"] {
width: 95%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.bt_click {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.bt_click_captcha {
position: relative;
background: #d9f3ef;
border: 1px solid #0fbda0;
color: #0fbda0;
}
.bt_captcha_success {
background: #edfff1;
border: 1px solid #1bc45c;
border-radius: 2px;
color: #1bc45c;
}
.bt_captcha_success::before {
content: "";
position: absolute;
width: 28px;
height: 28px;
left: 36%;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEqADAAQAAAABAAAAEgAAAACaqbJVAAAB4ElEQVQ4EaWUMUsjURDH37yNxANBsXQ3csiJhYIIimgipyh3Tey0Mav3CbRQLExlKygWeh/giAl4iliJoHDcZWOnYiHYaCEaCz1IIYbjzBtnNrtB44omTrGzM+8/v30z+3ZBvMdQgJ4yZ0D+W4RyOcbe8AdU/lUU2JAOxVtkOaBPW+N+ofybVDsIAjLMKB30c1jLVmfWUYgvDKCWVFkgXa+cE4hhLmZTAmvZl7QjIxUxCTLFha5Ra/WChv7mYRu/RxpRkwcEqHIheQ8nWZ/q9D1NvhD96vUpTSboqY8h/2lO0XQwtkCDwkJrumVGA9ZouxdKrwhME+Tx2h0ChtOhlXmGcI3dmp40mTpJcUahGrjqSey7wDrLbCLREcV+J5el1/T1KrSSdDXspWFFlh0IxzUS5E7d3lgbB2wEWSLnQu5puEPFEFvHRaBy36mkixOO/aUN99OuGxBgw00C4MRFMM7gZ2a3JnBW6tZpVADOkkJzVDdC4C094KMdA8Yug/Ex+97jkgc5C8af0c8okY9+TZH2kD7M4EX3WrYoXwifgDhbb31rzmFum4ZjOKpbDVXreU/irFDlcVN4/e7aeejHMWiij+LrfA6mX4O4tZ4+kIp00L9ml4+/p6CkJH3pb9U/AFEbjHExMjImAAAAAElFTkSuQmCC")
no-repeat;
}
/* input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
} */
</style>
</head>
<body>
<div class="container">
<h1>登录</h1>
<input type="text" id="username" placeholder="用户名/邮箱" />
<input type="password" id="password" placeholder="密码" />
<button class="bt_click bt_click_captcha" id="CaptchaId" type="button">
立即点击验证
</button>
<button class="bt_click" id="submit" type="button">登录</button>
</div>
<script src="./slidercaptcha.js"></script>
<script>
// 定义验证码触发事件
window.onload = function () {
var ticket = "";
var type = "1";
document.getElementById("CaptchaId").onclick = function (event) {
try {
var captcha = sliderCaptcha({
event,
/**
* 成功回调
* 回调入参
* verify: {
* isVerify, // 成功失败
* code, //code code=0表示成功，可以获取ticket，1的话是验证数据格式有误，2是验证失败，3是验证动作超时，4是验证码版本不对ll,
* ticket //ticket
* }
*/
onSuccess: function (verify) {
//成功事件
ticket = verify.ticket;
type = verify.type;
const ele = document.querySelector("#CaptchaId");
ele.classList.add("bt_captcha_success");
ele.innerHTML = ` 验证成功`;
},
/**
* 失败回调
*/
onFail: function (verify) {
console.log(verify);
},
});
} catch (error) {
console.log(error);
}
};
function submit() {
// do 提交接口携带 ticket
console.log("使用XMLHttpRequest发起请求");
var xhr = new XMLHttpRequest();
xhr.open("GET", "/test", true);
// xhr.open('GET', 'http://www.ctyun.com/test', true);
//设置请求头
xhr.setRequestHeader("ticket", ticket);
xhr.withCredentials = true; //携带cookie
xhr.send();
//请求成功完成时触发。
xhr.onload = function () {
if (xhr.readyState === xhr.DONE) {
if (xhr.status === 200) {
console.log("响应内容：");
console.log(xhr.response);
console.log(xhr.responseText);
console.log("=========");
//获取响应头
var headers = xhr.getAllResponseHeaders();
console.log("响应头：");
console.log(headers);
console.log("=========");
} else {
console.log(xhr.status);
}
}
};
}
document.getElementById("submit").onclick = function () {
submit();
};
};
</script>
</body>
<title>登陆</title>
</html>
接入说明
1、动态引入验证码JS
Web 页面需动态引入验证码 JS，在业务需要验证时，唤起验证码进行验证。
<!-- 动态引入验证码JS示例 -->
<script src="/_ct_sbu/verification/slidercaptcha.js"></script>
注意必须动态引入验证码 JS。如通过其他手段规避动态加载，会导致验证码无法正常更新，对抗能力无法保证，甚至引起误拦截。
2、创建验证码对象
引入验证码 JS 后，验证码会在全局注册一个 sliderCaptcha ，业务方可以使用这个,自行初始化验证码。
sliderCaptcha({
onSuccess,
onFail,
});
组件方法说明：
| 字段名 | 说明 |
|---|---|
| event | 点击事件必传(主要用作行为轨迹采集) |
| onSuccess | 成功回调 |
| onFail | 错误回调 |
成功失败回调字段说明：
| 字段名 | 说明 |
|---|---|
| isVerify | 成功失败 |
| code | 状态码 |
| type | 回调类型 (1:智能免验证) |
| ticket | 成功标识 |
状态码code字段定义说明：
失败的状态页面会直接重新刷新，进行再次验证。
| 字段名 | 说明 |
|---|---|
| 0 | 成功，可以获取 ticket |
| 1 | 验证数据格式有误 |
| 2 | 验证失败 |
| 3 | 验证动作超时 |
| 4 | 验证码版本不对 |
