截圖
組件使用
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();
}
}