版权声明：本文为博主原创文章，未经博主允许不得转载。如有问题，欢迎指正。 https://blog.csdn.net/qq_30225725/article/details/87136255
问题一：我现在点击获取手机验证码，虽然现实正在发送 但是手机接收不到验证码
我试了很多 也不知道哪的问题
我们使用的是榛子云短信平台, 官网地址: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
<!-- 触发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存放，这里使用的是阿里的fastjson
HttpSession session = request.getSession();
json = new JSONObject();
json.put("verifyCode", verifyCode);
json.put("createTime", System.currentTimeMillis());
// 将认证码存入SESSION
request.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 Desktop
C:\Users\Administrator\Desktop>echo 大大大 >> 1.4
拒绝访问。
C:\Users\Administrator\Desktop>echo 大大大 >> 1.html
C:\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.html
C:\Users\Administrator\Desktop>echo "<html><body><button disable id='test'>ss</button><body></html>" >> 2.html
C:\Users\Administrator\Desktop>
把这两个地方改了
