SpringBoot SpringMVC 整合腾讯验证码登录实例 TencentCaptcha

一、基础认识

腾讯验证码：https://007.qq.com/product.html

在Head标签内加上以下代码引入验证JS文件

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

在想要添加验证码的地方添加以下代码

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

>验证</button>

为验证码创建回调函数，注意函数名要与data-cbfn相同

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)   // 票据
    }
}

完成以上操作后，点击激活验证码的元素，即可弹出验证码。

二、后台接入

思路：（登录验证）通过返回的票据访问腾讯接口进行二次验证，若成功无误，添加一个Session属性（如：LoginVfCode:1）,登录时先判断LoginVfCode是否为1，不为1则重新验证，否则进一步验证用户密码

Maven 添加依赖

<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.58</version>
        </dependency>

        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
            <version>4.5.6</version>
        </dependency>

Controller

@ResponseBody
    @PostMapping("/LoginVf")
    public String LoginVf(String ticket, String randstr, HttpServletRequest req, HttpSession httpSession){
        String aid = "你的aid";
        String AppSecretKey = "你的AppSecretKey";
        //官方接口地址
        String vfurl = "https://ssl.captcha.qq.com/ticket/verify";
        String userIp = req.getRemoteAddr();
        if(userIp.equals("127.0.0.1") || userIp.equals("0:0:0:0:0:0:0:1")){
            //根据网卡取本机配置的IP
            InetAddress inet=null;
            try {
                inet = InetAddress.getLocalHost();
            } catch (UnknownHostException e) {
                e.printStackTrace();
            }
            userIp = inet.getHostAddress();
        }
        CloseableHttpClient httpclient = HttpClients.createDefault();
        HttpGet httpGet;
        CloseableHttpResponse response = null;
        try {
            httpGet = new HttpGet(vfurl+"?aid="+aid+"&AppSecretKey="+AppSecretKey+"&Ticket="+URLEncoder.encode(ticket, "UTF-8")+"&Randstr="+URLEncoder.encode(randstr, "UTF-8")+"&UserIP="+URLEncoder.encode(userIp, "UTF-8"));
            response = httpclient.execute(httpGet);

            HttpEntity entity = response.getEntity();
            if (entity != null) {
                String res = EntityUtils.toString(entity);
                System.out.println(res); // 临时输出

                JSONObject result = JSON.parseObject(res);
                // 返回码
                int code = result.getInteger("response");
                // 恶意等级
                int evilLevel = result.getInteger("evil_level");

                if(evilLevel > 60){
                   System.out.println("验证操作危险数较高,IP:"+userIp);
                }

                // 验证成功
                if (code == 1){
                    httpSession.setAttribute("loginVfCode",1);
                    return "1";
                }
            }
        } catch (java.io.IOException e) {
            // 忽略
        } finally {
            try {
                response.close();
            } catch (Exception ignore) {
            }
        }


        return "-1";
    }

前台JS代码修改（Layui前端）

 window.callback = function(res){
     console.log(res)
     // res（用户主动关闭验证码）= {ret: 2, ticket: null}
     // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
     if(res.ret === 0){
         $.ajax({
             type:"post",
             url:"/ajax/LoginVf",
             data:{ticket:res.ticket,
             randstr:res.randstr},
             success:function (data) {
                 if(data == 1){
                     var capbtn = document.getElementById("TencentCaptcha");
                     capbtn.innerText = "验证通过";
                     capbtn.className="layui-btn layui-btn-lg";
                 }else if(data == -1){
                     var capbtn = document.getElementById("TencentCaptcha");
                     capbtn.innerText = "重新验证";
                 }
             }

         });

     }
 }

结尾

到了这一步基本就OK了，在登录的控制器里再验证一下session就知道是否成功验证，登录成功或失败后要记得重置session,重新验证。