整体流程:

  1. 客户填入手机号,通过客户端点击获取验证码按钮,验证手机号是否有效,有效则客户端发送请求到后台服务器,客户端开始倒计时60s,不通过则返回;
  2. 服务器,验证手机号是否被注册或有效,通过则调用第三方的短信通信接口并发送相关数据(包括手机号和验证码),然后回调结果,成功则将验证码存入session,失败则返回提示,不通过则返回。
  3. 客户收到验证码后在有效时间内,填入并发送请求。
  4. 服务器端,收到请求后,用户发送过来的验证码和事前放入session的验证码做对比,相同通过,否则提示验证码无效。

通过后,需要将session中的验证码无效化,一般就是置为空。

第一步伪代码:

function sendCaptcha(tel) {    

       console.log("sendCaptcha: tel = " + tel);    

       $.ajax({    

           type: 'post',    

           url: '/sms/captcha/' + tel,    

           dataType: "json",    

           success: function (data) {    

               console.log("sendCaptcha ==> success: data = " + eval(data));    

               if (data) {    

                   countdown();    

                   b_code = false;    

               } else {    

                   alert("您发送的频率过快!");    

               }    

           },    

           error: function (data) {    

               console.log("sendCaptcha ==> error: data = " + eval(data));    

               alert("网络超时");    

               clearTimeout(t);    

               b_code = true;    

               var msg = "获取验证码";    

               $("#code").text(msg);    

               c = 60;    

           }    

       });    

   }

第二步伪代码:

@RequestMapping(value = "captcha/{recPhoneNum}", method = RequestMethod.POST)    

   public Object getSmsCaptcha(ModelMap model, @PathVariable("recPhoneNum")String recPhoneNum) {    

       String responseBody = null;    



       /* 这里验证手机号是否被注册 */



      // 生成验证码

       String captcha  = Generator.generateCaptcha();    



      // 第三方短信通信接口参数设置

     req.setReceive(recPhoneNum);

       try {    

          // 发送请求

           responseBody = req.send();

          // 将验证码放入session

           model.addAttribute("captcha", captcha);    

          // 得到结果

           responseBody = rsp.getBody();    

           log.debug("getSmsCaptcha: responseBody = " + responseBody);    

           if (rsp.getResult() != null) {    

               model.addAttribute("success_response", rsp.getResult());    

           } else {    

               model.addAttribute("error_response", rsp.getSubMsg());    

           }    

       } catch (ApiException e) {    

           log.error("getSmsCaptcha :" + e.getErrMsg());    

       }    

        // 解析结果

       if (successJson != null) {    

           successJson = successJson.getJSONObject("result");    

           return successJson.getBoolean("success");    

       } else {    

           return false;    

       }    

   }

最后一步伪代码:

// 从session取出验证码

String captcha = session.getAttribute("captcha");

// 比较

if (reqCaptcha.equals(captcha))

// 相同通过,则无效化验证码

session.setAttribute("captcha", null);


else

// 不通过并提示无效验证码

如有疑问,请指出!