基於javaweb的SSM框架實現短信驗證碼的環境配置與代碼編寫

首先讓我們看一下其他平臺對於該功能實現的思路：

進入註冊頁面
輸入註冊信息與手機號碼，點擊獲取驗證碼按鈕
重點：獲取按鈕點擊後，按鈕變成倒計時按鈕，倒計時結束前不可再次獲取。且該按鈕不是普通的form表單提交，因爲頁面沒有跳轉，普通action調用後臺是必須用到頁面跳轉的
輸入正確的短信驗證碼，點擊註冊按鈕，後臺判斷驗證碼正確且其他信息符合要求，完成註冊。

接下來我說一下我們需要什麼：

短信發放平臺
jQuery之ajax提交
隨機生成驗證碼

接下來請按照我的步驟開始你們的表演：

這裏短信平臺我選擇的是雲片雲通訊平臺點擊進入，進入主頁註冊一個賬號，進入賬號後臺,如圖：
點擊通訊雲-國內短信-簽名模板報備：

這裏需要認證下信息，認證完後等待審覈通過，創建自己的簽名，這個簽名到時候短信收到時候會顯示在短信前面的【***】裏面，簽名審覈通過之後我們就可以開始配置接口了。

打開我們的代碼，這裏我用的是IntelliJ IDEA寫的，我們需要導入依賴包：

    <dependency>
      <groupId>com.yunpian.sdk</groupId>
      <artifactId>yunpian-java-sdk</artifactId>
      <version>1.2.7</version>
    </dependency>

導入後我們就可以開始寫接口，這裏我們建一個測試用例：

import com.yunpian.sdk.YunpianClient;
import com.yunpian.sdk.model.Result;
import com.yunpian.sdk.model.SmsSingleSend;
import org.junit.Test;
import java.util.Map;
public class testYunPian {
    @Test
    public void test(){
        //初始化clnt,使用單例方式
        YunpianClient clnt = new YunpianClient("apikey").init();
        //發送短信API
        Map<String, String> param = clnt.newParam(2);
        param.put(YunpianClient.MOBILE, "13*********");
        param.put(YunpianClient.TEXT, "【雲片網】您的驗證碼是1234");
        Result<SmsSingleSend> r = clnt.sms().single_send(param);
        //獲取返回結果，返回碼:r.getCode(),返回碼描述:r.getMsg(),
        // API結果:r.getData(),其他說明:r.getDetail(),調用異常:r.getThrowable()
        //賬戶:clnt.user().* 簽名:clnt.sign().* 模版:clnt.tpl().* 短信:clnt.sms().
        // * 語音:clnt.voice().* 流量:clnt.flow().* 隱私通話:clnt.call().*
        System.out.println(r);
        //釋放clnt
        clnt.close();
    }
}

代碼裏面的apikey是我們網頁後臺有的，需要驗證手機之後纔可以獲得：
代碼裏的13*******就是接收短信的驗證碼，這個手機號碼我們是要從網頁端由用戶輸入的，代碼裏的"【雲片網】您的驗證碼是1234"是短信內容，“【雲片網】”即我們之前在網頁後臺的設置的標籤，須一模一樣才能使用，驗證碼當然要由我們的後端代碼隨機生成，點擊運行即可以在想要的手機上收到想要的短信內容。
接下來我們聯繫前端與後端，使用spring做一個實例：
前端代碼（使用ajax提交可以做到不跳轉訪問後臺，具體編寫方法可以參考網上ajax的使用方法，這裏我給出ajax需要的jQuery的js包：鏈接: https://pan.baidu.com/s/1dbIyXxmIbaChl0q4Zh7wCw 提取碼: p671）：

<body>
<form action="./doYunPianLogin" method="post">
    輸入賬號：<input type="text" name="name"><br>
    輸入密碼：<input type="password" name="pwd"><br>
    輸入手機：<input type="text" name="phone" id="phone"><br>
    短信驗證碼：<input type="text" name="msgcode" oninput = "value=value.replace(/[^\d]/g,'')" maxlength="4">
    <input type="button" value="獲取驗證碼" onclick="yunpiancode()" id="getcode" name="getcode"><br>
    <input type="submit" value="進入登錄頁面">
</form>
<script type="text/javascript" src="/img/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

    function yunpiancode() {

        var phone=$("#phone").val();
        console.log(phone);
        time=5;
        var btn = $("#getcode");
        btn.attr("disabled", true);  //按鈕禁止點擊
        btn.val(time <= 0 ? "獲取驗證碼" : ("" + (time) + "秒後可發送"));
        var hander = setInterval(function() {
            if (time <= 0) {
                clearInterval(hander); //清除倒計時
                btn.val("發送動態密碼");
                btn.attr("disabled", false);
                return false;
            }else {
                btn.val("" + (time--) + "秒後可發送");
            }
        }, 1000);

        $.ajax({
            url:"./getcode",
            type:"post",
            data:JSON.stringify({phone:phone,msg:"已發送驗證碼"}),
            contentType:"application/json;charset=UTF-8",
            dataType:"json",
            success:function (data) {
                if(data!=null){
                    console.log(data.msg);
                }
            }

        })
    }
</script>
</body>

工具封包（package-name：mju.utils）代碼：

import com.yunpian.sdk.YunpianClient;
import com.yunpian.sdk.model.Result;
import com.yunpian.sdk.model.SmsSingleSend;
import java.util.Map;
public class YunPianTool {
    public void Main(String phone,String text){
        //初始化clnt,使用單例方式
        YunpianClient clnt = new YunpianClient("**************************").init()
        //發送短信API
        Map<String, String> param = clnt.newParam(2);
        param.put(YunpianClient.MOBILE, phone);
        param.put(YunpianClient.TEXT, text);
        Result<SmsSingleSend> r = clnt.sms().single_send(param);
        //獲取返回結果，返回碼:r.getCode(),返回碼描述:r.getMsg(),
        // API結果:r.getData(),其他說明:r.getDetail(),調用異常:r.getThrowable()
        //賬戶:clnt.user().* 簽名:clnt.sign().* 模版:clnt.tpl().* 短信:clnt.sms().
        // * 語音:clnt.voice().* 流量:clnt.flow().* 隱私通話:clnt.call().*
        //釋放clnt
        clnt.close();
        System.out.println(r);
    }
}

控制檯代碼：

import mju.utils.Result;
import mju.utils.YunPianTool;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class testAction {
    private static String itsphone;
    private static Integer itscode;
    @RequestMapping(value = "/YunPianLogin")
    public ModelAndView YunPianLogin(){
        ModelAndView mv  =new ModelAndView();
        mv.setViewName("YunPianLogin");
        return mv;
    }
    @RequestMapping(value = "/doYunPianLogin")
    public ModelAndView doYunPianLogin(String name,String pwd,String phone,Integer msgcode){
        ModelAndView mv=new ModelAndView();
        System.out.println(name+","+pwd+","+phone+","+msgcode);
        System.out.println("itscode:"+itscode);
        System.out.println("itsphone:"+itsphone);
        if(name.equals("admin") && pwd.equals("admin")){
            if(phone.equals(itsphone) && msgcode.equals(itscode)){
                itscode=null;
                itsphone=null;
                mv.setViewName("studentlogin");
                return mv;
            }
        }
        mv.setViewName("error");
        mv.addObject("inp", "驗證碼或密碼錯誤");
        return mv;
    }
    @RequestMapping(value = "/getcode")
    @ResponseBody
    public Result getcode(@RequestBody Result result){
        System.out.println("手機號碼："+result.getPhone());
        int ran=(int)(Math.random()*9000)+1000;
        String text="【********】您的驗證碼是"+ran;
        itscode=ran;
        itsphone=result.getPhone();
        System.out.println("驗證碼是："+ran);
        new YunPianTool().Main(result.getPhone(),text);
        return result;
    }
}

運行結果：