【瑞吉外卖 | day06】手机验证码登录

瑞吉外卖 — day6

• 移动端相关业务功能 —— 手机验证码登录

1. 短信发送

1.1 短信服务介绍

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

• 常用短信服务:
  阿里云、华为云、腾讯云、京东、梦网、乐信

1.2 阿里云短信服务

1.2.1 介绍

• 阿里云短信服务（Short Message Service)是广大企业客户快速触达手机用户所优选使用的通信能力。调用API或用群发助手，即可发送验证码、通知类和营销类短信。国内验证短信秒级触达，到达率最高可达99%。
• 应用场景:
  验证码、短信通知、推广短信

1.2.2 注册账号

• 在官网注册阿里云账号（阿里云官网：https://www.aliyun.com/）

1.2.3 设置短信签名

• 在短信服务管理页面，选择国内消息菜单。
• 短信签名是发送者的署名，表示发送方的身份

1.2.4 设置短信模版

• 短信模板包含短信发送内容、场景、变量信息。

1.2.5 设置AccessKey

• 相当于一对：用户名-密码（需妥善保管，避免泄露）

• 

• 

  建议选择：开始使用子用户 AccessKey。因为继续使用AccessKey的权限太大，泄露风险更大。

1.3 代码开发

• 使用阿里云短信服务发送短信，可以参照官方提供的文档即可。

• 开发步骤

  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>
  
  

  2. 调用API

  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();
  		}
  

2. 手机验证码登录

2.1 需求分析

• 为了方便用户登录，移动端通常都会提供通过手机验证码登录的功能

• 手机验证码登录的优点:

  • 方便快捷，无需注册，直接登录
  • 使用短信验证码作为登录凭证，无需记忆密码
  • 安全

• 登录流程:

  输入手机号>获取验证码>输入验证码>点击登录>登录成功

• 注意：通过手机验证码登录，**手机号是区分不同用户的标识**。

2.2 数据模型

• user表，即用户表

2.3 代码开发

• 前段页面与服务端的交互过程

  1、在登录页面(front/page/login.html)输入手机号，点击【获取验证码】按钮，页面发送ajax请求，在服务端调用短信服务API给指定手机号发送验证码短信

  2、在登录页面输入验证码，点击【登录】按钮，发送ajax请求，在服务端处理登录请求

• 创建基本类和接口

  实体类User(直接从课程资料中导入即可)

  Mapper接口UserMapper

  业务层接口UserService

  业务层实现类UserServicelmpl

  控制层UserController

  工具类SMSutils、Validatecodeutils(直接从课程资料中导入即可)

• 修改LoginCheckFilter代码：在不需要请求的路径中加入移动端发送短信、移动端登录两个路径

  //定义不需要请求的路径
          String[] urls = new String[]{
                  "/employee/login",
                  "/employee/logout",
                  "/backend/**",
                  "/front/**",
                  "/common/**",
                  "/user/sendMsg",//移动端发送短信
                  "/user/login"//移动端登录
          };
  

• 在电脑上怎么显示 H5 开发的移动端页面（手机模式展示的页面）：

  打开调试工具，点击下面红色框的按钮
  

• 修改LoginCheckFilter代码：判断移动端用户登录状态

  //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 ;
          }
  

• 点击【获取验证码】按钮，页面发送ajax请求，在服务端调用短信服务API给指定手机号发送验证码短信

  /**
       * 发送短信
       * @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("短信验证码发送失败！");
  
      }
  

• 输入验证码，点击【登录】按钮，发送ajax请求，在服务端处理登录请求：

  /**
       * 移动端用户登录
       * @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中获取保存的验证码
          String codeSession = session.getAttribute(phone).toString();
          //进行验证码比对
          if(codeSession != null && codeSession.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("登录失败！");
      }