1、基本的准备工作:
- 大致的流程为:
注册阿里账号、充值、完成短信签名和短信模板的申请(需要等一段时间审核通过)、创建access key
a)注册阿里账号、充值就不说了(注意的是自己玩的话认证的时候就选择个人用户)
b)完成短信签名和短信模板的申请
短信签名:就相当于平时我们看到的短信前面公司的名称一样
短信模板:就是收到的短信的具体内容的样式
短信签名:
短信模板选择:
c)创建access key
基本准备工作完成了,下面就开始写代码啦!
2、代码:
首先需要添加需要的SDK的jar包,我采用的是添加依赖的方式
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-core</artifactId>
<version>4.1.0</version>
</dependency>
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-dysmsapi</artifactId>
<version>1.1.0</version>
</dependency>
前台页面(由于本人这个页面代码有点多,就只贴了跟验证码有关的几个参数)
<div class="form-group has-success has-feedback">
<input type="text" value="" class="form-control" id="fphoneNumber" name="phoneNumber" placeholder="请输入手机号" style="margin-top:10px;">
<span class="glyphicon glyphicon-phone-alt form-control-feedback "></span>
</div>
<div>
<input type="text" id="fverifyCode" value="" placeholder="请输入验证码" name="verifyCode" class="form-control form-login-verifyCode">
<button type="button" class="form-login-verifyCode-button" onclick="getVerifyCode()">获取</button>
<br><br>
</div>
<a class="btn btn-lg btn-success btn-block" onclick="dologin()" > 登录</a>
前台js
/**
*点击获取验证码按钮后将手机号传到后台获取验证码
*/
function getVerifyCode() {
var phoneNumber = $("#fphoneNumber");
if($.trim(phoneNumber.val())==""){
alert("电话不能为空");
fphoneNumber.val("");
fphoneNumber.focus();
}else{
$.ajax({
url: "${APP_PATH}/sendSms.do",
async : true,
type: "POST",
dataType: "json",
data: {"phoneNumber":phoneNumber.val()},
success: function (data) {
if(data == 'fail'){
alert("发送验证码失败");
return ;
}else{
alert("验证码发送成功")
}
}
});
}
}
/**
*输入验证码后提交到后台是否输入合法
*/
function dologin() {
var fverifyCode = $("#fverifyCode");
if($.trim(fverifyCode.val())==""){
alert("验证码不能为空");
fverifyCode.val("");
fverifyCode.focus();
}else{
var data={
"verifyCode":fverifyCode.val()
};
$.ajax({
type: "POST",
url: "${APP_PATH}/doLogin.do",
contentType: "application/json",
dataType: "JSON",
data: JSON.stringify(data),
success: function (obj) {
console.log(obj);
if(obj.data=='登录成功'){
window.location.href="${APP_PATH}/main.htm";
}else{
alert(obj.data);
fverifyCode.val("");
}
},
error: function () {
layer.msg("登录失败!", {time:1000, icon:5, shift:6});
}
})
}
}
后台
打了****的地方是你需要自己填写的参数(具体值去上面配的阿里短信服务里面找)
/**
* 发送短信验证码
* @param 手机号
*/
@PostMapping("/sendSms")
@ResponseBody
public Object sendSms(HttpServletRequest httpServletRequest, String phoneNumber) {
try {
//生成6位验证码
String verifyCode = String.valueOf(new Random().nextInt(899999) + 100000);
//设置超时时间(不必修改)
System.setProperty("sun.net.client.defaultConnectTimeout", "10000");
//(不必修改)
System.setProperty("sun.net.client.defaultReadTimeout", "10000");
//初始化ascClient,("***"分别填写自己的AccessKey ID和Secret)
IClientProfile profile = DefaultProfile.getProfile("cn-hangzhou", "*****", "****");
//(不必修改)
DefaultProfile.addEndpoint("cn-hangzhou", "cn-hangzhou", "Dysmsapi", "dysmsapi.aliyuncs.com");
//(不必修改)
IAcsClient acsClient = new DefaultAcsClient(profile);
//组装请求对象(不必修改)
SendSmsRequest request = new SendSmsRequest();
//****处填写接收方的手机号码
request.setPhoneNumbers(phoneNumber);
//****填写已申请的短信签名
request.setSignName("****");
//****填写获得的短信模版CODE
request.setTemplateCode("*****");
//笔者的短信模版中有${code}, 因此此处对应填写验证码
request.setTemplateParam("{\"code\":\""+verifyCode+"\"}");
//不必修改
SendSmsResponse sendSmsResponse = acsClient.getAcsResponse(request);
//将生成的验证码和创建时间放到session中,后面验证从session中取
HttpSession session = httpServletRequest.getSession();
session.setAttribute("verifyCode",verifyCode);
session.setAttribute("verifyCodeCreateTime",System.currentTimeMillis());
// return sendSmsResponse;
return "success";
} catch (Exception e) {
e.printStackTrace();
return "fail";
}
}
//JsonResult 是我自己定义的一个返回结果的包装类,可以直接用map等代替
//loginUserVo里面是有一些其它的验证信息,如果没有的话就直接去掉就好了,然后把下面的User resultUser = userService.login(loginUserVo.getUser());注释掉
/**
* 验证
* @param
* @param
* @return
*/
@RequestMapping(value = "/doLogin",method = RequestMethod.POST,consumes = "application/json")
@ResponseBody
public Object doLogin(@RequestBody LoginUserVo loginUserVo,HttpSession session){
JsonResult jsonResult = new JsonResult();
try {
if(session.getAttribute("verifyCodeCreateTime") !=null && (System.currentTimeMillis()-Long.valueOf(String.valueOf(session.getAttribute("verifyCodeCreateTime"))) )> 1000 * 60 ){
session.removeAttribute("verifyCode");
session.removeAttribute("verifyCodeCreateTime");
jsonResult.setData("验证码过期");
}
else if (session.getAttribute("verifyCode") != null &&
loginUserVo.getVerifyCode().equals(session.getAttribute("verifyCode"))){
User resultUser = userService.login(loginUserVo.getUser());
session.setAttribute(Const.LOGIN_USER,resultUser);
session.removeAttribute("verifyCode");
session.removeAttribute("verifyCodeCreateTime");
jsonResult.setData("登录成功");
}else{
jsonResult.setData("验证码错误");
}
}catch(Exception e){
jsonResult.setData("登录失败");
e.printStackTrace();
}
return jsonResult;
}
初学者自己搞着玩的,如果有什么不对的欢迎指正哈。
参考文章:
https://blog.csdn.net/zuoliangzhu/article/details/81193269