注册账号
由于是学习使用,用的是免费的
访问顶象官网,注册账号后登录控制台,访问“无感验证”模块,申请开通后系统会分配一个唯一的AppId、AppSecret。
SDK下载
去官网下载sdk,对应的有JAVA、PHP、Python、C#、NODEJS
**业务流程**
当用户滑动验证码通过后,验证码服务会生成一个token,用户的业务请求带上这个验证码token,业务系统再调用后台 SDK 验证token的有效性。
| 用户业务请求 | ----> | 业务系统 | ----> | 验证码服务 |
| (请求带上验证码token) | | (获取token,调用验证码接口) | | (校验token有效性)
后端实现
**这里以java为例:**
/**构造入参为appId和appSecret
* appId和前端验证码的appId保持一致,appId可公开
* appSecret为秘钥,请勿公开
* token在前端完成验证后可以获取到,随业务请求发送到后台,token有效期为两分钟
* ip 可选,提交业务参数的客户端ip
**/
String appId = "appId";
String appSecret = "appSecret";
CaptchaClient captchaClient = new CaptchaClient(appId,appSecret);
//captchaClient.setCaptchaUrl(captchaUrl);
//特殊情况需要额外指定服务器,可以在这个指定,默认情况下不需要设置
CaptchaResponse response = captchaClient.verifyToken(token);
//CaptchaResponse response = captchaClient.verifyToken(token, ip);
//针对一些token冒用的情况,业务方可以采集客户端ip随token一起提交到验证码服务,验证码服务除了判断token的合法性还会校验提交业务参数的客户端ip和验证码颁发token的客户端ip是否一致
System.out.println(response.getCaptchaStatus());
//确保验证状态是SERVER_SUCCESS,SDK中有容错机制,在网络出现异常的情况会返回通过
//System.out.println(response.getIp());
//验证码服务采集到的客户端ip
if (response.getResult()) {
/**token验证通过,继续其他流程**/
} else {
/**token验证失败,业务系统可以直接阻断该次请求或者继续弹验证码**/
}
WEB端接入
也可以引入Android、微信小程序等
引入 JS
<script src="https://cdn.dingxiang-inc.com/ctu-group/captcha-ui/index.js"></script>
直接引入cdn,不要下载,因为会不定期更新
初始化
假设页面上有一个 <div id="c1"></div>
,则可以像下面这样初始化验证码:
var myCaptcha = _dx.Captcha(document.getElementById('c1'), {
appId: 'appId', //appId,在控制台中“应用管理”或“应用配置”模块获取
success: function (token) {
// console.log('token:', token)
}
})
大小和样式可以调整,具体可以参考官网的详细教程,如果要定制化的话就要钱了
官网文档