基于javaweb的SSM框架实现短信验证码的环境配置与代码编写

首先让我们看一下其他平台对于该功能实现的思路：

进入注册页面
输入注册信息与手机号码，点击获取验证码按钮
重点：获取按钮点击后，按钮变成倒计时按钮，倒计时结束前不可再次获取。且该按钮不是普通的form表单提交，因为页面没有跳转，普通action调用后台是必须用到页面跳转的
输入正确的短信验证码，点击注册按钮，后台判断验证码正确且其他信息符合要求，完成注册。

接下来我说一下我们需要什么：

短信发放平台
jQuery之ajax提交
随机生成验证码

接下来请按照我的步骤开始你们的表演：

这里短信平台我选择的是云片云通讯平台点击进入，进入主页注册一个账号，进入账号后台,如图：
点击通讯云-国内短信-签名模板报备：

基于javaweb的SSM框架实现短信验证码的环境配置与代码编写
这里需要认证下信息，认证完后等待审核通过，创建自己的签名，这个签名到时候短信收到时候会显示在短信前面的【***】里面，签名审核通过之后我们就可以开始配置接口了。

打开我们的代码，这里我用的是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;
    }
}

运行结果：
基于javaweb的SSM框架实现短信验证码的环境配置与代码编写

最后就完成了，重点的小算法在action控制台，我是利用全局变量进行方法之间的传值，同时完成后清空全局变量。

基于javaweb的SSM框架 实现短信验证码的环境配置与代码编写

相关推荐

基于javaweb的SSM框架实现短信验证码的环境配置与代码编写