阿里雲服務發送手機短信驗證碼-----（第二篇）
文章概述：springboot整合redis之發送手機驗證碼注冊登錄
注：搭建springboot項目可以參考這篇文章：
前言：短信驗證碼是通過發送驗證碼到手機的一種有效的驗證碼系統。主要用於驗證用戶手機的合法性及敏感操作的身份驗證。常見的使用場景有：登錄注冊、信息修改、異常登錄、找回密碼等操作。
用戶注冊發送驗證碼，然后核實對比用戶注冊成功采用redis方式將手機號碼+key放入redis緩存中設置驗證碼超時時間，比對用戶名和驗證碼采用數據庫存儲方式，注冊時拿取redis中驗證碼進行判讀驗證碼是否過期是否匹配。
1.pom.xml文件配置中添加以下依賴
<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>
2.application.yml添加如下配置
# 服務端口 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 # 連接超時時間（毫秒）
3.生成短信隨機驗證碼工具類
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)); } }
4.短信下發工具類
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; } }
5.reids工具類接口
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); }
6.reids實現類
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); } }
7.Controller攔截類
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; } }
8.靜態頁面index.html
<!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緩存中的驗證碼進行匹配該驗證碼是否有效、是否過期等問題驗證！
總語：
在此個人只是做了一個小例子，各大網友可自行擴展功能業務，學習是永無止境的！