腾讯滑動验证码

前端接入：
引入js

<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>

为验证码创建回调函数。

callback = function(res) {
	var data = {
		//表单数据
		ticket: res.ticket,
		randstr: res.randstr,
	};
	console.log(data)
	if(res.ret === 0) {
		$.post("/txVerify", data, function(r) {
			var data = JSON.parse(r);
			if(data.CaptchaMsg == "OK") {
				//				layer.msg('二次验证成功');
				alert("二次验证成功");
			} else {
				alert("二次验证失败");
			}
		});
	}
}

前端接入，vue-cli方式

把腾讯验证码的js文件引入

在要使用的组件添加以下代码
把这些代码写到生命周期里方便使用axios

 //appid  为腾讯验证码的参数
      captcha = new TencentCaptcha('appid', (rsp) => {

        this.params.ticket = rsp.ticket;
        this.params.randstr = rsp.randstr;
        if (rsp.ret === 0) {

          this.$http.post('/txVerify', this.params).then(res => {

            if(r.data.msg == "登录成功" && r.data.map.role == "user") {

            	this.$router.push('/home');
            }else{
            	alert(r.data.msg);
            }

          })
        }else{
          this.$message('请重新验证');
        }
      }, {})
    

后端接入：



填写基本信息后把代码复制到后台做个工具类方便以后调用

package com.mydemojava.utils;

import com.tencentcloudapi.common.Credential;
import com.tencentcloudapi.common.profile.ClientProfile;
import com.tencentcloudapi.common.profile.HttpProfile;
import com.tencentcloudapi.common.exception.TencentCloudSDKException;

import com.tencentcloudapi.captcha.v20190722.CaptchaClient;
import com.tencentcloudapi.captcha.v20190722.models.*;;

public class DescribeCaptchaResult {


    public static String CaptchaResult(String ticket, String randstr, String ip) {
        DescribeCaptchaResultResponse resp = null;
        try {

            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();
            req.setCaptchaType(9L);
            req.setTicket(ticket);
            req.setUserIp(ip);
            req.setRandstr(randstr);
            req.setAppSecretKey("");
            req.setCaptchaAppId();

            resp = client.DescribeCaptchaResult(req);


        } catch (
                TencentCloudSDKException e) {
            System.out.println(e.toString());
        }
        return DescribeCaptchaResultResponse.toJsonString(resp);
    }
}

调用

 @RequestMapping("/txVerify")
    public String QQverify(HttpServletRequest request,String ticket,String randstr){
        //获取客户端的ip
        String ip = Common.GetIpAddress(request);
//        给腾讯服务器发送请求，验证码二次验证
        String s = DescribeCaptchaResult.CaptchaResult(ticket, randstr, ip);
        return s;
    }