JavaWeb项目接入腾讯云滑块验证码详细教程

接入的大概流程 前端页面用户点击验证后会返回2个必要参数 ticket和randstr，然后我们用AJAX异步请求发送到后端，然后后端发送请求到腾讯云服务器，然后服务器会给我们返回最终结果 ok则代表成功

前端接入

• 在 Head 标签的最后加入以下代码，引入验证 JS 文件（建议直接在 HTML 中引入）。

<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>

• 在您需要激活验证码的 DOM 元素（button、div、span）内加入以下 ID 及属性。

<!--点击此元素会自动激活验证码-->
<!--id : 元素的 ID (必须)-->
<!--data-appid : AppID(必须)-->
<!--data-cbfn : 回调函数名(必须)-->
<!--data-biz-state : 业务自定义透传参数(可选)-->
<button id="TencentCaptcha"
     data-appid="appId"
     data-cbfn="callback"
     type="button"
>验证</button>

注意此处填验证码的APPID去腾讯云后台→验证码→查看详情→基础配置拿 不要和我的某个沙雕同学一样直接复制拿来就用到最后一直找后端问题提交工单最后。。。。

• 为验证码创建回调函数。

   注意：函数名要与 data-cbfn 相同  ticket 和 randstr 都是必要参数都要发送到后端 在提交到腾讯云服务器做校验

window.callback = function(res){
 console.log(res)
 // res（用户主动关闭验证码）= {ret: 2, ticket: null}
 // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
 if(res.ret === 0){
     alert(res.ticket)   // 票据
 }
}

此处是我自己写的利用AJAX的简单的例子根据自己的需求自己加逻辑