XX健康:移动端开发&手机验证码快速登陆

最新推荐文章于 2022-09-12 22:07:30 发布

嘿嘿嘿1212

最新推荐文章于 2022-09-12 22:07:30 发布

阅读量1.1k

点赞数

分类专栏： # XX健康项目文章标签：验证码快速登陆 Spring 移动端手机

本文链接：https://blog.csdn.net/at10090/article/details/102659112

版权

XX健康项目专栏收录该内容

10 篇文章 6 订阅

订阅专栏

1. 需求分析

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

2. 手机快速登录

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>

<script>
 var vue = new Vue({
     el:'#app',
     data:{
         loginInfo:{}//登录信息
     },
     methods:{
         //发送验证码
         sendValidateCode(){
             var telephone = this.loginInfo.telephone;
             if (!checkTelephone(telephone)) {
                 this.$message.error('请输入正确的手机号');
                 return 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('验证码发送失败，请检查手机号输入是否正确');
                 }
             });
         }
     }
});
</script>

注意:使用计时任务进行30秒倒计时更新

在ValidateCodeController中提供send4Login方法，调用短信服务发送验证码并将验证码保存到redis

/**
 * 用户进行手机快速登陆,发送验证码
 * @param telephone
 * @return
 */
@RequestMapping("/send4Login")
public Result send4Login(String telephone) {
    if (telephone == null) {
        return new Result(false, MessageConstant.SEND_VALIDATECODE_FAIL);
    }
    try {
        //获取随机验证码
        Integer code = ValidateCodeUtils.generateValidateCode(6);
        //发送验证码
        SMSUtils.sendShortMessage(SMSUtils.VALIDATE_CODE, telephone, code.toString());
        //将验证码存入Redis
        jedisPool.getResource().setex(telephone + RedisMessageConstant.SENDTYPE_LOGIN, 500, code.toString());
        //发送成功通知
        return new Result(true, MessageConstant.SEND_VALIDATECODE_SUCCESS);
    } catch (ClientException e) {
        e.printStackTrace();
        return new Result(false, MessageConstant.SEND_VALIDATECODE_FAIL);
    }
}

注意:4在java为for的意思,2为to的意思

2.1.2 提交登录请求

为登录按钮绑定事件

<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){
           //登录成功,跳转到index.html
           window.location.href="index.html";
       }else{
           //失败，提示失败信息
           this.$message.error(response.data.message);
       }
   });
}

2.2 后台代码

2.2.1 Controller

在health_mobile工程中创建MemberController并提供login方法进行登录检查，处理逻辑为：

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

package com.itheiheihei.controller;

import com.alibaba.dubbo.config.annotation.Reference;
import com.alibaba.fastjson.JSON;
import com.itheiheihei.constant.MessageConstant;
import com.itheiheihei.constant.RedisMessageConstant;
import com.itheiheihei.entity.Result;
import com.itheiheihei.pojo.Member;
import com.itheiheihei.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import redis.clients.jedis.JedisPool;

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;
import java.util.Date;
import java.util.Map;

/**
 * 处理会员相关操作
 *
 * @author 嘿嘿嘿1212
 * @version 1.0
 * @date 2019/10/22 16:29
 */
@RestController
@RequestMapping("/member")
public class MemberController {

    @Autowired
    private JedisPool jedisPool;

    @Reference
    private MemberService memberService;

    @RequestMapping("/login")
    public Result check(HttpServletResponse response, @RequestBody Map map) {
        String validateCode = (String) map.get("validateCode");
        String telephone = (String) map.get("telephone");
        //判空
        if (validateCode == null || telephone == null) {
            return new Result(false, MessageConstant.TELEPHONE_VALIDATECODE_NOTNULL);
        }
        //获取Redis中的验证码
        String code = jedisPool.getResource().get(telephone + RedisMessageConstant.SENDTYPE_LOGIN);
        if (validateCode.equals(code)) {
            //验证码成功
            Member member = memberService.findByTelephone(telephone);
            if (member == null) {
                //自动注册会员
                member = new Member();
                member.setRegTime(new Date());
                member.setPhoneNumber(telephone);
                memberService.add(member);
            }
            //创建Cookie,存入手机号
            Cookie cookie = new Cookie("login_member_telephone", telephone);
            cookie.setPath("/");
            cookie.setMaxAge(60 * 60 * 24 * 30);
            response.addCookie(cookie);
            //将会员存入Redis中
            String jsonMember = JSON.toJSONString(member);
            jedisPool.getResource().setex(telephone, 60 * 30, jsonMember);
            return new Result(true, MessageConstant.LOGIN_SUCCESS);
        } else {
            //验证码错误
            return new Result(false, MessageConstant.VALIDATECODE_ERROR);
        }

    }
}

2.2.2 服务接口

在MemberService服务接口中提供findByTelephone和add方法

public void add(Member member);

public Member findByTelephone(String telephone);

2.2.3 服务实现类

在MemberServiceImpl服务实现类中实现findByTelephone和add方法

package com.itheiheihei.service.impl;

import com.alibaba.dubbo.config.annotation.Reference;
import com.alibaba.dubbo.config.annotation.Service;
import com.itheiheihei.dao.MemberDao;
import com.itheiheihei.pojo.Member;
import com.itheiheihei.service.MemberService;
import com.itheiheihei.utils.MD5Utils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;

/**
 * 会员服务
 *
 * @author 嘿嘿嘿1212
 * @version 1.0
 * @date 2019/10/22 18:18
 */
@Service(interfaceClass = MemberService.class)
@Transactional
public class MemberServiceImpl implements MemberService {

    @Autowired
    private MemberDao memberDao;

    @Override
    public Member findByTelephone(String telephone) {
        return memberDao.findByTelephone(telephone);
    }

    @Override
    public void add(Member member) {
        String password = member.getPassword();
        if (password != null) {
            //使用MD5将密码的明文进行加密
            password = MD5Utils.md5(password);
            member.setPassword(password);
        }
        memberDao.add(member);
    }
}

2.2.4 Dao接口

在MemberDao接口中声明findByTelephone和add方法

public Member findByTelephone(String telephone); 
public void add(Member member);

2.2.5 Mapper映射文件

在MemberDao.xml映射文件中定义SQL语句

<!--新增会员-->
<insert id="add" parameterType="com.itheiheihei.pojo.Member">
     <selectKey resultType="java.lang.Integer" order="AFTER" keyProperty="id">
         SELECT LAST_INSERT_ID()
     </selectKey>
     insert into t_member(fileNumber,name,sex,idCard,phoneNumber,regTime,password,email,birthday,remark)
     values
     (#{fileNumber},#{name},#{sex},#{idCard},#{phoneNumber},#{regTime},#{password},#{email},#{birthday},#{remark})
 </insert>
    
<!--根据手机号查询会员-->
<select id="findByTelephone" parameterType="string" resultType="com.itheiheihei.pojo.Member">
    select *
    from t_member
    where phoneNumber = #{phoneNumber}
</select>

3. 权限控制

3.1 认证和授权概念

前面我们已经完成了XX健康后台管理系统的部分功能，例如检查项管理、检查组管理、套餐管理、预约设置等。接下来我们需要思考2个问题：
问题1：在生产环境下我们如果不登录后台系统就可以完成这些功能操作吗？
- 答案显然是否定的，要操作这些功能必须首先登录到系统才可以。
问题2：是不是所有用户，只要登录成功就都可以操作所有功能呢？
- 答案是否定的，并不是所有的用户都可以操作这些功能。不同的用户可能拥有不同的权限，这就需要进行授权了。

认证：系统提供的用于识别用户身份的功能，通常提供用户名和密码进行登录其实就是在进行认证，认证的目的是让系统知道你是谁。

授权：用户认证成功后，需要为用户授权，其实就是指定当前用户可以操作哪些功能。

本文章就是要对后台系统进行权限控制，其本质就是对用户进行认证和授权。

3.2 权限模块数据模型

前面已经分析了认证和授权的概念，要实现最终的权限控制，需要有一套表结构支撑：

用户表t_user、权限表t_permission、角色表t_role、菜单表t_menu、用户角色关系表t_user_role、角色权限关系表t_role_permission、角色菜单关系表t_role_menu。

表之间关系如下图：
在这里插入图片描述

通过上图可以看到，权限模块共涉及到7张表。在这7张表中，角色表起到了至关重要的作用，其处于核心位置，因为用户、权限、菜单都和角色是多对多关系。

接下来我们可以分析一下在认证和授权过程中分别会使用到哪些表：

认证过程：只需要用户表就可以了，在用户登录时可以查询用户表t_user进行校验，判断用户输入的用户名和密码是否正确。

授权过程：用户必须完成认证之后才可以进行授权，首先可以根据用户查询其角色，再根据角色查询对应的菜单，这样就确定了用户能够看到哪些菜单。然后再根据用户的角色查询对应的权限，这样就确定了用户拥有哪些权限。所以授权过程会用到上面7张表。

本案例将会使用 Spring Security权限控制框架进行权限控制

嘿嘿嘿1212

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
XX健康:移动端开发&手机验证码快速登陆

1. 需求分析手机快速登录功能，就是通过短信验证码的方式进行登录。这种方式相对于用户名密码登录方式，用户不需要记忆自己的密码，只需要通过输入手机号并获取验证码就可以完成登录，是目前比较流行的登录方式。2. 手机快速登录2.1 页面调整登录页面为/pages/login.html2.1.1 发送验证码为获取验证码按钮绑定事件，并在事件对应的处理函数中校验手机号，如果手机号输入正...
复制链接

扫一扫