如何進(jìn)行Vue工程短信防火墻對(duì)接
1.1. Vue + Spring Boot
對(duì)接適用于Vue+Spring Boot工程。
1.1.1. 設(shè)備指紋集成
Ø 前端
Vue前端，找到/public/index.html 頁(yè)面
1、 頁(yè)面body中加如下：注意ip及端口號(hào)要根據(jù)實(shí)際情況進(jìn)行修改，使用以下代碼：
script src="http://客戶自己Ip:端口/NxtJsServlet"></script
2、 修改vue工程的/src/utils/request.js 的import部分最后一行后面，添加以下代碼：
axios.defaults.withCredentials = true;
Ø 服務(wù)端
服務(wù)端使用的是Spring Boot 。
1、 提供jar包nxt-fw-sms-client.jar添加到mvn庫(kù)
mvn install:install-file -Dfile=D:/nxt_workspace/emp-pub-lib/nxt-fw-sms-client.jar -DgroupId=com.newxtc -DartifactId=nxt-fw-sms-client -Dversion=1.0.0 -Dpackaging=jar
2、 修改服務(wù)端應(yīng)用工程的pom.xml，添加jar包依賴
工程中導(dǎo)入依賴包
nxt-fw-sms-client.jar
commons-codec-1.4.jar
commons-lang3-3.6.jar
commons-logging.jar
commons-pool2-2.4.2.jar
fastjson-1.2.31.jar
httpclient-4.3.1.jar
httpcore-4.3.jar
jedis-2.8.0.jar
logback-core-1.0.13.jar
slf4j-api-1.6.6.jar
3、 把提供的newxtc.ini放到客戶自己工程的src\main\resources下。
4、 找到客戶自己工程中的CorsConfig類，添加紅色部分
public class CorsConfig {
// 當(dāng)前跨域請(qǐng)求最大有效時(shí)長(zhǎng)。這里默認(rèn)30天
private long maxAge = 30 * 24 * 60 * 60;
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); // 1 設(shè)置訪問(wèn)源地址
corsConfiguration.addAllowedHeader("*"); // 2 設(shè)置訪問(wèn)源請(qǐng)求頭
corsConfiguration.addAllowedMethod("*"); // 3 設(shè)置訪問(wèn)源請(qǐng)求方法
corsConfiguration.setAllowCredentials(true);//4 設(shè)置跨域
corsConfiguration.setMaxAge(maxAge);
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig()); // 4 對(duì)接口配置跨域設(shè)置
FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
bean.setOrder(Ordered.HIGHEST_PRECEDENCE);
return new CorsFilter(source);
}
}
5、 找到客戶自己工程中的Application類，添加紅色部分
@ServletComponentScan(basePackages = {"com.newxtc"})
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
1.1.2. 手機(jī)號(hào)加密集成
Ø 前端
Vue前端
1、 業(yè)務(wù)使用到手機(jī)號(hào)的vue頁(yè)面，對(duì)手機(jī)號(hào)加密處理，需要修改。短信下發(fā)頁(yè)面
示例：標(biāo)紅名稱固定。
let obj = {};
obj[NxtMobileName()] = NxtMobileValue(this.account);
authCaptcha(obj).then(res => {
if(res.data.errmsg===409){
Toast.fail(res.data.errmsg);
}
Toast.success("驗(yàn)證碼已發(fā)送！")
}).catch(error => {
Toast.fail(error.data.errmsg);
})
Ø 服務(wù)端
1、 服務(wù)端接收前端數(shù)據(jù)后，進(jìn)行手機(jī)號(hào)解密。代碼如下：
FingerApi fingerApi = new FingerImpl();
String key = fingerApi.getMobileName(request, response);
String mobileEn = JacksonUtil.parseString(body, key);//body 為string
String mobile = fingerApi.mobileDecrypt(request, response, mobileEn);
1.1.3. 短信防火墻集成
Ø 服務(wù)端
說(shuō)明：參考下面示例，紅色TODO處對(duì)接上業(yè)務(wù)代碼?？筛鶕?jù)實(shí)際代碼情況調(diào)整，示例提供對(duì)接思路。
1、 短信下發(fā)
業(yè)務(wù)集成點(diǎn)：下發(fā)隨機(jī)短信驗(yàn)證碼時(shí)
示例：
@PostMapping("regCaptcha")
public Object registerCaptcha(@RequestBody String body, HttpServletResponse response, HttpServletRequest request) {
FingerApi fingerApi = new FingerImpl();
String key = fingerApi.getMobileName(request, response);
String mobileEn = JacksonUtil.parseString(body, key);
String phoneNumber = fingerApi.mobileDecrypt(request, response, mobileEn);
FwApi fwApi = new FwImpl();
// 1 調(diào)用【短信防火墻】驗(yàn)證請(qǐng)求
HashMap<String, Object> paramMap = fwApi.getSendReq(request, response, phoneNumber);
//請(qǐng)求防火墻
String jsonReq = fwApi.req(paramMap);
//報(bào)文處理
int ret = fwApi.getRet(jsonReq);
if (ret == 1) {
// 2 調(diào)用【短信防火墻】失敗結(jié)果
fwApi.fail(paramMap);
return ResponseUtil.fail(401, "發(fā)送驗(yàn)證碼過(guò)于頻繁！");
}
//業(yè)務(wù)TODO
if (smsRetMsg.getRet() == 0) {//發(fā)送成功
String resp = smsRetMsg.getResp();
fwApi.succ(paramMap);
smsService.sendSucess(resp);
} else {
fwApi.fail(paramMap);
}
}
2、 短信驗(yàn)證
業(yè)務(wù)集成點(diǎn)：使用短信碼進(jìn)行驗(yàn)證時(shí)
示例：
@PostMapping("/registerH5")
public Object register_h5(HttpServletRequest request, HttpServletResponse response, @RequestBody String body) {
FingerApi fingerApi = new FingerImpl();
String key = fingerApi.getMobileName(request, response);
String mobileEn = JacksonUtil.parseString(body, key);
String mobile = fingerApi.mobileDecrypt(request, response, mobileEn);
//String mobile = JacksonUtil.parseString(body, "mobile");
String code = JacksonUtil.parseString(body, "code");
String password = JacksonUtil.parseString(body, "password");
FwApi fwApi = new FwImpl();
// 1 調(diào)用【短信防火墻】驗(yàn)證請(qǐng)求
HashMap<String, Object> paramMap = fwApi.getVerifyReq(request, response, mobile);
//請(qǐng)求防火墻
String jsonReq = fwApi.req(paramMap);
//報(bào)文處理
int smsSendRet = fwApi.getRet(jsonReq);
if (smsSendRet == 1) {
// 2 調(diào)用【短信防火墻】失敗結(jié)果
fwApi.fail(paramMap);
}
//業(yè)務(wù)TODO
if (!(code.equals(cachedCaptcha))) {
//調(diào)用【短信防火墻】失敗結(jié)果
fwApi.fail(paramMap);
return ResponseUtil.fail(AUTH_CAPTCHA_UNSUPPORT, "驗(yàn)證碼錯(cuò)誤！");
} else {
//調(diào)用【短信防火墻】成功結(jié)果
fwApi.succ(paramMap);
}
}
3、 用戶登錄
業(yè)務(wù)集成點(diǎn)：用戶賬號(hào)登錄時(shí)
示例：
@PostMapping("login")
public Object login(@RequestBody String body, HttpServletRequest request, HttpServletResponse response) {
FingerApi fingerApi = new FingerImpl();
String key = fingerApi.getMobileName(request, response);
String mobileEn = JacksonUtil.parseString(body, key);
String mobile = fingerApi.mobileDecrypt(request, response, mobileEn);
String password = JacksonUtil.parseString(body, "password");
String code = JacksonUtil.parseString(body, "code");
//業(yè)務(wù)TODO
FwApi fwApi = new FwImpl();
// 1 調(diào)用【短信防火墻】短信發(fā)送請(qǐng)求
HashMap<String, Object> paramMap = fwApi.getLoginReq(request, response, mobile);
String req = fwApi.req(paramMap);
fwApi.getRet(req);
if (!(code == null || code.length() <= 0)) {//驗(yàn)證碼登錄
HashMap<String, Object> pm = fwApi.getVerifyReq(request, response, mobile);
fwApi.req(pm);
String cachedCaptcha = CaptchaCodeManager.getCachedCaptcha(mobile);
if (StringUtil.isEmpty(cachedCaptcha)) {
fwApi.fail(pm);
return ResponseUtil.fail(AUTH_CAPTCHA_UNSUPPORT, "驗(yàn)證碼過(guò)期！");
}
if (!(code.equals(cachedCaptcha))) {
fwApi.fail(pm);
return ResponseUtil.fail(AUTH_CAPTCHA_UNSUPPORT, "驗(yàn)證碼錯(cuò)誤！");
} else {
fwApi.succ(pm);
fwApi.succ(paramMap);
CaptchaCodeManager.removeCachedCaptcha(mobile);
}
} else {//驗(yàn)證碼是空值 ，用手機(jī)號(hào)與密碼登錄
if (!encoder.matches(password, user.getPassword())) {
fwApi.fail(paramMap);
return ResponseUtil.fail(AUTH_INVALID_ACCOUNT, "手機(jī)號(hào)或密碼不對(duì)!");
}
fwApi.succ(paramMap);
}
}