学习【瑞吉外卖⑥】SpringBoot单体项目_手机验证码登录业务开发

已于 2022-06-20 00:00:48 修改
阅读量773 收藏 15
点赞数 6
分类专栏： Java 项目 # 瑞吉外卖 文章标签： spring boot 学习 java
于 2022-06-12 00:36:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanzhaohanwei/article/details/125228024
版权
  • 本文章发布在CSDN上，一是方便博主自己线上阅览，二是巩固自己所学知识。
  • 博客内容主要参考上述视频和资料，视频中出现的 PPT 内容大体也为本文所录。
  • 若文章内容或图片失效，请留言反馈。部分素材来自网络，若不小心影响到您的利益，请联系博主删除。

文章目录

上一篇：学习【瑞吉外卖⑤】SpringBoot单体项目：https://blog.csdn.net/yanzhaohanwei/article/details/125194124

【强调】

  • 视频中对于手机验证码登录的功能，所使用的是阿里云短信服务。
  • 但是当前对于个人用户而言，难以申请到短信验证登录的服务。
  • 对于接下来的1.短信发送、2.手机验证码登录只会介绍大概过程，并附上相关代码。
  • 关于阿里云短信服务，本博客这里的演示只是模拟该功能而已。
  • 就设置短信签名那里，只需了解即可。

0.总目录

1.短信发送

1.1.短信服务介绍

目前市面上有很多第三方提供的短信服务。

这些第三方短信服务会和三大运营商（移动、联通、电信)对接，我们需要注册成为会员并且按照提供的开发文档调用才可以发送短信。

需要说明的是，这些短信服务一般都是收费服务。

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

1.2.阿里云短信服务

1.2.1.简单介绍

阿里云短信服务（Short Message Service）是广大企业客户快速触达手机用户所优选使用的通信能力。

调用 API 或用群发助手，即可发送验证码、通知类和营销类短信;国内验证短信秒级触达，到达率最高可达99%；

国际 / 港澳台短信覆盖 200 多个国家和地区，安全稳定，广受出海企业选用。

应用场景：验证码、短信通知、推广短信

想了解更多详情，还请访问 阿里云官网

1

2

1.2.2.设置短信签名

1.2.2.设置短信签名这里仅需了解即可，当前申请个人用户的短信签名过程相当繁琐，不建议申请。

  • 短信签名 是短信发送者的署名，表示发送方的身份。
  • 在进行下面操作时，请先注册一个 阿里云 的账号，并实名认证。

3

4

  • 此处直接搜索“短信服务”，点击下方出现的“短信服务”即可。

5

  • 此时选择“国内消息”

6

  • 鉴于目前个人签名申请过程相当繁琐，故这里只需要了解一下即可。

7

  • 此处为“模板管理”，申请过程依旧繁琐，故只需稍做了解。

8

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

9

10

11

  • 鉴于 “AccessKey” 的权限太大，一般推荐使用 “子用户 AccessKey”。

12

  • 使用 “子用户 AccessKey” 时，一般需要我们先创建一个用户

13

14

15

  • 上面创建了的用户的详情。

16

  • 此处可对新创建的用户设置权限，这里我们选择“SMS”。

17

18

  • 倘若 “AccessKey” 泄露出去，我们也可以禁用该 “AccessKey” 来及时止损。

19

1.3.代码开发

  • 在短信服务的帮助文档里，有相当详细的介绍，具体编写请参考帮助文档里。
  • 导入 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>1.1.0</version>
</dependency>
  • 调用API
package com.itheima.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();
        }
    }
}

2.手机验证码登录

2.1.需求分析

  • 为了方便用户登录，移动端通常都会提供通过手机验证码登录的功能。
  • 手机验证码登录的优点
    • 方便快捷，无需注册，直接登录
    • 使用短信验证码作为登录凭证，无需记忆密码
    • 安全
  • 登录流程
    • 输入手机号–>获取验证码–>输入验证码–>点击登录–>登录成功

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

20

2.2.数据模型

  • user 表（用户表）

21

2.3.梳理交互过程

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

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

开发手机验证码登录功能，其实就是在服务端编写代码去处理前端页面发送的这 2 次请求。

22

23

2.4.准备工作

com/itheima/reggie/entity/User.java

package com.itheima.reggie.entity;

import lombok.Data;

import java.io.Serializable;

/**
 * 用户信息
 */
@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;
}

com/itheima/reggie/mapper/UserMapper.java

package com.itheima.reggie.mapper;

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

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

com/itheima/reggie/service/UserService.java

package com.itheima.reggie.service;

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

public interface UserService extends IService<User> {}

com/itheima/reggie/service/impl/UserServiceImpl.java

package com.itheima.reggie.service.impl;

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

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

com/itheima/reggie/utils/SMSUtils.java

package com.itheima.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();
        }
    }
}

com/itheima/reggie/utils/ValidateCodeUtils.java

package com.itheima.reggie.utils;

import java.util.Random;

/**
 * 随机生成验证码工具类
 */
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;
    }
}

com/itheima/reggie/controller/UserController.java

package com.itheima.reggie.controller;

import com.itheima.reggie.service.UserService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

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

2.5.代码开发

前面我们已经完成了 LogincheckFilter 过滤器的开发，此过滤器用于检查用户的登录状态。

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

com/itheima/reggie/filter/LoginCheckFilter.java

//定义不需要处理的请求路径
String[] urls = new String[]{
        "/employee/login",
        "/employee/logout",
        "/backend/**",
        "/front/**",
        "/common/**",
        "/user/sendMsg",//移动端发送短信
        "/user/login"//移动端登录
};
  • 在 LoginCheckFilter 过滤器中扩展逻辑，判断移动端用户登录的状态

com/itheima/reggie/filter/LoginCheckFilter.java

//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;
}
  • 手机验证码登录：发送验证码短信

com/itheima/reggie/controller/UserController.java

/**
 * 发送手机短信验证码
 *
 * @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("短信发送失败");
}
  • 手机验证码登录：登录校验

因为 user 类中没有 code 属性，故这里使用 map 接收数据。

当然，这里也可以使用之前 DTO 的方式来封装数据。

com/itheima/reggie/controller/UserController.java

/**
 * 移动端用户登录
 *
 * @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<User>();
        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("登录失败");
}

这里的验证码实际上是由控制台模拟打印出来的，而非阿里云的短信验证服务。

2022-06-12 00:13:36.379  INFO 19724 --- [nio-8080-exec-4] c.i.reggie.controller.UserController     : code=2901

2.6.前端资料问题

  • 此外，这里有两个坑，官方给的前端的资料（login.js、login.html）是有所缺失的，我们需要添加并修改一些代码。

文件 login.js 的位置是 resources 目录下的 front/api/login.js

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

文件 login.html 的位置是 resources 目录下的 front/page/login.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
    }
},

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)//修改后的代码
        /*********************************************************************/
        this.loading = false
        if(res.code === 1){
            sessionStorage.setItem("userPhone",this.form.phone)
            window.requestAnimationFrame(()=>{
                window.location.href= '/front/index.html'
            })                           
        }else{
            this.$notify({ type:'warning', message:res.msg});
        }
    }else{
        this.$notify({ type:'warning', message:'请输入手机号码'});
    }
}

3.最终效果

localhost:8080/front/page/login.html

24

localhost:8080/front/index.html

25

事实上我们也可以通过腾讯云发送短信或者采用QQ邮箱验证发送的方式来实现上述的功能。

这里推荐一篇博客《SpringBoot项目实现qq邮箱验证码登录》供各位参考。

我个人比较懒，要是邮箱验证的话，还需要改一些前端 … … 太麻烦了，就不想多事了。就这么凑活着吧。

下一篇：学习【瑞吉外卖⑦】SpringBoot单体项目：https://blog.csdn.net/yanzhaohanwei/article/details/125245214

燕赵韩魏555
关注
  • 6
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【瑞吉外卖】SpringBoot使用邮件发送短信验证码--完善用户登录功能
06-24
黑马程序员---瑞吉外卖--SpringBoot项目 新增sendMail（）方法，用户登录时使用QQ邮件发送验证码，完善用户登录功能。 亲测有效！
java瑞吉外卖项目SpringBoot
02-20
瑞吉外卖项目是一个基于Spring Boot框架的在线外卖订餐系统。该项目旨在为用户提供一个便捷、高效、安全的在线订餐体验，同时为餐厅提供一个展示菜品、接收订单、管理订单等功能的平台。 技术栈： 后端：Spring ...
猿创征文｜瑞吉外卖——移动端_邮箱验证码登录
m0_65144570的博客
09-12 1204
瑞吉外卖的移动端中邮箱验证码的操作。
Springboot简单用户登录验证
zzds111的博客
11-14 6377
初版 结合了spring后，以及前面l连接数据库的内容，做出初版的页面匹配代码 先创建一个User类，如果输入的用户名存在，就从数据库中将这个用户的信息读取出来存储到我们创建的user类中，然后与输入的密码进行匹配 通过lombok插件，可以省略类里面的很多的创建步骤 import lombok.*; //set,get方法，构造方法有参无参，toString方法 @Setter @Getter @AllArgsConstructor @NoArgsConstructor @ToString pu
springboot 单点登录
prefect_start的博客
03-26 6117
1、springboot 单点登录 单点登录英文全称Single Sign On，简称就是SSO。它的解释是：在多个应用系统中，只需要登录一次，就可以访问其他相互信任的应用系统 2、流程图 3、流程解析 现在有认证服务器 ssoserver.com，客户端client1.com和客户端client2.com 两个不同域名的服务器，并且没有子域名关系（如果两个客户端有子域名关系，session进行统一存储，可以通过SpringSession手动去设置session的作用域，放大作用域，取父域名最为
学习【瑞吉外卖⑤】SpringBoot单体项目_套餐管理业务开发
做笔记，记录学习中遇到的问题。
06-09 1539
本文内容：新增套餐功能的开发、套餐数据分页查询功能的开发、删除套餐功能的开发、其他功能（套餐停售 / 启售功能、套餐修改功能）的开发。
学习【瑞吉外卖④】SpringBoot单体项目_菜品管理业务开发
做笔记，记录学习中遇到的问题。
06-08 1295
本文内容：文件上传下载、新增菜品、菜品信息分页查询、修改菜品、其他功能（删除单个菜品、停售 / 启售单个菜品、批量删除菜品、批量停售 / 批量启用菜品）。
学习【瑞吉外卖②】SpringBoot单体项目_员工管理业务开发
做笔记，记录学习中遇到的问题。
06-01 951
本文的内容是完善登录功能、 新增员工功能、员工信息分页查询功能、启用 / 禁用员工账号（即更改员工账号状态）、编辑员工信息功能。
学习【瑞吉外卖③】SpringBoot单体项目_分类管理业务开发
做笔记，记录学习中遇到的问题。
06-05 741
本博客内容：公共字段自动填充功能的开发、新增分类功能的开发、分类信息分页查询功能的开发、删除分类功能的开发、修改分类功能的开发。
Java黑马的瑞吉外卖项目（SpringBoot+MyBatis-Plus）
07-24
Java黑马的瑞吉外卖项目（SpringBoot+MyBatis-Plus）
瑞吉外卖项目完整篇（vue+springboot+redis+mybatis-plus）
04-29
瑞吉外卖项目是根据黑马课程的资源项目，但黑马课程中有些模块没有开发和讲解。导致大家在学习完后还有很多的模块是不完整的。 该资源是我学习完瑞吉外卖项目后将所有的功能模块都实现了。所有的接口在后端都有相应...
基于Javascript的瑞吉外卖项目设计源码
05-22
瑞吉外卖项目设计源码：该项目基于Javascript开发，包含247个文件，主要使用Java、JavaScript、HTML和CSS语言。该设计源码是一个外卖项目的实现，包括用户下单、商品展示、支付等功能，适用于外卖平台和商家。
一个基于阿里大于短信工具类
Lonels的博客
11-03 324
/** * 短信发送工具类 */ public class SMSUtils { public static final String VALIDATE_CODE = "SMS_190900306";//发送短信验证码 /** * 发送短信 * @param phoneNumbers * @param param * @throws ClientException */ public static void sendShortMessage(String templateCo
Spring Boot组成的分布式系统中实现日志跟踪
心猿意码
07-25 188
除了使用Sleuth和Zipkin之外，我们还可以自定义日志输出格式，以便更容易地识别请求的追踪信息。Xml深色版本1通过使用Spring Cloud Sleuth和Zipkin，我们可以轻松地为Spring Boot应用实现日志跟踪。这种方式不仅简化了日志跟踪的实现，还提供了强大的可视化工具，帮助我们更好地理解和调试分布式系统。此外，通过自定义日志输出格式和使用MDC，我们可以进一步定制日志以适应特定的需求。
Spring Boot打出的jar包为什么可以独立运行
最新发布
懒人w的博客
07-25 805
闲来无事，浏览网页看到有人说jar包为什么可以独立运行，想起前端时间写的jar打包后无法正常运行处理。jar解压缩后有多个文件夹，内部存放运行所需jar包和一些配置文件，本文做一个简单介绍。
Spring Boot应用中的Conflicting Bean Definition异常分析与解决策略
wenxuankeji的博客
07-22 399
解决项目启动报错Annotation-specified bean name ‘xxx‘问题
Spring Boot中的 6 种API请求参数读取方式
恒安软件
07-13 966
使用Spring Boot开发API的时候，读取请求参数是服务端编码中最基本的一项操作，Spring Boot中也提供了多种机制来满足不同的API设计要求。接下来，就通过本文，为大家总结6种常用的请求参数读取方式。如果你发现自己知道的不到6种，那么赶紧来查漏补缺一下。如果你知道的不止6种，那么告诉大家，一起互相学习一下吧～
瑞吉外卖springboot vur项目实验原理
06-12
瑞吉外卖是一个在线餐饮订餐平台，使用了Spring Boot和Vue.js两个框架进行开发。其中Spring Boot是一个基于Spring框架的快速开发框架，可以帮助开发者快速构建Web应用程序；而Vue.js则是一款轻量级的JavaScript框架，用于构建用户界面。 在实验中，我们首先使用Spring Boot框架来构建后端服务，包括用户注册、登录、菜品信息的查询、下单等功能。在这个过程中，我们使用了Spring MVC框架来处理请求和响应，使用Spring Data JPA来操作数据库。 接着，我们使用Vue.js框架来构建前端界面，包括用户登录注册、浏览菜品、下单、支付等功能。在这个过程中，我们使用了Vue Router来实现单页面应用程序，并使用Axios来向后端发送HTTP请求。 最后，我们将前后端进行整合，使用Spring Boot的内置Tomcat服务器来部署整个应用程序。用户可以通过浏览器访问应用程序，进行在线订餐。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值