短信发送验证码实现验证

写在前面
你们好，我是小庄。很高兴能和你们一起学习短信发送功能。如果您对Java感兴趣的话可关注我的动态.
写博文是一种习惯，在这过程中能够梳理和巩固知识点。

实现思路：前台将手机号码发送到后台，后台设置随机数，并把随机数存到Session
然后把手机号和随机数作为参数传到第三方接口（短信接口）
提交时把前台输入的验证码与Session中的验证码进行匹配

一、前期准备

短信发送一条0.0045元，可以充一块钱作为测试

使用阿里云信息服务作为第三方接口

阿里云信息服务

添加签名
添加模块
设置密钥

具体配置可查看官方文档进行配置

二、代码实现

查看官方文档

<!-- 这个是springboot的pom.xml文件添加的 -->
<dependency><groupId>com.aliyun</groupId><artifactId>aliyun-java-sdk-core</artifactId><version>4.5.1</version>
</dependency>

第二种方式是使用官方提供的jar包，然后Java Build Path > Libraries > Add JARs

第二步：编写短信工具类

import com.aliyuncs.CommonRequest;
import com.aliyuncs.CommonResponse;
import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.IAcsClient;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.http.MethodType;
import com.aliyuncs.profile.DefaultProfile;public class SendSmsUtils {public void sendMsg(String phone,String code){DefaultProfile profile = DefaultProfile.getProfile("cn-hangzhou", "这里输入AccessKeyId对应内容", "这里输入AccessKeySecret对应内容");//这里是你的密钥IAcsClient client = new DefaultAcsClient(profile);CommonRequest request = new CommonRequest();request.setSysMethod(MethodType.POST);request.setSysDomain("dysmsapi.aliyuncs.com");request.setSysVersion("2017-05-25");request.setSysAction("SendSms");request.putQueryParameter("RegionId", "cn-hangzhou");request.putQueryParameter("PhoneNumbers", phone);request.putQueryParameter("SignName", "小庄商城");//填写你的签名request.putQueryParameter("TemplateCode", "SMS_198932151");request.putQueryParameter("TemplateParam","{'code':'"+code+"'}");try {CommonResponse response = client.getCommonResponse(request);System.out.println(response.getData());} catch (ClientException e) {e.printStackTrace();}}}

为了方便，我把验证码随机数生成也弄成一个工具类

public class CodeUtils {public String  setCode(){String code="";for (int i=0;i<6;i++){code+=(int)Math.floor(Math.random()*10);}return code;}
}

第三步：编写Controller类

import com.zwz.util.CodeUtils;
import com.zwz.util.SendSmsUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;import javax.servlet.http.HttpSession;@Controller
public class SendSmsController {//这里是点击验证时发送的短信功能@PostMapping("/tosend")public void sendSms(@RequestParam("phone") String phone,HttpSession session){//调用短信工具类SendSmsUtils sendSmsUtils=new SendSmsUtils();//调用验证码工具类CodeUtils codeUtils=new CodeUtils();String code=codeUtils.setCode();//将生成随机数验证码存到Session中session.setAttribute("code",code);//将电话和验证码作为参数传到短信工具类中sendSmsUtils.sendMsg(phone,code);}//这里是点击提交进行校验短信的功能@ResponseBody@PostMapping("/validate")public String validate(@RequestParam("code") String code, HttpSession session){//获取Session中的验证码String _code= (String) session.getAttribute("code");//前台传入验证码与Session进行匹配if(code.equals(_code)){return "验证成功！";}else {return "验证失败！";}}
}

第四步：前台代码
注意：我这里使用的是bootstrap框架和jquery Ajax，需要导入bootstrap的css文件、js文件和jquery的js文件
页面展示

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link rel="shortcut icon" href="img/favicon.ico"/><link rel="bookmark" href="img/favicon.ico"/><link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" ><script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script><script src="/js/bootstrap.min.js"></script><title>手机验证码</title><style type="text/css">h1 {text-align:center;font-size:35px;color: #8a6d3b;}</style>
</head>
<body><div class="isform" style="width: 30%; height: 350px; margin:auto;border: 2px solid #93dddd; margin-top: 10%;"><h1>手机验证</h1><form action="/validate" method="post" style="width: 90%; margin: auto"><div class="form-group" style="margin-bottom: 40px;"><label style="position: relative; margin-top: 30px; margin-bottom: 5px;">手机号码</label><input type="text" class="form-control" name="phone" id="phone"  placeholder="请输入手机号码"></div><div class="col-lg-12" style="margin-bottom: 40px;"><div class="col-lg-6"><input type="text" class="form-control" name="code" id="code" placeholder="请输入验证码"></div><div class="col-lg-6"><a href="javascript:void(0)" class="btn btn-info" id="getcode">点击获取验证码</a></div></div><div class="col-lg-12"><button class="btn btn-info pull-left" style="width: 100%;">提交</button></div></form>
</div><script>var obj=document.getElementById("getcode");var flag=60;obj.onclick=function () {time();var phone=$("#phone").val();$.ajax({type : 'post',async : false,url : '/tosend',data : {"phone" : phone,},success : function(data) {}});}//时间计时器function time() {flag--;obj.innerHTML=flag+"秒后重新获取验证码";if(flag==0){obj.innerHTML="获取验证码";flag=60;}else {setTimeout("time()",1000);}}
</script>
</body>
</html>