H5学习之路-手机短信验证码的实现
在上一篇博文中,给大家介绍了图片验证码的实现,今天再给大家介绍一下手机短信验证码的实现。其实,这个和图片验证码差不多,只不过要把后天生成的验证码发到对应的手机号码上,然后再进行验证。这里,关于发短信的功能可以找手机短信服务商,对接相应的接口即可。
好了,笔者就直接贴出相应的代码,流程也比较简单,第一步就是生成验证码发到对应的手机上,把相关数据放在session或内存中,第二步就是验证了。
一、html代码
这里做了一个比较简洁的html页面模拟大致的过程,代码如下:
<!DOCTYPE html>
<html>
<head><title>图片验证码</title><meta charset="utf-8"/>
</head>
<body>
<label>手机号码</label><input id="mobile" name="mobile" type="tel" placeholder="请输入手机号码"/>
<br />
<button type="button" id="yzm_btn">获取验证码</button>
<hr />
<label>验证码</label><input id="yzm" name="yzm" type="number" placeholder="请输入4位数验证码"/>
<span id="remainTime">30s</span> <button type="button" id="recapture_btn" style="display:none;">重新获取验证码</button>
<br />
<button type="button" id="check_btn">验证</button>
<script src="/m/plugins/zepto/zepto.min.js" type="text/javascript"></script>
<script src="../../scripts/captcha/mobileCode.js" type="text/javascript"></script>
</body>
</html>
页面展示如下:
二、js代码
js代码逻辑如下,这里就是发送和验证了,代码如下:
/*** 手机验证码*/
var mobile = '';
var count = 30; //验证码 有效期 30s
var curCount = 0; //当前剩余秒数 开始为0
var InterValObj = "";$(function() {console.log('获取手机验证码。。。');//获取验证码$('#yzm_btn').click(function() {//获取手机号mobile = $('#mobile').val();console.log('mobile:', mobile);if (mobile.trim().length == 0) {alert('手机号不能为空。。。');} else {sendYzm();}});//重新获取验证码$('#recapture_btn').click(function() {sendYzm();});//验证$('#check_btn').click(function() {var mbCode = $('#yzm').val();var timing = $("#remainTime").text();if(timing == '0s') {alert("验证码过期请重新获取");return ;} else if (mbCode == "" && mbCode.length<1){alert("验证码不能为空");return ;} else {//拦截器验证短信验证码var afterSendMobileCode = function(data) {alert(data.msg)if(data.success){//停止计时window.clearInterval(InterValObj);}};$.post('/sys/mobileCode/validateMobileCode.do', {"mobile":mobile, "vCode":mbCode}, afterSendMobileCode);}});});/** 计时器*/
function getCode() {window.clearInterval(InterValObj);//停止计时器curCount = count;InterValObj = window.setInterval(setRemainTime, 1000); //启动计时器,1秒执行一次
}/** 更新剩余时间*/
function setRemainTime() {if (curCount == 1) {window.clearInterval(InterValObj);//停止计时器alert("验证码过期,请重新获取");$('#remainTime').hide();$('#recapture_btn').show();} else {curCount--;$("#remainTime").html(curCount + "s");}
}/*** 发送验证码*/
function sendYzm() {//发送验证码var param = {mobile: mobile}$.post('/sys/mobileCode/sendMobileCode.do', param, function(data) {console.log('data:', data);alert(data.msg);if (data.success) {//启动定时器getCode();}});
}
三、发送短信以及验证
由于短信服务是需要收费,这里就没有对接短信服务提供商,到时真正要使用此功能的时候,再由客服公司购买此服务。相应的验证码生成发送以及验证逻辑如下:
/*** Project Name:qyk_testSpringMVC* File Name:MobileCodeController.java* Package Name:com.qiyongkang.sys.controller* Date:2017年2月9日下午10:28:44* Copyright (c) 2017, Thinkive(http://www.thinkive.com/) All Rights Reserved.*
*/package com.qiyongkang.sys.controller;import java.util.Date;
import java.util.HashMap;
import java.util.Map;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;import org.apache.logging.log4j.LogManager;
import org.apache.logging.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import com.qiyongkang.sys.dto.ExtJsObject;/*** ClassName:MobileCodeController <br/>* Function: 手机验证码. <br/>* Date: 2017年2月9日 下午10:28:44 <br/>* * @author qiyongkang* @version* @since JDK 1.6* @see*/
@Controller
@RequestMapping
public class MobileCodeController {/*** 日志类*/private static Logger logger = LogManager.getLogger(MobileCodeController.class);// 验证码过期时间,秒private float LIMIT_TIME = 30.0f;private static Map<String, Integer> sendNumMap = new HashMap<String, Integer>();private static Map<String, Long> sendTimeMap = new HashMap<String, Long>();public static Map<String, String> mobilevcodeMap = new HashMap<String, String>();private static int sentTime = 3; // 短信限制的次数private static int CODE_LENGTH = 4; // 验证码长度/*** * sendMobileCode: 发送手机验证码. <br/>** @author qiyongkang* @param request* @return* @since JDK 1.6*/@RequestMapping@ResponseBodypublic ExtJsObject sendMobileCode(HttpServletRequest request) {ExtJsObject extJsObject = new ExtJsObject();// sessionHttpSession session = request.getSession();// 获取手机号String mobile = request.getParameter("mobile");logger.info("开始发送手机验证码。。。");// 验证是否重复发送long checkTime = new Date().getTime();if (sendNumMap.size() > 0 && sendNumMap.get(mobile) != null) {float btTime = (checkTime - sendTimeMap.get(mobile)) / 1000;// 检测是否频繁发送if (btTime < LIMIT_TIME) {extJsObject.setSuccess(false);extJsObject.setMsg("获取验证码频繁,请稍后再获取");return extJsObject;}// 当天发送短信条数的限制int number = sendNumMap.get(mobile);if (number == sentTime) {extJsObject.setSuccess(false);extJsObject.setMsg("每个号码每天只能获取" + sentTime + "次注册验证码");return extJsObject;}}// 生成验证码和发送的短信内容String code = getCode();String content = "您的验证码为:" + code + ",温馨提示:如非本人操作,请忽略此短信!";/* 发送短信给此手机号, 这里看对接哪家短信服务提供商 */boolean result = sendMessage(mobile, content);logger.warn("您的验证码为:" + code + ", 温馨提示:如非本人操作,请忽略此短信!");if (result) {// 将认证码存入SESSIONlong createTime = new Date().getTime();// 把验证码和手机号,生成时间绑定session.setAttribute("@vcode", mobile + "|" + code + "|" + createTime);logger.info("@@@是否存入了验证码信息:" + session.getAttribute("@vcode"));logger.info("@@@获取验证码session:" + session.getId());// 记录短信验证码mobilevcodeMap.put(mobile, code);// 记录发送验证码时间sendTimeMap.put(mobile, createTime);// 记录同一号码发送次数Integer num = sendNumMap.get(mobile);if (num == null) {sendNumMap.put(mobile, 1);} else {sendNumMap.put(mobile, ++num);}extJsObject.setSuccess(true);extJsObject.setMsg("发送成功!");return extJsObject;} else {session.removeAttribute("@vcode");extJsObject.setSuccess(false);extJsObject.setMsg("发送失败!");return extJsObject;}}/*** * sendMessage: 发送短信的逻辑. <br/>** @author qiyongkang* @param mobile* @param content* @return* @since JDK 1.6*/private boolean sendMessage(String mobile, String content) {// 发送短信的逻辑return true;}/*** * validateMobileCode: 校验手机验证码. <br/>** @author qiyongkang* @param request* @return* @since JDK 1.6*/@RequestMapping@ResponseBodypublic ExtJsObject validateMobileCode(HttpServletRequest request) {ExtJsObject extJsObject = new ExtJsObject();logger.info("验证短信");// 获取手机号 和验证码String mobile = request.getParameter("mobile");String userCode = request.getParameter("vCode");// 从session获取验证信息HttpSession session = request.getSession();String codeAndTime = (String) session.getAttribute("@vcode");logger.info("@@@校验验证码,获取到的codeAndTime=" + codeAndTime);logger.info("@@@校验验证码,session为" + session.getId());if (StringUtils.isEmpty(codeAndTime)) {extJsObject.setSuccess(false);extJsObject.setMsg("验证码不能为空");return extJsObject;}long checkTime = new Date().getTime();// 如果超时验证不通过float btTime = (checkTime - sendTimeMap.get(mobile)) / (1000);// 如果超时验证不通过if (LIMIT_TIME < btTime) {extJsObject.setSuccess(false);extJsObject.setMsg("验证码过期,请重新获取");return extJsObject;} else {String sessionMobile = codeAndTime.split("\\|")[0];String vcode = mobilevcodeMap.get(mobile);// 判断输入手机号码和获取验证码手机号码是否一致if (!sessionMobile.equals(mobile)) {extJsObject.setSuccess(false);extJsObject.setMsg("手机号码修改后,请重新获取短信验证码");return extJsObject;} else if (vcode.equals(userCode.trim())) {extJsObject.setSuccess(true);extJsObject.setMsg("验证成功!");return extJsObject;} else {extJsObject.setSuccess(false);extJsObject.setMsg("验证码输入错误,请重新输入");return extJsObject;}}}/*** * getCode: 生成验证码. <br/>** @author qiyongkang* @return* @since JDK 1.6*/public String getCode() {String random = "";while (true) {random = (Math.random() * 10000) + "";if (!StringUtils.isEmpty(random) && random.contains(".")) {String[] randoms = random.split("\\.");random = randoms[0];}if (random.length() >= CODE_LENGTH) {break;}}return random;}
}
好了,关于手机验证码就介绍到这儿了。后面,笔者应该再不会写前端相关的博文了,因为现在笔者学的东西太杂了,没有一个学得比较好的。后面笔者打算专门学习java相关的技术,然后再和大家一起分享交流。
H5学习之路-手机短信验证码的实现相关推荐
- 如何发送手机短信验证码
文章目录 阿里云短信业务实战教程 1.阿里云平台的使用 2.创建用户组及用户并添加权限 3.添加短信签名和短信模板并充值费用 4.开发工具进行代码部分(这里使用IDEA) 阿里云短信业务实战教程 手机 ...
- 如何实现下发手机短信验证码
如何实现下发手机短信验证码 我们都遇到过这种情况,某个账号长时间没登录某天想要登录的时候,却发现密码早已忘记,这时候想要找回密码很可能就用到了手机短信验证的功能,在有些网站注册账号的时候往往也需要手机 ...
- python群发手机短信_python实现发送和获取手机短信验证码
首先为大家分享python实现发送手机短信验证码后台方法,供大家参考,具体内容如下 1.生成4位数字验证码 def createPhoneCode(session): chars=['0','1',' ...
- cas5.3.9自定义手机短信验证码登录
cas自定义多种登录方式 cas添加手机短信验证码登录 cas添加手机短信验证码登录 全部基于SpringBoot,以及SpringWebflow开发,请在有此基础再进行学习! 添加Maven依赖 & ...
- 手机短信验证码真的安全吗?
手机的蓬勃发展,衍生出来众多行业,也让原本功能单一的手机号做出极大的改变.如今似乎每个人的手机号都绑定了或多或少的各种账号,手机绑定的东西越来越多,涉及到的重要的东西也越来越多,例如像银行卡绑定手机号 ...
- Java调用WebService接口实现发送手机短信验证码功能,java 手机验证码,WebService接口调用...
近来由于项目需要,需要用到手机短信验证码的功能,其中最主要的是用到了第三方提供的短信平台接口WebService客户端接口,下面我把我在项目中用到的记录一下,以便给大家提供个思路,由于本人的文采有限, ...
- Atitit. 破解 拦截 绕过 网站 手机 短信 验证码 方式 v2 attilax 总结
Atitit. 破解 拦截 绕过 网站 手机 短信 验证码 方式 v2 attilax 总结 1. 验证码的前世今生1 1.1. 第一代验证码 图片验证码1 1.2. 第二代验证码 用户操作 , ...
- Java调用WebService接口实现发送手机短信验证码功能
为什么80%的码农都做不了架构师?>>> 一.样式示例: 二.前台的注册页面的代码:reg.jsp <%@ page language="java" ...
- QPW 手机短信验证码发送日志表(tf_sms_send_log)
文章目录 手机短信验证码发送日志表 需求说明 手机短信验证码发送日志表 CREATE TABLE `tf_sms_send_log` (`send_id` bigint(11) NOT NULL AU ...
最新文章
- Redis之七种武器
- 如何正确对待vb脚本里的session
- 《编译原理》实验报告——TINY语言的词法分析
- 剑指offer之61-66题解
- Spark 系列(一)—— Spark 简介
- libsvm3.21 matlab,Matlab 2015b安装libsvm 3.21
- 微软 CEO 萨提亚·纳德拉:不要重复造轮子,提升技术强密度
- html 自定义属性_五道自测题-你我都应知道的HTML小知识
- 简单的编程用c语言,终于学会了用c语言实现简单的面相对象的编程方法了
- 关于FL Studio ASIO驱动不工作的一个解决方案
- python读取文件名存到list_python-read文件名并构建名称列表(python-read file names and build a namelist)...
- FlashDB移植与应用
- 十五数码难题 A*算法及深度优先算法实现
- R语言客户端RStudio快捷键大全
- 【时空序列预测第十五篇】HPRNN: A HIERARCHICAL SEQUENCE PREDICTION MODEL FOR LONG-TERM WEATHER RADAR ECHO EXTRAPO
- 《趣味知识博文》小W与小L带你聊天式备考CDA Level Ⅰ(四)
- 基于PySpark和ALS算法实现基本的电影推荐流程
- shell获取文件最后一行
- Java工程师工资一般是多少?
- 智库时代杂志智库时代杂志社智库时代编辑部2022年第44期目录
热门文章
- 详解 0xff 的意义及作用
- 国内外Android知名技术博客汇总
- 【云原生之Docker实战】使用Docker部署draw.io思维导图工具
- 《考前模拟》全国计算机等级考试一级练习题。这些题目你都会吗
- shellcode分析技巧
- 基于Ymodem协议的stm32f405rgt6+CubeMx+IAP在线升级
- 规模最小的计算机网络至少有几台,【单选题】按照网络规模大小定义计算机网络,其中规模最小的是
A. 广域网 B. Internet C. 城域网 D. 局域网...
- SQL2005常见问题及解决办法汇总
- 火鸟数据库:Firebird Maestro 21.7 Crack
- ue html快捷键,ue快捷键一览 UltraEdit (UE) 快捷键 ue 复制并粘贴当前行