安全验证（腾讯防水墙、极验行为验证）服务端开发及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();
}
}
