3.注册及手机验证功能
2019-04-17 本文已影响45人
Rebirth_914
1. 流程分析
- 客户端先发送一个手机号码到后端获取验证码，此时“获取验证码”按钮是激活状态，“下一步”按钮是禁用状态
- 点击“获取验证码”按钮，该按钮60秒倒计时变为禁用状态，等待用户接收验证码并输入
- 后端根据这个手机号先到数据库查询该手机号是否已被注册，如果已经被注册就返回“该手机号已被注册”，不继续后续步骤
- 如果没被注册，后端为该手机号生成一个随机6位验证码存在Redis中（指定时限），然后将该验证码通过阿里云的短信服务接口发送给客户端
- 客户端收到短信，输入验证码，点击下一步
- 后端收到客户端发送的验证码，就将其和Redis中暂存的验证码比对，如果一致就放行，否则提示“验证码错误”
- 验证码正确，进入填写密码的页面，填写完毕提交到后端，加密存入数据库，注册成功，让用户选择去登录，还是回到首页
2.Redis准备
- 下载Redis，Redis是最流行的键值对存储数据库，官网只有Linux版本的Redis，自行下载后可以到阿里云ECS去安装，本地只能从GitHub下载，地址点这里
- 解压后放到本地目录
- 运行redis-server
cd D:\tools\redis
redis-server.exe redis.windows.conf
运行.png
-
再开一个命令行窗口，进入redis目录，运行redis-cli.exe命令，进行一下基本操作，set是设置键值对，keys是列出所有键，get是获取指定键的值，del是删除指定的键值
获取.png
3.阿里云短信服务
package com.soft1721.jianyue.api.util;
import com.aliyuncs.CommonRequest;
import com.aliyuncs.CommonResponse;
import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.IAcsClient;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.exceptions.ServerException;
import com.aliyuncs.http.MethodType;
import com.aliyuncs.profile.DefaultProfile;
/**
* 短消息测试程序
*/
public class SMSTest {
public static void main(String[] args) {
DefaultProfile profile = DefaultProfile.getProfile("cn-hangzhou", "*******", "*****");
IAcsClient client = new DefaultAcsClient(profile);
CommonRequest request = new CommonRequest();
request.setMethod(MethodType.POST);
request.setDomain("dysmsapi.aliyuncs.com");
request.setVersion("2017-05-25");
request.setAction("SendSms");
request.putQueryParameter("RegionId", "cn-hangzhou");
request.putQueryParameter("PhoneNumbers", "****");
request.putQueryParameter("SignName", "****");
request.putQueryParameter("TemplateCode", "SMS_135805735");
request.putQueryParameter("TemplateParam", "{\"code\":\"888888\"}");
try {
CommonResponse response = client.getCommonResponse(request);
System.out.println(response.getData());
} catch (ServerException e) {
e.printStackTrace();
} catch (ClientException e) {
e.printStackTrace();
}
}
}
-
运行结果
image.png
4.后端
- pom.xml，增加阿里云短信服务SDK依赖和SpringBoot集成redis依赖
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-core</artifactId>
<version>4.0.3</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
- util包的StringUtil类增加一个方法，用来获取六位随机数验证码
public static String getVerifyCode() {
Random random = new Random();
StringBuilder stringBuilder = new StringBuilder();
for (int i = 0; i < 6; i++) {
stringBuilder.append(String.valueOf(random.nextInt(10)));
}
return stringBuilder.toString();
}
- 编写SMSUtil短信发送工具类，主要将手机号和短信字符串分离成变量，main方法测试通过后即可删除
import com.aliyuncs.CommonRequest;
import com.aliyuncs.CommonResponse;
import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.IAcsClient;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.exceptions.ServerException;
import com.aliyuncs.http.MethodType;
import com.aliyuncs.profile.DefaultProfile;
/**
* 短信发送工具类，返回生成的随机验证码
*/
public class SMSUtil {
public static String send(String mobile) {
DefaultProfile profile = DefaultProfile.getProfile(
"cn-hangzhou",
"*******",
"*******");
IAcsClient client = new DefaultAcsClient(profile);
CommonRequest request = new CommonRequest();
request.setMethod(MethodType.POST);
request.setDomain("dysmsapi.aliyuncs.com");
request.setVersion("2017-05-25");
request.setAction("SendSms");
request.putQueryParameter("RegionId", "cn-hangzhou");
request.putQueryParameter("PhoneNumbers", mobile);
request.putQueryParameter("SignName", "*****");
request.putQueryParameter("TemplateCode", "SMS_135805735");
String verifyCode = StringUtil.getVerifyCode();
request.putQueryParameter("TemplateParam", "{\"code\":" + verifyCode + "}");
try {
CommonResponse response = client.getCommonResponse(request);
System.out.println(response.getData());
} catch (ServerException e) {
e.printStackTrace();
} catch (ClientException e) {
e.printStackTrace();
}
return verifyCode;
}
public static void main(String[] args) {
System.out.println(send("139****1489"));
}
}
- mapper层增加insertUser方法，自行实现（id和token不用给值）
- service接口增加注册方法
void signUp(UserDTO userDTO);
- signUp方法实现
@Override
public void signUp(UserDTO userDTO) {
User user1 = new User();
user1.setMobile(userDTO.getMobile());
user1.setPassword(StringUtil.getBase64Encoder(userDTO.getPassword()));
user1.setNickname("新用户");
user1.setAvatar("http://ppeto2k90.bkt.clouddn.com/avatar/default.png");
user1.setRegtime(new Date());
user1.setStatus((short) 1);
userMapper.insert(user1);
}
- 单元测试
@Test
public void signUp() {
UserDTO userDTO = new UserDTO();
userDTO.setMobile("139****1489");
userDTO.setPassword("111");
userService.signUp(userDTO);
}
- controller层编写前，先到StatusConst和MsgConst添加需要用到的常量
public static final int MOBILE_EXIST = 5;
public static final int VERIFYCODE_ERROR = 6;
public static final String MOBILE_EXIST = "手机号已被注册";
public static final String VERIFYCODE_ERROR = "验证码错误";
- 获取短信验证码接口
@PostMapping(value = "/verify")
public ResponseResult getVerifyCode(@RequestParam("mobile") String mobile) {
User user = userService.getUserByMobile(mobile);
//手机号已经被注册
if (user != null) {
return ResponseResult.error(StatusConst.MOBILE_EXIST, MsgConst.MOBILE_EXIST);
} else {
//发送验证码
String verifyCode = SMSUtil.send(mobile);
// String verifyCode = StringUtil.getVerifyCode();
System.out.println(verifyCode);
//手机号和验证码作为键值对存入redis中
redisService.set(mobile, verifyCode);
return ResponseResult.success();
}
}
- 验证短信验证码接口
@PostMapping(value = "/check")
public ResponseResult checkVerifyCode(@RequestParam("mobile") String mobile, @RequestParam("verifyCode") String verifyCode) {
//从Redis中取出这个手机号的验证码
String code = redisService.get(mobile).toString();
//System.out.println(code + "---");
// System.out.println(verifyCode);
//和客户端传过来的验证码比对
if (code.equals(verifyCode)) {
return ResponseResult.success();
} else {
return ResponseResult.error(StatusConst.VERIFYCODE_ERROR, MsgConst.VERIFYCODE_ERROR);
}
}
- 注册接口
@PostMapping(value = "/sign_up")
public ResponseResult signUp(@RequestBody UserDTO userDTO) {
userService.signUp(userDTO);
return ResponseResult.success();
}
- swagger测试
5. 前端
- 在main.js中配置全局服务器地址
Vue.prototype.apiServer = 'http://*****:8080/api'
- 注册页面
<template>
<view class="container">
<view class="sign-box">
<input
class="uni-input left"
type="number"
placeholder="输入手机号"
v-model="mobile"
required="required"
/>
<button
type="primary"
class="green-btn small-btn right"
:disabled="disabled"
@tap="getVerifyCode"
>
{{ title }}
</button>
</view>
<input
class="uni-input"
type="number"
placeholder="输入验证码"
v-model="verifyCode"
required="required"
/>
<button @tap="checkCode" class="green-btn" :disabled="this.nextdisabled">下一步</button>
</view>
</template>
<script>
export default {
data() {
return {
mobile: '',
verifyCode: '',
timer: 60,
disabled: false,
title: '获取验证码',
nextdisabled: false
};
},
onLoad() {},
methods: {
getVerifyCode: function() {
var _this = this;
if (_this.mobile.length < 11) {
uni.showToast({
title: '手机号不符合要求',
duration: 2000,
icon: 'none'
});
return;
} else {
_this.disabled = true;
let timer1 = setInterval(() => {
_this.timer--;
_this.title = _this.timer + '秒';
if (_this.timer == 0) {
clearInterval(timer1);
_this.timer = 60;
_this.disabled = false;
// _this.nextdisabled = false;
_this.title = '发送验证码';
return;
}
}, 1000);
uni.request({
url: _this.apiServer + '/user/verify',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {
mobile: _this.mobile
},
success: res => {
if (res.data.code === 0) {
uni.showToast({
title: '验证码已发送'
});
_this.disabled = true;
console.log(_this.disabled);
} else {
uni.showModal({
title: '提示',
content: res.data.msg
});
}
}
});
}
},
checkCode: function() {
var _this = this;
console.log(_this.verifyCode);
console.log(_this.mobile);
uni.request({
url: this.apiServer + '/user/check',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {
mobile: _this.mobile,
verifyCode: _this.verifyCode
},
success: res => {
console.log(res.data.code);
if (res.data.code === 0) {
uni.navigateTo({
url: '../password/password?mobile=' + _this.mobile
});
} else {
uni.showModal({
title: '提示',
content: res.data.msg
});
}
}
});
}
}
};
</script>
<style>
.sign-box {
display: flex;
align-items: center;
}
.green-btn{
background:#00C777;
color: #FFFFFF;
margin-top: 15px;
text-align: center;
}
.uni-input{
border-bottom: 1px solid #EEEEEE;
font-size: 18px;
height: 50px;
}
.left {
flex: 1 1 70%;
}
.small-btn {
width: 100px;
height: 40px;
font-size: 14px;
background:#00C777;
color: #FFFFFF;
}
</style>
- 密码页面
<template>
<view class="container">
<input class="uni-input" password type="text" placeholder="输入密码" v-model="password" required="required" />
<button class="green-btn" @tap="signUp(userDTO)">注册</button>
</view>
</template>
<script>
export default {
data() {
return {
userDTO: {
mobile: '',
password: ''
}
};
},
onLoad: function(option) {
//option为object类型，会序列化上个页面传递的参数
console.log(option.mobile);
this.mobile = option.mobile;
},
methods: {
signUp: function(userDTO) {
var _this = this;
uni.request({
url: this.apiServer + '/user/sign_up',
method: 'POST',
header: {
'content-type': 'application/json'
},
data: {
mobile: _this.mobile,
password: _this.password
},
success: res => {
if (res.data.code === 0) {
uni.showModal({
title: '提示',
content: '注册成功'
})
uni.navigateTo({
url: '../signin/signin'
});
} else {
uni.showModal({
title: '提示',
content: res.data.msg
});
}
}
});
}
}
};
</script>
<style scoped>
.green-btn {
background: rgb(65, 168, 99);
color: #FFFFFF;
margin-top: 30px;
text-align: center;
width: 80%;
}
.uni-input {
border-bottom: 1px solid #EEEEEE;
font-size: 18px;
height: 50px;
}
</style>
- 登录页面
<template>
<view class="grace-padding">
<view style="margin-top:50px;" class="grace-center">
<image src='../../static/avatar3.jpg' style='width:68px; height:68px; border-radius:8px;'></image>
</view>
<view class="grace-form" style="margin-top:30upx;">
<form>
<view class="grace-items item-border">
<view class="grace-label">
<picker :value="pnpre" @change="changePre" :range="pnpres" >
<text style="font-size: 19px;">+{{pnpre}}</text>
</picker>
</view>
<input type="number" class="input" v-model="userDTO.mobile" required="required" placeholder="请输入手机号"></input>
</view>
<view class="grace-space-between item-border" style="margin-top:28upx;">
<view class="grace-items ">
<view class="grace-label grace-center" style="font-size: 19px;">密码</view>
<input type="number" class="input" v-model="userDTO.password" required="required" placeholder="请输入密码"></input>
</view>
</view>
<button form-type='submit' type='primary' style='background:#00C777; margin-top:30px;' @tap="signIn(userDTO)">
登录 <text class="grace-iconfont icon-arrow-right"></text>
</button>
</form>
</view>
<view class="grace-center" style="margin-top:20upx; line-height:50upx;">
<navigator url="../register/register" class="nav">
如没有账号，请前往注册
</navigator>
</view>
<!-- 第三方登录 -->
<view class="grace-title" style="margin-top:30px;">
<view class="grace-h5 grace-blod grace-center" style='color:#00C777'>第三方登录</view>
</view>
<view class="grace-login-three" style="margin-top:8px;">
<view class="grace-iconfont icon-weixin"></view>
<view class="grace-iconfont icon-qq"></view>
<view class="grace-iconfont icon-weibo"></view>
</view>
</view>
</template>
<script>
var graceChecker = require("../../graceUI/graceChecker.js");
export default {
data() {
return {
userDTO: {
mobile: '',
password: '',
},
pnpre: '86',
pnpres: ['86', '01', '11', '26', '520'],
}
},
methods: {
changePre: function(e) {
this.pnpre = this.pnpres[e.detail.value];
},
signIn: function(userDTO) {
var _this = this;
uni.request({
url: this.apiServer + '/user/sign_in',
method: 'POST',
data: {
mobile: userDTO.mobile,
password: userDTO.password
},
header: {
'content-type': 'application/json'
},
success: res => {
// console.log(res.data.data);
if (res.data.code == 0) {
//将用户数据记录在本地存储
uni.setStorageSync('login_key', {
userId: res.data.data.id,
nickname: res.data.data.nickname,
avatar: res.data.data.avatar,
token: res.data.data.token,
login: true
});
uni.showToast({
title: '登录成功'
});
uni.navigateBack();
}
//登录失败，弹出各种原因
else {
uni.showModal({
title: '提示',
content: res.data.msg
});
}
}
});
},
}
}
</script>
<style scoped>
.item-border {
border-bottom: 1px solid #E0E0E0 !important;
margin-top: 20px;
}
.nav {
color: #00b26a;
margin-top: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
.grace-login-three {
display: flex;
justify-content: center;
flex-wrap: nowrap;
}
.grace-login-three view {
width: 50px;
height: 50px;
line-height: 50px;
font-size: 46px;
color: #00C777;
text-align: center;
margin: 8px 15px;
}
</style>
