7.手机登陆功能开发

手机登陆功能开发

由于申请短信服务比较困难，发短信的功能就没有做。验证码直接以log日志的形式打印出来。

1、梳理交互过程

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

2、准备工作

创建基本的类和接口：

• 实体类User(直接从课程资料中导入即可)
• Mapper接口UserMapper
• 业务层接口UserService
• 业务层实现类UserServicelmpl
• 控制层UserController
• 工具类SMSutils、ValidateCodeutils (直接从课程资料中导入即可)

2.1、修改LoginCheckFilter

我们在进行手机验证码登陆时，发送的请求需要在此过滤器处理时直接放行

修改LoginCheckFilter的doFilter方法两处地方。

在判断用户登陆下方添加判断手机用户登陆

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

3、模拟发送短信

在UserController中创建sendMsg方法模拟短信发送

package com.itheima.reggie.controller;

import com.itheima.reggie.common.R;
import com.itheima.reggie.entity.User;
import com.itheima.reggie.service.UserService;
import com.itheima.reggie.utils.ValidateCodeUtils;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpSession;
import java.util.Map;

/**
 * @Author: xjhqre
 * @DateTime: 2022/6/15 16:50
 */
@Slf4j
@RestController
@RequestMapping("/user")
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("4位验证码是：{}", code);

            // 调用阿里云提供的短信服务API完成发送短信
            //...

            // 将生成的验证码保存到Session
            session.setAttribute(phone, code);

            return R.success("手机验证码短信发送成功");
        }


        return R.error("短信发送失败");
    }

    @PostMapping("/login")
    public R<String> login(@RequestBody Map<String, String> map, HttpSession session) {
        log.info(map.toString());
        return R.error("登陆失败");
    }

    
}

3.1、修改前端页面（可选）

课程资料里给的手机登陆页面，点击发送验证码后直接显示在表单里，没有走后端的接口。下面是改成请求后端接口的方法

1、在front/api/login.js里添加sendMsgApi方法

function sendMsgApi(data) {
    return $axios({
        'url': '/user/sendMsg',
        'method': 'post',
        data
    })
}

2、然后修改front/page/login.html页面

3.2、测试点击获取验证码

4、登陆功能

前端登陆页面输入验证码点击登陆发送请求

在UserController编写登陆方法login

@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 sessionCode = (String) session.getAttribute(phone);

    // 验证码校验
    if(sessionCode != null && sessionCode.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); // 可以不设置，数据库默认值为1
            userService.save(user);
        }
        session.setAttribute("user", user.getId());
        return R.success(user);
    }
    return R.error("登陆失败");
}

4.1、测试登陆功能

按照以上步骤写好接口以后，点击登陆按钮会发现页面请求的参数里只有一个phone，而没有带code参数。需要对前端请求代码进行修改

修改front/page/login.html页面里的btnLogin方法即可

再次测试即可成功