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

手机快速登录功能，就是通过短信验证码的方式进行登录。这种方式相对于用户名密码登录方式，用户不需要记忆自己的密码，只需要通过输入手机号并获取验证码就可以完成登录，是目前比较流行的登录方式。
在这里插入图片描述
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信息没有，输入正确的手机号和验证码之后，跳转到登录成功页面

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

猜你喜欢