从零玩转腾讯滑块验证码

现在大部分公司的前端都是以滑块验证码进行验证机器人行为，后端也有但差不多都是图形验证码或者手机验证码，直接进入主题接下来我们要玩转的技术是腾讯云出品的滑块验证码(可以免费领取5W以上的免费次数有效期限一年哦)

Show Time:

第一步、进入腾讯云官方网站

https://console.cloud.tencent.com/captcha/graphical

1. 点击图形验证码可能需要开通开通即可 ,点击领取免费包会赠送验证码使用次数，可在套餐包管理里面查看。

2. 点击新增验证

3.填写信息

3.0 完成新建后，可在验证列表中查看验证码 CaptchaAppId 及 AppSecretKey

3.1 进入官方文档

https://cloud.tencent.com/document/product/1110/36839

3.2 我们会看到一个快速接入第一步我们先获取到自己的腾讯云密钥

3.3 密钥先自己复制一份

APPID: xxxxxxxxxxxxxxxxxxx

SecretId: xxxxxxxxxxxxxxxxxxxxxxxxxxxx

SecretKey: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

第二步、创建前端页面

代码语言：javascript

复制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>杨不易呀-Web 前端接入示例</title>
  <!-- 验证码程序依赖(必须) -->
  <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
</head>
<body>
  <!--点击此元素会自动激活验证码, 此例使用的button元素, 也可以使用div、span等-->
  <!--id :            (不可变) 元素的 ID, 值必须是 'TencentCaptcha'-->
  <!--data-appid :    (必须) 验证码CaptchaAppId, 从腾讯云的验证码控制台中获取, 验证码控制台页面内【图形验证】>【验证列表】进行查看 。如果未新建验证，请根据业务需求选择适合的验证渠道、验证场景进行新建-->
  <!--data-cbfn :     (必须) 回调函数名, 函数名要与 data-cbfn 相同-->
  <!--data-biz-state :(可选) 业务自定义透传参数, 会在回调函数内获取到 （res.bizState）-->
  <button id="TencentCaptcha" data-appid="你的验证码CaptchaAppId" data-cbfn="callbackName" data-biz-state="data-biz-state"
      type="button">验证</button>
</body>
<script>
  // 回调函数需要放在全局对象window下
  window.callbackName = function (res) {
      // 返回结果
      // ret         Int       验证结果，0：验证成功。2：用户主动关闭验证码。
      // ticket      String    验证成功的票据，当且仅当 ret = 0 时 ticket 有值。
      // CaptchaAppId       String    验证码应用ID。
      // bizState    Any       自定义透传参数。
      // randstr     String    本次验证的随机串，请求后台接口时需带上。
      console.log('callback:', res);
  // res（用户主动关闭验证码）= {ret: 2, ticket: null}
  // res（验证成功） = {ret: 0, ticket: &#34;String&#34;, randstr: &#34;String&#34;}
  if (res.ret === 0) {
      // 复制结果至剪切板
      let str = `【randstr】-&gt;【${res.randstr}】      【ticket】-&gt;【${res.ticket}】`;
      let ipt = document.createElement(&#39;input&#39;);
      ipt.value = str;
      document.body.appendChild(ipt);
      ipt.select();
      document.execCommand(&#34;Copy&#34;);
      document.body.removeChild(ipt);
      alert(&#39;1. 返回结果（randstr、ticket）已复制到剪切板，ctrl+v 查看。\n2. 打开浏览器控制台，查看完整返回结果。&#39;);
    }

}

</script>

</html>

1. 写入验证码CaptchaAppId, 从腾讯云的验证码控制台中获取, 验证码控制台页面内【图形验证】>【验证列表】进行查看

代码语言：javascript

复制

<button id="TencentCaptcha" data-appid="2071484082" data-cbfn="callbackName" data-biz-state="data-biz-state"  type="button">验证</button>

2.打开页面进行查看效果

3.滑动滑块至终点校验

代码语言：javascript

复制

// 返回结果 // ret Int 验证结果，0：验证成功。2：用户主动关闭验证码。 // ticket String 验证成功的票据，当且仅当 ret = 0 时 ticket 有值。 // CaptchaAppId String 验证码应用ID。 // bizState Any 自定义透传参数。 // randstr String 本次验证的随机串，请求后台接口时需带上。

【randstr】>【@uKe】【ticket】>【t03vNwGSyE5PYZpSALqZsjsr7M5Z8lzRMhzgC7UExz7_DSmmxq_B1iLBB_VYhxp76wY5jQXVOdq_K2Ye8jjx7XiDSRmDAT3sJAME9NUlgxqQoyVOyDpdOUjbA**】

4.那么腾讯验证码接入已经完成，接下来我们进行与后端进行连接校验

第三步、创建DescribeCaptchaResult maven后端工程

1. 加入依赖

代码语言：javascript

复制

    <dependencies>

<dependency>

<groupId>com.tencentcloudapi</groupId>

<artifactId>tencentcloud-sdk-java</artifactId>

<!-- go to https://search.maven.org/search?q=tencentcloud-sdk-java and get the latest version. -->

<!-- 请到https://search.maven.org/search?q=tencentcloud-sdk-java查询所有版本，最新版本如下 -->

<version>3.1.217</version>

</dependency>

</dependencies>

<repositories>

<repository>

<id>nexus-tencentyun</id>

<name>Nexus tencentyun</name>

<url>https://mirrors.tencent.com/nexus/repository/maven-public/</url>

</repository>

</repositories>

2.创建工具类DescribeCaptchaResultUtils

代码语言：javascript

复制

public class TencentCaptchaUtils {

/**

* 腾讯验证码校验

* @param randStr 前端回调函数返回的随机字符串

* @param token(Ticket)   前端回调函数返回的用户验证票据

* @return

*/

public static boolean tencentCaptcha(String randStr, String token) {

try {

/*

Action	是	String	公共参数，本接口取值：DescribeCaptchaResult。

Version	是	String	公共参数，本接口取值：2019-07-22。

Region	否	String	公共参数，本接口不需要传递此参数。

CaptchaType	是	Integer	固定填值：9。可在控制台配置不同验证码类型。

Ticket	是	String	前端回调函数返回的用户验证票据

UserIp	是	String	透传业务侧获取到的验证码使用者的IP

Randstr	是	String	前端回调函数返回的随机字符串

CaptchaAppId	是	Integer	验证码应用ID

AppSecretKey	是	String	用于服务器端校验验证码票据的验证密钥，请妥善保密，请勿泄露给第三方

BusinessId	否	Integer	业务 ID，网站或应用在多个业务中使用此服务，通过此 ID 区分统计数据

SceneId	否	Integer	场景 ID，网站或应用的业务下有多个场景使用此服务，通过此 ID 区分统计数据

MacAddress	否	String	mac 地址或设备唯一标识

Imei	否	String	手机设备号

NeedGetCaptchaTime	否	Integer	是否返回前端获取验证码时间，取值1：需要返回

* */

Credential cred = new Credential("你的腾讯云密钥", "你的腾讯云密钥");
		HttpProfile httpProfile = new HttpProfile();
		httpProfile.setEndpoint(&#34;captcha.tencentcloudapi.com&#34;);

		ClientProfile clientProfile = new ClientProfile();
		clientProfile.setHttpProfile(httpProfile);

		CaptchaClient client = new CaptchaClient(cred, &#34;&#34;, clientProfile);
		DescribeCaptchaResultRequest req = new DescribeCaptchaResultRequest();
		// 	固定填值：9。可在控制台配置不同验证码类型
		req.setCaptchaType(9L);
		// 	前端回调函数返回的用户验证票据
		req.setTicket(token);
		// 透传业务侧获取到的验证码使用者的IP,请自己通过业务获取请求者的ip地址
		req.setUserIp(&#34;127.0.0.1&#34;);
		// 前端回调函数返回的随机字符串
		req.setRandstr(randStr);
		// 验证码应用ID
		req.setCaptchaAppId(你新增验证的CaptchaAppId);
		// 用于服务器端校验验证码票据的验证密钥，请妥善保密，请勿泄露给第三方
		req.setAppSecretKey(&#34;你新增验证的密钥AppSecretKey&#34;);
		// 是否返回前端获取验证码时间，取值1：需要返回
		req.setNeedGetCaptchaTime(1L);
		// 场景 ID，网站或应用的业务下有多个场景使用此服务，通过此 ID 区分统计数据
		req.setSceneId(1L);
		DescribeCaptchaResultResponse resp = client.DescribeCaptchaResult(req);
		Gson gson = new Gson().newBuilder().create();
		Map map = gson.fromJson(DescribeCaptchaResultResponse.toJsonString(resp), Map.class);
		System.out.println(map);
		if (&#34;ok&#34;.equalsIgnoreCase(map.get(&#34;CaptchaMsg&#34;).toString())){
			// 成功
			return true;
		} else {
			return false;
		}
	} catch (TencentCloudSDKException e) {
		System.out.println(e.toString());
		return false;
	}
}
/**
验证
*/
public static void main(String[] args) {
			boolean b = tencentCaptcha(&#34;@UP0&#34;, &#34;t03cnXnT-SNq8jywYVz4h22VFkNbQxXiShmEomvQRUAXaF9UWJBkLWDyCqZcONCjlYAC3-ytSkQ2IJtrG7xNJwfvvyD-QxgnNL0iSSkXyXGd3ePHFfLI_8FfA**&#34;, null);
	System.out.println(b);
}

}

3.开始与前端进行同步校验

4.校验成功 ok

使用VUE接入腾讯滑块

1. 复制滑块js到全局html页面

2. 编写显示滑块方法

代码语言：javascript

复制

tencentCaptcha() {

const captchaId = '你的appid' // 腾讯滑块验证码appid

// 生成一个滑块验证码对象

const _this = this// 此处处理是因为调用滑块验证码校验方法失效

// eslint-disable-next-line no-undef

var captcha = new TencentCaptcha(captchaId,

function(res) {

// 后台校验方法

_this.handleLoginMe(res)// 图形验证码校验

})

// 滑块显示

captcha.show()

}

3.调用后端接口工具类校验方法传递两个参数

代码语言：javascript

复制

 handleLoginMe(res) {

// 后端校验参数()

this.loginForm.params.randStr = res.randstr

this.loginForm.params.token = res.ticket

// 开始登陆请求

this.$store.dispatch('user/login', this.loginForm).then(() => {

// 你的业务逻辑

}).catch(() => {

})

}

从零玩转腾讯滑块验证码

从零玩转腾讯滑块验证码

Show Time:

第一步、进入腾讯云官方网站

1. 点击图形验证码可能需要开通开通即可 ,点击领取免费包会赠送验证码使用次数，可在套餐包管理里面查看。

2. 点击新增验证

3.填写信息

3.0 完成新建后，可在验证列表中查看验证码 CaptchaAppId 及 AppSecretKey

3.1 进入官方文档

3.2 我们会看到一个快速接入第一步我们先获取到自己的腾讯云密钥

3.3 密钥先自己复制一份

第二步、创建前端页面

1. 写入验证码CaptchaAppId, 从腾讯云的验证码控制台中获取, 验证码控制台页面内【图形验证】>【验证列表】进行查看

2.打开页面进行查看效果

3.滑动滑块至终点校验

4.那么腾讯验证码接入已经完成，接下来我们进行与后端进行连接校验

第三步、创建DescribeCaptchaResult maven后端工程

1. 加入依赖

2.创建工具类DescribeCaptchaResultUtils

3.开始与前端进行同步校验

4.校验成功 ok

使用VUE接入腾讯滑块

1. 复制滑块js到全局html页面

2. 编写显示滑块方法

3.调用后端接口工具类校验方法传递两个参数

2.后端的登陆逻辑配合前面创建的DescribeCaptchaResultUtils工具类来使用

芜湖溜了.................................

从零玩转腾讯滑块验证码

从零玩转腾讯滑块验证码

Show Time:

第一步、进入腾讯云官方网站

1. 点击图形验证码 可能需要开通 开通即可 ,点击领取免费包会赠送验证码使用次数，可在套餐包管理里面查看。

2. 点击新增验证

3.填写信息

3.0 完成新建后，可在验证列表中查看验证码 CaptchaAppId 及 AppSecretKey

3.1 进入官方文档

3.2 我们会看到一个快速接入第一步我们先获取到自己的腾讯云密钥

3.3 密钥先自己复制一份

第二步、创建前端页面

1. 写入 验证码CaptchaAppId, 从腾讯云的验证码控制台中获取, 验证码控制台页面内【图形验证】>【验证列表】进行查看

2.打开页面进行查看效果

3.滑动滑块至终点校验

4.那么腾讯验证码接入已经完成，接下来我们进行与后端进行连接校验

第三步、创建DescribeCaptchaResult maven后端工程

1. 加入依赖

2.创建工具类DescribeCaptchaResultUtils

3.开始与前端进行同步校验

4.校验成功 ok

使用VUE接入腾讯滑块

1. 复制滑块js到全局html页面

2. 编写显示滑块方法

3.调用后端接口工具类校验方法 传递两个 参数

2.后端的登陆逻辑配合前面创建的DescribeCaptchaResultUtils工具类来使用

芜湖溜了.................................

1. 点击图形验证码可能需要开通开通即可 ,点击领取免费包会赠送验证码使用次数，可在套餐包管理里面查看。

1. 写入验证码CaptchaAppId, 从腾讯云的验证码控制台中获取, 验证码控制台页面内【图形验证】>【验证列表】进行查看

3.调用后端接口工具类校验方法传递两个参数