集成榛子云与Reids实现验证码登录

效果:60秒内校验手机验证码

集成榛子云与Reids实现验证码登录_第1张图片

步骤1:前端页面vue2+ElementU

步骤2:使用定时器禁用按钮

步骤3:使用榛子云发送短信

    /**
     * 获取验证码
     */
    @RequestMapping("sendCode")
    public R sendCode(@RequestParam("phone") String phone) {
        // 随机生成6位数验证码
        String code = RandomUtil.randomString("1234567890", 6);
        // 查询是否已存在验证码,如果未存在验证码则发送验证码
        if (!redisTemplate.hasKey("key-" + phone)) {
            // 获取榛子云客户端
            ZhenziSmsClient client = new ZhenziSmsClient(MyConfig.appUrl, MyConfig.appId, MyConfig.appSecret);
            // 构建参数集合
            HashMap map = new HashMap<>();
            // 接收到短信的手机号
            map.put("number", phone);
            // 榛子云短信模板"2"
            map.put("templateId", MyConfig.templateIdTwo);
            // 新建长度为"1"的数组
            String[] templateParams = new String[1];
            // 为第"1"个参数,赋值
            templateParams[0] = code;
            // 榛子云短信模板"2"参数
            map.put("templateParams", templateParams);
            try {
                // 发送短信
                String send = client.send(map);
            } catch (Exception e) {
                // 发送失败
                return R.failed("验证码发送失败");
            }
            // 将验证码存入redis,设置结束时间为60秒
            redisTemplate.opsForValue().set("key-" + phone, code, 60, TimeUnit.SECONDS);
            // 短信发送成功
            return R.successed("验证码发送成功");
        } else {
            // 获取剩余时间
            Long expireTime = redisTemplate.getExpire("key-" + phone);
            return R.failed("验证码已发送,请" + expireTime + "秒后再试");
        }
    }

注:MyConfig仅个人配置,若有需要请访问榛子云官方网站

步骤4:后端校验

    /**
     * 验证码登录
     */
    @RequestMapping("loginByCode")
    public R loginByCode(Auth user) {
        Object code = redisTemplate.opsForValue().get("key-" + user.getAuthPhone());// 通过手机号获取redis中验证码
        if (code == null) {
            // 如果验证码为null则提醒用户重新发送
            return R.failed("请重新发送验证码");
        }
        if (!StrUtil.equalsIgnoreCase(code.toString(), user.getAuthCode())) {
            // 如果验证码不为空但与redis存储的验证码不符则提示验证码错误
            return R.failed("验证码错误");
        }
        // 查询用户信息
        QueryWrapper wrapper = new QueryWrapper<>();
        // 通过"手机号"查询用户
        wrapper.eq("auth_phone", user.getAuthPhone());
        // 获取查询到的用户信息
        Auth one = authService.getOne(wrapper);
        // 判断用户是否存在
        if (one == null) {
            // 通过雪花算法为用户"盐"赋值
            user.setSalt(IdUtil.getSnowflake().nextIdStr());
            // 等待用户设置密码
            user.setAuthPwd(null);
            // 添加用户信息到数据库
            authService.save(user);
            one = user;
        }
        // 加密签名
        byte[] key = one.getSalt().getBytes();
        // 通过用户id获取Token
        String token = JWT.create().setPayload("id", user.getAuthId()).setKey(key).sign();
        return R.successed(token);
    }

附带:榛子云配置解析

    /**
     * 榛子云配置
     */
    public static final String appId = "******";
    public static final String appSecret = "********-****-****-****-************";
    public static final String appUrl = "https://sms_developer.zhenzikj.com";
    public static final String templateIdOne = "*****";// 验证码
    public static final String templateIdTwo = "*****";// 新年祝福

集成榛子云与Reids实现验证码登录_第2张图片

集成榛子云与Reids实现验证码登录_第3张图片

你可能感兴趣的:(java,vue.js)