Java中IDEA，Springboot实现手机获取验证码和倒计时

问题一：我现在点击获取手机验证码，虽然现实正在发送但是手机接收不到验证码

我试了很多也不知道哪的问题

我们使用的是榛子云短信平台, 官网地址:http://smsow.zhenzikj.com

已经解决
——————————————————————————————
问题二：为什么我点击获取验证码没有显示秒数

已经解决
——————————————————————————————

问题三：读完秒数之后，点击重新获取短信验证码没有反应？
问题四：大佬帮我看看：以先把短信验证码存session，然后前端输入验证码之后，去后台跟session里的值比较写的代码对不？

页面：

 <form id="FormContact" method="post" action="verify_code"><!-- 联系方式 --><div class="form-wrap contact-info" id="FormWrapContact"><div class="field-wrap" data-field="mobile" style="position:relative;z-index:100;"><label class="short">手机号：</label><span class="field"><span class="ui-text"><input name="mobile" value="" type="mobile" placeholder="请输入您的手机号码" data-format="number" /></span><span class="error"></span></span></div><div class="field-wrap" data-field="mobile" style="position:relative;z-index:100;"><label class="short">验证码：</label><span class="field"><input class="ui-text short" type="text" name="verify_code" maxlength="4" ><span class="error" style="display: inline;"></span></span><span class="field vcode" data-type="vcode"><img  width="120" id="verify_code_img" height="32" src="/getImg" onclick="javascript:changeImg()"><a href="#" class="doc-color-link desc" onclick="javascript:changeImg()" >看不清，换一个？</a></span></div><div class="field-wrap" data-field="mobile" style="position:relative;z-index:100;"><label class="short">短信验证码：</label><span class="field"><span class="get-mvcode"><input class="ui-text short" type="text" name="sms_vcode" length="6" data-format="number" maxlength="6" /><input id="sendSms" class="ui-btn gray" type="button" name="getMvcode" value="点击获取" /></span><div class="error"></div><span class="info" style="display:none;">请将收到短信中的6位数字填入框内</span></span></div><div class="field-wrap" style="z-index:8;"><label class="short"></label><span class="field"><input class="ui-btn green long" name="contactPost" type="button" value="登录" /></span><div style="padding-top: 37.5px;text-align: left;margin-left: 102.6px;"><span class="info" style="margin-top:5px;margin-left:-3px;"><span class="doc-color-micro"><input style="margin-right: 5px;position:relative;top:-2px;" type="checkbox" checked disabled />同意<a class="doc-color-micro" style="margin-left: 5px;text-decoration: underline;" href="http://www.rong360.com/static/main/protocal/networkUser.html" target="_blank">融360服务条款</a></span></span></div></div></div></form>

<!-- 触发JS刷新  切换图片-->
<script type="text/javascript">function changeImg(){var img = document.getElementById("verify_code_img");img.src = "/getImg?date=" + new Date();}</script><!-- 发送短信验证码--><script type="text/javascript">$('#sendSms').bind('click',function(){var mobile = $("input[name='mobile']").val();//手机号var verifyCode = $("input[name='verify_code']");//手机验证码var vcode = verifyCode.val();//验证码var me = $(this);if(mobile.length != 11){$("input[name='mobile']").parentsUntil('.form-wrap','.field-wrap').find('.error').html('手机号码错误').show();return;}if(vcode.length < 4){$(verifyCode).parentsUntil('.form-wrap','.field-wrap').find('.error').html('验证码错误').show();return;}if($('[name="getMvcode"]').hasClass("doing")){return;}$('[name="getMvcode"]').addClass("doing").val('正在发送');$.ajax({url : '/sendSms',data: data,type: 'POST',dataType: 'json',success:function(data){if(data.code == 0){countdownHandler();}else{$("input[name='sms_vcode']").val('').parentsUntil('.form-wrap','.field-wrap').find('.error').html(data.message).show();var img_url = $('#verify_code_img').attr('src');$('#verify_code_img').attr('src',img_url+'1');$('[name="getMvcode"]').removeClass("doing");$('#sendSms').val("点击获取");}}});//短信验证码倒计时function  countdownHandler(){var $button = $("#sendSms");var number = 60;var countdown = function(){if (number == 0) {$button.attr("disabled",false);$button.html("发送验证码");number = 60;return;} else {$button.attr("disabled",true);$button.html(number + "秒 重新发送");number--;}setTimeout(countdown,1000);}setTimeout(countdown,1000);}});<!-- 提交 -->$('input[name="contactPost"]').click('click',function() {var mobile = $("input[name='mobile']").val();var smsCode = $("input[name='sms_vcode']").val();if (mobile.length != 11) {$("input[name='mobile']").parentsUntil('.form-wrap', '.field-wrap').find('.error').html('手机号码输入错误').show();return;}if (smsCode.length < 4) {$("input[name='sms_vcode']").parentsUntil('.form-wrap', '.field-wrap').find('.error').html('手机验证码错误').show();return;}$.ajax({url: "/register",async : true,type: "post",dataType: "text",data: data,success: function (data) {if(data == 'success'){alert("注册成功");return ;}alert(data);}});});</script>

MobilecodeController

package com.firstblood.financial.controller;import com.alibaba.fastjson.JSONObject;
import com.zhenzi.sms.ZhenziSmsClient;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.Random;@Controller
public class MobilecodeController {/*** @param request* @param mobile* @return*/@PostMapping("/sendSms")public Object sendSms(HttpServletRequest request, String mobile) {try {JSONObject json = null;//生成6位验证码String verifyCode = String.valueOf(new Random().nextInt(899999) + 100000);//发送短信ZhenziSmsClient client = new ZhenziSmsClient("https://sms_developer.zhenzikj.com", "100689", "9517cb5e-783c-4906-8d00-69ef22b5e891");String result = client.send(mobile, "您的验证码为:" + verifyCode + "，该码有效期为5分钟，该码只能使用一次！");json = JSONObject.parseObject(result);if (json.getIntValue("code") != 0) {//发送短信失败return "fail";}//将验证码存到session中,同时存入创建时间//以json存放，这里使用的是阿里的fastjsonHttpSession session = request.getSession();json = new JSONObject();json.put("verifyCode", verifyCode);json.put("createTime", System.currentTimeMillis());// 将认证码存入SESSIONrequest.getSession().setAttribute("verifyCode", json);return "success";} catch (Exception e) {e.printStackTrace();}return null;}}

效验验证码是否正确

package com.firstblood.financial.controller;import com.google.code.kaptcha.Constants;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;import javax.servlet.http.HttpServletRequest;
import java.util.logging.Logger;@Controller
public class KaptchaController {private static  final transient Logger log = Logger.getLogger(String.valueOf(KaptchaController.class));/**** @param request 验证手机短信验证码在页面上与后台判断是否一致* @param kaptchaReceived* @return*/@PostMapping("/register")public String loginCheck(HttpServletRequest request,
//              @RequestParam(value = "username", required = true) String username,
//              @RequestParam(value = "password", required = true) String password,@RequestParam(value = "sms_vcode", required = true) String kaptchaReceived){//用户输入的验证码的值String kaptchaExpected = (String) request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);//校验验证码是否正确if (kaptchaReceived == null || !kaptchaReceived.equals(kaptchaExpected)) {log.info("验证码错了");return "kaptcha_error";//返回验证码错误}//校验用户名密码// ……// ……log.info("验证码对了");return "success"; //校验通过返回成功}}

解决方法1

把短信签名给删了，就好使了

短信验证码实现流程

1、构造手机验证码，生成一个6位的随机数字串；
2、使用接口向短信平台发送手机号和验证码，然后短信平台再把验证码发送到制定手机号上
3、将手机号验证码、操作时间存入Session中，作为后面验证使用；
4、接收用户填写的验证码、手机号及其他注册数据；
5、对比提交的验证码与Session中的验证码是否一致，同时判断提交动作是否在有效期内；
6、验证码正确且在有效期内，请求通过，处理相应的业务。

如何使用java + maven的项目环境发送短信验证码，本文使用的是榛子云短信的接口。

1. 安装sdk

下载地址: http://smsow.zhenzikj.com/doc/sdk.html

下载下来是jar文件，需要将jar发布到本地的maven仓库中，在cmd环境下输入:

mvn install:install-file -DgroupId=com.zhenzi -DartifactId=sms -Dversion=1.0.0 -Dpackaging=jar -Dfile=/Users/Downloads/ZhenziSmsSDK.jar

注意:-Dfile是你本地下载的jar文件的路径，本例中使用的mac系统

接下来在pom.xml中引入项目:

<dependency><groupId>com.zhenzi</groupId><artifactId>sms</artifactId><version>1.0.0</version>
</dependency>

ok， sdk安装完毕，其实也挺简单的

2. 申请测试账号，获取appId、appSecret

测试账号需要人工申请，一般几分钟就可以申请下来。

使用测试账号登录管理后台获取appId、appSecret, 地址: http://sms.zhenzikj.com/zhenzisms_user

在"我的应用"->"详情"中打开:

3.用法

使用事先申请的AppId、AppSecret初始化ZhenziSmsClient:

ZhenziSmsClient client = new ZhenziSmsClient(appId, appSecret);

AppId、AppSecret是短信平台分配的

1)发送短信

String result = client.send("15811111111", "您的验证码为4534，有效时间为5分钟");

send方法用于单条发送短信

参数1:接收者手机号码，参数2:短信内容

返回结果是json格式的字符串, code: 发送状态，0为成功。非0为发送失败，可从data中查看错误信息

         {"code":0,"data":"发送成功"}

错误代码表

错误码	原因	解决方案
100	参数格式错误	检查请求参数是否为空, 或手机号码格式错误
101	短信内容超过1000字	短信内容过长，请筛检或分多次发送
105	appId错误或应用不存在	请联系工作人员申请应用或检查appId是否输入错误
106	应用被禁止	请联系工作人员查看原因
107	ip错误	如果设置了ip白名单，系统会检查请求服务器的ip地址，已确定是否为安全的来源访问
108	短信余额不足	需要到用户中心进行充值
109	今日发送超过限额	如果设置了日发送数量，则每个接收号码不得超过这个数量
110	应用秘钥(AppSecret)错误	检查AppSecret是否输入错误，或是否已在用户中心进行了秘钥重置
111	账号不存在	请联系工作人员申请账号
1000	系统位置错误	请联系工作人员或技术人员检查原因

SDK下载地址：http://smsow.zhenzikj.com/doc/sdk.html

测试成功

问题二解决

js代码改为：

<!-- 发送短信验证码--><script type="text/javascript">$('#sendSms1').bind('click',function(){var mobile = $("input[name='mobile']").val();//手机号var verifyCode = $("input[name='verify_code']");//手机验证码var vcode = verifyCode.val();//验证码var me = $(this);if(mobile.length != 11){$("input[name='mobile']").parentsUntil('.form-wrap','.field-wrap').find('.error').html('手机号码错误').show();return;}if(vcode.length < 4){$(verifyCode).parentsUntil('.form-wrap','.field-wrap').find('.error').html('验证码错误').show();return;}if($('[name="getMvcode"]').hasClass("doing")){return;}$('[name="getMvcode"]').addClass("doing").val('正在发送');$.ajax({url : '/sendSms',data: {mobile:mobile,verify_code:vcode},type: 'POST',dataType: 'text',async:false,success:(data)=>{console.log(`数据：${data}`);if(data==='success'){console.log(data);countdownHandler();}else{$("input[name='sms_vcode']").val('').parentsUntil('.form-wrap','.field-wrap').find('.error').html(data.message).show();var img_url = $('#verify_code_img').attr('src');$('#verify_code_img').attr('src',img_url+'1');$('[name="getMvcode"]').removeClass("doing");$('#sendSms1').val("点击获取");}}});//短信验证码倒计时function  countdownHandler(){var button = $("#sendSms1");var number = 60;var timeTask=setInterval(()=>{if(number===0){console.log(`来清计时器了,当前还剩${number}秒`);button.removeAttr("disabled");button.val("发送验证码");clearInterval(timeTask);}else{if(number>0){button.attr("disabled",true);button.val(number + "秒 重新发送");number--;}}},1000);}

返回值类型不是json 而且 h5和jQuery 不能同时在一起把$去掉

解决问题四

<!-- 发送短信验证码--><script type="text/javascript">$('#sendSms1').bind('click',function(){var mobile = $("input[name='mobile']").val();//手机号var verifyCode = $("input[name='verify_code']");//手机验证码var vcode = verifyCode.val();//验证码var me = $(this);if(mobile.length != 11){$("input[name='mobile']").parentsUntil('.form-wrap','.field-wrap').find('.error').html('手机号码错误').show();return;}if(vcode.length < 4){$(verifyCode).parentsUntil('.form-wrap','.field-wrap').find('.error').html('验证码错误').show();return;}$('[name="getMvcode"]').val('正在发送');$.ajax({url : '/sendSms',data: {mobile:mobile,verify_code:vcode},type: 'POST',dataType: 'text',async:false,success:(data)=>{console.log(`数据：${data}`);if(data==='success'){console.log(data);countdownHandler();}else{$("input[name='sms_vcode']").val('').parentsUntil('.form-wrap','.field-wrap').find('.error').html(data.message).show();var img_url = $('#verify_code_img').attr('src');$('#verify_code_img').attr('src',img_url+'1');$('[name="getMvcode"]').removeClass("doing");$('#sendSms1').val("点击获取");}}});//短信验证码倒计时function  countdownHandler(){var button = $("#sendSms1");var number = 60;var timeTask=setInterval(()=>{if(number===0){console.log(`来清计时器了,当前还剩${number}秒`);button.attr("disabled",false);button.val("发送验证码");clearInterval(timeTask);}else{if(number>0){button.attr("disabled",true);button.val(number + "秒 重新发送");number--;}}},1000);}

因为你已经将按钮弄成不可点击了，这个就没必要了

调试：

Microsoft Windows [版本 10.0.16299.125]
(c) 2017 Microsoft Corporation。保留所有权利。C:\Users\Administrator>cd DesktopC:\Users\Administrator\Desktop>echo 大大大 >> 1.4
拒绝访问。C:\Users\Administrator\Desktop>echo 大大大 >> 1.htmlC:\Users\Administrator\Desktop>echo <html><body><button disable>ss</button><body></html> >>2.html
此时不应有 <。C:\Users\Administrator\Desktop>echo "<html><body><button disable>ss</button><body></html>" >> 2.htmlC:\Users\Administrator\Desktop>echo "<html><body><button disable id='test'>ss</button><body></html>" >> 2.htmlC:\Users\Administrator\Desktop>

把这两个地方改了