首先在阿里云上注册自己的账号和密码，然后短信模板和短信签名是比较重要的，需要申请成功之后才可以使用阿里云上给你提供的短信密钥。
在后台比较简单，阿里云上给你提供了完整的短信验证码生成的代码，复制到你的一个类里就可以直接使用，如下图所示：
package com.no1.smvc.controller;
//注意：这个地方包含的包我就不粘了哈
public class TelephoneController {
//产品名称:云通信短信API产品,开发者无需替换
static final String product="Dysmsapi";
//产品域名,开发者无需替换
static final String domain="dysmsapi.aliyuncs.com";
//TODO此处需要替换成开发者自己的AK(在阿里云访问控制台寻找)
static final StringaccessKeyId="";
static final String accessKeySecret="";
static final Integer NUM=6;
public void sendSms(Stringphone,Stringcode)throws ClientException {
System.out.println("进入telephoneController!#%$#^$%&^%*#%$@&^%");
//可自助调整超时时间
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);
IAcsClientacsClient=newDefaultAcsClient(profile);
//设置六位数验证码
// String code="";
// Random r=new Random(new Date().getTime());
// for(inti=0;i<code.Length; i++)
//code+=r.nextInt(10);
// }
//上面的是为了测试，生成的六位验证码，如果是去官网粘代码的话，应该是没有生成的验证码的，只有一个固定的123，静态的。后来又注释掉，是因为在前台使用了Ajax请求，带回了一个六位的验证码
//组装请求对象-具体描述见控制台-文档部分内容
SendSmsRequest request=new SendSmsRequest();
request.setMethod(MethodType.POST);
//必填:待发送手机号
request.setPhoneNumbers(phone);
//必填:短信签名-可在短信控制台中找到
request.setSignName("");//注意这个地方是你短信签名中的名称，就是你在申请短信签名的时候自己输入的
//必填:短信模板-可在短信控制台中找到
request.setTemplateCode("");
//可选:模板中的变量替换JSON串,如模板内容为"亲爱的${name},您的验证码为${code}"时,此处的值为
request.setTemplateParam("{\"name\":\"Tom\", \"code\":\""+code+"\"}");
//这个地方就是前台发送到后台的code参数，阿里云上这个地方的code是123.
//选填-上行短信扩展码(无特殊需求用户请忽略此字段)
//request.setSmsUpExtendCode("90997");
//可选:outId为提供给业务方扩展字段,最终在短信回执消息中将此值带回给调用者
request.setOutId("yourOutId");
//hint 此处可能会抛出异常，注意catch
SendSmsResponse sendSmsResponse=acsClient.getAcsResponse(request);
if(sendSmsResponse.getCode() !=null&&sendSmsResponse.getCode().equals("OK")) {
//请求成功
}
}
2.已经写好了短信验证码的生成之后，其实可以进行简单的短信验证了，可以自己写一个测试类，调用上面的那个类的方法，给它一个手机号，和你自己定义的验证码，是可以实现验证码发送到你手机上的。这里简单的验证我就不粘代码了
3.接着就是想在前台如何实现输入一个手机号，获取验证码并进行验证码验证的步骤，这些代码在阿里云上我没找到，不知道有没有验证的接口之类的，因为我想的是获取了这次验证码，将验证码保存在这次会话中进行验证。
<body>
请输入手机号：<input type="text" name="telephone" id="jbPhone"><br>
<span id="jbPhoneTip">span>
请输入验证码：<inputtype="text"id="SmsCheckCode"><inputtype="button"value="获取验证码"onclick="sendMessage()"id="btnSendCode">
<span id="SmsCheckCodeTip"></span>
<br>
</body>
上面是一个简单的输入框，然后输入手机号进行获取验证码是用ajax进行请求的，代码如下：
function SetRemainTime() {
if(curCount == 0) {
window.clearInterval(InterValObj);// 停止计时器
$("#btnSendCode").removeAttr("disabled");// 启用按钮
$("#btnSendCode").val("重新发送验证码");
code ="";// 清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
}else{
curCount--;
$("#btnSendCode").val("请在"+ curCount +"秒内输入验证码");
}
}//这是一个计时器的函数，必须存在，因为获取验证码的时候使用到了这个函数
var InterValObj;//timer变量，控制时间
var count = 120;//间隔函数，1秒执行
var curCount;//当前剩余秒数
function sendMessage() {
curCount = count;
var jbPhone = $("#jbPhone").val();
var jbPhoneTip = $("#jbPhoneTip").text();
var codeLength = 6;//验证码长度
var code ="";//验证码
alert(jbPhone);
// 产生验证码
for(vari = 0; i < codeLength; i++) {
code += parseInt(Math.random() * 9).toString();
}
$("#btnSendCode").attr("disabled","true");
$("#btnSendCode").val("请在"+ curCount +"秒内输入验证码");
InterValObj = window.setInterval(SetRemainTime, 1000);// 启动计时器，1秒执行一次
// 向后台发送处理数据
$.ajax({
type:"POST",// 用POST方式传输
dataType:"text",// 数据格式:JSON
url:"${pageContext.request.contextPath}/telephone/sendSms",// 目标地址
data:"jbPhone="+ jbPhone+"&code="+code ,
success:function(data){
data = parseInt(data, 10);
if(data == 1){
$("#jbPhoneTip").html("√ 短信验证码已发到您的手机,请查收");
}elseif(data == 0){
$("#jbPhoneTip").html("× 短信验证码发送失败，请重新发送");
}elseif(data == 2){
$("#jbPhoneTip").html("× 该手机号码今天发送验证码过多");
}}});}
再然后就是此次请求的url地址中的具体代码：
@Controller("TelephoneService")
@RequestMapping("telephone")
publicclassTelephoneService {
@RequestMapping(value={"sendSms"},method={RequestMethod.POST})
@ResponseBody
public String
telephoneSer(@RequestParam("jbPhone")Stringphone,Stringcode,HttpSessionsession){
TelephoneController telephone=new TelephoneController();
String result="1";
try{
telephone.sendSms(phone,code);
session.setAttribute("code",code);//将此次验证码放在session中进行保存，验证时还需要从会话中取出来
return result;
}catch(ClientExceptione) {
e.printStackTrace();
}
return "phone";
}
接下来是前台页面上的js脚本写的ajax发送后台进行验证码的验证，代码如下：
$(document).ready(function() {
$("#SmsCheckCode").blur(function() {
varSmsCheckCodeVal = $("#SmsCheckCode").val();
// 向后台发送处理数据
$.ajax({
url :"${pageContext.request.contextPath}/telephone/checkCode",
data : {SmsCheckCode : SmsCheckCodeVal},
type :"POST",
dataType :"text",
success :function(data){
data = parseInt(data, 10);
if(data == 1) {
$("#SmsCheckCodeTip").html("√ 短信验证码正确，请继续");
}else{
$("#SmsCheckCodeTip").html("× 短信验证码有误，请核实后重新填写");
}}});});});
在后台进行处理验证的代码如下：
@RequestMapping(value={"checkCode"},method={RequestMethod.POST})
@ResponseBody
public String telephoneSer(@RequestParam("SmsCheckCode")Stringcode,HttpSessionsession){
Stringresult="0";
System.out.println(code);
if(code.equals(session.getAttribute("code"))){
result="1";
}else{
result="0";
}
return result;
}
所有的流程基本上就完成了，因为是基于ssm框架写的，所以你在使用的时候需要搭框架，如果不搭框架也是可以的，不过相对来说较为麻烦。
网友评论