业务流程时序图
防水墙业务时序图
1）客户端完成初始化
2）用户完成验证
3）获取验证结果（ticket/randstr）
4）回传服务端对票据进行合法性校验
接入方法
服务端
服务端接入，可参考 官方文档
服务端仅需要对前端验证完成后获取的参数，进行校验即可。
票据校验接口：GET https://ssl.captcha.qq.com/ticket/verify
下面是使用 superagent 请求库封装的的验证方法。
public async verify(params:VerifyParams) {
const response = await superagent
.get(this.base_URL)
.query({
aid: this.aid,
AppSecretKey: this.secret_key,
Ticket: params.ticket,
Randstr: params.randstr,
UserIP: params.user_ip,
})
.send();
const result = JSON.parse(response.text);
const res_code = +(result.response);
let is_pass = false;
switch (res_code) {
case 0:
is_pass = false;
break;
case 1:
is_pass = true;
break;
default:
is_pass = false;
break;
}
return is_pass;
}
Web端接入
防水墙客户端接入方式比较丰富。
主要有两种，第一种是通过生成验证码对象，进行验证码的操作；第二种是自动注入事件到DOM节点。
对于有特殊需求的场景（比如，需要控制验证码的显示与隐藏）建议使用第一种。
首先引入防水墙的 JS SDK 文件。
<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
方式一 操作验证码对象
1）初始化对象
// 初始化对象 方法1
const captcha1 = new TencentCaptcha('appId', function(res) {/* callback */});
// 初始化对象 方法2
const captcha1 = new TencentCaptcha(
document.getElementById('TencentCaptcha'),
'appId',
function(res) {/* callback */},
{ bizState: '自定义透传参数' }
);
// 初始化对象 方法3
// 绑定一个元素并自动识别场景id和回调
// 验证码会读取dom上的`data-appid`和`data-cbfn`以及`data-biz-state`(可选)自动初始化
const captcha1 = new TencentCaptcha(document.getElementById('TencentCaptcha'));
当初始化对象时，传入DOM节点时，Captcha 对象会给当前节点注册 click 事件，点击DOM节点时，会显示验证码。
2）显示验证码
captcha1.show(); // 显示验证码
方式二 自动注入事件
1）注册节点
<button id="TencentCaptcha" data-appid="appId" data-cbfn="callback">验证</button>
2）将 data-cbfn 中命名的回调注册到全局中（侵入性真大 (╯°□°）╯︵┻━┻）
window.callback = function (res) {
console.log(res)
// res（未通过验证）= {ret: 1, ticket: null}
// res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
if (res.ret === 0) {
console.log('验证成功');
const { ticket, randstr } = res;
$.ajax({
type: 'get',
url: 'http://localhost:4000/waterproof-wall/validate',
data: {
ticket,
randstr,
},
success: (res) => {
console.log('验证成功', res);
},
});
} else if (res.ret == 1) {
console.log('验证失败');
}
};
需要注意的地方
本地接入测试时，极容易被防水墙的安全策略误伤，导致无法完成验证。因此，在本地开发时，可以将「恶意安全等级」调成「体验优先」。
配置路径：
后台 -> 配置中心 -> 安全配置 -> 恶意拦截等级
安全配置
总结
防水墙的接入文档非常详细、接入方式也较为简单，而且免费。
缺点是，防水墙处于推广阶段，每小时只有2000次安全防护。而且验证码服务出现问题时，不能快速联系到客服人员进行排查问题。
对于个人网站而言，防水墙已能满足需求。但是对于商业用户还是推荐服务较为稳定的商业付费服务。
