一、手机验证码登录

1.1 短信发送

1.2 短信验证码登陆

1.2.1 需求分析

1.2.2 数据模型

1.2.3 代码开发

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

使用验证码登陆(使用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存储到本地的threadLocalLong 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 {@Autowiredprivate 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);//需要将生成的验证码保存到Sessionsession.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("登录失败");}

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

瑞吉外卖（6）—手机验证码登录相关推荐

仿瑞吉外卖【手机登陆功能换成邮件登陆】
前言:
瑞吉外卖项目中手机短信验证登录的问题及过程处理
瑞吉外卖中手机短信验证码登陆的问题以及过程整理本篇接上一篇文章: <基于SpringBoot+MybatisPlus开发的外卖管理项目>戳戳戳 http://t.csdn.cn/cRJY ...
瑞吉外卖之移动端菜品数据的展示
瑞吉外卖之移动端菜品数据的展示界面分析界面分析上篇我们主要完成了了瑞吉外卖移动端界面登录的功能.完成界面登录自然要进入主界面. 我们和前面的登录界面进行衔接上. 于是我们跳转到这个界面,也就是我 ...
【瑞吉外卖】day08：短信发送、手机验证码登录
目录 4. 短信发送编辑 4.1 短信服务介绍 4.2 阿里云短信服务介绍 4.3 阿里云短信服务准备 4.4 代码开发 5. 手机验证码登录 5.1 需求分析 5.2 数据模型 5.3 前端页面分 ...
【瑞吉外卖】学习笔记-day5:（三）手机验证码登录（用邮件发送代替）
短信发送: 短信服务介绍目前市面上有很多第三方提供的短信服务,这些第三方短信服务会和各个运营商(移动.联通.电信)对接,我们只需要注册成为会员并且按照提供的开发文档进行调用就可以发送短信.需要说明的 ...
【瑞吉外卖项目】DAY5——第六章手机验证码登录
本章内容介绍手机验证码登录点击获取验证码收到短信,并输入验证码点击登录,登录成功短信发送_短信服务介绍和阿里云短信服务介绍短信服务介绍目前市面上有很多第三方提供的短信服务,这些第三方短信服 ...
黑马-瑞吉外卖 day5 套餐管理+手机验证码登录
目录 1. 套餐管理 1.1 新增套餐 1.2 套餐信息分页查询 1.3 删除套餐(可批量) 1.4 修改套餐状态(可批量) 2.手机验证码登录 2.1 短信发送 2.2 手机验证码登录 1. 套餐管 ...
学习【瑞吉外卖⑥】SpringBoot单体项目_手机验证码登录业务开发
视频:[黑马程序员]Java 项目实战<瑞吉外卖>,轻松掌握 SpringBoot + MybatisPlus 开发核心技术资料:2022 最新版 Java学习路线图>第 5 阶 ...
黑马瑞吉外卖之移动端验证码登录使用qq邮箱
黑马瑞吉外卖之移动端验证码登录说明用qq邮箱进行验证码发送 hi,我是兰舟千帆,本次更文还是将瑞吉外卖的笔记完善一下.每一篇都写得很认真哦,希望需要的人可以得到帮助,谢谢你们的阅读. 说明 pc端 ...

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

一、手机验证码登录

1.1 短信发送

1.2 短信验证码登陆

1.2.1 需求分析

1.2.2 数据模型

1.2.3 代码开发

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

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

瑞吉外卖（6）—手机验证码登录相关推荐

最新文章

热门文章