注册流程分析

客户端先发送一个手机号码到后端获取验证码，此时“获取验证码”按钮是激活状态，“下一步”按钮是禁用状态
点击“获取验证码”按钮，该按钮60秒倒计时变为禁用状态，等待用户接收验证码并输入
后端根据这个手机号先到数据库查询该手机号是否已被注册，如果已经被注册就返回“该手机号已被注册”，不继续后续步骤
如果没被注册，后端为该手机号生成一个随机6位验证码存在Redis中（指定时限），然后将该验证码通过阿里云的短信服务接口发送给客户端
客户端收到短信，输入验证码，点击下一步
后端收到客户端发送的验证码，就将其和Redis中暂存的验证码比对，如果一致就放行，否则提示“验证码错误”
验证码正确，进入填写密码的页面，填写完毕提交到后端，加密存入数据库，注册成功，让用户选择去登录，还是回到首页

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

阿里云短信服务

开通短信服务
快速学习，测试一下短信发送功能，注意在你账户里充一点钱~~
API demo
API文档
demo程序，注意修改其中***的内容为自己的

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添加需要用到的常量

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>

6 简阅项目注册短信验证功能

6 简阅项目注册短信验证功能

前端

6 简阅项目 注册短信验证功能

前端

6 简阅项目注册短信验证功能