美文网首页
用户注册模块

用户注册模块

作者: hangover_bfc9 | 来源:发表于2019-04-17 22:53 被阅读0次

    1.注册流程分析

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

    2.Redis准备

    GitHub下载

    • 解压后放入本地目录
    • 运行运行redis-server
    cd D:\tools\redis
    redis-server.exe redis.windows.conf
    
    image.png
    • 再开一个命令行窗口,进入redis目录,运行redis-cli.exe命令,进行一下基本操作
      set是设置键值对,keys是列出所有键,get是获取指定键的值,del是删除指定的键值


      image.png

    3. 阿里云短信服务

    短信服务
    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.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();
    }
    

    5.前端

    代码地址

    • 注册界面
    • 登录界面

    相关文章

      网友评论

          本文标题:用户注册模块

          本文链接:https://www.haomeiwen.com/subject/slfawqtx.html