P18-手机验证码登录开发
1.短信发送
1.1 短信发送服务介绍
目前市面上有很多第三方提供的短信服务,这些第三方短信服务会和各个运营商(移动、联通、电信)对接,我们只需要注册成为会员并且按照提供的开发文档进行调用就可以发送短信。需要说明的是，这些短信服务一般都是收费服务。
常用短信服务:
- 阿里云
- 华为云
- 腾讯云
- 京东
- 梦网
- 乐信
1.2阿里云短信服务
阿里云短信服务(Short Message Service)是广大企业客户快速触达手机用户所优选使用的通信能力。
调用API或用群发助手，即可发送验证码、通知类和营销类短信;国内验证短信秒级触达，到达率最高可达99%;国际/港澳台短信覆盖200多个国家和地区，安全稳定，广受出海企业选用。
应用场景:
- 验证码
- 短信通知
- 推广短信
设置 签名和模板
添加用户获取AccessKey和密码，只授权短信服务，在后续的程序中使用
1.3代码开发
1.3.1导入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>
1.3.2发送短信代码
package com.jq.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需求分析
为了方便用户登录,移动端通常都会提供通过手机验证码登录的功能。手机验证码登录的优点:
- 方便快捷,无需注册，直接登录
- 使用短信验证码作为登录凭证，无需记忆密码
- 安全
登录流程:
输入手机号>获取验证码>输入验证码>点击登录>登录成功
注意:通过手机验证码登录，手机号是区分不同用户的标识。
2.2数据模型
涉及到user表
3.手机验证码登录|短信发送代码开发
3.1前后端交互流程分析
- 在登录页面(ront/page/login.html)输入手机号,点击[获取验证码]按钮,页面发送ajax请求，在服务端调用短信服务API给指定手机号发送验证码短信
- 在登录页面输入验证码，点击[登录1按钮,发送ajax请求，在服务端处理登录请求
开发手机验证码登录功能，其实就是在服务端编写代码去处理前端页面发送的这2次请求即可。
3.2前端代码
3.2.1页面代码-ront/page/login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
<title>菩提阁</title>
<link rel="icon" href="./../images/favico.ico">
<!--不同屏幕尺寸根字体设置-->
<script src="./../js/base.js"></script>
<!--element-ui的样式-->
<link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" />
<!--引入vant样式-->
<link rel="stylesheet" href="../styles/vant.min.css"/>
<!-- 引入样式 -->
<link rel="stylesheet" href="../styles/index.css" />
<!--本页面内容的样式-->
<link rel="stylesheet" href="./../styles/login.css" />
</head>
<body>
<div id="login" v-loading="loading">
<div class="divHead">登录</div>
<div class="divContainer">
<el-input placeholder=" 请输入手机号码" v-model="form.phone" maxlength='20'/></el-input>
<div class="divSplit"></div>
<el-input placeholder=" 请输入验证码" v-model="form.code" maxlength='20'/></el-input>
<span @click='getCode'>获取验证码</span>
</div>
<div class="divMsg" v-if="msgFlag">手机号输入不正确，请重新输入</div>
<el-button type="primary" :class="{btnSubmit:1===1,btnNoPhone:!form.phone,btnPhone:form.phone}" @click="btnLogin">登录</el-button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../backend/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../backend/plugins/element-ui/index.js"></script>
<!-- 引入vant样式 -->
<script src="./../js/vant.min.js"></script>
<!-- 引入axios -->
<script src="../../backend/plugins/axios/axios.min.js"></script>
<script src="./../js/request.js"></script>
<script src="./../api/login.js"></script>
</body>
<script>
new Vue({
el:"#login",
data(){
return {
form:{
phone:'',
code:''
},
msgFlag:false,
loading:false
}
},
computed:{},
created(){},
mounted(){},
methods:{
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})
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:'请输入手机号码'});
}
}
}
})
</script>
</html>
3.2.2js代码
- 发送验证码的Ajax请求
function sendMsgApi(data){
return $axios({
'url':'/user/sendMsg',
'method':'post'
})
}
- 登录的Ajax请求
function loginApi(data) {
return $axios({
'url': '/user/login',
'method': 'post',
data
})
}
- 退出的Ajax请求
function loginoutApi() {
return $axios({
'url': '/user/loginout',
'method': 'post',
})
}
3.3后端代码-准备
3.3.1实体类User
package com.jq.entity;
import lombok.Data;
import java.time.LocalDateTime;
import java.util.Date;
import java.util.List;
import java.io.Serializable;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
/**
* 用户信息
*/
@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;
}
3.3.2Mapper接口UserMapper
package com.jq.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.jq.entity.User;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface UserMapper extends BaseMapper<User> {
}
3.3.3业务接口UserService
package com.jq.service;
import com.baomidou.mybatisplus.extension.service.IService;
import com.jq.entity.User;
public interface UserService extends IService<User> {
}
3.3.4业务实体类UserServiceImpl
package com.jq.service.impl;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.jq.entity.User;
import com.jq.mapper.UserMapper;
import com.jq.service.UserService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Service;
@Slf4j
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
}
3.3.5控制层UserController
package com.jq.controller;
import com.jq.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;
/**
* 用户管理
*/
@Slf4j
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
}
3.3.6工具类
package com.jq.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;
}
}
3.4后端代码-正式开发
3.4.1登录过滤器改造-添加移动端登录状态检测
package com.jq.filter;
import com.alibaba.fastjson.JSON;
import com.jq.commom.BaseContext;
import com.jq.commom.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.util.AntPathMatcher;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* 自定义过滤器
* 检查用户是否已经完成登录
*/
@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;
/**
* 1、获取本次请求的URI
* 2、判断本次请求是否需要处理
* 3、如果不需要处理，则直接放行
* 4、判断登录状态，如果已登录，则直接放行
* 5、如果未登录则返回未登录结果
*/
//1、获取本次请求的URI
String requestURI =request.getRequestURI();// /backend/index.html
log.info("拦截到请求：{}",requestURI);
//定义不需要处理的请求路径
String []urls=new String[]{
"/employee/login",
"/employee/logout",
"/backend/**",
"/front/**",
"/common/**",
"/user/sendMsg",
"/user/login"
};
//2、判断本次请求是否需要处理
boolean check = check(urls, requestURI);
//3、如果不需要处理，则直接放行
if (check){
log.info("本次请求{}不需要处理",requestURI);
filterChain.doFilter(request,response);
return;
}
//4-1、后台管理系统：判断登录状态，如果已登录，则直接放行
if(request.getSession().getAttribute("employee")!=null){
log.info("用户已登录，用户id为:{}",request.getSession().getAttribute("employee"));
//获取用户id
Long empId=(Long) request.getSession().getAttribute("employee");
//调用BaseContext来设置当前用户登录的id
BaseContext.setCurrentId(empId);
filterChain.doFilter(request,response);
return;
}
//4-2、前端移动端用户系统：判断登录状态，如果已登录，则直接放行
if(request.getSession().getAttribute("user")!=null){
log.info("用户已登录，用户id为:{}",request.getSession().getAttribute("user"));
//获取用户id
Long userId=(Long) request.getSession().getAttribute("user");
//调用BaseContext来设置当前用户登录的id
BaseContext.setCurrentId(userId);
filterChain.doFilter(request,response);
return;
}
log.info("用户未登录");
//5、如果未登录则返回未登录结果,通过输出流的方式向客户端页面响应数据
response.getWriter().write(JSON.toJSONString(R.error("NOTLOGIN")));
return;
}
/**
* 路径匹配，检查本次请求是否需要放行
* @param urls
* @param requestURI
* @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;
}
}
3.4.2输入手机号，发送短信验证码代码实现
package com.jq.controller;
import com.jq.commom.R;
import com.jq.entity.User;
import com.jq.service.UserService;
import com.jq.utils.SMSUtils;
import com.jq.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;
/**
* 用户管理
*/
@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){
//1.获取手机号
String phone = user.getPhone();
if (StringUtils.isNotEmpty(phone)){
//2.生成随机的4位验证码
String code = ValidateCodeUtils.generateValidateCode(4).toString();
log.info("code={}",code);
//3.调用阿里云提供的短信服务API完成发送短信
//SMSUtils.sendMessage("天天外卖","",phone,code);
//4.将生成的验证码保存到Session,用于后续的登录
session.setAttribute(phone,code);
return R.success("手机验证码发送成功");
}
return R.error("短信发送失败");
}
}
3.2.5获取到验证码后，点击登录按钮操作代码实现
需要接收的数据如下
/**
* 移动端用户登录
* @param map
* @param session
* @return
*/
@PostMapping("/login")
public R<User>login(@RequestBody Map map, HttpSession session){
log.info(map.toString());
//1.获取手机号
String phone = map.get("phone").toString();
//2.获取验证码
String code = map.get("code").toString();
//3.从session中获取保存的验证码
Object codeInSession = session.getAttribute(phone);
//4.页面提交的和session的验证码进行比对
if(codeInSession!=null &&codeInSession.equals(code)){
//5.如果能够比对成功，说明登录成功
LambdaQueryWrapper<User>queryWrapper=new LambdaQueryWrapper<>();
queryWrapper.eq(User::getPhone,phone);
User user = userService.getOne(queryWrapper);
//6.判断当前手机号对应的用户是否为新用户，如果是新用户就自动完成注册
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("登录失败");
}
3.2.6登录成功页面
4.如果出现错误：ReferenceError: sendMsgApi is not defined
请参照文章Error-瑞吉外卖
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
