瑞吉外卖（6）—手机验证码登录

咕咕猫_

已于 2022-10-14 19:27:30 修改

阅读量2.1k

点赞数 3

分类专栏：项目文章标签： java 数据库 mysql

于 2022-10-14 11:15:24 首次发布

本文链接：https://blog.csdn.net/weixin_61843013/article/details/127316097

版权

项目专栏收录该内容

10 篇文章 1 订阅

订阅专栏

发送验证码（给的资料有点残缺，这里修改了）

使用验证码登陆(使用map接收数据)

一、手机验证码登录

1.1 短信发送

这里使用的是阿里云短信，但是吧，对于个人来说，几乎是申请不到短信的模板签名，所以这里只能大概介绍一下怎么使用阿里云发送短信，具体调用阿里云短信服务的Java代码也会给出；

先引入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>

然后调用api：

package com.learn.reggie.utils;

import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.IAcsClient;
import com.aliyuncs.dysmsapi.model.v20170525.SendSmsRequest;
import com.aliyuncs.dysmsapi.model.v20170525.SendSmsResponse;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.profile.DefaultProfile;

/**
 * 短信发送工具类
 */
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();
		}
	}

}

1.2 短信验证码登陆

1.2.1 需求分析

1.2.2 数据模型

1.2.3 代码开发

导入user实体类；

创建userMapper：

package com.learn.reggie.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.learn.reggie.entity.User;
import org.apache.ibatis.annotations.Mapper;

/**
 * @author 咕咕猫
 * @version 1.0
 */
@Mapper
public interface UserMapper extends BaseMapper<User> {
}

创建service：

package com.learn.reggie.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.learn.reggie.entity.User;

/**
 * @author 咕咕猫
 * @version 1.0
 */
public interface UserService extends IService<User> {
}

实现service：

package com.learn.reggie.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.learn.reggie.entity.User;
import com.learn.reggie.mapper.UserMapper;
import com.learn.reggie.service.UserService;
import org.springframework.stereotype.Service;

/**
 * @author 咕咕猫
 * @version 1.0
 */
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
}

发送验证码（给的资料有点残缺，这里修改了）

注意这个资料有点残缺，补全：

在longin.html中找到这个获取验证码的方法，把一行注释，然后添加一行代码一行；

getCode(){
    this.form.code = ''
    const regex = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/;
    if (regex.test(this.form.phone)) {
        this.msgFlag = false
        //this.form.code = (Math.random()*1000000).toFixed(0)
        sendMsgApi({phone:this.form.phone})  //添加的
    }else{
        this.msgFlag = true
    }
},

在front/api/login.js中添加一个方法：

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

在登陆拦截器LongCheckFilter中添加新的白名单：

String[] urls = new String[]{
        "/employee/login",
        "/employee/logout",
        "/backend/**",
        "/front/**",
        "/common/**",
        "/user/sendMsg", //移动端发送短信
        "/user/login"  // 移动端登陆
};

并且在里面继续添加一个手机端登陆状态的放行判断：

//4-2判断移动端登录状态，如果已登录，则直接放行
        if(request.getSession().getAttribute("user") != null){
            //log.info("用户已登录，用户id为：{}",request.getSession().getAttribute("user"));
            //把用户id存储到本地的threadLocal
            Long userId = (Long) request.getSession().getAttribute("user");
            BaseContext.setCurrentId(userId);
 
 
            filterChain.doFilter(request,response);
            return;
        }

编写controller：

package com.learn.reggie.controller;

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.learn.reggie.common.R;
import com.learn.reggie.entity.User;
import com.learn.reggie.service.UserService;
import com.learn.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 咕咕猫
 * @version 1.0
 */
@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(6).toString();
            log.info("code={}", code);

            //调用阿里云提供的短信服务API完成发送短信
//            SMSUtils.sendMessage("瑞吉外卖","",phone,code);

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

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

功能测试：访问手机端，输入手机号，看能不能在后台打印验证码；

使用验证码登陆(使用map接收数据)

注意：测试的时候发现前端页面明明填了验证码，发现验证码并没有被携带在前端的请求参数中，所以后端也没有拿到验证码这个数据，一看就是前端发请求的地方的参数携带少了；修改一下参数就行；

async btnLogin(){
    if(this.form.phone && this.form.code){
        this.loading = true
        
        //const res = await loginApi({phone:this.form.phone})  这里是资料给的代码
        const res = await loginApi(this.form)  //这里是自己加的
        
        ....
}

controller层代码：

    /**
     * 移动端用户登录
     * @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());//在session中保存用户的登录状态,这样过滤器就不会被拦截了
            return R.success(user);
        }
        return R.error("登录失败");
    }

功能测试：验证码正确后跳转到手机端；