短信获取注册

  1. 注册流程分析

  • 客户端先发送一个手机号码到后端获取验证码，此时“获取验证码”按钮是激活状态，“下一步”按钮是禁用状态

  • 点击“获取验证码”按钮，该按钮60秒倒计时变为禁用状态，等待用户接收验证码并输入

  • 后端根据这个手机号先到数据库查询该手机号是否已被注册，如果已经被注册就返回“该手机号已被注册”，不继续后续步骤

  • 如果没被注册，后端为该手机号生成一个随机6位验证码存在Redis中（指定时限），然后将该验证码通过阿里云的短信服务接口发送给客户端

  • 客户端收到短信，输入验证码，点击下一步

  • 后端收到客户端发送的验证码，就将其和Redis中暂存的验证码比对，如果一致就放行，否则提示“验证码错误”

  • 验证码正确，进入填写密码的页面，填写完毕提交到后端，加密存入数据库，注册成功，让用户选择去登录，还是回到首页

  1. Redis准备

  • 下载Redis，Redis是最流行的键值对存储数据库，官网只有Linux版本的Redis，自行下载后可以到阿里云ECS去安装，本地只能从GitHub下载，地址点这里
    基本操作如下
    解压后放到本地目录

    image

cd D:\tools\redis
redis-server.exe redis.windows.conf

image

再开一个命令行窗口，进入redis目录，运行redis-cli.exe命令，进行一下基本操作，set是设置键值对，keys是列出所有键，get是获取指定键的值，del是删除指定的键值

image
  1. 阿里云短信服务
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

后端
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添加需要用到的常量
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测试结果
前端
在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 class="green-btn small-btn right" @tap="getVerifyCode">获取验证码</button>
</view>
<input class="uni-input" type="number" placeholder="输入验证码" v-model="verifyCode" required="required" />
<button @tap="checkCode" class="green-btn">下一步</button>
</view>
</template>

<script>
export default {
data() {
return {
mobile: '',
verifyCode: ''
};
},
onLoad() {},
methods: {
getVerifyCode: function() {
var _this = this;
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);
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);
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;
}
.left {
flex: 1 1 70%;
}
.small-btn {
width: 100px;
height: 40px;
font-size: 14px;
}
</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></style>

登录页面
<template>
<view class="uni-flex uni-column container">
<input class="uni-input" type="number" placeholder="输入手机号" v-model="userDTO.mobile" required="required" />
<input class="uni-input" password type="text" placeholder="输入密码" v-model="userDTO.password" required="required" />
<button class="green-btn" @tap="signIn(userDTO)">登录</button>
<navigator url="../signup/signup" class="nav">注册新账号</navigator>
</view>
</template>

<script>
export default {
data() {
return {
userDTO: {
mobile: '',
password: ''
}
};
},
onLoad() {},
methods: {
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.switchTab({
url: '../my/my'
});
}
//登录失败，弹出各种原因
else {
uni.showModal({
title: '提示',
content: res.data.msg
});
}
}
});
}
}
};
</script>

<style scoped>
.nav {
color: #00b26a;
margin-top: 15px;
}
</style>

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,271评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,275评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,151评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,550评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,553评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,559评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,924评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,580评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,826评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,363评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,940评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2赞 342

推荐阅读更多精彩内容

  • 短信获取注册
    注册流程分析 客户端先发送一个手机号码到后端获取验证码，此时“获取验证码”按钮是激活状态，“下一步”按钮是禁用状态...
    六年的承诺阅读 496评论 0赞 1
  • 用户注册
    1.注册流程分析 客户端先发送一个手机号码到后端获取验证码，此时“获取验证码”按钮是激活状态，“下一步”按钮是禁用...
    dnasn阅读 614评论 0赞 0
  • 用户注册
    1.注册流程分析 客户端先发送一个手机号码到后端获取验证码，此时“获取验证码”按钮是激活状态，“下一步”按钮是禁用...
    明天也是奋斗鸭阅读 453评论 0赞 0
  • 雁飞过
    雁，是中华文明中最缠绵交集的一缕，是大多数身处异乡的华夏游子们心中最深切的一份寄托。 不比于鹤的仙风道骨，雁总是在...
    宽眼看世界阅读 162评论 0赞 8
  • 日子·48
    傍大款的最高境界，就是养一条狗，取名叫大款。 因为喜欢主人，也喜欢上她的狗。因为喜欢这条狗，所以写了一篇关于大款的...
    优雅绽放阅读 150评论 0赞 1