SpringBoot 实现手机发送短信验证码

雨点打透心脏的1/2处 2022-10-12 12:15 220阅读 0赞

### 手机发送短信 ###

*  内容
 *   *  一、手机发送短信
     *   *  1. 前端界面代码
         *  2. UserInfoController 控制器
         *  3. application.properties 配置类文件
         *  4. 具体实现
 *  总结

# 内容 #

--------------------

## 一、手机发送短信 ##

### 1. 前端界面代码 ###

10秒内不能重复发送验证码

//短信发送
    $('.vcode-send').click(function () { 
    	if ($(this).hasClass('disabled')) { 
    
    	} else { 
            var self = $(this);
            var count = 10;
            self.addClass('disabled');
            self.text(count + '秒后重新获取');
            var timer = setInterval(function () { 
                count--;
                if (count > 0) { 
                    self.text(count + '秒后重新获取');
                } else { 
                    clearInterval(timer);
                    self.text('重新获取验证码');
                    self.removeClass("disabled");
                }
        	}, 1000);
    
            var phone = $("#phone").val();
            $.get(domainUrl + "/users/sendVerifyCode", { phone:phone}, function (data) { 
                console.log(data);
                if(data.code == 200){ 
                    popup("发送成功")
                } else { 
                    popup(data.msg);
                }
            });
        }
    });

### 2. UserInfoController 控制器 ###

package com.yy.springboot.controller;
    
    @RestController
    @RequestMapping("/users")
    public class UserInfoController { 
        @Autowired
        private IUserInfoService userInfoService;
    
        @GetMapping("/sendVerifyCode")
        public JsonResult<UserInfo> sendVerifyCode(String phone) { 
            return userInfoService.sendVerifyCode(phone);
        }
    }

### 3. application.properties 配置类文件 ###

找一个发短信的服务商，如去京东万象找一个短信服务商，根据它提供的接口来实现发送短信功能；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6dmFy_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20210704192755157.png]

转码结果：

sms.url=https://way.jd.com/kaixintong/kaixintong?mobile={0}&content=\u3010\u51ef\u4fe1\u901a\u3011\u60a8\u7684\u9a8c\u8bc1\u7801\u662f\uff1a{1}&appkey={2}
    sms.appkey=f3c4f8c6845efddac0420ebbfeae256f

### 4. 具体实现 ###

// URL 和 appkey 是上面配置文件中的URL和appkey
    @Value("${sms.url}")
    private String url;
    @Value("${sms.appkey}")
    private String appkey;
    
    @Override
    public JsonResult<UserInfo> sendVerifyCode(String phone) { 
        // 1、创建随机验证码(4位)
        String code = UUID.randomUUID().toString().replaceAll("-", "").substring(0, 4);
    
        // 2、发送短信
        // java 如何发起 Http 请求
        // 参数1：请求 url，参数2：响应值类型对象（将返回值转换成什么类型对象）
        // 参数3：路径上的参数值
        RestTemplate restTemplate = new RestTemplate();
        String message = restTemplate.getForObject(url, String.class, phone, code, appkey);
        System.out.println("message = " + message);
        if (!message.contains("Success")) { 
            throw new LogicException("短信发送失败");
        }
    
        // 4、缓存验证码-以 phone 为 key，code 为 value
        return userInfoRedisService.sendVerifyCode(phone, code);
    }

# 总结 #

上面就是手机发送短信验证码的总结了，代码仅供参考，欢迎讨论交流。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6dmFy_size_16_color_FFFFFF_t_70]: /images/20221005/bd1e00f287fb416a9bd939d508d3547c.png
[20210704192755157.png]: /images/20221005/f84a828e2d514c148720a9239a6336ca.png