背景
据腾讯客服介绍,腾讯天御验证码服务与腾讯防水墙是同一款产品,不同的是两者的接入方式和管理后台不一样。且面向的用户群体也不同,防水墙主要面向于中小企业,且处于免费推广期,而天御则面向较大型企业。
调用流程图
1)客户端从服务端获取验证码 JS 文件
2)客户端嵌入验证码JS页面(iframe形式)
3)用户完成验证码验证
4)客户端获得验证 ticket,并提交服务端进行二次验证
5)服务端通过天御服务器接口进行ticket验证
接入
服务端接入
可参考服务端接入 DEMO: https://github.com/youthcity/graph-captcha/blob/master/src/tencent/client.ts
服务端主要有两个接口:
1)后台获取验证码js地址
2)后台验证票据API
腾讯云的API请求由两类请求参数:公共请求参数和接口请求参数。公共请求参数的首字母均为大写,接口请求参数首字母为小写。对于公共请求参数的生成可以参考官方文档,难点在于公共参数中 Signature
字段生成,这里有一份较为详细的签名方法文档。
虽然尝试过动手工生成请求参数,但文档中的描述与实际接口的要求不相符,始终没有成功。最终,通过这个库 —— 腾讯云 API 2.0 SDK for node.js,完成API参数的生成。
Step 1 生成验证码 JS 地址
const params = {
captchaType, // 验证码类型,文档中只有一个值 —— 9
disturbLevel, // 验证码干扰程度
isHttps, // 是否是 Https 协议
clientType, // 客户端类型 1:手机Web页面 2:PCWeb页面 4:APP
accountType, // 用户账号类型 此处可以设置为 0
};
public async generate_js_sdk_url (params:GenerateSDKParams) {
return this.request({
Region: this.region,
Action: 'CaptchaIframeQuery',
...params,
});
}
Step 2 验证 ticket
export interface VerityParams {
userIp:string; // 用户 IP
accountType:number; // 用户账号类型
captchaType:number; // 验证码类型
ticket:string; // 客户端完成验证生成的 ticket
}
public async verify (params:VerityParams) {
let res:VerifyTicketResponse;
try {
res = await this.request({
Region: this.region,
Action: 'CaptchaCheck',
...params,
});
} catch (error) {
return false;
}
if (_.isNil(res) || _.isNil(res.code) || res.code !== 0) {
return false;
}
return true;
}
其中,返回值的 code
字段。0表示成功,其他值表示失败。
Web端接入
Web 端接入可参考代码地址:https://github.com/youthcity/graph-captcha/blob/master/src/static/t.html
主要流程如下:
1)从后端获取 JS SDK 地址
2)动态加载 JS 文件
3)初始化验证码服务,注册回调事件,并绑定到DOM节点中
总结
从接入文档和接入方式看,防水墙的接入防水比较简单且文档很详细、准确。天御的文档则含糊不清,文档中字段与实际接口字段有出入,联系专业客服人员也不回答。接入起来有一定成本。
本来打算将天御作为主要验证码服务,奈何文档太烂,又没有Node的SDK,管理后台又不好用,最后放弃了。(疯狂甩锅 (╯°□°)╯︵┻━┻)
有意思的是,腾讯天御的公共参数设定方式与阿里云的公共参数设定方式大同小异。很好奇,是谁借鉴谁的。