Solution/ 解决方案

解决方案分类

如何进行Vue工程短信防火墙对接

发布时间:2020-03-20 点击数:2815

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、    提供jarnxt-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);

        }

       

    }