短信验证码登录功能

项目分析
核心代码
- 1.外部js库调用
- 2.HTML容器构建
- 3.javaScript业务逻辑验证
- 4.后端验证逻辑
总结

短信验证码是通过发送验证码到手机的一种有效的验证码系统，作为比较准确和安全地保证购物的安全性，验证用户的正确性的一种手段，几乎网站登录都会使用该方式。
其特点是依据某些验证码接入商提供手机短信验证码服务，各网站通过接口发送请求到接入商的服务器，服务器发送随机数字或字母到手机中，由接入商的服务器统一做验证码的验证。

项目分析

开通阿里云、腾讯云等短信API端口；
为防止机器批量发送验证码，设置机器识别码，设置5分钟内发送的次数，进而予以限流；
发送信息错误时，进行明确的信息提示；
完成信息验证，执行业务正常逻辑；

核心代码

1.外部js库调用

    <script type="text/javascript" src="static/js/jquery.min.js"></script><!--layui封装库--><script src="static/layui/layui.js" charset="utf-8"></script><link rel="stylesheet" href="static/layui/css/layui.css">

2.HTML容器构建

<div style="margin-top: 10px;padding: 20px;"><form class="layui-form layui-form-pane"><div class="layui-form-item"><label for="L_user_phone" class="layui-form-label">手机号码</label><div class="layui-input-inline"><input type="text" id="L_user_phone" name="user_phone" class="layui-input" lay-verify="user_phone"></div><div class="layui-form-mid layui-word-aux"><span class="x-red">* 手机号码,作为登录账户唯一凭证，如:13500000001。</span></div></div><div class="layui-form-item"><label class="layui-form-label">识别码</label><div class="layui-input-inline"><input type="text" name="captcha" id="captcha" lay-verify="required" autocomplete="off" class="layui-input"></div><div class="layui-form-mid layui-word-aux"> <img src="?m=Login&a=loginDeal&act=getCode" id="getCode" alt="" title="点击刷新验证码" style="cursor: pointer;"><span class="x-red"> * </span> 发送手机短信验证</div></div><div class="layui-form-item"><label class="layui-form-label">短信验证码</label><div class="layui-input-inline"><input type="text" name="smscode" id="smscode" lay-verify="smscode" autocomplete="off" class="layui-input" disabled="disabled"></div><div class="layui-input-inline"><input type="button" class="layui-btn layui-btn-primary" id="btnSendCode" disabled="disabled" value="获取验证码"></div></div><div class="layui-form-item"><button class="layui-btn layui-btn-fluid layui-btn-normal" lay-filter="save" id="L_add" lay-submit=""> 确认登录 </button></div></form>
</div>

3.javaScript业务逻辑验证

验证手机号和短信验证码规则

        //自定义验证规则form.verify({user_phone: [/^1[3|4|5|6|7|8|9]\d{9}$/, '手机必须11位，只能是数字！'], smscode: [/[\S]+/, "验证码为6位数且5分钟内有效"]});

机器识别码验证

获取实际图片识别码

    $("#getCode").click(function () {$(this).attr("src", '?m=Login&a=loginDeal&act=getCode&' + Math.random());});

发送短信验证码倒计时60秒

        var wait = 60;function time(o) {if (wait == 0) {o.removeAttribute("disabled");o.value = "获取验证码";wait = 60;} else {o.setAttribute("disabled", true);o.value = "重新发送(" + wait + ")";wait--;setTimeout(function () {time(o);}, 1000);}}

获取识别码和验证码的业务逻辑

 //单击发送验证码;document.getElementById("btnSendCode").onclick = function () {var captcha = $("#captcha").val();//获取识别码;$.getJSON("?m=Login&a=loginDeal&act=captcha", {mobile: mobile, captcha: captcha}, function (res) {if (res.code == '0') {layer.msg(res.msg, {icon: 1, time: 2000});} else {if (wait != 60) {layer.alert("请" + wait + "秒后再试！", {icon: 3, time: 2000})return;}time(document.getElementById("btnSendCode"));$.getJSON("?m=Sms&a=smsDeal&act=verify", {mobile: mobile,captcha: captcha}, function (res2) {//console.log(res2.send.Code);if (res2.send.Code != "OK") {layer.alert("短信限流，请等待5分钟", {icon: 3, time: 2000})}});}});}

针对不同平台的业务逻辑，对返回的短信参数进行输出，提示用户操作。

 if (res2.send.Code != "OK") {layer.alert("短信限流，请等待5分钟", {icon: 3, time: 2000})}

执行业务正常逻辑

 //监听提交;form.on('submit(save)', function () {$.ajax({type: "post",url: "?m=Login&a=loginDeal&act=smsCode",async: true,data: {user_phone: $('#L_user_phone').val(),smscode: $('#smscode').val()},dataType: "json",success: function (res) {//console.log(res);if (res.code == 0) {layer.msg(res.msg, {icon: 1, time: 2000});} else {layer.msg(res.msg, {icon: 1, time: 2000}, function () {var index = parent.layer.getFrameIndex(window.name);parent.layer.close(index);window.parent.location.href = "?m=Index&a=my";});}},error: function (err) {console.log(err);}});return false;});

4.后端验证逻辑

生成随机机器识别码

    case "getCode";require_once "libs/vcode.class.php";$obj = new vcode();//实例化;$_SESSION['authcode'] = $obj->authcode;die($obj->output());break;

验证机器识别码

  //网站识别码;case "captcha";$user_phone = get_param('mobile');$captcha = isset($_GET["captcha"]) ? trim($_GET["captcha"]) : '';if ($captcha != $_SESSION['authcode']) {$res['code'] = "0";$res['msg'] = "识别码错误";die(json_encode_lockdata($res));} else {$res['code'] = "1";$res['msg'] = "识别码通过";//验证码自动销毁;session_destroy();die(json_encode_lockdata($res));}break;

发送短信流(次数)判断

 case "verify";require "libs/api_demo/SmsDemo.php";/*阿里云短信SDK*/$rmdCode = rand(111111, 999999);//随机验证码$templateCode = 'SMS_165690909';//调用模版$signName = '言医';//签名$mobile = get_param('mobile');//手机号if ($mobile == "") {die("越权访问!");}//增加记录;addlogs($mobile, 'smscode', '', time(), getip());//读取数据库记录;$fromTime = time() - 300;$toTime = time();$sql = "select log_id FROM " . $db->table('log') . " WHERE 1";$sql .= " AND logs = 'smscode' AND log_ip ='" . getip() . "'";$sql .= " AND log_time > " . $fromTime . " AND log_time <" . $toTime . "";$sql .= " ORDER BY log_id DESC";$row = $db->queryall($sql);if (count($row) >= 5) {$res['code'] = 0;$res['msg'] = '5分钟内最多发送5次短信.';$res['total'] = count($row);die(json_encode_lockdata($res));} else {$send = SmsDemo::sendSms($mobile, $signName, $templateCode, $rmdCode, '', '', '', '', 1);$res['code'] = 1;$res['send'] = $send;$_SESSION['code'] = $rmdCode;die(json_encode_lockdata($res));}break;

总结

一个简单的手机短信验证码登录，涉及到的方方面面比较多。在发送短信次数的限制上，本系统作为正常的业务逻辑进行判断和限流，同时对于阿里云和腾讯云也有对应的限制规则，需要在平台上进行设置。

@漏刻有时

手机短信验证码登录功能的开发实录(机器识别码、短信限流、错误提示、发送验证码倒计时60秒)相关推荐

【从零开始分析项目实战】12-阿里云手机验证码登录功能的实现
注:本文章基于黑马程序员相关视频及资料进行编写,代码简单,较容易理解,若有问题或者源码资料获取可以在评论区留言或者联系作者! 文章目录开篇一.短信发送 (1)短信服务介绍 (2)阿里云短信服务 ( ...
Android studio 实现打电话发短信浏览网页功能 android开发小实验
Android studio 实现打电话发短信浏览网页功能 android开发小实验目标: android studio 实现打电话发短信浏览网站的功能先在布局里面定义几个按钮分别为打电话 ...
SpringBoot + SpringSecurity 短信验证码登录功能实现
实现原理在之前的文章中,我们介绍了普通的帐号密码登录的方式:SpringBoot + Spring Security 基本使用及个性化登录配置(http://www.deiniu.com/artic ...
使用腾讯云完成短信验证码登录功能
首先导入依赖在pom.xml中: <dependency><groupId>com.tencentcloudapi</groupI ...
微信小程序调用安卓手机系统指纹实现登录功能
index.js 中添加以下代码: Page({data: {hasLogin: false},onLoad: function () {const _this = thiswx.checkIsSup ...
基于java注册登录MD5算法加盐加密颁发 Token身份令牌使用各种邮箱发送验证码详解雪花算法
目的作用 == 在项目中,为了防止别人窥视我们的密码通常我们会采取一些加密方式.这里简单介绍一下MD5 加盐加密方法,MD5叫做信息-摘要算法,严格来说不是加密方式,而是信息摘要. 对于可以接触到数据 ...
微信小程序 - 倒计时60秒(获取验证码)
因为写这个功能的时候我也是个新手,所以并没有抽取class和js~ 或许也正是因此,新手看起来会更简单一些 ~ Make a little progress every day ~ 实现效果功能版 ...
uniApp实现短信验证码登录功能
本人近期uniApp项目,需要做一个短信输入框功能,开始我是写的6个input,但是发现删除的时候uniApp没办法监听到键盘删除事件,于是我使用了另一种思路实现:不使用input改为view,然后手 ...
java实现手机验证码登录功能，写给正在求职的Java开发
前言 Spring Security是一个功能强大且高度可定制的身份验证和访问控制框架.提供了完善的认证机制和方法级的授权功能.是一款非常优秀的权限管理框架.它的核心是一组过滤器链,不同的功能经由不同 ...

手机短信验证码登录功能的开发实录(机器识别码、短信限流、错误提示、发送验证码倒计时60秒)