最近做一个注册页面,**三道验证:**第一道图形验证码验证,这个简单不说了。第二道手机短信验证码验证,就是我们这篇文章要讲的。第三道身份证实名验证下篇文章讲。
我们这里使用腾讯云短信sdk,不要问问什么,问就是可以免费白嫖两百条短信,开通短信服务送一百条,签名完成送一百条。
什么申请啊,模板啊怎么弄啊,具体操作十分简单。不会也没关系因为腾讯云提供小白引导,按照引导就能完成签名,创建模板。
话不多说,上代码
SmsServlet.java
package web.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.json.JSONException;
import com.github.qcloudsms.SmsMultiSender;
import com.github.qcloudsms.SmsMultiSenderResult;
import com.github.qcloudsms.SmsSingleSender;
import com.github.qcloudsms.SmsSingleSenderResult;
import com.github.qcloudsms.httpclient.HTTPException;
@WebServlet("/smsServlet")
public class SmsServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
HttpSession session=request.getSession();
String s=(String) session.getAttribute("sms");
if(s==null) {
}else
session.removeAttribute("sms");
// 短信应用SDK AppID
int appid = 1400000000; // 1400开头
// 短信应用SDK AppKey
String appkey = "70ef777777777777777777777";
// 需要发送短信的手机号码
//使用request.getParameter("phonenumber")获取前台填写的手机号码
String[] phoneNumbers = {request.getParameter("phonenumber")};
// 短信模板ID,需要在短信应用中申请
// NOTE: 这里的模板ID`7839`只是一个示例,
// 真实的模板ID需要在短信控制台中申请
int templateId = 653541;
// 签名
// NOTE: 这里的签名"腾讯云"只是一个示例,
// 真实的签名需要在短信控制台中申请,另外
// 签名参数使用的是`签名内容`,而不是`签名ID`
String smsSign = "学前网";
// 指定模板ID单发短信
try {
//创建六位数字短信验证码
String sms=Integer.toString((int) ((Math.random()*9+1)*100000));
String[] params = {sms};
//把手机验证码储存到session中,方便后台验证
session.setAttribute("sms", sms);
/*String[] params = {"5678"};*/
SmsMultiSender msender = new SmsMultiSender(appid, appkey);
SmsMultiSenderResult result = msender.sendWithParam("86", phoneNumbers, templateId, params, smsSign, "", ""); // 签名参数未提供或者为空时,会使用默认签名发送短信
System.out.print(sms+"********"+result);
} catch (HTTPException e) {
// HTTP响应码错误
e.printStackTrace();
} catch (JSONException e) {
// json解析错误
e.printStackTrace();
} catch (IOException e) {
// 网络IO错误
e.printStackTrace();
}
response.getWriter().append("Served at: ").append(request.getContextPath());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
前台页面
<input type="text" id="phone"/>
<input type="button"" value="发送验证码" οnclick="sendVer()" >
<input type="text" maxlength="6" id="verifyNo" />
//使用jq的ajax发送手机验证码请求
<script>
function sendVer(){
//ajax请求短信验证码
$.ajax({
type: "POST",
url: "/stall/smsServlet",
data: {"phonenumber":$("#phone").val()},
success: function(msg){
/* alert( "Data Saved: " + msg ); */
}
});
}
</script>
发送完验证码这时候手机已经收到验证码了,在前台页面输入验证码,点击下一步按钮,进行校验。验证码正确进行后续操作,错误则弹窗警告。在哪里校验呢?,前台ajax请求并解析回调函数,真正的数据在**后台校验!后台校验!后台校验!**重要的事情说三遍,前台取值session直接校验是有问题的。校验的方式有很多种,我们这里就让后台把session传到前台回调函数里,在回调函数中校验
我们这里放入前台ajax请求后台校验分析回调函数代码
$.ajax({
type:"POST",
url:"/stall/backSmsServlet",
data:{},
success: function(msg){
if(msg==$("#verifyNo").val()){
$(".part2").hide();
$(".part3").show();
}else{alert("短信验证码错误!");}
}
});