安全验证（腾讯防水墙、极验行为验证）服务端开发及vue模板使用

截图

组件使用

1、安装

// 如果没有axios需要安装axios $ npm install axios -S $ npm install vue-social-captcha -S

2、使用

方法1：引入全局组件 在main.js引入组件

# main.js import captcha from 'vue-social-captcha' Vue.use(captcha)

在页面中使用

<template> <div id="app"> <Captcha id="Captcha" scene="Login" type="Geetest" :parm="captchaOption" @callback="captchaNotice" url="http://pay.test.com/admin/captcha/" > <input id="Captcha" type="button" value="登陆"/> </Captcha> </div> </template> <script> export default { name: 'app', data () { return { captchaOption: { // 各平台的参数，具体请参阅个平台文档 // 以下为腾讯验证码的参数 // appid: '', // 以下为极验验证码的参数 product: 'bind', } } }, methods: { // 回调监听 // status: 1成功,2验证中,0失败 // res: 三方返回的原始数据 captchaNotice(status, res){ console.log(status) console.log(res) } } } </script>

方法2：页面引入组件 直接在页面引入

<template> <div id="app"> <Captcha id="Captcha" scene="Login" type="Geetest" :parm="captchaOption" @callback="captchaNotice" url="http://pay.test.com/admin/captcha/" > <input id="Captcha" type="button" value="登陆"/> </Captcha> </div> </template> <script> import captcha from 'vue-social-captcha' export default { name: 'app', components: { Captcha }, data () { return { captchaOption: { // 各平台的参数，具体请参阅个平台文档 // 以下为腾讯验证码的参数 // appid: '', // 以下为极验验证码的参数 product: 'bind', } } }, methods: { // 回调监听 // status: 1成功,2验证中,0失败 // res: 三方返回的原始数据 captchaNotice(status, res){ console.log(status) console.log(res) } } } </script>

3、参数

通过以下属性来设置你的验证码

4、返回值

相应数据格式 服务端返回参数主要有三个，分别是code msg data。 示例：

// 极验验证 { "code":1, "msg":"验证成功", "data": { "success":1, "gt":"29e4e065c7ba05ff77ba896e5d577f89", "challenge":"bd26076b3afe9ed3c17738f3f8a7eec7", "new_captcha":1 } } // 腾讯验证 { "code":1, "msg":"验证成功" }

服务端接口示例

腾讯： HttpRequestUtil为发请求工具类，Json处理为alibaba的fastjson，Result只是一个返回结果的封装

public Result<Map<String, Object>> authentication(@RequestParam Map<String, String> map) { String aid= map.get("aid"); String aid= map.get("AppSecretKey"); String gType = map.get("g_type"); //验证码类型 String gScene = map.get("g_scene"); //验证码使用场景 String ticket = map.get("ticket"); .//票据 String randstr = map.get("randstr");//随机串 String ipStr = map.get("ipStr");// 客户端ip String params = "aid="+aid+"&AppSecretKey="+AppSecretKey+"&Ticket="+ticket+"&Randstr="+randstr+"&UserIP"+ipStr; String result = HttpRequestUtil.sendGet(baseUrl, params); JSONObject jsonObject = JSONObject.parseObject(result); String response = jsonObject.getString("response"); String err_msg = jsonObject.getString("err_msg"); String evil_level = jsonObject.getString("evil_level"); if(!"1".equals(response)){ return new Result<Map<String, Object>>().error(0, err_msg); } Map<String, Object> resultMap = new HashMap<>(3); resultMap.put("response", response); resultMap.put("evil_level", evil_level); resultMap.put("err_msg", err_msg); Result<Map<String, Object>> requestResult = new Result<>(); requestResult.setCode(1); requestResult.setMsg("验证成功"); requestResult.setData(resultMap); return requestResult; }

HttpRequestUtil：

package io.renren.commons.tools.utils; import java.io.*; import java.net.*; import java.nio.charset.StandardCharsets; import java.util.Arrays; import java.util.List; import java.util.Map; /** * Http请求工具类 */ public class HttpRequestUtil { static boolean proxySet = false; static String proxyHost = "127.0.0.1"; static int proxyPort = 8087; /** * 编码 * @param source * @return */ public static String urlEncode(String source,String encode) { String result = source; try { result = java.net.URLEncoder.encode(source,encode); } catch (UnsupportedEncodingException e) { e.printStackTrace(); return "0"; } return result; } public static String urlEncodeGBK(String source) { String result = source; try { result = java.net.URLEncoder.encode(source,"GBK"); } catch (UnsupportedEncodingException e) { e.printStackTrace(); return "0"; } return result; } /** * 发起http请求获取返回结果 * @param reqUrl 请求地址 * @return */ public static String httpRequest(String reqUrl) { StringBuilder buffer = new StringBuilder(); try { URL url = new URL(reqUrl); HttpURLConnection httpUrlConn = (HttpURLConnection) url.openConnection(); httpUrlConn.setDoOutput(false); httpUrlConn.setDoInput(true); httpUrlConn.setUseCaches(false); httpUrlConn.setRequestMethod("GET"); httpUrlConn.connect(); // 将返回的输入流转换成字符串 InputStream inputStream = httpUrlConn.getInputStream(); InputStreamReader inputStreamReader = new InputStreamReader(inputStream, StandardCharsets.UTF_8); BufferedReader bufferedReader = new BufferedReader(inputStreamReader); String str = null; while ((str = bufferedReader.readLine()) != null) { buffer.append(str); } bufferedReader.close(); inputStreamReader.close(); // 释放资源 inputStream.close(); inputStream = null; httpUrlConn.disconnect(); } catch (Exception e) { System.out.println(Arrays.toString(e.getStackTrace())); } return buffer.toString(); } /** * 发送http请求取得返回的输入流 * @param requestUrl 请求地址 * @return InputStream */ public static InputStream httpRequestIO(String requestUrl) { InputStream inputStream = null; try { URL url = new URL(requestUrl); HttpURLConnection httpUrlConn = (HttpURLConnection) url.openConnection(); httpUrlConn.setDoInput(true); httpUrlConn.setRequestMethod("GET"); httpUrlConn.connect(); // 获得返回的输入流 inputStream = httpUrlConn.getInputStream(); } catch (Exception e) { e.printStackTrace(); } return inputStream; } /** * 向指定URL发送GET方法的请求 * * @param url * 发送请求的URL * @param param * 请求参数，请求参数应该是 name1=value1&name2=value2 的形式。 * @return URL 所代表远程资源的响应结果 */ public static String sendGet(String url, String param) { String result = ""; BufferedReader in = null; try { String urlNameString = url + "?" + param; URL realUrl = new URL(urlNameString); // 打开和URL之间的连接 URLConnection connection = realUrl.openConnection(); // 设置通用的请求属性 connection.setRequestProperty("accept", "*/*"); connection.setRequestProperty("connection", "Keep-Alive"); connection.setRequestProperty("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;SV1)"); // 建立实际的连接 connection.connect(); // 获取所有响应头字段 Map<String, List<String>> map = connection.getHeaderFields(); // 遍历所有的响应头字段 for (String key : map.keySet()) { System.out.println(key + "--->" + map.get(key)); } // 定义 BufferedReader输入流来读取URL的响应 in = new BufferedReader(new InputStreamReader( connection.getInputStream())); String line; while ((line = in.readLine()) != null) { result += line; } } catch (Exception e) { System.out.println("发送GET请求出现异常！" + e); e.printStackTrace(); } // 使用finally块来关闭输入流 finally { try { if (in != null) { in.close(); } } catch (Exception e2) { e2.printStackTrace(); } } return result; } /** * 向指定 URL 发送POST方法的请求 * * @param url * 发送请求的 URL * @param param * 请求参数，请求参数应该是 name1=value1&name2=value2 的形式。 * @param isproxy * 是否使用代理模式 * @return 所代表远程资源的响应结果 */ public static String sendPost(String url, String param,boolean isproxy) { OutputStreamWriter out = null; BufferedReader in = null; StringBuilder result = new StringBuilder(); try { URL realUrl = new URL(url); HttpURLConnection conn = null; //使用代理模式 if(isproxy){ @SuppressWarnings("static-access") Proxy proxy = new Proxy(Proxy.Type.HTTP, new InetSocketAddress(proxyHost, proxyPort)); conn = (HttpURLConnection) realUrl.openConnection(proxy); }else{ conn = (HttpURLConnection) realUrl.openConnection(); } // 打开和URL之间的连接 // 发送POST请求必须设置如下两行 conn.setDoOutput(true); conn.setDoInput(true); conn.setRequestMethod("POST"); // POST方法 // 设置通用的请求属性 conn.setRequestProperty("accept", "*/*"); conn.setRequestProperty("connection", "Keep-Alive"); conn.setRequestProperty("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;SV1)"); conn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded"); conn.connect(); // 获取URLConnection对象对应的输出流 out = new OutputStreamWriter(conn.getOutputStream(), StandardCharsets.UTF_8); // 发送请求参数 out.write(param); // flush输出流的缓冲 out.flush(); // 定义BufferedReader输入流来读取URL的响应 in = new BufferedReader( new InputStreamReader(conn.getInputStream())); String line; while ((line = in.readLine()) != null) { result.append(line); } } catch (Exception e) { System.out.println("发送 POST 请求出现异常！"+e); e.printStackTrace(); } //使用finally块来关闭输出流、输入流 finally{ try{ if(out!=null){ out.close(); } if(in!=null){ in.close(); } } catch(IOException ex){ ex.printStackTrace(); } } return result.toString(); } }

参考链接地址

腾讯防水墙 极验行为验证 VUE模板