抖音实战~手机号验证码一键注册登录流程（限制手机终端登录）
https://img-blog.csdnimg.cn/0f1d45c40f1f4fbd9e74460e31ab6e8d.pnghttps://img-blog.csdnimg.cn/13d2ac246c79433b936654cc043941fa.png
文章目录
[*]
[*]
[*]
[*]
[*]一、手机号+验证码
[*]二、前端
[*]
[*]2.1. 点击登陆流程
[*]2.2. 点击登录源码
[*]三、后端登录
[*]
[*]3.1. 登录流程图
[*]3.2. 流程简述
[*]3.3. 手机号验证码登录流程
一、手机号+验证码
https://img-blog.csdnimg.cn/b91b48b0ab0843f79f19a43c41689857.png
二、前端
2.1. 点击登陆流程
[*]1.先校验手机号是否合法？不合法，则提示“请输入正确的手机号”
[*]2.再校验是否勾选隐私协议，未勾选，则提示“请先同意《隐私及服务协议》”
[*]3.校验通过后，根据选择的登录类型进行判断，最后，则调用后端手机号验证码登录接口
[*]4.后端返回结果
[*]4.1.成功，则保存用户信息+token信息
[*]4.2.失败：则提示后端返回的提示语
2.2. 点击登录源码
loginOrRegist() {
var me = this;
var mobile = me.mobile;
// 提交前，手机号校验
var reg = /^1{10,10}$/;
if (!mobile || !reg.test(mobile)) {
uni.showToast({
title: '请输入正确的手机号',
icon: 'none'
})
return
}
if (!this.agree) {
uni.showToast({
title: '请先同意《隐私及服务协议》',
icon: 'none'
});
return;
}
var serverUrl = app.globalData.serverUrl;
// 手机号密码~登录/注册
if (!this.logintype) {
var password = me.password;
if (app.isStrEmpty(password)) {
uni.showToast({
title: "密码不能为空",
icon: "none"
});
return;
}
// uni.showLoading()
// 调用后端登录注册
uni.request({
method: "POST",
url: serverUrl + "/user/mobileAndPasswordRegistLogin",
data: {
"mobile": mobile,
"password": password
},
success(result) {
var status = result.data.status;
// uni.hideLoading();
if (status == 200) {
var userInfo = result.data.data;
console.log("密码->userInfo", userInfo)
app.setUserInfoSession(userInfo);
app.setUserSessionToken(userInfo.userToken);
// 登录成功，关闭当前页
// me.close();
uni.reLaunch({
url: "../me/me"
})
} else if (status != 200) {
uni.showToast({
title: result.data.msg,
icon: "none",
duration: 3000
});
}
}
});
}
// 手机号验证码~登录/注册
if (this.logintype) {
var verifyCode = me.verifyCode;
console.log("verifyCode", verifyCode)
if (app.isStrEmpty(verifyCode)) {
uni.showToast({
title: "请填写验证码",
icon: "none"
});
return;
}
// 调用后端登录注册
uni.request({
method: "POST",
url: serverUrl + "/user/login",
data: {
"mobile": mobile,
"smsCode": verifyCode
},
success(result) {
var status = result.data.status;
// uni.hideLoading();
if (status == 200) {
var userInfo = result.data.data;
console.log("验证码->userInfo", userInfo)
app.setUserInfoSession(userInfo);
app.setUserSessionToken(userInfo.userToken);
// 登录成功，关闭当前页
// me.close();
uni.reLaunch({
url: "../me/me"
})
} else if (status != 200) {
uni.showToast({
title: result.data.msg,
icon: "none",
duration: 3000
});
}
}
});
}
} 三、后端登录
3.1. 登录流程图
会话拦截限制一台手机登录（流程图）
https://img-blog.csdnimg.cn/0f1d45c40f1f4fbd9e74460e31ab6e8d.png
3.2. 流程简述
[*]1.前端传递userId和token
[*]2.后端接收userId和token
[*]3.校验userId和token是否为空
[*]4.校验任一为空，则提示“请登录后再继续操作！”
[*]5.不为空，通过UserId从redis中获取token
[*]6.redis中的token与传参token校验是否一致
[*]7.不一致，第一台登录的会“会话失效，请重新登录！”
[*]8.一致继续操作
备注：由于登录不拦截，因此当第二台手机登录时，token会将第一台手机的登录token进行覆盖
https://img-blog.csdnimg.cn/24a8b6fb45c747b28ad2a8dbd7c8ac09.png
https://img-blog.csdnimg.cn/573708db245d468491f6ff555bc91281.png
3.3. 手机号验证码登录流程
[*]1.从redis中获得验证码进行校验是否匹配
[*]2.查询数据库，判断用户是否存在
[*]2.1 如果用户为空，表示没有注册过，则为null，需要注册信息入库
[*]2.2 如果用户不为空，表示已经注册过，继续
[*]3.如果不为空，可以继续下方业务，可以保存用户会话信息
[*]4.用户登录注册成功以后，删除redis中的短信验证码
[*]5.返回用户信息，包含token令牌
@PostMapping("login")
public GraceJSONResult login(@Valid @RequestBody RegistLoginBO registLoginBO,
HttpServletRequest request) throws Exception {
String mobile = registLoginBO.getMobile();
String code = registLoginBO.getSmsCode();
// 1. 从redis中获得验证码进行校验是否匹配
String redisCode = redis.get(MOBILE_SMSCODE + ":" + mobile);
if (StringUtils.isBlank(redisCode) || !redisCode.equalsIgnoreCase(code)) {
return GraceJSONResult.errorCustom(ResponseStatusEnum.SMS_CODE_ERROR);
}
// 2. 查询数据库，判断用户是否存在
Users user = userService.queryMobileIsExist(mobile);
if (user == null) {
// 2.1 如果用户为空，表示没有注册过，则为null，需要注册信息入库
user = userService.createUser(mobile);
}
// 3. 如果不为空，可以继续下方业务，可以保存用户会话信息
String uToken = UUID.randomUUID().toString();
redis.set(REDIS_USER_TOKEN + ":" + user.getId(), uToken);
// 4. 用户登录注册成功以后，删除redis中的短信验证码
redis.del(MOBILE_SMSCODE + ":" + mobile);
// 5. 返回用户信息，包含token令牌
UsersVO usersVO = new UsersVO();
BeanUtils.copyProperties(user, usersVO);
usersVO.setUserToken(uToken);
return GraceJSONResult.ok(usersVO);
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]