一、基础认识
腾讯验证码: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,重新验证。