移动端开发---手机使用验证码快速登录

手机快速登录功能，就是通过短信验证码的方式进行登录。这种方式相对于用户名密码登录方式，用户不需要记忆自己的密码，只需要通过输入手机号并获取验证码就可以完成登录，是目前比较流行的登录方式。

1：手机快速登录

2.1 页面调整
登录页面为/pages/login.html

2.1.1 发送验证码
为获取验证码按钮绑定事件，并在事件对应的处理函数中校验手机号，如果手机号输入正确则显示30秒倒计时效果并发送ajax请求，发送短信验证码

登录页面：

<div class="input-row"><label>手机号</label><div class="loginInput"><input v-model="loginInfo.telephone" id='account' type="text" placeholder="请输入手机号"><input id="validateCodeButton" @click="sendValidateCode()" type="button" style="font-size: 12px" value="获取验证码"></div></div>
<div class="input-row"><label>验证码</label><div class="loginInput"><input v-model="loginInfo.validateCode" style="width:80%" id='password' type="text" placeholder="请输入验证码"></div>
</div>

发送验证码方法：

//发送验证码sendValidateCode(){var telephone = this.loginInfo.telephone;if (!checkTelephone(telephone)) {this.$message.error('请输入正确的手机号');eturn false;}validateCodeButton = $("#validateCodeButton")[0];clock = window.setInterval(doLoop, 1000); //一秒执行一次axios.post("/validateCode/send4Login.do?telephone=" + telephone).then((response) => {if(!response.data.flag){//验证码发送失败this.$message.error('验证码发送失败，请检查手机号输入是否正确');}});},

对应后台controller方法：

//用户手机快速登录发送验证码
@RequestMapping("/send4Login")
public Result send4Login(String telephone){//使用工具类随机生成6位数字验证码Integer validateCode = ValidateCodeUtils.generateValidateCode(6);//使用阿里云短信服务给用户发送验证码try{SMSUtils.sendShortMessage(SMSUtils.VALIDATE_CODE,telephone,validateCode.toString());}catch (Exception e){e.printStackTrace();return new Result(false, MessageConstant.SEND_VALIDATECODE_FAIL);}//将验证码保存到redis（5分钟）//setex 设置key的有效时间jedisPool.getResource().setex(telephone + RedisMessageConstant.SENDTYPE_LOGIN,300,validateCode.toString());return new Result(true,MessageConstant.SEND_VALIDATECODE_SUCCESS);
}

提交登录请求

<div class="btn yes-btn"><a @click="login()" href="#">登录</a></div>

用户输入完手机号和验证码之后，点击登录对应方法：

 //登录login(){var telephone = this.loginInfo.telephone;if (!checkTelephone(telephone)) {this.$message.error('请输入正确的手机号');return false;
}axios.post("/member/login.do",this.loginInfo).then((response) => {if(response.data.flag){//登录成功,跳转到会员页面window.location.href="member.html";}else{//失败，提示失败信息this.$message.error(response.data.message);}});}

提供login方法进行登录检查，处理逻辑为：

1、校验用户输入的短信验证码是否正确，如果验证码错误则登录失败
2、如果验证码正确，则判断当前用户是否为会员（去会员表查询数据），如果不是会员则自动完成会员注册（将用户信息保存到会员表当中）
3、向客户端写入Cookie，value内容为用户手机号
4、将会员信息保存到Redis，使用手机号作为key，保存时长为30分钟

注意：
为什么我们要将cookie当中保存的用户手机号写回客户端
我们的http是一个无状态的请求（我们发送第一次请求到服务器，响应数据到客户端之后，第二次再发送一个请求到服务器，服务器是区分不出来两次请求是否是同一个客户端发出的），我们可以通过cookie和session技术来使服务器端保持有状态，服务器端就可以记住客户端的状态。客户端每次请求服务器端都会携带cookie信息到服务器端，现在我们使用cookie携带用户的手机号码请求到服务器端。

我们使用redis替代之前的session，这样的好处就是，后期如果服务集群部署2个或是更多，这个时候session共享就是一个问题。

/*** 会员登录*/
@RestController
@RequestMapping("/member")
public class MemberController {@Referenceprivate MemberService memberService;@Autowiredprivate JedisPool jedisPool;//使用手机号和验证码登录@RequestMapping("/login")public Result login(HttpServletResponse response, @RequestBody Map map){//获取页面提交的手机号String telephone = (String) map.get("telephone");//获取页面提交的验证码String validateCode = (String) map.get("validateCode");//从Redis中获取缓存的验证码String codeInRedis = jedisPool.getResource().get(telephone+ RedisMessageConstant.SENDTYPE_LOGIN);//将redis当中取出的验证码和用户输入的验证码进行对比if(codeInRedis == null || !codeInRedis.equals(validateCode)){//验证码输入错误return new Result(false, MessageConstant.VALIDATECODE_ERROR);}else{//验证码输入正确//判断当前用户是否为会员Member member = memberService.findByTelephone(telephone);if(member == null){//当前用户不是会员，自动完成注册member = new Member();member.setPhoneNumber(telephone);member.setRegTime(new Date());memberService.add(member);}//登录成功//请求完本方法，服务器向客户端浏览器写入Cookie，跟踪用户Cookie cookie = new Cookie("login_member_telephone",telephone);cookie.setPath("/");//路径  系统下的所有请求都会携带cookiecookie.setMaxAge(60 * 60 * 24 * 30);//有效期30天response.addCookie(cookie);//保存会员信息到Redis中String json = JSON.toJSON(member).toString();jedisPool.getResource().setex(telephone, 60*30, json);return new Result(true, MessageConstant.LOGIN_SUCCESS);}}}

测试：

没有登录之前，客户端浏览器cookie信息没有，输入正确的手机号和验证码之后，跳转到登录成功页面

移动端开发---手机使用验证码快速登录相关推荐

传智健康_第9章移动端开发-手机快速登录、权限控制
传智健康_第9章移动端开发-手机快速登录.权限控制文章目录传智健康_第9章移动端开发-手机快速登录.权限控制 1. 需求分析 2. 手机快速登录 2.1 页面调整 2.1.1 发送验证码 2. ...
XX健康:移动端开发手机验证码快速登陆
1. 需求分析手机快速登录功能,就是通过短信验证码的方式进行登录.这种方式相对于用户名密码登录方式,用户不需要记忆自己的密码,只需要通过输入手机号并获取验证码就可以完成登录,是目前比较流行的登录方式 ...
XX健康:移动端开发-体检预约验证码30秒倒计时短信验证码获取与验证DatePicker日历展示提交预约复杂流程阿里短信工具类
1. 体检预约流程用户可以通过如下操作流程进行体检预约: 在移动端首页点击体检预约,页面跳转到套餐列表页面在套餐列表页面点击要预约的套餐,页面跳转到套餐详情页面在套餐详情页面点击立即预约,页面跳 ...
html 手机登陆验证码,手机号登录（验证码）.html
手机号登录(验证码) @font-face { font-family: 'iconfont'; src: url('iconfont.ttf') format('truetype') } $ax ...
pc端向手机发送验证码
var timer; var time=180; var timer_is_on=0; //点击发送验证码,开始计数 function timeCountDown(){ if(time==0){ wi ...
【我的物联网成长记1】如何进行端到端开发？
[摘要] 自从华为物联网平台推出以来,很多开发者都在后台咨询小编设备如何上云等问题,小编我忍不住了,花了两天两夜,整理出"如何进行端到端开发",帮助您快速了解设备上云全流程. 全文 ...
移动端开发_手机快速登录
文章目录移动端开发_手机快速登录第一章. 需求分析第二章. 手机快速登录 [路径] 2.1. 前台代码 2.1.1. 发送验证码 2.1.2. 提交登录请求 2.2. 后台代码 2.2.1. C ...
验证码登录开发----手机验证码登录
手机验证码登录需求分析为了方便用户登录,移动端通常都会提供通过手机验证码登录的功能手机验证码登录的优点: 方便快捷.无需注册,直接登录使用短信验证码作为登录凭证,无需记忆密码安全登录流程: ...
前端-uniapp开发app登录逻辑（人机验证以及手机获取验证码）
1.逻辑梳理跳转登录页面后,显示需要手机登录.填写手机号->点击获取验证码->弹出人机验证页面->拼图成功->请求后端接口给手机发验证码->获取验证码文字变成60s计时 ...

移动端开发---手机使用验证码快速登录

移动端开发---手机使用验证码快速登录相关推荐

最新文章

热门文章