手机验证码登录 -- 手把手教你做ssm+springboot入门后端项目黑马程序员瑞吉外卖（七）

怼烎@ 2023-10-13 19:28 12阅读 0赞

### 文章目录 ###

*  前言
 *  一、短信发送
 *   *  1. 短信服务介绍
     *  2. 阿里云短信服务
     *  3. 代码开发
 *  二、手机验证码登录
 *   *  1. 需求分析
     *  2. 数据模型
     *  3. 代码开发
     *  4. 功能测试
 *  总结

--------------------

# 前言 #

为了巩固所学的知识，作者尝试着开始发布一些学习笔记类的博客，方便日后回顾。当然，如果能帮到一些萌新进行新技术的学习那也是极好的。作者菜菜一枚，文章中如果有记录错误，欢迎读者朋友们批评指正。  
（博客的参考源码可以在我主页的资源里找到，如果在学习的过程中有什么疑问欢迎大家在评论区向我提出）

# 一、短信发送 #

## 1. 短信服务介绍 ##

目前市面上有很多第三方提供的短信服务，这些第三方短信服务会和各个运营商(移动、联通、电信》对接，我们只需要注册成为会员并且按照提供的开发文档进行调用就可以发送短信。需要说明的是，这些短信服务一般都是收费服务，常用短信服务如下：

> 1.  阿里云
> 2.  华为云
> 3.  腾讯云
> 4.  京东
> 5.  梦网
> 6.  乐信

## 2. 阿里云短信服务 ##

**1. 简介**  
阿里云短信服务(Short Message Service) 是广大企业客户快速触达手机用户所优选使用的通信能力。调用API或用群发助手，即可发送验证码、通知类和营销类短信，国内验证短信秒级触达，到达率最高可达99%;国际/港澳台短信覆盖200多个国家和地区，安全稳定，广受出海企业选用,应用场景如下

> 1.  验证码
> 2.  短信通知
> 3.  推广短信

![在这里插入图片描述][9ebab5b691874965b414acd7cc1f6ca3.png]

**2. 注册并登录**

![在这里插入图片描述][df71bbc127254e379896fc4bd5d25ce4.png]

**3. 开通短信服务**

![在这里插入图片描述][36cae99931aa400aacffb800c9f69195.png]  
**4. 申请短信签名**

![在这里插入图片描述][7de5a3a953a048e4b819fe061e47f05c.png]

**5. 申请短信模板**

![在这里插入图片描述][19200a8ca77546138a5dede5bdf3ea88.png]

> 短信模板包含短信发送内容、场景、变量信息，示例如下

![在这里插入图片描述][8a0f8f80776842acb9b232967d5453e9.png]

**6. 设置AccessKey**

> 1.  光标移动到用户头像上，在弹出的窗口中点击\[AccessKey 管理\] ，选开始使用子用户AccessKey（风险较小）
> 2.  云账号 AccessKey 是您访问阿里云 API 的密钥，具有账户的完全权限，请务必妥善保管。不要以任何方式公开 AccessKey 到外部渠道（例如 Github），避免被他人利用造成 安全威胁。强烈建议您遵循 阿里云安全最佳实践，使用 RAM 用户（而不是云账号）的 AccessKey 进行 API 调用。

**7. 创建用户**

![在这里插入图片描述][abfd6a79139849a383373d2ed562a846.png]

**8. 授予新建用户短信服务的权限**

![在这里插入图片描述][51a23162ad2b4e5db84282c36708e5f8.png]

**9. 回收AccessKey**

![在这里插入图片描述][f7f181dd6451403d98538a2f99d14b86.png]

## 3. 代码开发 ##

1.  使用阿里云短信服务发送短信，可以参照官方提供的文档即可，具体开发步骤如下

> 1.  导入maven坐标

<dependency>
                <groupId>com.aliyun</groupId>
                <artifactId>aliyun-java-sdk-core</artifactId>
                <version>4.5.16</version>
            </dependency>
            <dependency>
                <groupId>com.aliyun</groupId>
                <artifactId>aliyun-java-sdk-dysmsapi</artifactId>
                <version>2.1.0</version>
            </dependency>

> 1.  调用API（代码示例）

![在这里插入图片描述][8bb0f17df9934c34b52add1f7ae9671e.png]

`更多详情请访问【https://help.aliyun.com/document_detail/112148.html?spm=a2c4g.215758.0.0.47175d7azl2Ds9】`

# 二、手机验证码登录 #

## 1. 需求分析 ##

**1. 为了方便用户登录，移动端通常都会提供通过手机验证码登录的功能**  
**2. 手机验证码登录的优点:**

> 1.  方便快捷，无需注册，直接登录
> 2.  使用短信验证码作为登录凭证，无需记忆密码
> 3.  安全  
>     **3. 登录流程**  
>     输入手机号>获取验证码>输入验证码>点击登录>登录成功

`注意:通过手机验证码登录，手机号是区分不同用户的标识`

## 2. 数据模型 ##

通过手机验证码登录时，涉及的表为user表，即用户表。结构如下

![在这里插入图片描述][793db4f0d0114c1aa959f50fdc7c8436.png]

## 3. 代码开发 ##

**1. 在开发代码之前，需要梳理一下登录时前端页面和服务端的交互过程**

> 1.  在登录页面(front/page/login.html)输入手机号，点击\[获取验证码\] 按钮，页面发送ajax请求，在服务端调用短信服务API给指定手机号发送验证码短信
> 2.  在登录页面输入验证码，点击\[登录\]按钮，发送aiax请求，在服务端处理登录请求
> 3.  开发手机验证码登录功能，其实就是在服务端编写代码去处理前端页面发送的这2次请求即可

**2. 在开发业务功能前，先将需要用到的类和接口基本结构创建好**

*  实体类 User

/**
     * 用户信息
     */
    @Data
    public class User implements Serializable {
        
    
        private static final long serialVersionUID = 1L;
    
        private Long id;
    
    
        //姓名
        private String name;
    
    
        //手机号
        private String phone;
    
    
        //性别 0 女 1 男
        private String sex;
    
    
        //身份证号
        private String idNumber;
    
    
        //头像
        private String avatar;
    
    
        //状态 0:禁用，1:正常
        private Integer status;
    }

*  Mapper接口 UserMapper

@Mapper
    public interface UserMapper extends BaseMapper<User>{
        
    }

*  业务层接口 UserService

public interface UserService extends IService<User> {
        
    }

*  业务层实现类 UserServicelmpl

@Service
    public class UserServiceImpl extends ServiceImpl<UserMapper,User> implements UserService{
        
    }

*  控制层 UserController

@RestController
    @RequestMapping("/user")
    @Slf4j
    public class UserController {
        
    
        @Autowired
        private UserService userService;
    
    }

*  工具类SMSUtils（短信发送工具类）

/**
     * 短信发送工具类
     */
    public class SMSUtils {
        
    
    	/**
    	 * 发送短信
    	 * @param signName 签名
    	 * @param templateCode 模板
    	 * @param phoneNumbers 手机号
    	 * @param param 参数
    	 */
    	public static void sendMessage(String signName, String templateCode,String phoneNumbers,String param){
        
    		DefaultProfile profile = DefaultProfile.getProfile("cn-hangzhou", "", "");
    		IAcsClient client = new DefaultAcsClient(profile);
    
    		SendSmsRequest request = new SendSmsRequest();
    		request.setSysRegionId("cn-hangzhou");
    		request.setPhoneNumbers(phoneNumbers);
    		request.setSignName(signName);
    		request.setTemplateCode(templateCode);
    		request.setTemplateParam("{\"code\":\""+param+"\"}");
    		try {
        
    			SendSmsResponse response = client.getAcsResponse(request);
    			System.out.println("短信发送成功");
    		}catch (ClientException e) {
        
    			e.printStackTrace();
    		}
    	}
    
    }

*  工具类ValidateCodeUtils （随机生成验证码工具类）

/**
     * 随机生成验证码工具类
     */
    public class ValidateCodeUtils {
        
        /**
         * 随机生成验证码
         * @param length 长度为4位或者6位
         * @return
         */
        public static Integer generateValidateCode(int length){
        
            Integer code =null;
            if(length == 4){
        
                code = new Random().nextInt(9999);//生成随机数，最大为9999
                if(code < 1000){
        
                    code = code + 1000;//保证随机数为4位数字
                }
            }else if(length == 6){
        
                code = new Random().nextInt(999999);//生成随机数，最大为999999
                if(code < 100000){
        
                    code = code + 100000;//保证随机数为6位数字
                }
            }else{
        
                throw new RuntimeException("只能生成4位或6位数字验证码");
            }
            return code;
        }
    
        /**
         * 随机生成指定长度字符串验证码
         * @param length 长度
         * @return
         */
        public static String generateValidateCode4String(int length){
        
            Random rdm = new Random();
            String hash1 = Integer.toHexString(rdm.nextInt());
            String capstr = hash1.substring(0, length);
            return capstr;
        }
    }

**3. 代码开发-修改LoginCheckFilter**

前面我们已经完成了LoginCheckFilter过滤器的开发，此过滤器用于检查用户的登录状态。我们在进行手机验证码登录时，发送的请求需要在此过滤器处理时直接放行

![在这里插入图片描述][9e8f704fd235436587414e9430a316c9.png]

![在这里插入图片描述][f728fcda23c34def8ff33da655c3769e.png]

**4. 在LoginCheckFilter过滤器中扩展逻辑，判断移动端用户登录状态（4-2）**

@Override
        public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        
            HttpServletRequest request = (HttpServletRequest) servletRequest;
            HttpServletResponse response = (HttpServletResponse) servletResponse;
    
            //1、获取本次请求的URI
            String requestURI = request.getRequestURI();// /backend/index.html
    
            log.info("拦截到请求：{}",requestURI);
    
            //定义不需要处理的请求路径
            String[] urls = new String[]{
        
                    "/employee/login",
                    "/employee/logout",
                    "/backend/**",
                    "/front/**",
                    "/common/**",
                    "/user/sendMsg",
                    "/user/login"
            };
    
    
            //2、判断本次请求是否需要处理
            boolean check = check(urls, requestURI);
    
            //3、如果不需要处理，则直接放行
            if(check){
        
                log.info("本次请求{}不需要处理",requestURI);
                filterChain.doFilter(request,response);
                return;
            }
    
            //4-1、判断登录状态，如果已登录，则直接放行
            if(request.getSession().getAttribute("employee") != null){
        
                log.info("用户已登录，用户id为：{}",request.getSession().getAttribute("employee"));
    
                Long empId = (Long) request.getSession().getAttribute("employee");
                BaseContext.setCurrentId(empId);
    
                filterChain.doFilter(request,response);
                return;
            }
    
    
            //4-2、判断登录状态，如果已登录，则直接放行
            if(request.getSession().getAttribute("user") != null){
        
                log.info("用户已登录，用户id为：{}",request.getSession().getAttribute("user"));
    
                Long userId = (Long) request.getSession().getAttribute("user");
                BaseContext.setCurrentId(userId);
    
                filterChain.doFilter(request,response);
                return;
            }
    
    
            log.info("用户未登录");
            //5、如果未登录则返回未登录结果，通过输出流方式向客户端页面响应数据
            response.getWriter().write(JSON.toJSONString(R.error("NOTLOGIN")));
            return;
    
        }

**5. 前端相关页面分析**

![在这里插入图片描述][5a0ded8a14e24dc8be1c75da4a60267c.png]

**6. 编写对应的controller方法**

@RestController
    @RequestMapping("/user")
    @Slf4j
    public class UserController {
        
    
        @Autowired
        private UserService userService;
    
        /**
         * 发送手机短信验证码
         * @param user
         * @return
         */
        @PostMapping("/sendMsg")
        public R<String> sendMsg(@RequestBody User user, HttpSession session){
        
            //获取手机号
            String phone = user.getPhone();
    
            if(StringUtils.isNotEmpty(phone)){
        
                //生成随机的4位验证码
                String code = ValidateCodeUtils.generateValidateCode(4).toString();
                log.info("code={}",code);
    
                //调用阿里云提供的短信服务API完成发送短信
                //SMSUtils.sendMessage("瑞吉外卖","",phone,code);
    
                //需要将生成的验证码保存到Session
                session.setAttribute(phone,code);
    
                return R.success("手机验证码短信发送成功");
            }
    
            return R.error("短信发送失败");
        }
    
        /**
         * 移动端用户登录
         * @param map
         * @param session
         * @return
         */
        @PostMapping("/login")
        public R<User> login(@RequestBody Map map, HttpSession session){
        
            log.info(map.toString());
    
            //获取手机号
            String phone = map.get("phone").toString();
    
            //获取验证码
            String code = map.get("code").toString();
    
            //从Session中获取保存的验证码
            Object codeInSession = session.getAttribute(phone);
    
            //进行验证码的比对（页面提交的验证码和Session中保存的验证码比对）
            if(codeInSession != null && codeInSession.equals(code)){
        
                //如果能够比对成功，说明登录成功
    
                LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper<>();
                queryWrapper.eq(User::getPhone,phone);
    
                User user = userService.getOne(queryWrapper);
                if(user == null){
        
                    //判断当前手机号对应的用户是否为新用户，如果是新用户就自动完成注册
                    user = new User();
                    user.setPhone(phone);
                    user.setStatus(1);
                    userService.save(user);
                }
                session.setAttribute("user",user.getId());
                return R.success(user);
            }
            return R.error("登录失败");
        }
    
    }

## 4. 功能测试 ##

![在这里插入图片描述][ed80a8e9bd864ebcba59c83745acb890.png]

# 总结 #

欢迎各位留言交流以及批评指正，如果文章对您有帮助或者觉得作者写的还不错可以点一下关注，点赞，收藏支持一下。  
（博客的参考源码可以在我主页的资源里找到，如果在学习的过程中有什么疑问欢迎大家在评论区向我提出）

[9ebab5b691874965b414acd7cc1f6ca3.png]: https://img-blog.csdnimg.cn/9ebab5b691874965b414acd7cc1f6ca3.png
[df71bbc127254e379896fc4bd5d25ce4.png]: https://img-blog.csdnimg.cn/df71bbc127254e379896fc4bd5d25ce4.png
[36cae99931aa400aacffb800c9f69195.png]: https://img-blog.csdnimg.cn/36cae99931aa400aacffb800c9f69195.png
[7de5a3a953a048e4b819fe061e47f05c.png]: https://img-blog.csdnimg.cn/7de5a3a953a048e4b819fe061e47f05c.png
[19200a8ca77546138a5dede5bdf3ea88.png]: https://img-blog.csdnimg.cn/19200a8ca77546138a5dede5bdf3ea88.png
[8a0f8f80776842acb9b232967d5453e9.png]: https://img-blog.csdnimg.cn/8a0f8f80776842acb9b232967d5453e9.png
[abfd6a79139849a383373d2ed562a846.png]: https://img-blog.csdnimg.cn/abfd6a79139849a383373d2ed562a846.png
[51a23162ad2b4e5db84282c36708e5f8.png]: https://img-blog.csdnimg.cn/51a23162ad2b4e5db84282c36708e5f8.png
[f7f181dd6451403d98538a2f99d14b86.png]: https://img-blog.csdnimg.cn/f7f181dd6451403d98538a2f99d14b86.png
[8bb0f17df9934c34b52add1f7ae9671e.png]: https://img-blog.csdnimg.cn/8bb0f17df9934c34b52add1f7ae9671e.png
[793db4f0d0114c1aa959f50fdc7c8436.png]: https://img-blog.csdnimg.cn/793db4f0d0114c1aa959f50fdc7c8436.png
[9e8f704fd235436587414e9430a316c9.png]: https://img-blog.csdnimg.cn/9e8f704fd235436587414e9430a316c9.png
[f728fcda23c34def8ff33da655c3769e.png]: https://img-blog.csdnimg.cn/f728fcda23c34def8ff33da655c3769e.png
[5a0ded8a14e24dc8be1c75da4a60267c.png]: https://img-blog.csdnimg.cn/5a0ded8a14e24dc8be1c75da4a60267c.png
[ed80a8e9bd864ebcba59c83745acb890.png]: https://img-blog.csdnimg.cn/ed80a8e9bd864ebcba59c83745acb890.png