从零玩转腾讯滑块验证码

从零玩转腾讯滑块验证码

Scroll Down

从零玩转腾讯滑块验证码

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

Show Time:

image-20210605110301298

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

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

image-20210605110109092

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

image-20210605110642035

2. 点击新增验证

image-20210605110606274

3.填写信息

image-20210605110727267

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

3.1 进入官方文档

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

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

image-20210605111047370

3.3 密钥先自己复制一份

APPID: xxxxxxxxxxxxxxxxxxx

SecretId: xxxxxxxxxxxxxxxxxxxxxxxxxxxx

SecretKey: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

第二步、创建前端页面

<!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: "String", randstr: "String"}
      if (res.ret === 0) {
          // 复制结果至剪切板
          let str = `【randstr】->【${res.randstr}】      【ticket】->【${res.ticket}】`;
          let ipt = document.createElement('input');
          ipt.value = str;
          document.body.appendChild(ipt);
          ipt.select();
          document.execCommand("Copy");
          document.body.removeChild(ipt);
          alert('1. 返回结果(randstr、ticket)已复制到剪切板,ctrl+v 查看。\n2. 打开浏览器控制台,查看完整返回结果。');
        }
  }
</script>
</html>

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

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

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

image-20210605112019968

3.滑动滑块至终点校验

// 返回结果
// 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. 加入依赖

    <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

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("captcha.tencentcloudapi.com");

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

			CaptchaClient client = new CaptchaClient(cred, "", clientProfile);
			DescribeCaptchaResultRequest req = new DescribeCaptchaResultRequest();
			// 	固定填值:9。可在控制台配置不同验证码类型
			req.setCaptchaType(9L);
			// 	前端回调函数返回的用户验证票据
			req.setTicket(token);
			// 透传业务侧获取到的验证码使用者的IP,请自己通过业务获取请求者的ip地址
			req.setUserIp("127.0.0.1");
			// 前端回调函数返回的随机字符串
			req.setRandstr(randStr);
			// 验证码应用ID
			req.setCaptchaAppId(你新增验证的CaptchaAppId);
			// 用于服务器端校验验证码票据的验证密钥,请妥善保密,请勿泄露给第三方
			req.setAppSecretKey("你新增验证的密钥AppSecretKey");
			// 是否返回前端获取验证码时间,取值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 ("ok".equalsIgnoreCase(map.get("CaptchaMsg").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("@UP0", "t03cnXnT-SNq8jywYVz4h22VFkNbQxXiShmEomvQRUAXaF9UWJBkLWDyCqZcONCjlYAC3-ytSkQ2IJtrG7xNJwfvvyD-QxgnNL0iSSkXyXGd3ePHFfLI_8FfA**", null);
		System.out.println(b);
	}

}

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

image-20210605114145986

4.校验成功 ok

使用VUE接入腾讯滑块

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

image-20210605195252265

2. 编写显示滑块方法

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.调用后端接口工具类校验方法 传递两个 参数


 handleLoginMe(res) {
      // 后端校验参数()
      this.loginForm.params.randStr = res.randstr
      this.loginForm.params.token = res.ticket
      // 开始登陆请求
      this.$store.dispatch('user/login', this.loginForm).then(() => {
       	// 你的业务逻辑
      }).catch(() => {
      })
    }

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

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