前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >springboot整合redis发送手机验证码注册登录

springboot整合redis发送手机验证码注册登录

作者头像
崔笑颜
发布2020-06-08 17:03:13
7.2K0
发布2020-06-08 17:03:13
举报
文章被收录于专栏:小小码农一个。

短信验证码是通过发送验证码到手机的一种有效的验证码系统。主要用于验证用户手机的合法性及敏感操作的身份验证。常见的使用场景有:登录注册、信息修改、异常登录、找回密码等操作。 用户注册发送验证码,然后核实对比用户注册成功采用redis方式将手机号码+key放入redis缓存中设置验证码超时时间,比对用户名和验证码采用数据库存储方式,注册时拿取redis中验证码进行判读验证码是否过期是否匹配。

pom.xml文件配置中添加以下依赖

代码语言:javascript
复制
<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- 短信包-->
        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-java-sdk-core</artifactId>
            <version>4.0.6</version> <!-- 注:如提示报错,先升级基础包版,无法解决可联系技术支持 -->
        </dependency>
        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-java-sdk-dysmsapi</artifactId>
            <version>1.1.0</version>
        </dependency>

        <!--redis依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
        </dependency>
    </dependencies>

application.yml添加如下配置

代码语言:javascript
复制
# 服务端口
server:
  port: 8080

spring:
#reids配置
redis:
  key:
    prefix:
      authCode: "portal:authCode:"
      orderId: "portal:orderId:"
    expire:
      authCode: 60 # 验证码超期时间
  host: 127.0.0.1 # Redis服务器地址
  database: 1 # Redis数据库索引(默认为0)
  port: 6379 # Redis服务器连接端口
  password: # Redis服务器连接密码(默认为空)
  jedis:
    pool:
      max-active: 8 # 连接池最大连接数(使用负值表示没有限制)
      max-wait: -1ms # 连接池最大阻塞等待时间(使用负值表示没有限制)
      max-idle: 8 # 连接池中的最大空闲连接
      min-idle: 0 # 连接池中的最小空闲连接
  timeout: 3000ms # 连接超时时间(毫秒)

生成短信随机验证码工具类

代码语言:javascript
复制
import java.util.Random;

public class CodeUtil {

    //使用到Algerian字体,系统里没有的话需要安装字体,字体只显示大写,去掉了1,0,i,o几个容易混淆的字符
    public static final String VERIFY_CODES = "1234567890";

    /**
     * 使用系统默认字符源生成验证码
     * @param verifySize    验证码长度
     * @return
     */
    public static String generateVerifyCode(int verifySize){
        return generateVerifyCode(verifySize, VERIFY_CODES);
    }

    /**
     * 使用指定源生成验证码
     * @param verifySize    验证码长度
     * @param sources   验证码字符源
     * @return
     */
    public static String generateVerifyCode(int verifySize, String sources){
        if(sources == null || sources.length() == 0){
            sources = VERIFY_CODES;
        }
        int codesLen = sources.length();
        Random rand = new Random(System.currentTimeMillis());
        StringBuilder verifyCode = new StringBuilder(verifySize);
        for(int i = 0; i < verifySize; i++){
            verifyCode.append(sources.charAt(rand.nextInt(codesLen-1)));
        }
        return verifyCode.toString();
    }

    public static void main(String[] args) {
        System.out.println(generateVerifyCode(4));
    }
}

短信下发工具类

代码语言:javascript
复制
import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.IAcsClient;
import com.aliyuncs.dysmsapi.model.v20170525.SendSmsRequest;
import com.aliyuncs.dysmsapi.model.v20170525.SendSmsResponse;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.profile.DefaultProfile;
import com.aliyuncs.profile.IClientProfile;

public class SmsTool {

    //产品名称:云通信短信API产品,开发者无需替换
    static final String product = "Dysmsapi";
    //产品域名,开发者无需替换
    static final String domain = "dysmsapi.aliyuncs.com";
    // TODO 此处需要替换成开发者自己的AK(在阿里云访问控制台寻找)
    static final String accessKeyId = "自己的AccessKeyId";
    static final String accessKeySecret = "自己的accesskeySecret";

    public static SendSmsResponse sendSms(String phone , String code) throws ClientException {
        //可自助调整超时时间
        System.setProperty("sun.net.client.defaultConnectTimeout", "10000");
        System.setProperty("sun.net.client.defaultReadTimeout", "10000");
        //初始化acsClient,暂不支持region化
        IClientProfile profile = DefaultProfile.getProfile("cn-hangzhou", accessKeyId, accessKeySecret);
        DefaultProfile.addEndpoint("cn-hangzhou", "cn-hangzhou", product, domain);
        IAcsClient acsClient = new DefaultAcsClient(profile);

        //组装请求对象-具体描述见控制台-文档部分内容
        SendSmsRequest request = new SendSmsRequest();
        //必填:待发送手机号
        request.setPhoneNumbers(phone);
        //必填:短信签名-可在短信控制台中找到
        request.setSignName("替换成自己的短信签名");
        //必填:短信模板-可在短信控制台中找到
        request.setTemplateCode("替换成自己的短信模板编号");
        //可选:模板中的变量替换JSON串,如模板内容为"亲爱的${name},您的验证码为${code}"时,此处的值为
        request.setTemplateParam(code);

        //选填-上行短信扩展码(无特殊需求用户请忽略此字段)
        //request.setSmsUpExtendCode("90997");

        //可选:outId为提供给业务方扩展字段,最终在短信回执消息中将此值带回给调用者
        //request.setOutId("yourOutId");

        //hint 此处可能会抛出异常,注意catch
        SendSmsResponse sendSmsResponse = acsClient.getAcsResponse(request);
        return sendSmsResponse;
    }
}

reids工具类接口

代码语言:javascript
复制
public interface RedisService {

    /**
     * 存储数据
     */
    void set(String key, String value);

    /**
     * 获取数据
     */
    String get(String key);

    /**
     * 设置超期时间
     */
    boolean expire(String key, long expire);

    /**
     * 删除数据
     */
    void remove(String key);

    /**
     * 自增操作
     * @param delta 自增步长
     */
    Long increment(String key, long delta);

}

reids实现类

代码语言:javascript
复制
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.stereotype.Service;

import java.util.concurrent.TimeUnit;

@Service
public class RedisServiceImpl implements  RedisService{
    @Autowired
    private StringRedisTemplate stringRedisTemplate;

    @Override
    public void set(String key, String value) {
        stringRedisTemplate.opsForValue().set(key, value);
    }

    @Override
    public String get(String key) {
        return stringRedisTemplate.opsForValue().get(key);
    }

    @Override
    public boolean expire(String key, long expire) {
        return stringRedisTemplate.expire(key, expire, TimeUnit.SECONDS);
    }

    @Override
    public void remove(String key) {
        stringRedisTemplate.delete(key);
    }

    @Override
    public Long increment(String key, long delta) {
        return stringRedisTemplate.opsForValue().increment(key,delta);
    }

}

Controller拦截类

代码语言:javascript
复制
import com.aliyuncs.dysmsapi.model.v20170525.SendSmsResponse;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.utils.StringUtils;
import or.og.smsdemo.redisutil.RedisService;
import or.og.smsdemo.util.CodeUtil;
import or.og.smsdemo.util.SmsTool;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;
import java.util.HashMap;
import java.util.Map;

@Controller
@RequestMapping("/sms")
public class SmsCtrlController {


    /***
     * 注入redis模版
     */
    @Autowired
    private RedisService redisService;
    private  String tokenId="TOKEN-USER-";


    /**
     * 发送短信
     * @ResponseBody 返回json数据
     * @RequestMapping 拦截请求,指定请求类型:POST
     * @RequestBody 接受前台传入的json数据 接受类型为Map
     * @throws ClientException 抛出异常
     */
    @ResponseBody
    @RequestMapping(value = "/smsXxs", method = RequestMethod.POST, headers = "Accept=application/json")
    public Map<String,Object> smsXxs(@RequestBody Map<String,Object> requestMap,HttpServletRequest request) throws ClientException {
        Map<String,Object> map = new HashMap<>();
        String phone = requestMap.get("phoneNumber").toString();
        // 调用工具栏中生成验证码方法(指定长度的随机数)
        String code = CodeUtil.generateVerifyCode(6);
        //填充验证码
        String TemplateParam = "{\"code\":\""+code+"\"}";
        SendSmsResponse response = SmsTool.sendSms(phone,TemplateParam);//传入手机号码及短信模板中的验证码占位符

        map.put("verifyCode",code);
        map.put("phone",phone);
        request.getSession().setAttribute("CodePhone",map);
        if( response.getCode().equals("OK")) {
            map.put("isOk","OK");
            //验证码绑定手机号并存储到redis
            redisService.set(tokenId+phone,code);
            redisService.expire(tokenId+phone,620);//调用reids工具类中存储方法设置超时时间
        }
        return map;
    }


    /**
     * 注册验证
     * @ResponseBody 返回json数据
     * @RequestMapping 拦截请求,指定请求类型:POST
     * @RequestBody 接受前台传入的json数据 接受类型为Map
     * @throws ClientException 抛出异常
     */
    @ResponseBody
    @RequestMapping(value = "/validateNum", method = RequestMethod.POST, headers = "Accept=application/json")
    public Map<String, Object> validateNum(@RequestBody Map<String,Object> requestMap) throws ClientException {

        Map<String,Object> map = new HashMap<>();
        String phone = requestMap.get("phone").toString();//获取注册手机号码
        String verifyCode = requestMap.get("verifyCode").toString();//获取手机验证码

        //首先比对验证码是否失效
        String redisauthcode= redisService.get(tokenId+phone); //传入tonkenId返回redis中的value
        if(StringUtils.isEmpty(redisauthcode)){
            //如果未取到则过期验证码已失效
            map.put("ruselt",404);
        }else  if(!"".equals(redisauthcode)&&!verifyCode.equals(redisauthcode)){
            //验证码错误
            map.put("ruselt",500);
        }else{
            //用户注册成功
            map.put("ruselt",200);
        }
        return map;
    }


}

静态页面index.html

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>springboot整合redis之用户手机验证码注册登录</title>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
</head>
<body>
      <!--  <h3>springboot整合redis之用户手机验证码注册登录</h3>-->
      <div class="form-group has-feedback">
          <input type="tel" class="form-control" id="phone" placeholder="请输入手机号" maxlength=11>
          <span class="glyphicon glyphicon-earphone form-control-feedback"></span>
      </div>
      <div class="row">
          <div class="col-xs-6 pull_left">
              <div class="form-group">
                  <input class="form-control" id="msg_num" placeholder="请输入验证码">
              </div>
          </div>
          <div class="col-xs-6 pull_center">
              <div class="form-group">
                  <input type="button" class="btn btn-block btn-flat" id="verify_refresh" onclick="getMsgNum(this)" value="免费获取验证码">
              </div>
          </div>
      </div>
      <div class="col-xs-12 pull_center">
          <button type="button" class="btn btn-block btn-flat" onclick="validateNum()">验证</button>
      </div>


<!--js中的代码-->
<script>

    var messageData;
    var wait = 120; // 短信验证码120秒后才可获取下一个
    /**
     * 获取验证码
     */
    function getMsgNum(that) {
        var phoneNumber = $('#phone').val();
        setButtonStatus(that); // 设置按钮倒计时
        var obj = {
            phoneNumber: phoneNumber
        };
        $.ajax({
            url: 'sms/smsXxs', // 后台短信发送接口
            type: 'POST',
            dataType: 'json',
            contentType: "application/json",
            async: false, //false 同步
            data: JSON.stringify(obj),
            xhrFields: { //为true实现跨域访问
                withCredentials: true
            },
            success: function (result) {
                if(result.isOk="OK") {
                    alert("验证码发送成功");
                    messageData = result;
                }else {
                    alert("验证码发送失败")
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest.status);
                console.log(XMLHttpRequest.readyState);
                console.log(textStatus);
            }
        });
    }
    /**
     * 设置按钮状态
     */
    function setButtonStatus(that) {
        if (wait == 0) {
            that.removeAttribute("disabled");
            that.value="免费获取验证码";
            wait = 60;
        } else {
            that.setAttribute("disabled", true);
            that.value=wait+"秒后可以重新发送";
            wait--;
            setTimeout(function() {
                setButtonStatus(that)
            }, 1000)
        }
    }
    /**
     * 注册按钮
     */
    function validateNum() {
        var data = {
            // verifyCode: messageData.verifyCode,
            // phone: messageData.phone,
            verifyCode: $('#msg_num').val(),
            phone: $('#phone').val(),
        };

        $.ajax({
            url: 'sms/validateNum', // 后台短信发送接口
            type: 'POST',
            dataType: 'json',
            contentType: "application/json",
            async: false, //false 同步
            data: JSON.stringify(data),
            xhrFields: { //为true实现跨域访问
                withCredentials: true
            },
            success: function (result) {
                if(result.ruselt=="404") {
                    alert("过期验证码已失效");
                }else if(result.ruselt=="500"){
                    alert("验证码错误")
                }else{
                    alert("验证成功");
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest.status);
                console.log(XMLHttpRequest.readyState);
                console.log(textStatus);
            }
        });

    }



</script>
</body>
</html>

完成以上代码就可以运行项目了打开浏览器输入http://localhost:8080/,就可访问index.html文件,效果如下。。。。

手机页面

随后我们去的redis中查看是否将验证码保存到redis中,此时我们看见redis已经完成了缓存的实现并且设置了缓存超时时间。

输入上手机短信验证码传入进行一系列处理,后台获取前台传入的验证码同时获取redis缓存中的验证码进行匹配该验证码是否有效、是否过期等问题验证!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-04-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • pom.xml文件配置中添加以下依赖
  • application.yml添加如下配置
  • 生成短信随机验证码工具类
  • 短信下发工具类
  • reids工具类接口
  • reids实现类
  • Controller拦截类
  • 静态页面index.html
相关产品与服务
云数据库 Redis®
腾讯云数据库 Redis®(TencentDB for Redis®)是腾讯云打造的兼容 Redis 协议的缓存和存储服务。丰富的数据结构能帮助您完成不同类型的业务场景开发。支持主从热备,提供自动容灾切换、数据备份、故障迁移、实例监控、在线扩容、数据回档等全套的数据库服务。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档