手机快速登录功能,就是通过短信验证码的方式进行登录。这种方式相对于用户名密码 登录方式,用户不需要记忆自己的密码,只需要通过输入手机号并获取验证码就可以完 成登录,是目前比较流行的登录方式。
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 {
@Reference
private MemberService memberService;
@Autowired
private 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("/");//路径 系统下的所有请求都会携带cookie
cookie.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信息没有,输入正确的手机号和验证码之后,跳转到登录成功页面