拖动式验证码系列（四、含java完整示例）
验证码
admin 发布于：2018-12-14 00:20:30
阅读：loading
本篇文章主要接入腾讯验证码的前后端接入验证实例，为了实现采用无刷新的form表单提交体验，同时还使用到了jquery、jqueryform、layer，使得接入体验感觉棒棒的（更接近于实际使用效果），另外为了给出java的server端另外一种方式的接入实现，使用jdk自带的net包实现（官网的示例是使用Apache-httpclient库实现），先给出代码实现再附上运行效果，如下：
<!DOCTYPE html>
<html>
<head>
<title>欢迎来到陈冬冬(雪地里走)的学习天地 | 经验分享整理平台 | 陈冬冬|接入腾讯验证码初体验</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="keywords" content="陈冬冬,雪地里走,陈冬冬"/>
<meta name="author" content="陈冬冬,雪地里走,陈冬冬"/>
<meta name="description" content="陈冬冬,雪地里走,陈冬冬"/>
<style type="text/css">
.boxCode{
width: 300px;margin: 10px auto;height: 100px;
}
</style>
<script type="text/javascript" src="/app/script/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/app/script/jquery/plugins/jqueryform/jquery.form.min.js"></script>
<script type="text/javascript" src="/app/script/jquery/plugins/jqueryform/jqueryform.common.js"></script>
<script type="text/javascript" src="/app/script/jquery/plugins/layer/layer.js"></script>
<script type="text/javascript" src="/app/script/common.js"></script>
<script type="text/javascript" src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
<script type="text/javascript">
function testCallback(res){
if(res.ret === 0){
$("#ticket_id").val(res.ticket);
$("#randStr_id").val(res.randstr);
$("#validAuthCodeForm_id").submit();
}
}
$(function(){
//绑定form提交为ajax的方式
$("#validAuthCodeForm_id").ajaxSubmitForm({
callback : function(data){
//success为验证成功
if(data.result == "success"){
var res = data.message;
if(res.response == 1){
layer.msg("验证成功！" , 2 , {shadeClose: true , type: 1});
} else {
layer.msg("验证失败：" + res.err_msg , 2 , {shadeClose: true , type: 5});
}
return;
}
layer.msg("请求出现错误：" + data.message , 2 , {shadeClose: true , type: 5});
//input为验证类的失败提示
//error为整个请求发生了错误
//当出现为上述两种情况时message为字符串文本提示，否则为Tencent验证码接口服务端调用返回的json数据
}
});
});
</script>
</head>
<body>
<div class="boxCode">
<h3>验证码接入之服务端验证</h3>
<button id="TencentCaptcha" data-appid="2057623068" data-cbfn="testCallback">弹出验证码</button>
</div>
<form id="validAuthCodeForm_id" action="/demo/tencentAuthCode/serverValidate.a" method="post">
<input type="hidden" id="randStr_id" name="randStr" value="" />
<input type="hidden" id="ticket_id" name="ticket" value=""/>
</form>
</body>
</html>
后端代码（springmvc实现，可换成servlet，使用到了fastjson库）
/**
* @author chendd
* 腾讯验证码接入之服务端验证
*/
@Controller
@Scope("prototype")
@RequestMapping("/demo/tencentAuthCode")
public class TencentCodeController {
private final String APP_ID = "2057623068";
private final String APP_SECRET = "*******************";
private final String HTTP_URL = "https://ssl.captcha.qq.com/ticket/verify";
@RequestMapping("/serverValidate")
@ResponseBody
public JSON server(String ticket , String randStr , HttpServletRequest request) throws Exception {
System.out.println("TencentCodeController.server()");
String ip = request.getRemoteAddr();//并不一定准确
JSONObject json = validCode2Tencent(ticket , randStr , ip);
return json;
}
public JSONObject validCode2Tencent(String ticket , String randStr , String ip) {
JSONObject json = new JSONObject();
URL url = null;
HttpURLConnection urlConn = null;
BufferedReader br = null;
try {
String newUrl = HTTP_URL + "?aid=" + APP_ID + "&AppSecretKey=" + APP_SECRET + "&Ticket=" + ticket
+ "&Randstr=" + randStr + "&UserIP=" + ip;
url = new URL(newUrl);
urlConn = (HttpURLConnection) url.openConnection();
urlConn.setRequestMethod("GET");
urlConn.connect();
int responseCode = urlConn.getResponseCode();
if (HttpURLConnection.HTTP_OK == responseCode) {
StringBuilder resultBuilder = new StringBuilder();
br = new BufferedReader(new InputStreamReader(urlConn.getInputStream()));
String line = null;
while ((line = br.readLine()) != null) {
resultBuilder.append(line);
}
JSON result = JSON.parseObject(resultBuilder.toString());
json.put("message", result);
json.put("result", "success");
} else {
json.put("message", "接口调用未成功返回");
json.put("result", "input");
}
} catch (Exception e) {
e.printStackTrace();
json.put("message", "接口调用发生错误");
json.put("result", "error");
} finally {
if(br != null) {
try {
br.close();
} catch (IOException e) {}
}
if(url != null) {
urlConn.disconnect();
}
}
return json;
}
}
关于server端特别说明一下：
1、红色***表示我抹去的我的安全认证码
2、在实际的接入使用中，并不能完全保证接入的接口能够完全返回数据，故专门将接口返回的json格式数据又多做了一层包裹，按照我常用的方式包裹，主要是做了接口请求响应代码不为200处理、接口调用报错（含返回的json格式转换报错）；同时当result=success时只是说明验证接口成功响应，但至于是否真的验证成功，则还需要从message的response参数中进行验证，可参考客户端的验证代码，运行示例参考如下：
“/demo/authCode/server.html”
点赞
