如何进行Vue工程短信防火墙对接
1.1. Vue + Spring Boot
对接适用于Vue+Spring Boot工程。
1.1.1. 设备指纹集成
Ø 前端
Vue前端，找到/public/index.html 页面
1、 页面body中加如下：注意ip及端口号要根据实际情况进行修改，使用以下代码：
script src="http://客户自己Ip:端口/NxtJsServlet"></script
2、 修改vue工程的/src/utils/request.js 的import部分最后一行后面，添加以下代码：
axios.defaults.withCredentials = true;
Ø 服务端
服务端使用的是Spring Boot 。
1、 提供jar包nxt-fw-sms-client.jar添加到mvn库
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、 修改服务端应用工程的pom.xml，添加jar包依赖
工程中导入依赖包
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 {
// 当前跨域请求最大有效时长。这里默认30天
private long maxAge = 30 * 24 * 60 * 60;
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
corsConfiguration.setAllowCredentials(true);//4 设置跨域
corsConfiguration.setMaxAge(maxAge);
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig()); // 4 对接口配置跨域设置
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. 手机号加密集成
Ø 前端
Vue前端
1、 业务使用到手机号的vue页面，对手机号加密处理，需要修改。短信下发页面
示例：标红名称固定。
let obj = {};
obj[NxtMobileName()] = NxtMobileValue(this.account);
authCaptcha(obj).then(res => {
if(res.data.errmsg===409){
Toast.fail(res.data.errmsg);
}
Toast.success("验证码已发送！")
}).catch(error => {
Toast.fail(error.data.errmsg);
})
Ø 服务端
1、 服务端接收前端数据后，进行手机号解密。代码如下：
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. 短信防火墙集成
Ø 服务端
说明：参考下面示例，红色TODO处对接上业务代码?？筛菔导蚀肭榭龅髡?，示例提供对接思路。
1、 短信下发
业务集成点：下发随机短信验证码时
示例：
@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 调用【短信防火墙】验证请求
HashMap<String, Object> paramMap = fwApi.getSendReq(request, response, phoneNumber);
//请求防火墙
String jsonReq = fwApi.req(paramMap);
//报文处理
int ret = fwApi.getRet(jsonReq);
if (ret == 1) {
// 2 调用【短信防火墙】失败结果
fwApi.fail(paramMap);
return ResponseUtil.fail(401, "发送验证码过于频繁！");
}
//业务TODO
if (smsRetMsg.getRet() == 0) {//发送成功
String resp = smsRetMsg.getResp();
fwApi.succ(paramMap);
smsService.sendSucess(resp);
} else {
fwApi.fail(paramMap);
}
}
2、 短信验证
业务集成点：使用短信码进行验证时
示例：
@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 调用【短信防火墙】验证请求
HashMap<String, Object> paramMap = fwApi.getVerifyReq(request, response, mobile);
//请求防火墙
String jsonReq = fwApi.req(paramMap);
//报文处理
int smsSendRet = fwApi.getRet(jsonReq);
if (smsSendRet == 1) {
// 2 调用【短信防火墙】失败结果
fwApi.fail(paramMap);
}
//业务TODO
if (!(code.equals(cachedCaptcha))) {
//调用【短信防火墙】失败结果
fwApi.fail(paramMap);
return ResponseUtil.fail(AUTH_CAPTCHA_UNSUPPORT, "验证码错误！");
} else {
//调用【短信防火墙】成功结果
fwApi.succ(paramMap);
}
}
3、 用户登录
业务集成点：用户账号登录时
示例：
@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");
//业务TODO
FwApi fwApi = new FwImpl();
// 1 调用【短信防火墙】短信发送请求
HashMap<String, Object> paramMap = fwApi.getLoginReq(request, response, mobile);
String req = fwApi.req(paramMap);
fwApi.getRet(req);
if (!(code == null || code.length() <= 0)) {//验证码登录
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, "验证码过期！");
}
if (!(code.equals(cachedCaptcha))) {
fwApi.fail(pm);
return ResponseUtil.fail(AUTH_CAPTCHA_UNSUPPORT, "验证码错误！");
} else {
fwApi.succ(pm);
fwApi.succ(paramMap);
CaptchaCodeManager.removeCachedCaptcha(mobile);
}
} else {//验证码是空值 ，用手机号与密码登录
if (!encoder.matches(password, user.getPassword())) {
fwApi.fail(paramMap);
return ResponseUtil.fail(AUTH_INVALID_ACCOUNT, "手机号或密码不对!");
}
fwApi.succ(paramMap);
}
}