小帽外卖
第六章 手机验证码登录
一、效果展示
二、短信发送
1. 短信服务介绍
- 目前市面上有很多第三方提供的短信服务，这些第三方短信服务会和各个运营商（移动、联通、电信）对接，我们只需要注册成为会员并且按照提供的开发文档进行调用就可以发送短信。需要说明的是，这些短信服务一般都是收费服务。
- 常用短信服务：
2. 阿里云短信服务 - 介绍
- 阿里云短信服务（Short Message Service） 是广大企业客户快速触达手机用户所优选使用的通信能力。调用API或用群发助手，即可发送验证码、通知类和营销类短信；国内验证短信秒级触达，到达率最高可达99%；国际/港澳台短信覆盖200多个国家和地区，安全稳定，广受出海企业选用。
- 应用场景：
- 验证码
- 短信通知
- 推广短信
3. 阿里云短信服务 - 注册账号
4. 阿里云短信服务 - 设置短信签名
- 注册成功后，点击登录按钮进行登录。登录后进入短信服务管理页面，选择国内信息菜单：
- 短信签名是短信发送者的署名，表示发送方的身份。
5. 阿里云短信服务 - 设置短信模板
- 切换到【模板管理】标签页：
- 短信模板包含短信发送内容、场景、变量信息。
6. 阿里云短信服务 - 设置AccessKey
- 光标移动到用户头像上，在弹出的窗口中点击【AccessKey管理】：
7. 代码开发
- 使用阿里云信息服务发送短信，可以参照官方提供的文档即可。
- 具体开发步骤：
7.1 导入maven坐标
7.2 调用API
三、手机验证码登录
1. 需求分析
- 为了方便用户登录，移动端通常都会提供通过手机验证码登录的功能。
- 手机验证码登录的优点：
- 方便快捷，无需注册，直接登录
- 使用短信验证码作为登录凭证，无需记忆密码
- 安全
- 登录流程：
- 输入手机号>获取验证码>输入验证码>点击登录>登录成功
- 注意：通过手机验证码登录，手机号是区分不同用户的标识。
2. 数据模型
- 通过手机验证码登录时，涉及的表为user表，即用户表。结构如下：
3. 代码开发
3.1 梳理交互过程
- 在开发代码之前，需要梳理一下登录时前端页面和服务端的交互过程：
- 在登录页面（front/page/login.html）输入手机号，点击【获取验证码】按钮，页面发送ajax请求，在服务端调用短信服务API给指定手机号发送验证码短信
- 在登录页面输入验证码，点击【登录】按钮，发送ajax请求，在服务端处理登录请求
- 开发手机验证码登录功能，其实就是在服务端编写代码去处理前端页面发送的这2次请求即可。
3.2 准备工作
- 在开发业务功能前，先将需要用到的类和接口基本结构创建好：
- 实体类 User
- Mapper接口 UserMapper
- 业务层接口 UserService
- 业务层实现类 UserServiceImpl
- 控制层 UserController
- 工具类 SMSUtils、ValidateCodeUtils
3.3 修改LoginCheckFilter
- 前面我们已经完成了LoginCheckFilter过滤器的开发，此过滤器用于检查用户的登录状态。我们在进行手机验证码登录时，发送的请求需要在此过滤器处理时直接放行。
- 在LoginCheckFilter过滤器中扩展逻辑，判断移动端用户登录状态：
@WebFilter(filterName = "loginCheckFilter", urlPatterns = "/*")
@Slf4j
public class LoginCheckFilter implements Filter {
public static final AntPathMatcher PATH_MATCHER = new AntPathMatcher();
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) servletRequest;
HttpServletResponse response = (HttpServletResponse) servletResponse;
String requestURI = request.getRequestURI();
log.info("拦截到请求：{}", requestURI);
String[] urls = new String[] {
"/employee/login",
"/employee/logout",
"/backend/**",
"/front/**",
"/common/**",
"/user/sendMsg",
"/user/login"
};
boolean check = check(urls, requestURI);
if(check) {
log.info("本次请求{}不需要处理", requestURI);
filterChain.doFilter(request, response);
return;
}
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;
}
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("用户未登录");
response.getWriter().write(JSON.toJSONString(R.error("NOTLOGIN")));
return;
}
public boolean check(String[] urls, String requestURI) {
for(String url : urls) {
boolean match = PATH_MATCHER.match(url, requestURI);
if(match) {
return true;
}
}
return false;
}
}
@RestController
@RequestMapping("/user")
@Slf4j
public class UserController {
@Autowired
private UserService userService;
@PostMapping("/sendMsg")
public R<String> sendMsg(@RequestBody User user, HttpSession session) {
String phone = user.getPhone();
if(StringUtils.isNotEmpty(phone)) {
String code = ValidateCodeUtils.generateValidateCode(4).toString();
log.info("code={}",code);
session.setAttribute(phone, code);
return R.success("手机验证码短信发送成功");
}
return R.error("短信发送失败");
}
@PostMapping("/login")
public R<User> sendMsg(@RequestBody Map map, HttpSession session) {
log.info(map.toString());
String phone = map.get("phone").toString();
String code = map.get("code").toString();
Object codeInSession = session.getAttribute(phone);
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("登录失败");
}
}
