Spring MVC短信驗證碼的實現

在外部網站中短信的驗證頗有必要，好比在實現註冊、驗證用戶信息等的狀況下。在SpringMVC中的實現以下：

短信接口

短信接口，有些企業會購買的有移動的短信平臺接口。若是是我的或者是小企業可使用一些雲服務的。好比百度的API Store上面的。

我使用的是：http://apistore.baidu.com/apiworks/servicedetail/1018.html

固然短信接口確定都是要付費的，並且是基於模板的，具體的使用說明能夠看這個網址裏面的使用說明。

前端界面

前端的界面，可能以下，點擊獲取驗證碼，而後按鈕變爲灰色而且倒計時。（手機號是個人~~）

HTML代碼就不寫了，JS以下：vailidationCode是獲取驗證碼按鈕的ID。phone是手機號碼的ID，手機號碼只是簡單的驗證了，若是是要更精確，使用正則，其中的url的sendSms是後臺的springMVC的路徑。

$("#validationCode").click(function(){
    var phone = $("#phone").val();
    if($("#phone").val() && $("#phone").val().length == 11){
        $.ajax({
            cache : false,
            url : "sendSms",
            data : {phone : phone}
        });
        updateButtonStatus();
    }else {
        alert("請輸入合法的手機號");
    }
});

var countdown=60;
function updateButtonStatus(){
    var phone = $("#validationCode");
    if (countdown == 0) {
        phone.attr("disabled","false");
        phone.val("免費獲取驗證碼");
        countdown = 60;
        return;
    } else {
        phone.attr("disabled","true");
        phone.val("從新發送(" + countdown + ")");
        countdown--;
    }
    setTimeout(function() {
                updateButtonStatus() }
            ,1000)
}

後端代碼

@RequestMapping(value = "/sendSms")
@ResponseBody
public String sendSMS(@RequestParam("phone") String phone, HttpServletRequest request){
    StringBuilder code = new StringBuilder();
    Random random = new Random();
    // 生成6位驗證碼
    for (int i = 0; i < 6; i++) {
        code.append(String.valueOf(random.nextInt(10)));
    }
    HttpSession session = request.getSession();
    session.setAttribute(VALIDATE_PHONE, phone);
    session.setAttribute(VALIDATE_PHONE_CODE, code.toString());
    session.setAttribute(SEND_CODE_TIME, new Date().getTime());
    String smsText = "您的驗證碼是:"+code;
    SMSUtil.send(phone,smsText);
    return "success";
}

其中的SMSUtil是封裝的上面的短信接口的發送類。參考以下，其中的API_KEY改爲本身的。

public class SMSUtil {

    static String httpUrl = "http://apis.baidu.com/kingtto_media/106sms/106sms";
    final static String API_KEY = "xxxx";

    public static String send(String phone,String content) {
        BufferedReader reader = null;
        String result = null;
        StringBuffer sbf = new StringBuffer();

        try {
            String httpArg = "mobile="+phone+"&content="+URLEncoder.encode(content,"UTF-8")+"&tag=2";
            httpUrl = httpUrl + "?" + httpArg ;
            URL url = new URL(httpUrl);
            HttpURLConnection connection = (HttpURLConnection) url
                    .openConnection();
            connection.setRequestMethod("GET");
            // 填入apikey到HTTP header
            connection.setRequestProperty("apikey",API_KEY);
            connection.connect();
            InputStream is = connection.getInputStream();
            reader = new BufferedReader(new InputStreamReader(is, "UTF-8"));
            String strRead = null;
            while ((strRead = reader.readLine()) != null) {
                sbf.append(strRead);
                sbf.append("\r\n");
            }
            reader.close();
            result = sbf.toString();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return result;
    }
}

前臺的表單提交前還須要使用ajax作一下表單的驗證，驗證一下驗證碼是否正確：

@RequestMapping("/validate")
@ResponseBody
protected String validate(HttpServletRequest request,@RequestParam("phone") String inputPhone,@RequestParam ("code") String inputCode){
    HttpSession session = request.getSession();
    String code = (String) session.getAttribute(VALIDATE_PHONE_CODE);
    String phone = (String) session.getAttribute(VALIDATE_PHONE);
    if(phone.equals(inputPhone) && code.equalsIgnoreCase(inputCode)){
        return "success";
    }else{
        return "failure";
    }
}